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_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",
|
||||
|
||||
@ -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>
|
||||
@ -167,7 +170,7 @@
|
||||
<a>
|
||||
<div>
|
||||
<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>
|
||||
</a>
|
||||
</li>
|
||||
@ -285,7 +288,7 @@
|
||||
<div id="wizp1">
|
||||
<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">
|
||||
<div id="wizp1_body" ></div>
|
||||
<div id="wizp1_body"></div>
|
||||
</div>
|
||||
<div id="wizp1_footer" class="modal-footer" style="text-align:center"></div>
|
||||
</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>
|
||||
|
||||
@ -1,28 +1,30 @@
|
||||
$(document).ready(function() {
|
||||
$(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, toggleLedsNum = false;
|
||||
var toggleLeds = false;
|
||||
var toggleLedsNum = false;
|
||||
var toggleSigDetectArea = false;
|
||||
|
||||
/// 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)
|
||||
};
|
||||
|
||||
function create2dPaths(){
|
||||
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) );
|
||||
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) {
|
||||
if (typeof radius == 'number') {
|
||||
radius = {tl: radius, tr: radius, br: radius, bl: radius};
|
||||
radius = { tl: radius, tr: radius, br: radius, bl: radius };
|
||||
} 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) {
|
||||
radius[side] = radius[side] || defaultRadius[side];
|
||||
}
|
||||
@ -67,18 +69,17 @@ $(document).ready(function() {
|
||||
return path;
|
||||
}
|
||||
|
||||
$(window.hyperion).one("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")
|
||||
$('#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;
|
||||
}
|
||||
@ -107,7 +107,7 @@ $(document).ready(function() {
|
||||
requestLedColorsStart();
|
||||
|
||||
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();
|
||||
},
|
||||
closed: function (e) {
|
||||
@ -119,48 +119,57 @@ $(document).ready(function() {
|
||||
}
|
||||
});
|
||||
// apply new serverinfos
|
||||
$(window.hyperion).on("cmd-config-getconfig",function(event){
|
||||
$(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)
|
||||
if (toggleLeds)
|
||||
return;
|
||||
|
||||
var useColor = false;
|
||||
var cPos = 0;
|
||||
ledsCanvasNodeCtx.clear();
|
||||
if(typeof colors != "undefined")
|
||||
if (typeof colors != "undefined")
|
||||
useColor = true;
|
||||
|
||||
// check size of ledcolors with leds length
|
||||
if(colors && colors.length/3 < leds.length)
|
||||
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])
|
||||
//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.stroke(twoDPaths[idx]);
|
||||
|
||||
if(toggleLedsNum)
|
||||
{
|
||||
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));
|
||||
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
|
||||
@ -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
|
||||
canvas_height = $('#ledsim_dialog').outerHeight()-$('#ledsim_text').outerHeight()-$('[data-role=footer]').outerHeight()-$('[data-role=header]').outerHeight()-40;
|
||||
canvas_width = $('#ledsim_dialog').outerWidth()-30;
|
||||
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("");
|
||||
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>';
|
||||
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();
|
||||
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
$('#leds_toggle_num').off().on("click", function() {
|
||||
$('#leds_toggle_num').off().on("click", function () {
|
||||
toggleLedsNum = !toggleLedsNum
|
||||
toggleClass('#leds_toggle_num', "btn-danger", "btn-success");
|
||||
});
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
$('#leds_toggle').off().on("click", function() {
|
||||
$('#leds_toggle').off().on("click", function () {
|
||||
toggleLeds = !toggleLeds
|
||||
ledsCanvasNodeCtx.clear();
|
||||
toggleClass('#leds_toggle', "btn-success", "btn-danger");
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
$('#leds_toggle_live_video').off().on("click", function() {
|
||||
setClassByBool('#leds_toggle_live_video',window.imageStreamActive,"btn-success","btn-danger");
|
||||
if ( window.imageStreamActive )
|
||||
{
|
||||
$('#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
|
||||
{
|
||||
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)
|
||||
{
|
||||
$(window.hyperion).on("cmd-ledcolors-ledstream-update", function (event) {
|
||||
if (!modalOpened) {
|
||||
requestLedColorsStop();
|
||||
}
|
||||
else
|
||||
{
|
||||
else {
|
||||
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");
|
||||
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();
|
||||
image.onload = function() {
|
||||
image.onload = function () {
|
||||
imageCanvasNodeCtx.drawImage(image, 0, 0, canvas_width, canvas_height);
|
||||
};
|
||||
image.src = imageData;
|
||||
}
|
||||
});
|
||||
|
||||
$("#btn_open_ledsim").off().on("click", function(event) {
|
||||
$("#btn_open_ledsim").off().on("click", function (event) {
|
||||
dialog.open();
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
$(window.hyperion).on("cmd-settings-update",function(event){
|
||||
$(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) {
|
||||
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();
|
||||
}
|
||||
});
|
||||
|
||||
function resetImage(){
|
||||
function resetImage() {
|
||||
if (getStorage("darkMode", false) == "on") {
|
||||
imageCanvasNodeCtx.clear();
|
||||
} else {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user