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

14
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>
@ -167,7 +170,7 @@
<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>
@ -285,7 +288,7 @@
<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>
@ -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>

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

@ -1,28 +1,30 @@
$(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 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 () {
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));
} }
} }
@ -44,9 +46,9 @@ $(document).ready(function() {
*/ */
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];
} }
@ -67,18 +69,17 @@ $(document).ready(function() {
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');
} }
@ -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;
} }
@ -107,7 +107,7 @@ $(document).ready(function() {
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) {
@ -119,48 +119,57 @@ $(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;
var useColor = false; var useColor = false;
var cPos = 0; var cPos = 0;
ledsCanvasNodeCtx.clear(); ledsCanvasNodeCtx.clear();
if(typeof colors != "undefined") if (typeof colors != "undefined")
useColor = true; useColor = true;
// check size of ledcolors with leds length // check size of ledcolors with leds length
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])
//ledsCanvasNodeCtx.fillRect(led.hmin * canvas_width, led.vmin * canvas_height, (led.hmax-led.hmin) * canvas_width, (led.vmax-led.vmin) * canvas_height); //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)"; 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]); 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";
//ledsCanvasNodeCtx.shadowBlur = 4; //ledsCanvasNodeCtx.shadowBlur = 4;
ledsCanvasNodeCtx.fillStyle = "white"; ledsCanvasNodeCtx.fillStyle = "white";
ledsCanvasNodeCtx.textAlign = "center"; 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)); 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 // increment colorsPosition
@ -168,104 +177,113 @@ $(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;
$('#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();
} }
// ------------------------------------------------------------------ // ------------------------------------------------------------------
$('#leds_toggle_num').off().on("click", function() { $('#leds_toggle_num').off().on("click", function () {
toggleLedsNum = !toggleLedsNum toggleLedsNum = !toggleLedsNum
toggleClass('#leds_toggle_num', "btn-danger", "btn-success"); toggleClass('#leds_toggle_num', "btn-danger", "btn-success");
}); });
// ------------------------------------------------------------------ // ------------------------------------------------------------------
$('#leds_toggle').off().on("click", function() { $('#leds_toggle').off().on("click", function () {
toggleLeds = !toggleLeds toggleLeds = !toggleLeds
ledsCanvasNodeCtx.clear(); ledsCanvasNodeCtx.clear();
toggleClass('#leds_toggle', "btn-success", "btn-danger"); toggleClass('#leds_toggle', "btn-success", "btn-danger");
}); });
// ------------------------------------------------------------------ // ------------------------------------------------------------------
$('#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)
} }
}); });
// ------------------------------------------------------------------ // ------------------------------------------------------------------
$(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();
image.onload = function() { image.onload = function () {
imageCanvasNodeCtx.drawImage(image, 0, 0, canvas_width, canvas_height); imageCanvasNodeCtx.drawImage(image, 0, 0, canvas_width, canvas_height);
}; };
image.src = imageData; image.src = imageData;
} }
}); });
$("#btn_open_ledsim").off().on("click", function(event) { $("#btn_open_ledsim").off().on("click", function (event) {
dialog.open(); dialog.open();
}); });
// ------------------------------------------------------------------ // ------------------------------------------------------------------
$(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();
} }
}); });
function resetImage(){ function resetImage() {
if (getStorage("darkMode", false) == "on") { if (getStorage("darkMode", false) == "on") {
imageCanvasNodeCtx.clear(); imageCanvasNodeCtx.clear();
} else { } else {