diff --git a/assets/webconfig/i18n/en.json b/assets/webconfig/i18n/en.json index 05cb222a..41b94ee5 100644 --- a/assets/webconfig/i18n/en.json +++ b/assets/webconfig/i18n/en.json @@ -839,6 +839,7 @@ "main_ledsim_btn_togglelednumber": "LED numbers", "main_ledsim_btn_toggleleds": "Show LEDs", "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_title": "LED Visualization", "main_menu_about_token": "About Hyperion", diff --git a/assets/webconfig/index.html b/assets/webconfig/index.html index 24b711a8..5e6ebdc3 100644 --- a/assets/webconfig/index.html +++ b/assets/webconfig/index.html @@ -2,359 +2,363 @@ - + - - - - - - - - + + + + + + + + - Hyperion - Web Configuration + Hyperion - Web Configuration - - + + - - + + - - - + + + - - - + + + - - + + - - + + - - + + - - - - - - - - + + + + + + + + - - + + - + - - + + - - + + - - + + - - - + + + - - + + - - + + - - - + + + - + -
-
+
+
- - + + + - -
- + +
+ -
-
+
+
-
- +
+ - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - - - + + + + - - - - + + + + - - + + - - - + + + diff --git a/assets/webconfig/js/ledsim.js b/assets/webconfig/js/ledsim.js index d34f501a..db5cabc0 100644 --- a/assets/webconfig/js/ledsim.js +++ b/assets/webconfig/js/ledsim.js @@ -1,279 +1,297 @@ -$(document).ready(function() { - var modalOpened = false; - var ledsim_width = 540; - var ledsim_height = 489; - var dialog; - var leds; - var lC = false; - var imageCanvasNodeCtx; - var ledsCanvasNodeCtx; - var canvas_height; - var canvas_width; - var twoDPaths = []; - var toggleLeds, toggleLedsNum = false; +$(document).ready(function () { + var modalOpened = false; + var ledsim_width = 540; + var ledsim_height = 489; + var dialog; + var leds; + var grabberConfig; + var lC = false; + var imageCanvasNodeCtx; + var ledsCanvasNodeCtx; + var canvas_height; + var canvas_width; + var twoDPaths = []; + var toggleLeds = false; + var toggleLedsNum = false; + var toggleSigDetectArea = false; - /// add prototype for simple canvas clear() method - CanvasRenderingContext2D.prototype.clear = function(){ - this.clearRect(0, 0, this.canvas.width, this.canvas.height) - }; + /// add prototype for simple canvas clear() method + CanvasRenderingContext2D.prototype.clear = function () { + this.clearRect(0, 0, this.canvas.width, this.canvas.height) + }; - function create2dPaths(){ - twoDPaths = []; - for(var idx=0; idx'; - leds_html += ''; + if (toggleLedsNum) { + //ledsCanvasNodeCtx.shadowOffsetX = 1; + //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"); - ledsCanvasNodeCtx = document.getElementById("leds_preview_canv").getContext("2d"); - create2dPaths(); - printLedsToCanvas(); - resetImage(); - } + function updateLedLayout() { + if (grabberConfig.signalDetection && storedAccess === 'expert') { + $("#sigDetectArea_toggle").show(); + } else { + $("#sigDetectArea_toggle").hide(); + } - // ------------------------------------------------------------------ - $('#leds_toggle_num').off().on("click", function() { - toggleLedsNum = !toggleLedsNum - toggleClass('#leds_toggle_num', "btn-danger", "btn-success"); - }); - // ------------------------------------------------------------------ + //calculate body size + canvas_height = $('#ledsim_dialog').outerHeight() - $('#ledsim_text').outerHeight() - $('[data-role=footer]').outerHeight() - $('[data-role=header]').outerHeight() - 40; + canvas_width = $('#ledsim_dialog').outerWidth() - 30; - $('#leds_toggle').off().on("click", function() { - toggleLeds = !toggleLeds - ledsCanvasNodeCtx.clear(); - toggleClass('#leds_toggle', "btn-success", "btn-danger"); - }); + $('#leds_canvas').html(""); + var leds_html = ''; + leds_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(); - } - }); + $('#leds_canvas').html(leds_html); - // ------------------------------------------------------------------ - $(window.hyperion).on("cmd-ledcolors-ledstream-update",function(event){ - if (!modalOpened) - { - requestLedColorsStop(); - } - else - { - printLedsToCanvas(event.response.result.leds) - } - }); + imageCanvasNodeCtx = document.getElementById("image_preview_canv").getContext("2d"); + ledsCanvasNodeCtx = document.getElementById("leds_preview_canv").getContext("2d"); + sigDetectAreaCanvasNodeCtx = document.getElementById("grab_preview_canv").getContext("2d"); + create2dPaths(); + printLedsToCanvas(); + resetImage(); - // ------------------------------------------------------------------ - $(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; - } - }); + // ------------------------------------------------------------------ + $('#leds_toggle_num').off().on("click", function () { + toggleLedsNum = !toggleLedsNum + toggleClass('#leds_toggle_num', "btn-danger", "btn-success"); + }); + // ------------------------------------------------------------------ - $("#btn_open_ledsim").off().on("click", function(event) { - dialog.open(); - }); + $('#leds_toggle').off().on("click", function () { + 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 - if ( obj.leds) { - 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 - updateLedLayout(); - } - }); + $('#sigDetectArea_toggle').off().on("click", function () { + toggleSigDetectArea = !toggleSigDetectArea + sigDetectAreaCanvasNodeCtx.clear(); + toggleClass('#sigDetectArea_toggle', "btn-success", "btn-danger"); + }); - function resetImage(){ - if (getStorage("darkMode", false) == "on") { - imageCanvasNodeCtx.clear(); - } else { - imageCanvasNodeCtx.fillStyle = "rgb(225,225,225)" - imageCanvasNodeCtx.fillRect(0, 0, canvas_width, canvas_height); - } + // ------------------------------------------------------------------ + $(window.hyperion).on("cmd-ledcolors-ledstream-update", function (event) { + if (!modalOpened) { + requestLedColorsStop(); + } + 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); + } });