mirror of
https://github.com/hyperion-project/hyperion.ng.git
synced 2023-10-10 13:36:59 +02:00
Display Signal detection area in preview
This commit is contained in:
Lord-Grey
parent
720cc5f01e
commit
c1ec8539d3
@ -839,6 +839,7 @@
|
|||||||
"main_ledsim_btn_togglelednumber": "LED numbers",
|
"main_ledsim_btn_togglelednumber": "LED numbers",
|
||||||
"main_ledsim_btn_toggleleds": "Show LEDs",
|
"main_ledsim_btn_toggleleds": "Show LEDs",
|
||||||
"main_ledsim_btn_togglelivevideo": "Live video",
|
"main_ledsim_btn_togglelivevideo": "Live video",
|
||||||
|
"main_ledsim_btn_togglesigdetect": "Signal detection area",
|
||||||
"main_ledsim_text": "Live visualization of led colors and optional the current video stream of your capture device.",
|
"main_ledsim_text": "Live visualization of led colors and optional the current video stream of your capture device.",
|
||||||
"main_ledsim_title": "LED Visualization",
|
"main_ledsim_title": "LED Visualization",
|
||||||
"main_menu_about_token": "About Hyperion",
|
"main_menu_about_token": "About Hyperion",
|
||||||
|
|||||||
@ -2,359 +2,363 @@
|
|||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<script>
|
<script>
|
||||||
if (/MSIE/.test(navigator.userAgent) || /Trident/.test(navigator.userAgent))
|
if (/MSIE/.test(navigator.userAgent) || /Trident/.test(navigator.userAgent)) {
|
||||||
{
|
window.location.pathname = '/content/ie_not_supported.html';
|
||||||
window.location.pathname = '/content/ie_not_supported.html';
|
}
|
||||||
}
|
</script>
|
||||||
</script>
|
|
||||||
|
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<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 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="description" content="Hyperion Web Configuration">
|
||||||
<meta name="msapplication-TileColor" content="#91989C">
|
<meta name="msapplication-TileColor" content="#91989C">
|
||||||
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
|
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
|
||||||
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-touch-icon.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">
|
<link rel="icon" type="image/png" href="/favicon.png" sizes="32x32">
|
||||||
|
|
||||||
<title data-i18n="general_webui_title">Hyperion - Web Configuration</title>
|
<title data-i18n="general_webui_title">Hyperion - Web Configuration</title>
|
||||||
|
|
||||||
<!-- jQuery -->
|
<!-- jQuery -->
|
||||||
<script src="js/lib/jquery.min.js"></script>
|
<script src="js/lib/jquery.min.js"></script>
|
||||||
|
|
||||||
<!-- SemVer -->
|
<!-- SemVer -->
|
||||||
<script src='js/lib/semver.js'></script>
|
<script src='js/lib/semver.js'></script>
|
||||||
|
|
||||||
<!-- md Stuff -->
|
<!-- md Stuff -->
|
||||||
<script src="js/lib/marked.min.js"></script>
|
<script src="js/lib/marked.min.js"></script>
|
||||||
<script type="text/javascript" src="js/lib/purify.min.js"></script>
|
<script type="text/javascript" src="js/lib/purify.min.js"></script>
|
||||||
|
|
||||||
<!-- Hyperion -->
|
<!-- Hyperion -->
|
||||||
<script src="js/hyperion.js"></script>
|
<script src="js/hyperion.js"></script>
|
||||||
<script src="js/ui_utils.js"></script>
|
<script src="js/ui_utils.js"></script>
|
||||||
|
|
||||||
<!-- Colorpicker -->
|
<!-- Colorpicker -->
|
||||||
<script src="js/lib/bootstrap-colorpicker.min.js"></script>
|
<script src="js/lib/bootstrap-colorpicker.min.js"></script>
|
||||||
|
|
||||||
<!-- BS Notfiy -->
|
<!-- BS Notfiy -->
|
||||||
<script src="js/lib/bootstrap-notify.min.js"></script>
|
<script src="js/lib/bootstrap-notify.min.js"></script>
|
||||||
|
|
||||||
<!-- JSONEditor -->
|
<!-- JSONEditor -->
|
||||||
<script src="js/lib/jsoneditor.js"></script>
|
<script src="js/lib/jsoneditor.js"></script>
|
||||||
|
|
||||||
<!--Language Support -->
|
<!--Language Support -->
|
||||||
<script src="js/lib/jquery.i18n/jquery.i18n.js"></script>
|
<script src="js/lib/jquery.i18n/jquery.i18n.js"></script>
|
||||||
<script src="js/lib/jquery.i18n/jquery.i18n.messagestore.js"></script>
|
<script src="js/lib/jquery.i18n/jquery.i18n.messagestore.js"></script>
|
||||||
<script src="js/lib/jquery.i18n/jquery.i18n.fallbacks.js"></script>
|
<script src="js/lib/jquery.i18n/jquery.i18n.fallbacks.js"></script>
|
||||||
<script src="js/lib/jquery.i18n/jquery.i18n.parser.js"></script>
|
<script src="js/lib/jquery.i18n/jquery.i18n.parser.js"></script>
|
||||||
<script src="js/lib/jquery.i18n/jquery.i18n.emitter.js"></script>
|
<script src="js/lib/jquery.i18n/jquery.i18n.emitter.js"></script>
|
||||||
<script src="js/lib/jquery.i18n/jquery.i18n.language.js"></script>
|
<script src="js/lib/jquery.i18n/jquery.i18n.language.js"></script>
|
||||||
<script src="js/lib/jquery.i18n/CLDRPluralRuleParser.js"></script>
|
<script src="js/lib/jquery.i18n/CLDRPluralRuleParser.js"></script>
|
||||||
|
|
||||||
<!-- Bootstrap Core CSS -->
|
<!-- Bootstrap Core CSS -->
|
||||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
|
||||||
<link href="css/bootstrap-colorpicker.min.css" rel="stylesheet">
|
<link href="css/bootstrap-colorpicker.min.css" rel="stylesheet">
|
||||||
|
|
||||||
<!-- BSToggle -->
|
<!-- BSToggle -->
|
||||||
<link href="css/bootstrap-toggle.min.css" rel="stylesheet">
|
<link href="css/bootstrap-toggle.min.css" rel="stylesheet">
|
||||||
|
|
||||||
<!-- BSSelect -->
|
<!-- BSSelect -->
|
||||||
<link href="css/bootstrap-select.min.css" rel="stylesheet">
|
<link href="css/bootstrap-select.min.css" rel="stylesheet">
|
||||||
|
|
||||||
<!-- MetisMenu CSS -->
|
<!-- MetisMenu CSS -->
|
||||||
<link href="css/metisMenu.css" rel="stylesheet">
|
<link href="css/metisMenu.css" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Custom CSS -->
|
<!-- Custom CSS -->
|
||||||
<link href="css/sb-admin-2.css" rel="stylesheet">
|
<link href="css/sb-admin-2.css" rel="stylesheet">
|
||||||
<link href="css/hyperion.css" rel="stylesheet">
|
<link href="css/hyperion.css" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Custom Fonts -->
|
<!-- Custom Fonts -->
|
||||||
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
|
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
<!-- Material Design Icons - https://github.com/Templarian/MaterialDesign-Webfont -->
|
<!-- Material Design Icons - https://github.com/Templarian/MaterialDesign-Webfont -->
|
||||||
<link href="css/materialdesignicons.min.css" media="all" rel="stylesheet" type="text/css">
|
<link href="css/materialdesignicons.min.css" media="all" rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
<!-- 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:// -->
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||||
<!--[if lt IE 9]>
|
<!--[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/html5shiv/3.7.0/html5shiv.js"></script>
|
||||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
||||||
<![endif]-->
|
<![endif]-->
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
<div style="color:red;margin: 40px 0;text-align:center">
|
<div style="color:red;margin: 40px 0;text-align:center">
|
||||||
<img src="img/hyperion/logo_positiv.png" alt="Redefine ambient light!">
|
<img src="img/hyperion/logo_positiv.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>
|
<h3>Hyperion Web Configuration requires Javascript. Please enable Javascript in your browser for this page in order to use it!</h3>
|
||||||
</div>
|
</div>
|
||||||
<style type="text/css"> #loading_overlay, #wrapper{ display: none } </style>
|
<style type="text/css">
|
||||||
</noscript>
|
#loading_overlay, #wrapper {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</noscript>
|
||||||
|
|
||||||
<div id="loading_overlay" class="overlay"></div>
|
<div id="loading_overlay" class="overlay"></div>
|
||||||
<div id="wrapper">
|
<div id="wrapper">
|
||||||
|
|
||||||
<!-- Navigation -->
|
<!-- Navigation -->
|
||||||
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0; min-height: 65px">
|
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0; min-height: 65px">
|
||||||
<div class="navbar-header">
|
<div class="navbar-header">
|
||||||
<button type="button" class="navbar-toggle closed" aria-controls="navbar">
|
<button type="button" class="navbar-toggle closed" aria-controls="navbar">
|
||||||
<span class="sr-only">Toggle navigation</span>
|
<span class="sr-only">Toggle navigation</span>
|
||||||
<span class="icon-bar top-bar"></span>
|
<span class="icon-bar top-bar"></span>
|
||||||
<span class="icon-bar middle-bar"></span>
|
<span class="icon-bar middle-bar"></span>
|
||||||
<span class="icon-bar bottom-bar"></span>
|
<span class="icon-bar bottom-bar"></span>
|
||||||
</button>
|
</button>
|
||||||
<a class="navbar-brand" href="https://www.hyperion-project.org" target="_blank"><img id="navbar_brand_logo" src="img/hyperion/logo_positiv.png" alt="Redefine ambient light!" height="60"></a>
|
<a class="navbar-brand" href="https://www.hyperion-project.org" target="_blank"><img id="navbar_brand_logo" src="img/hyperion/logo_positiv.png" alt="Redefine ambient light!" height="60"></a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /.navbar-header -->
|
<!-- /.navbar-header -->
|
||||||
|
|
||||||
<ul class="nav navbar-top-links navbar-right" id="top-navbar">
|
<ul class="nav navbar-top-links navbar-right" id="top-navbar">
|
||||||
<!-- Browser built in capture stream - streamer.js -->
|
<!-- Browser built in capture stream - streamer.js -->
|
||||||
<li class="dropdown" id="btn_streamer" style="display:none">
|
<li class="dropdown" id="btn_streamer" style="display:none">
|
||||||
<!-- Hidden helpers -->
|
<!-- Hidden helpers -->
|
||||||
<canvas style="display:none" id="streamcanvas"></canvas>
|
<canvas style="display:none" id="streamcanvas"></canvas>
|
||||||
<video style="display:none" id="streamvideo" autoplay></video>
|
<video style="display:none" id="streamvideo" autoplay></video>
|
||||||
<a>
|
<a>
|
||||||
<i id="btn_streamer_icon" class="fa fa-video-camera fa-fw"></i>
|
<i id="btn_streamer_icon" class="fa fa-video-camera fa-fw"></i>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="dropdown" id="btn_darkmode">
|
<li class="dropdown" id="btn_darkmode">
|
||||||
<a>
|
<a>
|
||||||
<i id="btn_darkmode_icon" class="fa fa-moon-o"></i>
|
<i id="btn_darkmode_icon" class="fa fa-moon-o"></i>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="dropdown" id="btn_open_ledsim">
|
<li class="dropdown" id="btn_open_ledsim">
|
||||||
<a>
|
<a>
|
||||||
<i class="fa fa-television fa-fw"></i>
|
<i class="fa fa-television fa-fw"></i>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<!-- /.dropdown -->
|
<!-- /.dropdown -->
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
<i class="fa fa-magic fa-fw"></i> <i class="fa fa-caret-down"></i>
|
<i class="fa fa-magic fa-fw"></i> <i class="fa fa-caret-down"></i>
|
||||||
</a>
|
</a>
|
||||||
<ul class="dropdown-menu dropdown-alerts">
|
<ul class="dropdown-menu dropdown-alerts">
|
||||||
<li id="btn_wizard_byteorder">
|
<li id="btn_wizard_byteorder">
|
||||||
<a>
|
<a>
|
||||||
<div>
|
<div>
|
||||||
<i class="fa fa-magic fa-fw"></i>
|
<i class="fa fa-magic fa-fw"></i>
|
||||||
<span data-i18n="wiz_rgb_title"></span>
|
<span data-i18n="wiz_rgb_title"></span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="divider"></li>
|
<li class="divider"></li>
|
||||||
<li id="btn_wizard_colorcalibration">
|
<li id="btn_wizard_colorcalibration">
|
||||||
<a>
|
<a>
|
||||||
<div>
|
<div>
|
||||||
<i class="fa fa-magic fa-fw"></i>
|
<i class="fa fa-magic fa-fw"></i>
|
||||||
<span data-i18n="wiz_cc_title"></span>
|
<span data-i18n="wiz_cc_title"></span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<!-- /.dropdown -->
|
<!-- /.dropdown -->
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
<i class="fa fa-wrench fa-fw"></i> <i class="fa fa-caret-down"></i>
|
<i class="fa fa-wrench fa-fw"></i> <i class="fa fa-caret-down"></i>
|
||||||
</a>
|
</a>
|
||||||
<ul class="dropdown-menu dropdown-alerts">
|
<ul class="dropdown-menu dropdown-alerts">
|
||||||
|
|
||||||
<!-- /.language selector -->
|
<!-- /.language selector -->
|
||||||
<li id="btn_setlang">
|
<li id="btn_setlang">
|
||||||
<a>
|
<a>
|
||||||
<div>
|
<div>
|
||||||
<i class="fa fa-globe"></i>
|
<i class="fa fa-globe"></i>
|
||||||
<select id="language-select" class="selectpicker" data-width="fit" data-style="btn-transparent" > </select>
|
<select id="language-select" class="selectpicker" data-width="fit" data-style="btn-transparent"> </select>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="divider"></li>
|
<li class="divider"></li>
|
||||||
<li id="btn_setaccess">
|
<li id="btn_setaccess">
|
||||||
<a>
|
<a>
|
||||||
<div>
|
<div>
|
||||||
<i class="fa fa-wrench fa-fw"></i>
|
<i class="fa fa-wrench fa-fw"></i>
|
||||||
<span data-i18n="InfoDialog_access_title"></span>
|
<span data-i18n="InfoDialog_access_title"></span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="divider"></li>
|
<li class="divider"></li>
|
||||||
<li id="btn_changePassword">
|
<li id="btn_changePassword">
|
||||||
<a>
|
<a>
|
||||||
<div>
|
<div>
|
||||||
<i class="fa fa-key fa-fw"></i>
|
<i class="fa fa-key fa-fw"></i>
|
||||||
<span data-i18n="InfoDialog_changePassword_title"></span>
|
<span data-i18n="InfoDialog_changePassword_title"></span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<!-- /.lock-ui -->
|
<!-- /.lock-ui -->
|
||||||
<li class="dropdown" id="btn_lock_ui" style="display:none">
|
<li class="dropdown" id="btn_lock_ui" style="display:none">
|
||||||
<a>
|
<a>
|
||||||
<i class="fa fa-lock fa-fw"></i>
|
<i class="fa fa-lock fa-fw"></i>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<!-- /.navbar-top-left -->
|
<!-- /.navbar-top-left -->
|
||||||
|
|
||||||
<div id="main-nav" class="navbar-default sidebar" role="navigation">
|
<div id="main-nav" class="navbar-default sidebar" role="navigation">
|
||||||
<div class="sidebar-nav navbar-collapse">
|
<div class="sidebar-nav navbar-collapse">
|
||||||
<ul class="nav" id="side-menu">
|
<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 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 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_general"><i class="fa fa-wrench fa-fw"></i><span data-i18n="main_menu_general_conf_token">General</span></a> </li>
|
||||||
<li>
|
<li>
|
||||||
<a class="inactive"><i class="fa fa-cog fa-fw"></i><span data-i18n="main_menu_configuration_token">LED-Instances</span><span class="fa arrow"></span></a>
|
<a class="inactive"><i class="fa fa-cog fa-fw"></i><span data-i18n="main_menu_configuration_token">LED-Instances</span><span class="fa arrow"></span></a>
|
||||||
<ul class="nav nav-second-level">
|
<ul class="nav nav-second-level">
|
||||||
<li> <a class="inactive mnava" id="MenuItemLeds" href="#conf_leds"><i class="mdi mdi-lightbulb-on fa-fw"></i><span data-i18n="main_menu_leds_conf_token">LED Hardware</span></a> </li>
|
<li> <a class="inactive mnava" id="MenuItemLeds" href="#conf_leds"><i class="mdi mdi-lightbulb-on fa-fw"></i><span data-i18n="main_menu_leds_conf_token">LED 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_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_colors"><i class="fa fa-photo fa-fw"></i><span data-i18n="main_menu_colors_conf_token">Image Processing</span></a> </li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li> <a class="inactive mnava" id="MenuItemGrabber" 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" id="MenuItemGrabber" 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" id="MenuItemNetwork" href="#conf_network"><i class="fa fa-sitemap fa-fw"></i><span data-i18n="main_menu_network_conf_token">Network</span></a> </li>
|
<li> <a class="inactive mnava" id="MenuItemNetwork" href="#conf_network"><i class="fa fa-sitemap fa-fw"></i><span data-i18n="main_menu_network_conf_token">Network</span></a> </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="#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="#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 mnava" href="#support"><i class="fa fa-info fa-fw"></i><span data-i18n="main_menu_support_token">Support</span></a> </li>
|
||||||
<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>
|
<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">
|
<ul class="nav nav-second-level">
|
||||||
<li> <a class="inactive mnava" id="MenuItemWeb" 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" id="MenuItemWeb" 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" id="MenuItemLogging" 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" id="MenuItemLogging" 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="#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>
|
<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>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<!-- /.sidebar-collapse -->
|
<!-- /.sidebar-collapse -->
|
||||||
</div>
|
</div>
|
||||||
<!-- /.navbar-static-side -->
|
<!-- /.navbar-static-side -->
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- Page Content -->
|
<!-- Page Content -->
|
||||||
<div id="page-wrapper" style="padding-top:10px; overflow: hidden;">
|
<div id="page-wrapper" style="padding-top:10px; overflow: hidden;">
|
||||||
<div id="hyperion_disabled_notify" style="display:none;padding:0 10px;margin:0">
|
<div id="hyperion_disabled_notify" style="display:none;padding:0 10px;margin:0">
|
||||||
<div class="bs-callout bs-callout-danger">
|
<div class="bs-callout bs-callout-danger">
|
||||||
<h4 data-i18n="dashboard_alert_message_disabled_t"></h4>
|
<h4 data-i18n="dashboard_alert_message_disabled_t"></h4>
|
||||||
<span data-i18n="dashboard_alert_message_disabled"></span>
|
<span data-i18n="dashboard_alert_message_disabled"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="page-content"></div>
|
<div id="page-content"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /#wrapper -->
|
<!-- /#wrapper -->
|
||||||
|
|
||||||
<div id="container_connection_lost" style="display:none"></div>
|
<div id="container_connection_lost" style="display:none"></div>
|
||||||
<div id="container_restart" style="display:none"></div>
|
<div id="container_restart" style="display:none"></div>
|
||||||
|
|
||||||
<!-- infoDialog -->
|
<!-- infoDialog -->
|
||||||
<div id="modal_dialog" class="modal fade" role="dialog" style="z-index:9999">
|
<div id="modal_dialog" class="modal fade" role="dialog" style="z-index:9999">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<center>
|
<center>
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div id="id_body" class="modal-body"></div>
|
<div id="id_body" class="modal-body"></div>
|
||||||
<div id="id_footer" class="modal-footer" style="text-align:center"></div>
|
<div id="id_footer" class="modal-footer" style="text-align:center"></div>
|
||||||
</div>
|
</div>
|
||||||
</center>
|
</center>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- renameDialog -->
|
<!-- renameDialog -->
|
||||||
<div id="modal_dialog_rename" class="modal fade" role="dialog" style="z-index:9999">
|
<div id="modal_dialog_rename" class="modal fade" role="dialog" style="z-index:9999">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<center>
|
<center>
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div id="id_body_rename" class="modal-body"></div>
|
<div id="id_body_rename" class="modal-body"></div>
|
||||||
<div id="id_footer_rename" class="modal-footer" style="text-align:center"></div>
|
<div id="id_footer_rename" class="modal-footer" style="text-align:center"></div>
|
||||||
</div>
|
</div>
|
||||||
</center>
|
</center>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- wizardDialog -->
|
<!-- wizardDialog -->
|
||||||
<div id="wizard_modal" class="modal fade" role="dialog">
|
<div id="wizard_modal" class="modal fade" role="dialog">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div id="wiz_header" class="modal-header"></div>
|
<div id="wiz_header" class="modal-header"></div>
|
||||||
<div id="wizp1">
|
<div id="wizp1">
|
||||||
<div class="modal-body" style="text-align:center">
|
<div class="modal-body" style="text-align:center">
|
||||||
<img id="wizard_logo" src="img/hyperion/logo_positiv.png" alt="Redefine ambient light!" style="margin-bottom:15px">
|
<img id="wizard_logo" src="img/hyperion/logo_positiv.png" alt="Redefine ambient light!" style="margin-bottom:15px">
|
||||||
<div id="wizp1_body" ></div>
|
<div id="wizp1_body"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="wizp1_footer" class="modal-footer" style="text-align:center"></div>
|
<div id="wizp1_footer" class="modal-footer" style="text-align:center"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="wizp2" style="display:none">
|
<div id="wizp2" style="display:none">
|
||||||
<center>
|
<center>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<img id="wizard_logo" src="img/hyperion/logo_positiv.png" alt="Redefine ambient light!" style="margin-bottom:15px">
|
<img id="wizard_logo" src="img/hyperion/logo_positiv.png" alt="Redefine ambient light!" style="margin-bottom:15px">
|
||||||
<div id="wizp2_body"></div>
|
<div id="wizp2_body"></div>
|
||||||
</div>
|
</div>
|
||||||
</center>
|
</center>
|
||||||
<div id="wizp2_footer" class="modal-footer" style="text-align:center"></div>
|
<div id="wizp2_footer" class="modal-footer" style="text-align:center"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="wizp3" style="display:none">
|
<div id="wizp3" style="display:none">
|
||||||
<center>
|
<center>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<img id="wizard_logo" src="img/hyperion/logo_positiv.png" alt="Redefine ambient light!" style="margin-bottom:15px">
|
<img id="wizard_logo" src="img/hyperion/logo_positiv.png" alt="Redefine ambient light!" style="margin-bottom:15px">
|
||||||
<div id="wizp3_body"></div>
|
<div id="wizp3_body"></div>
|
||||||
</div>
|
</div>
|
||||||
</center>
|
</center>
|
||||||
<div id="wizp3_footer" class="modal-footer" style="text-align:center"></div>
|
<div id="wizp3_footer" class="modal-footer" style="text-align:center"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ledsimDialog -->
|
<!-- ledsimDialog -->
|
||||||
<div id="ledsim_dialog" style="display:none; z-index:9998">
|
<div id="ledsim_dialog" style="display:none; z-index:9998">
|
||||||
<div data-role="body" style="padding:0px;">
|
<div data-role="body" style="padding:0px;">
|
||||||
<div id="ledsim_text"></div>
|
<div id="ledsim_text"></div>
|
||||||
<div id="leds_canvas"></div>
|
<div id="leds_canvas"></div>
|
||||||
</div>
|
</div>
|
||||||
<div data-role="footer" style="text-align:center">
|
<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-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_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>
|
<button type="button" class="btn btn-danger" id="sigDetectArea_toggle"><i class="fa fa-fw fa-info"></i><span data-i18n="main_ledsim_btn_togglesigdetect">signal detection area</span></button>
|
||||||
</div>
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Bootstrap Core JavaScript -->
|
<!-- Bootstrap Core JavaScript -->
|
||||||
<script src="js/lib/bootstrap.min.js"></script>
|
<script src="js/lib/bootstrap.min.js"></script>
|
||||||
|
|
||||||
<!-- BSToggle -->
|
<!-- BSToggle -->
|
||||||
<script src="js/lib/bootstrap-toggle.min.js"></script>
|
<script src="js/lib/bootstrap-toggle.min.js"></script>
|
||||||
|
|
||||||
<!-- Bootstrap Select JavaScript -->
|
<!-- Bootstrap Select JavaScript -->
|
||||||
<script src="js/lib/bootstrap-select.min.js"></script>
|
<script src="js/lib/bootstrap-select.min.js"></script>
|
||||||
|
|
||||||
<!-- Metis Menu Plugin JavaScript -->
|
<!-- Metis Menu Plugin JavaScript -->
|
||||||
<script src="js/lib/metisMenu.min.js"></script>
|
<script src="js/lib/metisMenu.min.js"></script>
|
||||||
|
|
||||||
<!-- Custom Theme JavaScript -->
|
<!-- Custom Theme JavaScript -->
|
||||||
<script src="js/lib/sb-admin-2.js"></script>
|
<script src="js/lib/sb-admin-2.js"></script>
|
||||||
|
|
||||||
<script src="js/content_index.js"></script>
|
<script src="js/content_index.js"></script>
|
||||||
<script src="js/settings.js"></script>
|
<script src="js/settings.js"></script>
|
||||||
<script src="js/streamer.js"></script>
|
<script src="js/streamer.js"></script>
|
||||||
<script src="js/wizard.js"></script>
|
<script src="js/wizard.js"></script>
|
||||||
|
|
||||||
<!--gijgo dialog-->
|
<!--gijgo dialog-->
|
||||||
<script src="js/lib/draggable.min.js"></script>
|
<script src="js/lib/draggable.min.js"></script>
|
||||||
<script src="js/lib/dialog.min.js"></script>
|
<script src="js/lib/dialog.min.js"></script>
|
||||||
<script src="js/ledsim.js"></script>
|
<script src="js/ledsim.js"></script>
|
||||||
|
|
||||||
<!--Client-side download-->
|
<!--Client-side download-->
|
||||||
<script src='js/lib/download.min.js'></script>
|
<script src='js/lib/download.min.js'></script>
|
||||||
|
|
||||||
<!--JsonAceEditor-->
|
<!--JsonAceEditor-->
|
||||||
<script src='js/lib/jsonaceeditor.min.js'></script>
|
<script src='js/lib/jsonaceeditor.min.js'></script>
|
||||||
<link href="css/jsonaceeditor.min.css" rel="stylesheet" type="text/css">
|
<link href="css/jsonaceeditor.min.css" rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,279 +1,297 @@
|
|||||||
$(document).ready(function() {
|
$(document).ready(function () {
|
||||||
var modalOpened = false;
|
var modalOpened = false;
|
||||||
var ledsim_width = 540;
|
var ledsim_width = 540;
|
||||||
var ledsim_height = 489;
|
var ledsim_height = 489;
|
||||||
var dialog;
|
var dialog;
|
||||||
var leds;
|
var leds;
|
||||||
var lC = false;
|
var grabberConfig;
|
||||||
var imageCanvasNodeCtx;
|
var lC = false;
|
||||||
var ledsCanvasNodeCtx;
|
var imageCanvasNodeCtx;
|
||||||
var canvas_height;
|
var ledsCanvasNodeCtx;
|
||||||
var canvas_width;
|
var canvas_height;
|
||||||
var twoDPaths = [];
|
var canvas_width;
|
||||||
var toggleLeds, toggleLedsNum = false;
|
var twoDPaths = [];
|
||||||
|
var toggleLeds = false;
|
||||||
|
var toggleLedsNum = false;
|
||||||
|
var toggleSigDetectArea = false;
|
||||||
|
|
||||||
/// add prototype for simple canvas clear() method
|
/// add prototype for simple canvas clear() method
|
||||||
CanvasRenderingContext2D.prototype.clear = function(){
|
CanvasRenderingContext2D.prototype.clear = function () {
|
||||||
this.clearRect(0, 0, this.canvas.width, this.canvas.height)
|
this.clearRect(0, 0, this.canvas.width, this.canvas.height)
|
||||||
};
|
};
|
||||||
|
|
||||||
function create2dPaths(){
|
function create2dPaths() {
|
||||||
twoDPaths = [];
|
twoDPaths = [];
|
||||||
for(var idx=0; idx<leds.length; idx++)
|
for (var idx = 0; idx < leds.length; idx++) {
|
||||||
{
|
var led = leds[idx];
|
||||||
var led = leds[idx];
|
twoDPaths.push(build2DPath(led.hmin * canvas_width, led.vmin * canvas_height, (led.hmax - led.hmin) * canvas_width, (led.vmax - led.vmin) * canvas_height, 5));
|
||||||
twoDPaths.push( build2DPath(led.hmin * canvas_width, led.vmin * canvas_height, (led.hmax-led.hmin) * canvas_width, (led.vmax-led.vmin) * canvas_height, 5) );
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Draws a rounded rectangle into a new Path2D object, returns the created path.
|
* Draws a rounded rectangle into a new Path2D object, returns the created path.
|
||||||
* If you omit the last three params, it will draw a rectangle
|
* If you omit the last three params, it will draw a rectangle
|
||||||
* outline with a 5 pixel border radius
|
* outline with a 5 pixel border radius
|
||||||
* @param {Number} x The top left x coordinate
|
* @param {Number} x The top left x coordinate
|
||||||
* @param {Number} y The top left y coordinate
|
* @param {Number} y The top left y coordinate
|
||||||
* @param {Number} width The width of the rectangle
|
* @param {Number} width The width of the rectangle
|
||||||
* @param {Number} height The height of the rectangle
|
* @param {Number} height The height of the rectangle
|
||||||
* @param {Number} [radius = 5] The corner radius; It can also be an object
|
* @param {Number} [radius = 5] The corner radius; It can also be an object
|
||||||
* to specify different radii for corners
|
* to specify different radii for corners
|
||||||
* @param {Number} [radius.tl = 0] Top left
|
* @param {Number} [radius.tl = 0] Top left
|
||||||
* @param {Number} [radius.tr = 0] Top right
|
* @param {Number} [radius.tr = 0] Top right
|
||||||
* @param {Number} [radius.br = 0] Bottom right
|
* @param {Number} [radius.br = 0] Bottom right
|
||||||
* @param {Number} [radius.bl = 0] Bottom left
|
* @param {Number} [radius.bl = 0] Bottom left
|
||||||
* @return {Path2D} The final path
|
* @return {Path2D} The final path
|
||||||
*/
|
*/
|
||||||
function build2DPath(x, y, width, height, radius) {
|
function build2DPath(x, y, width, height, radius) {
|
||||||
if (typeof radius == 'number') {
|
if (typeof radius == 'number') {
|
||||||
radius = {tl: radius, tr: radius, br: radius, bl: radius};
|
radius = { tl: radius, tr: radius, br: radius, bl: radius };
|
||||||
} else {
|
} else {
|
||||||
var defaultRadius = {tl: 0, tr: 0, br: 0, bl: 0};
|
var defaultRadius = { tl: 0, tr: 0, br: 0, bl: 0 };
|
||||||
for (var side in defaultRadius) {
|
for (var side in defaultRadius) {
|
||||||
radius[side] = radius[side] || defaultRadius[side];
|
radius[side] = radius[side] || defaultRadius[side];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var path = new Path2D();
|
var path = new Path2D();
|
||||||
|
|
||||||
path.moveTo(x + radius.tl, y);
|
path.moveTo(x + radius.tl, y);
|
||||||
path.lineTo(x + width - radius.tr, y);
|
path.lineTo(x + width - radius.tr, y);
|
||||||
path.quadraticCurveTo(x + width, y, x + width, y + radius.tr);
|
path.quadraticCurveTo(x + width, y, x + width, y + radius.tr);
|
||||||
path.lineTo(x + width, y + height - radius.br);
|
path.lineTo(x + width, y + height - radius.br);
|
||||||
path.quadraticCurveTo(x + width, y + height, x + width - radius.br, y + height);
|
path.quadraticCurveTo(x + width, y + height, x + width - radius.br, y + height);
|
||||||
path.lineTo(x + radius.bl, y + height);
|
path.lineTo(x + radius.bl, y + height);
|
||||||
path.quadraticCurveTo(x, y + height, x, y + height - radius.bl);
|
path.quadraticCurveTo(x, y + height, x, y + height - radius.bl);
|
||||||
path.lineTo(x, y + radius.tl);
|
path.lineTo(x, y + radius.tl);
|
||||||
path.quadraticCurveTo(x, y, x + radius.tl, y);
|
path.quadraticCurveTo(x, y, x + radius.tl, y);
|
||||||
|
|
||||||
return path;
|
return path;
|
||||||
}
|
}
|
||||||
|
|
||||||
$(window.hyperion).one("ready",function(){
|
$(window.hyperion).one("ready", function () {
|
||||||
leds = window.serverConfig.leds;
|
leds = window.serverConfig.leds;
|
||||||
|
grabberConfig = window.serverConfig.grabberV4L2;
|
||||||
|
|
||||||
if(window.showOptHelp)
|
if (window.showOptHelp) {
|
||||||
{
|
createHint('intro', $.i18n('main_ledsim_text'), 'ledsim_text');
|
||||||
createHint('intro', $.i18n('main_ledsim_text'), 'ledsim_text');
|
$('#ledsim_text').css({ 'margin': '10px 15px 0px 15px' });
|
||||||
$('#ledsim_text').css({'margin':'10px 15px 0px 15px'});
|
$('#ledsim_text .bs-callout').css("margin", "0px")
|
||||||
$('#ledsim_text .bs-callout').css("margin","0px")
|
}
|
||||||
}
|
|
||||||
|
|
||||||
if(getStorage('ledsim_width') != null)
|
if (getStorage('ledsim_width') != null) {
|
||||||
{
|
ledsim_width = getStorage('ledsim_width');
|
||||||
ledsim_width = getStorage('ledsim_width');
|
ledsim_height = getStorage('ledsim_height');
|
||||||
ledsim_height = getStorage('ledsim_height');
|
}
|
||||||
}
|
|
||||||
|
|
||||||
dialog = $("#ledsim_dialog").dialog({
|
dialog = $("#ledsim_dialog").dialog({
|
||||||
uiLibrary: 'bootstrap',
|
uiLibrary: 'bootstrap',
|
||||||
resizable: true,
|
resizable: true,
|
||||||
modal: false,
|
modal: false,
|
||||||
minWidth: 250,
|
minWidth: 250,
|
||||||
width: ledsim_width,
|
width: ledsim_width,
|
||||||
minHeight: 350,
|
minHeight: 350,
|
||||||
height: ledsim_height,
|
height: ledsim_height,
|
||||||
closeOnEscape: true,
|
closeOnEscape: true,
|
||||||
autoOpen: false,
|
autoOpen: false,
|
||||||
title: $.i18n('main_ledsim_title'),
|
title: $.i18n('main_ledsim_title'),
|
||||||
resize: function (e) {
|
resize: function (e) {
|
||||||
updateLedLayout();
|
updateLedLayout();
|
||||||
},
|
},
|
||||||
opened: function (e) {
|
opened: function (e) {
|
||||||
if(!lC)
|
if (!lC) {
|
||||||
{
|
updateLedLayout();
|
||||||
updateLedLayout();
|
lC = true;
|
||||||
lC = true;
|
}
|
||||||
}
|
modalOpened = true;
|
||||||
modalOpened = true;
|
requestLedColorsStart();
|
||||||
requestLedColorsStart();
|
|
||||||
|
|
||||||
setClassByBool('#leds_toggle_live_video', window.imageStreamActive, "btn-danger", "btn-success");
|
setClassByBool('#leds_toggle_live_video', window.imageStreamActive, "btn-danger", "btn-success");
|
||||||
if($('#leds_toggle_live_video').hasClass('btn-success'))
|
if ($('#leds_toggle_live_video').hasClass('btn-success'))
|
||||||
requestLedImageStart();
|
requestLedImageStart();
|
||||||
},
|
},
|
||||||
closed: function (e) {
|
closed: function (e) {
|
||||||
modalOpened = false;
|
modalOpened = false;
|
||||||
},
|
},
|
||||||
resizeStop: function (e) {
|
resizeStop: function (e) {
|
||||||
setStorage("ledsim_width", $("#ledsim_dialog").outerWidth());
|
setStorage("ledsim_width", $("#ledsim_dialog").outerWidth());
|
||||||
setStorage("ledsim_height", $("#ledsim_dialog").outerHeight());
|
setStorage("ledsim_height", $("#ledsim_dialog").outerHeight());
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
// apply new serverinfos
|
// apply new serverinfos
|
||||||
$(window.hyperion).on("cmd-config-getconfig",function(event){
|
$(window.hyperion).on("cmd-config-getconfig", function (event) {
|
||||||
leds = event.response.info.leds;
|
leds = event.response.info.leds;
|
||||||
updateLedLayout();
|
grabberConfig = event.response.info.grabberV4L2;
|
||||||
});
|
updateLedLayout();
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
|
||||||
function printLedsToCanvas(colors)
|
function printLedsToCanvas(colors) {
|
||||||
{
|
|
||||||
// toggle leds, do not print
|
|
||||||
if(toggleLeds)
|
|
||||||
return;
|
|
||||||
|
|
||||||
var useColor = false;
|
if (grabberConfig.signalDetection && toggleSigDetectArea && storedAccess === 'expert') {
|
||||||
var cPos = 0;
|
|
||||||
ledsCanvasNodeCtx.clear();
|
|
||||||
if(typeof colors != "undefined")
|
|
||||||
useColor = true;
|
|
||||||
|
|
||||||
// check size of ledcolors with leds length
|
sigDetectAreaCanvasNodeCtx.setLineDash([5, 5]);
|
||||||
if(colors && colors.length/3 < leds.length)
|
sigDetectAreaCanvasNodeCtx.stroke(build2DPath(grabberConfig.sDHOffsetMin * canvas_width,
|
||||||
return;
|
grabberConfig.sDVOffsetMin * canvas_height,
|
||||||
|
(grabberConfig.sDHOffsetMax - grabberConfig.sDHOffsetMin) * canvas_width,
|
||||||
|
(grabberConfig.sDVOffsetMax - grabberConfig.sDVOffsetMin) * canvas_height,
|
||||||
|
5));
|
||||||
|
}
|
||||||
|
|
||||||
for(var idx=0; idx<leds.length; idx++)
|
// toggle leds, do not print
|
||||||
{
|
if (toggleLeds)
|
||||||
var led = leds[idx];
|
return;
|
||||||
// can be used as fallback when Path2D is not available
|
|
||||||
//roundRect(ledsCanvasNodeCtx, led.hmin * canvas_width, led.vmin * canvas_height, (led.hmax-led.hmin) * canvas_width, (led.vmax-led.vmin) * canvas_height, 4, true, colors[idx])
|
|
||||||
//ledsCanvasNodeCtx.fillRect(led.hmin * canvas_width, led.vmin * canvas_height, (led.hmax-led.hmin) * canvas_width, (led.vmax-led.vmin) * canvas_height);
|
|
||||||
|
|
||||||
ledsCanvasNodeCtx.fillStyle = (useColor) ? "rgba("+colors[cPos]+","+colors[cPos+1]+","+colors[cPos+2]+",0.75)" : "hsla("+(idx*360/leds.length)+",100%,50%,0.75)";
|
var useColor = false;
|
||||||
ledsCanvasNodeCtx.fill(twoDPaths[idx]);
|
var cPos = 0;
|
||||||
ledsCanvasNodeCtx.stroke(twoDPaths[idx]);
|
ledsCanvasNodeCtx.clear();
|
||||||
|
if (typeof colors != "undefined")
|
||||||
|
useColor = true;
|
||||||
|
|
||||||
if(toggleLedsNum)
|
// check size of ledcolors with leds length
|
||||||
{
|
if (colors && colors.length / 3 < leds.length)
|
||||||
//ledsCanvasNodeCtx.shadowOffsetX = 1;
|
return;
|
||||||
//ledsCanvasNodeCtx.shadowOffsetY = 1;
|
|
||||||
//ledsCanvasNodeCtx.shadowColor = "black";
|
|
||||||
//ledsCanvasNodeCtx.shadowBlur = 4;
|
|
||||||
ledsCanvasNodeCtx.fillStyle = "white";
|
|
||||||
ledsCanvasNodeCtx.textAlign = "center";
|
|
||||||
ledsCanvasNodeCtx.fillText(((led.name) ? led.name : idx), (led.hmin * canvas_width) + ( ((led.hmax-led.hmin) * canvas_width) / 2), (led.vmin * canvas_height) + ( ((led.vmax-led.vmin) * canvas_height) / 2));
|
|
||||||
}
|
|
||||||
|
|
||||||
// increment colorsPosition
|
for (var idx = 0; idx < leds.length; idx++) {
|
||||||
cPos += 3;
|
var led = leds[idx];
|
||||||
}
|
// can be used as fallback when Path2D is not available
|
||||||
}
|
//roundRect(ledsCanvasNodeCtx, led.hmin * canvas_width, led.vmin * canvas_height, (led.hmax-led.hmin) * canvas_width, (led.vmax-led.vmin) * canvas_height, 4, true, colors[idx])
|
||||||
|
//ledsCanvasNodeCtx.fillRect(led.hmin * canvas_width, led.vmin * canvas_height, (led.hmax-led.hmin) * canvas_width, (led.vmax-led.vmin) * canvas_height);
|
||||||
|
|
||||||
function updateLedLayout()
|
ledsCanvasNodeCtx.fillStyle = (useColor) ? "rgba(" + colors[cPos] + "," + colors[cPos + 1] + "," + colors[cPos + 2] + ",0.75)" : "hsla(" + (idx * 360 / leds.length) + ",100%,50%,0.75)";
|
||||||
{
|
ledsCanvasNodeCtx.fill(twoDPaths[idx]);
|
||||||
//calculate body size
|
ledsCanvasNodeCtx.stroke(twoDPaths[idx]);
|
||||||
canvas_height = $('#ledsim_dialog').outerHeight()-$('#ledsim_text').outerHeight()-$('[data-role=footer]').outerHeight()-$('[data-role=header]').outerHeight()-40;
|
|
||||||
canvas_width = $('#ledsim_dialog').outerWidth()-30;
|
|
||||||
|
|
||||||
$('#leds_canvas').html("");
|
if (toggleLedsNum) {
|
||||||
var leds_html = '<canvas id="image_preview_canv" width="'+canvas_width+'" height="'+canvas_height+'" style="position: absolute; left: 0; top: 0; z-index: 99998;"></canvas>';
|
//ledsCanvasNodeCtx.shadowOffsetX = 1;
|
||||||
leds_html += '<canvas id="leds_preview_canv" width="'+canvas_width+'" height="'+canvas_height+'" style="position: absolute; left: 0; top: 0; z-index: 99999;"></canvas>';
|
//ledsCanvasNodeCtx.shadowOffsetY = 1;
|
||||||
|
//ledsCanvasNodeCtx.shadowColor = "black";
|
||||||
|
//ledsCanvasNodeCtx.shadowBlur = 4;
|
||||||
|
ledsCanvasNodeCtx.fillStyle = "white";
|
||||||
|
ledsCanvasNodeCtx.textAlign = "center";
|
||||||
|
ledsCanvasNodeCtx.fillText(((led.name) ? led.name : idx), (led.hmin * canvas_width) + (((led.hmax - led.hmin) * canvas_width) / 2), (led.vmin * canvas_height) + (((led.vmax - led.vmin) * canvas_height) / 2));
|
||||||
|
}
|
||||||
|
|
||||||
$('#leds_canvas').html(leds_html);
|
// increment colorsPosition
|
||||||
|
cPos += 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
imageCanvasNodeCtx = document.getElementById("image_preview_canv").getContext("2d");
|
function updateLedLayout() {
|
||||||
ledsCanvasNodeCtx = document.getElementById("leds_preview_canv").getContext("2d");
|
if (grabberConfig.signalDetection && storedAccess === 'expert') {
|
||||||
create2dPaths();
|
$("#sigDetectArea_toggle").show();
|
||||||
printLedsToCanvas();
|
} else {
|
||||||
resetImage();
|
$("#sigDetectArea_toggle").hide();
|
||||||
}
|
}
|
||||||
|
|
||||||
// ------------------------------------------------------------------
|
//calculate body size
|
||||||
$('#leds_toggle_num').off().on("click", function() {
|
canvas_height = $('#ledsim_dialog').outerHeight() - $('#ledsim_text').outerHeight() - $('[data-role=footer]').outerHeight() - $('[data-role=header]').outerHeight() - 40;
|
||||||
toggleLedsNum = !toggleLedsNum
|
canvas_width = $('#ledsim_dialog').outerWidth() - 30;
|
||||||
toggleClass('#leds_toggle_num', "btn-danger", "btn-success");
|
|
||||||
});
|
|
||||||
// ------------------------------------------------------------------
|
|
||||||
|
|
||||||
$('#leds_toggle').off().on("click", function() {
|
$('#leds_canvas').html("");
|
||||||
toggleLeds = !toggleLeds
|
var leds_html = '<canvas id="image_preview_canv" width="' + canvas_width + '" height="' + canvas_height + '" style="position: absolute; left: 0; top: 0; z-index: 99998;"></canvas>';
|
||||||
ledsCanvasNodeCtx.clear();
|
leds_html += '<canvas id="leds_preview_canv" width="' + canvas_width + '" height="' + canvas_height + '" style="position: absolute; left: 0; top: 0; z-index: 99999;"></canvas>';
|
||||||
toggleClass('#leds_toggle', "btn-success", "btn-danger");
|
leds_html += '<canvas id="grab_preview_canv" width="' + canvas_width + '" height="' + canvas_height + '" style="position: absolute; left: 0; top: 0; z-index: 99999;"></canvas>';
|
||||||
});
|
|
||||||
|
|
||||||
// ------------------------------------------------------------------
|
$('#leds_canvas').html(leds_html);
|
||||||
$('#leds_toggle_live_video').off().on("click", function() {
|
|
||||||
setClassByBool('#leds_toggle_live_video',window.imageStreamActive,"btn-success","btn-danger");
|
|
||||||
if ( window.imageStreamActive )
|
|
||||||
{
|
|
||||||
requestLedImageStop();
|
|
||||||
resetImage();
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
requestLedImageStart();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// ------------------------------------------------------------------
|
imageCanvasNodeCtx = document.getElementById("image_preview_canv").getContext("2d");
|
||||||
$(window.hyperion).on("cmd-ledcolors-ledstream-update",function(event){
|
ledsCanvasNodeCtx = document.getElementById("leds_preview_canv").getContext("2d");
|
||||||
if (!modalOpened)
|
sigDetectAreaCanvasNodeCtx = document.getElementById("grab_preview_canv").getContext("2d");
|
||||||
{
|
create2dPaths();
|
||||||
requestLedColorsStop();
|
printLedsToCanvas();
|
||||||
}
|
resetImage();
|
||||||
else
|
|
||||||
{
|
|
||||||
printLedsToCanvas(event.response.result.leds)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// ------------------------------------------------------------------
|
}
|
||||||
$(window.hyperion).on("cmd-ledcolors-imagestream-update",function(event){
|
|
||||||
setClassByBool('#leds_toggle_live_video', window.imageStreamActive, "btn-danger", "btn-success");
|
|
||||||
if (!modalOpened)
|
|
||||||
{
|
|
||||||
if ($('#leds_prev_toggle_live_video').length > 0)
|
|
||||||
return;
|
|
||||||
requestLedImageStop();
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
var imageData = (event.response.result.image);
|
|
||||||
|
|
||||||
var image = new Image();
|
// ------------------------------------------------------------------
|
||||||
image.onload = function() {
|
$('#leds_toggle_num').off().on("click", function () {
|
||||||
imageCanvasNodeCtx.drawImage(image, 0, 0, canvas_width, canvas_height);
|
toggleLedsNum = !toggleLedsNum
|
||||||
};
|
toggleClass('#leds_toggle_num', "btn-danger", "btn-success");
|
||||||
image.src = imageData;
|
});
|
||||||
}
|
// ------------------------------------------------------------------
|
||||||
});
|
|
||||||
|
|
||||||
$("#btn_open_ledsim").off().on("click", function(event) {
|
$('#leds_toggle').off().on("click", function () {
|
||||||
dialog.open();
|
toggleLeds = !toggleLeds
|
||||||
});
|
ledsCanvasNodeCtx.clear();
|
||||||
|
toggleClass('#leds_toggle', "btn-success", "btn-danger");
|
||||||
|
});
|
||||||
|
|
||||||
// ------------------------------------------------------------------
|
// ------------------------------------------------------------------
|
||||||
$(window.hyperion).on("cmd-settings-update",function(event){
|
$('#leds_toggle_live_video').off().on("click", function () {
|
||||||
|
setClassByBool('#leds_toggle_live_video', window.imageStreamActive, "btn-success", "btn-danger");
|
||||||
|
if (window.imageStreamActive) {
|
||||||
|
requestLedImageStop();
|
||||||
|
resetImage();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
requestLedImageStart();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
var obj = event.response.data
|
$('#sigDetectArea_toggle').off().on("click", function () {
|
||||||
if ( obj.leds) {
|
toggleSigDetectArea = !toggleSigDetectArea
|
||||||
console.log("ledsim: cmd-settings-update", event.response.data);
|
sigDetectAreaCanvasNodeCtx.clear();
|
||||||
Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) {
|
toggleClass('#sigDetectArea_toggle', "btn-success", "btn-danger");
|
||||||
window.serverInfo[val] = obj[val];
|
});
|
||||||
});
|
|
||||||
leds = window.serverConfig.leds
|
|
||||||
updateLedLayout();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function resetImage(){
|
// ------------------------------------------------------------------
|
||||||
if (getStorage("darkMode", false) == "on") {
|
$(window.hyperion).on("cmd-ledcolors-ledstream-update", function (event) {
|
||||||
imageCanvasNodeCtx.clear();
|
if (!modalOpened) {
|
||||||
} else {
|
requestLedColorsStop();
|
||||||
imageCanvasNodeCtx.fillStyle = "rgb(225,225,225)"
|
}
|
||||||
imageCanvasNodeCtx.fillRect(0, 0, canvas_width, canvas_height);
|
else {
|
||||||
}
|
printLedsToCanvas(event.response.result.leds)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
var image = document.getElementById('navbar_brand_logo');
|
// ------------------------------------------------------------------
|
||||||
imageCanvasNodeCtx.drawImage(image, canvas_width / 2 - image.width / 2, canvas_height / 2 - image.height / 2, image.width, image.height);
|
$(window.hyperion).on("cmd-ledcolors-imagestream-update", function (event) {
|
||||||
}
|
setClassByBool('#leds_toggle_live_video', window.imageStreamActive, "btn-danger", "btn-success");
|
||||||
|
if (!modalOpened) {
|
||||||
|
if ($('#leds_prev_toggle_live_video').length > 0)
|
||||||
|
return;
|
||||||
|
requestLedImageStop();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
var imageData = (event.response.result.image);
|
||||||
|
|
||||||
|
var image = new Image();
|
||||||
|
image.onload = function () {
|
||||||
|
imageCanvasNodeCtx.drawImage(image, 0, 0, canvas_width, canvas_height);
|
||||||
|
};
|
||||||
|
image.src = imageData;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#btn_open_ledsim").off().on("click", function (event) {
|
||||||
|
dialog.open();
|
||||||
|
});
|
||||||
|
|
||||||
|
// ------------------------------------------------------------------
|
||||||
|
$(window.hyperion).on("cmd-settings-update", function (event) {
|
||||||
|
|
||||||
|
var obj = event.response.data
|
||||||
|
if (obj.leds || obj.grabberV4L2) {
|
||||||
|
console.log("ledsim: cmd-settings-update", event.response.data);
|
||||||
|
Object.getOwnPropertyNames(obj).forEach(function (val, idx, array) {
|
||||||
|
window.serverInfo[val] = obj[val];
|
||||||
|
});
|
||||||
|
leds = window.serverConfig.leds;
|
||||||
|
grabberConfig = window.serverConfig.grabberV4L2;
|
||||||
|
updateLedLayout();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function resetImage() {
|
||||||
|
if (getStorage("darkMode", false) == "on") {
|
||||||
|
imageCanvasNodeCtx.clear();
|
||||||
|
} else {
|
||||||
|
imageCanvasNodeCtx.fillStyle = "rgb(225,225,225)"
|
||||||
|
imageCanvasNodeCtx.fillRect(0, 0, canvas_width, canvas_height);
|
||||||
|
}
|
||||||
|
|
||||||
|
var image = document.getElementById('navbar_brand_logo');
|
||||||
|
imageCanvasNodeCtx.drawImage(image, canvas_width / 2 - image.width / 2, canvas_height / 2 - image.height / 2, image.width, image.height);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user