141 lines
4.0 KiB
JavaScript
141 lines
4.0 KiB
JavaScript
$(document).ready(function() {
|
|
var modalOpened = false;
|
|
var ledsim_width = 540;
|
|
var ledsim_height = 489;
|
|
var dialog;
|
|
var leds;
|
|
|
|
$(hyperion).one("cmd-config-getconfig",function(event){
|
|
leds = event.response.result.leds;
|
|
|
|
if(storageComp() && getStorage('ledsim_width') != null)
|
|
{
|
|
ledsim_width = getStorage('ledsim_width');
|
|
ledsim_height = getStorage('ledsim_height');
|
|
}
|
|
|
|
dialog = $("#ledsim_dialog").dialog({
|
|
uiLibrary: 'bootstrap',
|
|
resizable: true,
|
|
modal: false,
|
|
minWidth: 250,
|
|
width: ledsim_width,
|
|
minHeight: 350,
|
|
height: ledsim_height,
|
|
closeOnEscape: true,
|
|
autoOpen: false,
|
|
title: $.i18n('main_ledsim_title'),
|
|
resize: function (e) {
|
|
updateLedLayout();
|
|
},
|
|
opened: function (e) {
|
|
updateLedLayout();
|
|
modalOpened = true;
|
|
requestLedColorsStart();
|
|
|
|
if($('#leds_toggle_live_video').hasClass('btn-success'))
|
|
requestLedImageStart();
|
|
},
|
|
closed: function (e) {
|
|
modalOpened = false;
|
|
},
|
|
resizeStop: function (e) {
|
|
if(storageComp())
|
|
{
|
|
setStorage("ledsim_width", $("#ledsim_dialog").outerWidth());
|
|
setStorage("ledsim_height", $("#ledsim_dialog").outerHeight());
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
function updateLedLayout()
|
|
{
|
|
//calculate body size
|
|
var canvas_height = $('#ledsim_dialog').outerHeight()-$('#ledsim_text').outerHeight()-$('[data-role=footer]').outerHeight()-$('[data-role=header]').outerHeight()-40;
|
|
var canvas_width = $('#ledsim_dialog').outerWidth()-30;
|
|
|
|
$('#leds_canvas').html("");
|
|
leds_html = '<img src="" id="image_preview" style="position:relative" />';
|
|
for(var idx=0; idx<leds.length; idx++)
|
|
{
|
|
led = leds[idx];
|
|
led_id='led_'+led.index;
|
|
bgcolor = "background-color:hsl("+(idx*360/leds.length)+",100%,50%);";
|
|
pos = "left:"+(led.hscan.minimum * canvas_width)+"px;"+
|
|
"top:"+(led.vscan.minimum * canvas_height)+"px;"+
|
|
"width:"+((led.hscan.maximum-led.hscan.minimum) * canvas_width-1)+"px;"+
|
|
"height:"+((led.vscan.maximum-led.vscan.minimum) * canvas_height-1)+"px;";
|
|
leds_html += '<div id="'+led_id+'" class="led" style="'+bgcolor+pos+'" title="'+led.index+'"><span id="'+led_id+'_num" class="led_num">'+led.index+'</span></div>';
|
|
}
|
|
$('#leds_canvas').html(leds_html);
|
|
|
|
if($('#leds_toggle_num').hasClass('btn-success'))
|
|
$('.led_num').toggle(true);
|
|
|
|
if($('#leds_toggle').hasClass('btn-danger'))
|
|
$('.led').toggle(false);
|
|
|
|
$('#image_preview').attr("width" , canvas_width-1);
|
|
$('#image_preview').attr("height", canvas_height-1);
|
|
}
|
|
// ------------------------------------------------------------------
|
|
$('#leds_toggle_num').off().on("click", function() {
|
|
$('.led_num').toggle();
|
|
toggleClass('#leds_toggle_num', "btn-danger", "btn-success");
|
|
});
|
|
|
|
// ------------------------------------------------------------------
|
|
$('#leds_toggle').off().on("click", function() {
|
|
$('.led').toggle();
|
|
toggleClass('#leds_toggle', "btn-success", "btn-danger");
|
|
});
|
|
|
|
// ------------------------------------------------------------------
|
|
$('#leds_toggle_live_video').off().on("click", function() {
|
|
setClassByBool('#leds_toggle_live_video',imageStreamActive,"btn-success","btn-danger");
|
|
if ( imageStreamActive )
|
|
{
|
|
requestLedImageStop();
|
|
$('#image_preview').removeAttr("src");
|
|
}
|
|
else
|
|
{
|
|
requestLedImageStart();
|
|
}
|
|
});
|
|
|
|
// ------------------------------------------------------------------
|
|
$(hyperion).on("cmd-ledcolors-ledstream-update",function(event){
|
|
if (!modalOpened)
|
|
{
|
|
requestLedColorsStop();
|
|
}
|
|
else
|
|
{
|
|
ledColors = (event.response.result.leds);
|
|
for(var idx=0; idx<ledColors.length; idx++)
|
|
{
|
|
led = ledColors[idx]
|
|
$("#led_"+led.index).css("background","rgb("+led.red+","+led.green+","+led.blue+")");
|
|
}
|
|
}
|
|
});
|
|
|
|
// ------------------------------------------------------------------
|
|
$(hyperion).on("cmd-ledcolors-imagestream-update",function(event){
|
|
if (!modalOpened)
|
|
{
|
|
requestLedImageStop();
|
|
}
|
|
else
|
|
{
|
|
imageData = (event.response.result.image);
|
|
$("#image_preview").attr("src", imageData);
|
|
}
|
|
});
|
|
|
|
$("#btn_open_ledsim").off().on("click", function(event) {
|
|
dialog.open();
|
|
});
|
|
}); |