frodovdr/hyperion.ng
1
0
Fork 0
mirror of https://github.com/hyperion-project/hyperion.ng.git synced 2023-10-10 13:36:59 +02:00
Code Issues Releases Wiki Activity

Display Signal detection area in preview

Browse Source
This commit is contained in:
Lord-Grey 2021-05-06 20:59:47 +02:00
parent 720cc5f01e
commit c1ec8539d3
3 changed files with 575 additions and 552 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/webconfig/i18n/en.json
View File

@ -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",

10
assets/webconfig/index.html
View File

@ -3,8 +3,7 @@
<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>
@ -90,7 +89,11 @@
<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">
#loading_overlay, #wrapper {
display: none
}
</style>
</noscript> </noscript>
<div id="loading_overlay" class="overlay"></div> <div id="loading_overlay" class="overlay"></div>
@ -320,6 +323,7 @@
<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="sigDetectArea_toggle"><i class="fa fa-fw fa-info"></i><span data-i18n="main_ledsim_btn_togglesigdetect">signal detection area</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="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> </div>

80
assets/webconfig/js/ledsim.js
View File

@ -4,13 +4,16 @@ $(document).ready(function() {
var ledsim_height = 489; var ledsim_height = 489;
var dialog; var dialog;
var leds; var leds;
var grabberConfig;
var lC = false; var lC = false;
var imageCanvasNodeCtx; var imageCanvasNodeCtx;
var ledsCanvasNodeCtx; var ledsCanvasNodeCtx;
var canvas_height; var canvas_height;
var canvas_width; var canvas_width;
var twoDPaths = []; var twoDPaths = [];
var toggleLeds, toggleLedsNum = false; 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 () {
@ -19,8 +22,7 @@ $(document).ready(function() {
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));
} }
@ -69,16 +71,15 @@ $(document).ready(function() {
$(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');
} }
@ -98,8 +99,7 @@ $(document).ready(function() {
updateLedLayout(); updateLedLayout();
}, },
opened: function (e) { opened: function (e) {
if(!lC) if (!lC) {
{
updateLedLayout(); updateLedLayout();
lC = true; lC = true;
} }
@ -121,12 +121,23 @@ $(document).ready(function() {
// 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;
grabberConfig = event.response.info.grabberV4L2;
updateLedLayout(); updateLedLayout();
}); });
}); });
function printLedsToCanvas(colors) function printLedsToCanvas(colors) {
{
if (grabberConfig.signalDetection && toggleSigDetectArea && storedAccess === 'expert') {
sigDetectAreaCanvasNodeCtx.setLineDash([5, 5]);
sigDetectAreaCanvasNodeCtx.stroke(build2DPath(grabberConfig.sDHOffsetMin * canvas_width,
grabberConfig.sDVOffsetMin * canvas_height,
(grabberConfig.sDHOffsetMax - grabberConfig.sDHOffsetMin) * canvas_width,
(grabberConfig.sDVOffsetMax - grabberConfig.sDVOffsetMin) * canvas_height,
5));
}
// toggle leds, do not print // toggle leds, do not print
if (toggleLeds) if (toggleLeds)
return; return;
@ -141,8 +152,7 @@ $(document).ready(function() {
if (colors && colors.length / 3 < leds.length) if (colors && colors.length / 3 < leds.length)
return; return;
for(var idx=0; idx<leds.length; idx++) for (var idx = 0; idx < leds.length; idx++) {
{
var led = leds[idx]; var led = leds[idx];
// can be used as fallback when Path2D is not available // 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]) //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])
@ -152,8 +162,7 @@ $(document).ready(function() {
ledsCanvasNodeCtx.fill(twoDPaths[idx]); ledsCanvasNodeCtx.fill(twoDPaths[idx]);
ledsCanvasNodeCtx.stroke(twoDPaths[idx]); ledsCanvasNodeCtx.stroke(twoDPaths[idx]);
if(toggleLedsNum) if (toggleLedsNum) {
{
//ledsCanvasNodeCtx.shadowOffsetX = 1; //ledsCanvasNodeCtx.shadowOffsetX = 1;
//ledsCanvasNodeCtx.shadowOffsetY = 1; //ledsCanvasNodeCtx.shadowOffsetY = 1;
//ledsCanvasNodeCtx.shadowColor = "black"; //ledsCanvasNodeCtx.shadowColor = "black";
@ -168,8 +177,13 @@ $(document).ready(function() {
} }
} }
function updateLedLayout() function updateLedLayout() {
{ if (grabberConfig.signalDetection && storedAccess === 'expert') {
$("#sigDetectArea_toggle").show();
} else {
$("#sigDetectArea_toggle").hide();
}
//calculate body size //calculate body size
canvas_height = $('#ledsim_dialog').outerHeight() - $('#ledsim_text').outerHeight() - $('[data-role=footer]').outerHeight() - $('[data-role=header]').outerHeight() - 40; canvas_height = $('#ledsim_dialog').outerHeight() - $('#ledsim_text').outerHeight() - $('[data-role=footer]').outerHeight() - $('[data-role=header]').outerHeight() - 40;
canvas_width = $('#ledsim_dialog').outerWidth() - 30; canvas_width = $('#ledsim_dialog').outerWidth() - 30;
@ -177,14 +191,17 @@ $(document).ready(function() {
$('#leds_canvas').html(""); $('#leds_canvas').html("");
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>'; 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>';
leds_html += '<canvas id="leds_preview_canv" width="' + canvas_width + '" height="' + canvas_height + '" style="position: absolute; left: 0; top: 0; z-index: 99999;"></canvas>'; leds_html += '<canvas id="leds_preview_canv" width="' + canvas_width + '" height="' + canvas_height + '" style="position: absolute; left: 0; top: 0; z-index: 99999;"></canvas>';
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_canvas').html(leds_html);
imageCanvasNodeCtx = document.getElementById("image_preview_canv").getContext("2d"); imageCanvasNodeCtx = document.getElementById("image_preview_canv").getContext("2d");
ledsCanvasNodeCtx = document.getElementById("leds_preview_canv").getContext("2d"); ledsCanvasNodeCtx = document.getElementById("leds_preview_canv").getContext("2d");
sigDetectAreaCanvasNodeCtx = document.getElementById("grab_preview_canv").getContext("2d");
create2dPaths(); create2dPaths();
printLedsToCanvas(); printLedsToCanvas();
resetImage(); resetImage();
} }
// ------------------------------------------------------------------ // ------------------------------------------------------------------
@ -203,25 +220,27 @@ $(document).ready(function() {
// ------------------------------------------------------------------ // ------------------------------------------------------------------
$('#leds_toggle_live_video').off().on("click", function () { $('#leds_toggle_live_video').off().on("click", function () {
setClassByBool('#leds_toggle_live_video', window.imageStreamActive, "btn-success", "btn-danger"); setClassByBool('#leds_toggle_live_video', window.imageStreamActive, "btn-success", "btn-danger");
if ( window.imageStreamActive ) if (window.imageStreamActive) {
{
requestLedImageStop(); requestLedImageStop();
resetImage(); resetImage();
} }
else else {
{
requestLedImageStart(); requestLedImageStart();
} }
}); });
$('#sigDetectArea_toggle').off().on("click", function () {
toggleSigDetectArea = !toggleSigDetectArea
sigDetectAreaCanvasNodeCtx.clear();
toggleClass('#sigDetectArea_toggle', "btn-success", "btn-danger");
});
// ------------------------------------------------------------------ // ------------------------------------------------------------------
$(window.hyperion).on("cmd-ledcolors-ledstream-update", function (event) { $(window.hyperion).on("cmd-ledcolors-ledstream-update", function (event) {
if (!modalOpened) if (!modalOpened) {
{
requestLedColorsStop(); requestLedColorsStop();
} }
else else {
{
printLedsToCanvas(event.response.result.leds) printLedsToCanvas(event.response.result.leds)
} }
}); });
@ -229,14 +248,12 @@ $(document).ready(function() {
// ------------------------------------------------------------------ // ------------------------------------------------------------------
$(window.hyperion).on("cmd-ledcolors-imagestream-update", function (event) { $(window.hyperion).on("cmd-ledcolors-imagestream-update", function (event) {
setClassByBool('#leds_toggle_live_video', window.imageStreamActive, "btn-danger", "btn-success"); setClassByBool('#leds_toggle_live_video', window.imageStreamActive, "btn-danger", "btn-success");
if (!modalOpened) if (!modalOpened) {
{
if ($('#leds_prev_toggle_live_video').length > 0) if ($('#leds_prev_toggle_live_video').length > 0)
return; return;
requestLedImageStop(); requestLedImageStop();
} }
else else {
{
var imageData = (event.response.result.image); var imageData = (event.response.result.image);
var image = new Image(); var image = new Image();
@ -255,12 +272,13 @@ $(document).ready(function() {
$(window.hyperion).on("cmd-settings-update", function (event) { $(window.hyperion).on("cmd-settings-update", function (event) {
var obj = event.response.data var obj = event.response.data
if ( obj.leds) { if (obj.leds || obj.grabberV4L2) {
console.log("ledsim: cmd-settings-update", event.response.data); console.log("ledsim: cmd-settings-update", event.response.data);
Object.getOwnPropertyNames(obj).forEach(function (val, idx, array) { Object.getOwnPropertyNames(obj).forEach(function (val, idx, array) {
window.serverInfo[val] = obj[val]; window.serverInfo[val] = obj[val];
}); });
leds = window.serverConfig.leds leds = window.serverConfig.leds;
grabberConfig = window.serverConfig.grabberV4L2;
updateLedLayout(); updateLedLayout();
} }
}); });