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

10
assets/webconfig/index.html
View File

@ -3,8 +3,7 @@
<head>
<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';
}
</script>
@ -90,7 +89,11 @@
<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>
</div>
<style type="text/css"> #loading_overlay, #wrapper{ display: none } </style>
<style type="text/css">
#loading_overlay, #wrapper {
display: none
}
</style>
</noscript>
<div id="loading_overlay" class="overlay"></div>
@ -320,6 +323,7 @@
<div data-role="footer" style="text-align:center">
<button type="button" class="btn btn-success" id="leds_toggle"><i class="fa fa-fw fa-lightbulb-o"></i><span data-i18n="main_ledsim_btn_toggleleds">leds</span></button>
<button type="button" class="btn btn-danger" id="leds_toggle_num"> <i class="fa fa-fw fa-info"></i><span data-i18n="main_ledsim_btn_togglelednumber">led numbers</span></button>
<button type="button" class="btn btn-danger" id="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>
</div>
</div>

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

@ -4,13 +4,16 @@ $(document).ready(function() {
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, toggleLedsNum = false;
var toggleLeds = false;
var toggleLedsNum = false;
var toggleSigDetectArea = false;
/// add prototype for simple canvas clear() method
CanvasRenderingContext2D.prototype.clear = function () {
@ -19,8 +22,7 @@ $(document).ready(function() {
function create2dPaths() {
twoDPaths = [];
for(var idx=0; idx<leds.length; idx++)
{
for (var idx = 0; idx < leds.length; 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));
}
@ -69,16 +71,15 @@ $(document).ready(function() {
$(window.hyperion).one("ready", function () {
leds = window.serverConfig.leds;
grabberConfig = window.serverConfig.grabberV4L2;
if(window.showOptHelp)
{
if (window.showOptHelp) {
createHint('intro', $.i18n('main_ledsim_text'), 'ledsim_text');
$('#ledsim_text').css({ 'margin': '10px 15px 0px 15px' });
$('#ledsim_text .bs-callout').css("margin", "0px")
}
if(getStorage('ledsim_width') != null)
{
if (getStorage('ledsim_width') != null) {
ledsim_width = getStorage('ledsim_width');
ledsim_height = getStorage('ledsim_height');
}
@ -98,8 +99,7 @@ $(document).ready(function() {
updateLedLayout();
},
opened: function (e) {
if(!lC)
{
if (!lC) {
updateLedLayout();
lC = true;
}
@ -121,12 +121,23 @@ $(document).ready(function() {
// apply new serverinfos
$(window.hyperion).on("cmd-config-getconfig", function (event) {
leds = event.response.info.leds;
grabberConfig = event.response.info.grabberV4L2;
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
if (toggleLeds)
return;
@ -141,8 +152,7 @@ $(document).ready(function() {
if (colors && colors.length / 3 < leds.length)
return;
for(var idx=0; idx<leds.length; idx++)
{
for (var idx = 0; idx < leds.length; idx++) {
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])
@ -152,8 +162,7 @@ $(document).ready(function() {
ledsCanvasNodeCtx.fill(twoDPaths[idx]);
ledsCanvasNodeCtx.stroke(twoDPaths[idx]);
if(toggleLedsNum)
{
if (toggleLedsNum) {
//ledsCanvasNodeCtx.shadowOffsetX = 1;
//ledsCanvasNodeCtx.shadowOffsetY = 1;
//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
canvas_height = $('#ledsim_dialog').outerHeight() - $('#ledsim_text').outerHeight() - $('[data-role=footer]').outerHeight() - $('[data-role=header]').outerHeight() - 40;
canvas_width = $('#ledsim_dialog').outerWidth() - 30;
@ -177,14 +191,17 @@ $(document).ready(function() {
$('#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>';
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);
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();
}
// ------------------------------------------------------------------
@ -203,25 +220,27 @@ $(document).ready(function() {
// ------------------------------------------------------------------
$('#leds_toggle_live_video').off().on("click", function () {
setClassByBool('#leds_toggle_live_video', window.imageStreamActive, "btn-success", "btn-danger");
if ( window.imageStreamActive )
{
if (window.imageStreamActive) {
requestLedImageStop();
resetImage();
}
else
{
else {
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) {
if (!modalOpened)
{
if (!modalOpened) {
requestLedColorsStop();
}
else
{
else {
printLedsToCanvas(event.response.result.leds)
}
});
@ -229,14 +248,12 @@ $(document).ready(function() {
// ------------------------------------------------------------------
$(window.hyperion).on("cmd-ledcolors-imagestream-update", function (event) {
setClassByBool('#leds_toggle_live_video', window.imageStreamActive, "btn-danger", "btn-success");
if (!modalOpened)
{
if (!modalOpened) {
if ($('#leds_prev_toggle_live_video').length > 0)
return;
requestLedImageStop();
}
else
{
else {
var imageData = (event.response.result.image);
var image = new Image();
@ -255,12 +272,13 @@ $(document).ready(function() {
$(window.hyperion).on("cmd-settings-update", function (event) {
var obj = event.response.data
if ( obj.leds) {
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
leds = window.serverConfig.leds;
grabberConfig = window.serverConfig.grabberV4L2;
updateLedLayout();
}
});