mirror of
https://github.com/hyperion-project/hyperion.ng.git
synced 2023-10-10 13:36:59 +02:00
09ee8f26ee
* Feat: Add image sender to webui This PR adds a new image sending feature to the webui and extends the api accordingly. In javascript the processing of images is horrible slow (without WASM), so the solution is at the API side with out-of-the-box power of Qt. - The image cmd accepts now a raw image that is encoded with base64. Supported are all image formats that qt supports (enough) - There is no real size limit. It will be automatically scaled down to max 2000px width or height according to aspect ratio - It's possible to scale down through a new "scale" property if developer wants that. - Test were successfull until 3MP pictues, 4k+ closes the websocket on browser side, so 2k is a decent value - Adds a new image streaming feature from browser (tabs/applications/complete desktop as target). This works just if used with HTTPS PR#612 AND with a recent version of Firefox/Chrome
341 lines
14 KiB
HTML
341 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<script>
|
|
if (/MSIE/.test(navigator.userAgent) || /Trident/.test(navigator.userAgent))
|
|
{
|
|
window.location.pathname = '/content/ie_not_supported.html';
|
|
}
|
|
</script>
|
|
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
|
|
<meta name="description" content="Hyperion Web Configuration">
|
|
<meta name="msapplication-TileColor" content="#91989C">
|
|
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
|
|
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" href="/favicon.png" sizes="32x32">
|
|
|
|
<title data-i18n="general_webui_title">Hyperion - Web Configuration</title>
|
|
|
|
<!-- jQuery -->
|
|
<script src="js/lib/jquery.min.js"></script>
|
|
|
|
<!-- Hyperion -->
|
|
<script src="js/hyperion.js"></script>
|
|
<script src="js/ui_utils.js"></script>
|
|
|
|
<!-- Colorpicker -->
|
|
<script src="js/lib/bootstrap-colorpicker.min.js"></script>
|
|
<link href="css/bootstrap-colorpicker.min.css" rel="stylesheet">
|
|
|
|
<!-- BS Notfiy -->
|
|
<script src="js/lib/bootstrap-notify.min.js"></script>
|
|
|
|
<!-- JSONEditor -->
|
|
<script src="js/lib/jsoneditor.js"></script>
|
|
|
|
<!--Language Support -->
|
|
<script src="js/lib/jquery.i18n.js"></script>
|
|
<script src="js/lib/jquery.i18n.messagestore.js"></script>
|
|
<script src="js/lib/jquery.i18n.fallbacks.js"></script>
|
|
<script src="js/lib/jquery.i18n.parser.js"></script>
|
|
<script src="js/lib/jquery.i18n.emitter.js"></script>
|
|
<script src="js/lib/jquery.i18n.language.js"></script>
|
|
|
|
<!-- Bootstrap Core CSS -->
|
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- MetisMenu CSS -->
|
|
<link href="css/metisMenu.css" rel="stylesheet">
|
|
|
|
<!-- Custom CSS -->
|
|
<link href="css/sb-admin-2.css" rel="stylesheet">
|
|
<link href="css/hyperion.css" rel="stylesheet">
|
|
|
|
<!-- Custom Fonts -->
|
|
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
|
|
|
|
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
|
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
|
|
<body>
|
|
<noscript>
|
|
<div style="color:red;margin: 40px 0;text-align:center">
|
|
<img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!">
|
|
<h3>Hyperion Web Configuration requires Javascript. Please enable Javascript in your browser for this page in order to use it!</h3>
|
|
</div>
|
|
<style type="text/css"> #loading_overlay, #wrapper{ display: none } </style>
|
|
</noscript>
|
|
|
|
<div id="loading_overlay" class="overlay"></div>
|
|
<div id="wrapper">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle closed" aria-controls="navbar" style="background-color:#d0d0d0;">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar top-bar"></span>
|
|
<span class="icon-bar middle-bar"></span>
|
|
<span class="icon-bar bottom-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand" href="https://www.hyperion-project.org?pk_campaign=WebUI&pk_kwd=mainlogo" target="_blank"><img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!" height="55"></a>
|
|
|
|
</div>
|
|
<!-- /.navbar-header -->
|
|
|
|
<ul class="nav navbar-top-links navbar-right">
|
|
<!-- Browser built in capture stream - streamer.js -->
|
|
<li class="dropdown" id="btn_streamer" style="display:none">
|
|
<!-- Hidden helpers -->
|
|
<canvas style="display:none" id="streamcanvas"></canvas>
|
|
<video style="display:none" id="streamvideo" autoplay></video>
|
|
<a>
|
|
<i id="btn_streamer_icon" class="fa fa-video-camera fa-fw"></i>
|
|
</a>
|
|
</li>
|
|
<!-- instance switcher -->
|
|
<li class="dropdown" id="btn_hypinstanceswitch" style="display:none">
|
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<i class="fa fa-exchange fa-fw"></i> <i class="fa fa-caret-down"></i>
|
|
</a>
|
|
<ul id="hyp_inst_listing" class="dropdown-menu dropdown-alerts">
|
|
</ul>
|
|
</li>
|
|
<!--
|
|
<li class="dropdown" id="btn_instanceswitch" style="display:none">
|
|
<a>
|
|
<i class="fa fa-exchange fa-fw"></i>
|
|
</a>
|
|
</li>
|
|
-->
|
|
<li class="dropdown" id="btn_open_ledsim">
|
|
<a>
|
|
<i class="fa fa-television fa-fw"></i>
|
|
</a>
|
|
</li>
|
|
<!-- /.dropdown -->
|
|
<li class="dropdown">
|
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<i class="fa fa-magic fa-fw"></i> <i class="fa fa-caret-down"></i>
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-alerts">
|
|
<li id="btn_wizard_byteorder">
|
|
<a>
|
|
<div>
|
|
<i class="fa fa-magic fa-fw"></i>
|
|
<span data-i18n="wiz_rgb_title"></span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="divider"></li>
|
|
<li id="btn_wizard_colorcalibration">
|
|
<a>
|
|
<div>
|
|
<i class="fa fa-magic fa-fw"></i>
|
|
<span data-i18n="wiz_cc_title"></span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<!-- /.dropdown -->
|
|
<li class="dropdown">
|
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<i class="fa fa-wrench fa-fw"></i> <i class="fa fa-caret-down"></i>
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-alerts">
|
|
<li id="btn_setlang">
|
|
<a>
|
|
<div>
|
|
<i class="fa fa-globe fa-fw"></i>
|
|
<span data-i18n="InfoDialog_lang_title"></span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="divider"></li>
|
|
<li id="btn_setaccess">
|
|
<a>
|
|
<div>
|
|
<i class="fa fa-key fa-fw"></i>
|
|
<span data-i18n="InfoDialog_access_title"></span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<!-- /.navbar-top-left -->
|
|
|
|
<div id="main-nav" class="navbar-default sidebar" role="navigation">
|
|
<div class="sidebar-nav navbar-collapse">
|
|
<ul class="nav" id="side-menu">
|
|
<li> <a class="inactive mnava" href="#dashboard"><i class="fa fa-dashboard fa-fw"></i><span data-i18n="main_menu_dashboard_token">Dashboard</span></a> </li>
|
|
<li>
|
|
<a class="inactive"><i class="fa fa-cog fa-fw"></i><span data-i18n="main_menu_configuration_token">Configuration</span><span class="fa arrow"></span></a>
|
|
<ul class="nav nav-second-level">
|
|
<li> <a class="inactive mnava" href="#conf_general"><i class="fa fa-wrench fa-fw"></i><span data-i18n="main_menu_general_conf_token">General</span></a> </li>
|
|
<li> <a class="inactive mnava" href="#conf_leds"><i class="fa fa-lightbulb-o fa-fw"></i><span data-i18n="main_menu_leds_conf_token">LED Hardware</span></a> </li>
|
|
<li> <a class="inactive mnava" href="#conf_grabber"><i class="fa fa-camera fa-fw"></i><span data-i18n="main_menu_grabber_conf_token">Capturing Hardware</span></a> </li>
|
|
<li> <a class="inactive mnava" href="#conf_effect"><i class="fa fa-spinner fa-fw"></i><span data-i18n="main_menu_effect_conf_token">Effects</span></a> </li>
|
|
<li> <a class="inactive mnava" href="#conf_colors"><i class="fa fa-photo fa-fw"></i><span data-i18n="main_menu_colors_conf_token">Image Processing</span></a> </li>
|
|
<li> <a class="inactive mnava" href="#conf_network"><i class="fa fa-sitemap fa-fw"></i><span data-i18n="main_menu_network_conf_token">Network</span></a> </li>
|
|
</ul>
|
|
</li>
|
|
<li> <a class="inactive mnava" href="#remote"><i class="fa fa-wifi fa-fw"></i><span data-i18n="main_menu_remotecontrol_token">Remote Control</span></a> </li>
|
|
<li> <a class="inactive mnava" href="#effects_configurator"><i class="fa fa-cogs fa-fw"></i><span data-i18n="main_menu_effectsconfigurator_token">Effects Configurator</span></a> </li>
|
|
<li> <a class="inactive mnava" href="#support"><i class="fa fa-info fa-fw"></i><span data-i18n="main_menu_support_token">Support</span></a> </li>
|
|
<li>
|
|
<a class="inactive"><i class="fa fa-industry fa-fw"></i><span data-i18n="main_menu_system_token">System</span><span class="fa arrow"></span></a>
|
|
<ul class="nav nav-second-level">
|
|
<li> <a class="inactive mnava" href="#conf_webconfig" id="load_webconfig"><i class="fa fa-wrench fa-fw"></i><span data-i18n="main_menu_webconfig_token">Webconfiguration</span></a> </li>
|
|
<li> <a class="inactive mnava" href="#conf_logging"><i class="fa fa-reorder fa-fw"></i><span data-i18n="main_menu_logging_token">Log</span></a> </li>
|
|
<li> <a class="inactive mnava" href="#update"><i class="fa fa-download fa-fw"></i><span data-i18n="main_menu_update_token">Update</span></a> </li>
|
|
<li> <a class="inactive mnava" href="#about"><i class="fa fa-info-circle fa-fw"></i><span data-i18n="main_menu_about_token">About</span></a> </li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- /.sidebar-collapse -->
|
|
</div>
|
|
<!-- /.navbar-static-side -->
|
|
</nav>
|
|
|
|
<!-- Page Content -->
|
|
<div id="page-wrapper" style="padding-top:10px; overflow: hidden;">
|
|
<div id="hyperion_config_write_success_notify" style="display:none;padding:0 10px;margin:0">
|
|
<div class="bs-callout bs-callout-success">
|
|
<h4 data-i18n="dashboard_alert_message_confsave_success_t"></h4>
|
|
<span data-i18n="dashboard_alert_message_confsave_success"></span>
|
|
</div>
|
|
</div>
|
|
<div id="hyperion_global_setting_notify" style="display:none;padding:0 10px;margin:0">
|
|
<div class="bs-callout bs-callout-warning">
|
|
<h4 data-i18n="dashboard_message_global_setting_t"></h4>
|
|
<span data-i18n="dashboard_message_global_setting"></span>
|
|
</div>
|
|
</div>
|
|
<div id="hyperion_disabled_notify" style="display:none;padding:0 10px;margin:0">
|
|
<div class="bs-callout bs-callout-danger">
|
|
<h4 data-i18n="dashboard_alert_message_disabled_t"></h4>
|
|
<span data-i18n="dashboard_alert_message_disabled"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="page-content"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- /#wrapper -->
|
|
|
|
<div id="container_connection_lost" style="display:none"></div>
|
|
<div id="container_restart" style="display:none"></div>
|
|
|
|
<!-- infoDialog -->
|
|
<div id="modal_dialog" class="modal fade" role="dialog" style="z-index:9999">
|
|
<div class="modal-dialog">
|
|
<center>
|
|
<div class="modal-content">
|
|
<div id="id_body" class="modal-body"></div>
|
|
<div id="id_footer" class="modal-footer" style="text-align:center"></div>
|
|
</div>
|
|
</center>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- renameDialog -->
|
|
<div id="modal_dialog_rename" class="modal fade" role="dialog" style="z-index:9999">
|
|
<div class="modal-dialog">
|
|
<center>
|
|
<div class="modal-content">
|
|
<div id="id_body_rename" class="modal-body"></div>
|
|
<div id="id_footer_rename" class="modal-footer" style="text-align:center"></div>
|
|
</div>
|
|
</center>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- wizardDialog -->
|
|
<div id="wizard_modal" class="modal fade" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div id="wiz_header" class="modal-header"></div>
|
|
<div id="wizp1">
|
|
<div class="modal-body" style="text-align:center">
|
|
<img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!" style="margin-bottom:15px">
|
|
<div id="wizp1_body" ></div>
|
|
</div>
|
|
<div id="wizp1_footer" class="modal-footer" style="text-align:center"></div>
|
|
</div>
|
|
<div id="wizp2" style="display:none">
|
|
<center>
|
|
<div class="modal-body">
|
|
<img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!" style="margin-bottom:15px">
|
|
<div id="wizp2_body"></div>
|
|
</div>
|
|
</center>
|
|
<div id="wizp2_footer" class="modal-footer" style="text-align:center"></div>
|
|
</div>
|
|
<div id="wizp3" style="display:none">
|
|
<center>
|
|
<div class="modal-body">
|
|
<img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!" style="margin-bottom:15px">
|
|
<div id="wizp3_body"></div>
|
|
</div>
|
|
</center>
|
|
<div id="wizp3_footer" class="modal-footer" style="text-align:center"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ledsimDialog -->
|
|
<div id="ledsim_dialog" style="display:none; z-index:9998">
|
|
<div data-role="body" style="padding:0px;">
|
|
<div id="ledsim_text"></div>
|
|
<div id="leds_canvas"></div>
|
|
</div>
|
|
<div data-role="footer" style="text-align:center">
|
|
<button type="button" class="btn btn-success" id="leds_toggle"><i class="fa fa-fw fa-lightbulb-o"></i><span data-i18n="main_ledsim_btn_toggleleds">leds</span></button>
|
|
<button type="button" class="btn btn-danger" id="leds_toggle_num"> <i class="fa fa-fw fa-info"></i><span data-i18n="main_ledsim_btn_togglelednumber">led numbers</span></button>
|
|
<button type="button" class="btn btn-danger" id="leds_toggle_live_video"><i class="fa fa-fw fa-television"></i><span data-i18n="main_ledsim_btn_togglelivevideo">live video</span></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap Core JavaScript -->
|
|
<script src="js/lib/bootstrap.min.js"></script>
|
|
|
|
<!-- Metis Menu Plugin JavaScript -->
|
|
<script src="js/lib/metisMenu.min.js"></script>
|
|
|
|
<!-- Custom Theme JavaScript -->
|
|
<script src="js/lib/sb-admin-2.js"></script>
|
|
|
|
<script src="js/content_index.js"></script>
|
|
<script src="js/settings.js"></script>
|
|
<script src="js/streamer.js"></script>
|
|
<script src="js/wizard.js"></script>
|
|
|
|
<!--gijgo dialog-->
|
|
<script src="js/lib/draggable.min.js"></script>
|
|
<script src="js/lib/dialog.min.js"></script>
|
|
<script src="js/ledsim.js"></script>
|
|
|
|
<!--Client-side download-->
|
|
<script src='js/lib/download.min.js'></script>
|
|
|
|
<!--JsonAceEditor-->
|
|
<script src='js/lib/jsonaceeditor.min.js'></script>
|
|
<link href="css/jsonaceeditor.min.css" rel="stylesheet" type="text/css">
|
|
|
|
</body>
|
|
</html>
|