mirror of
https://github.com/hyperion-project/hyperion.ng.git
synced 2023-10-10 13:36:59 +02:00
* make hyperion websocket api event based * implement new websocket handling for generalconf * migrate all webui stuff to new event based websocket api some cleanup ... now all html templates are in content refactoring of web stuff * add hyperionport to global start impl. removing advanced key * separate dashboard serverinfo is updated every 3 seconds automatily add input selection cleanup and remove not needed stuff * prepare infrastructure for server sided file execution * webui minor fixes * fix compile * implement led layout view with live colors * live led vies * fix general conf unrigister ledcolors request, when not on leds.html * fix compiler warning * prepare realtime ledview and enhance ui
126 lines
3.9 KiB
HTML
126 lines
3.9 KiB
HTML
<style>
|
|
#leds_canvas {width:800px; height:450px; background-color:#AAAAAA; position:absolute; margin:10px; box-shadow: 10px 10px 5px #BBBBBB;
|
|
background-image:url(/img/hyperion/hyperionlogo.png); background-repeat:no-repeat; background-position: center; border-radius:2px; }
|
|
.led { display:inline-block; border: 1px solid black; position:absolute; opacity:0.8; text-align:center;
|
|
vertical-align:middle; padding:4px; border-radius:2px;}
|
|
.led_num {display:none; position:relative; color:black; background-color: white;
|
|
border-radius:2px; padding:1px; vertical-align:middle; text-align:center; font-size:0.8em;}
|
|
#leds_controls {white-space:nowrap; margin-top:530px;}
|
|
</style>
|
|
|
|
<div class="container-fluid">
|
|
<h1 class="page-header" lang="en" data-lang-token="main_menu_leds_conf_token">Led Configuration</h1>
|
|
<!-- <div class="introd">
|
|
<h4 lang="en" data-lang-token="remote_effects_intro"></h4>
|
|
</div>-->
|
|
|
|
<div id="leds_canvas"/>
|
|
|
|
<div id="leds_controls">
|
|
<button lang="en" type="button" class="btn btn-success" id="leds_toggle">toggle leds</button>
|
|
<button lang="en" type="button" class="btn btn-danger" id="leds_toggle_num">toggle led numbers</button>
|
|
<button lang="en" type="button" class="btn btn-success" id="leds_toggle_live">toggle live leds</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
function updateLedColors()
|
|
{
|
|
if($("#leds_canvas").length > 0 && ledStreamActive)
|
|
{
|
|
requestLedColorsStart();
|
|
}
|
|
else
|
|
{
|
|
ledStreamActivate(false);
|
|
}
|
|
}
|
|
|
|
function ledStreamActivate(enable)
|
|
{
|
|
$(hyperion).off("cron", updateLedColors );
|
|
if ( enable && ! ledStreamActive )
|
|
{
|
|
$(hyperion).on("cron", updateLedColors );
|
|
}
|
|
|
|
ledStreamActive=enable;
|
|
}
|
|
|
|
|
|
$(document).ready(function() {
|
|
$(hyperion).on("cmd-ledcolors",function(event){
|
|
ledColors = (event.response.result);
|
|
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-ledstream-update",function(event){
|
|
ledColors = (event.response.result);
|
|
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-config-getconfig",function(event){
|
|
parsedConfJSON = event.response.result;
|
|
leds = parsedConfJSON.leds;
|
|
canvas_height = $('#leds_canvas').innerHeight();
|
|
canvas_width = $('#leds_canvas').innerWidth();
|
|
|
|
leds_html = "";
|
|
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);
|
|
$('#led_0').css("border","2px dotted red");
|
|
ledStreamActivate(true)
|
|
});
|
|
|
|
$('#leds_toggle_num').on("click", function() {
|
|
$('.led_num').toggle();
|
|
toggleClass('#leds_toggle_num', "btn-danger", "btn-success");
|
|
});
|
|
|
|
$('#leds_toggle').on("click", function() {
|
|
$('.led').toggle();
|
|
toggleClass('#leds_toggle', "btn-success", "btn-danger");
|
|
});
|
|
|
|
$('#leds_toggle_live').on("click", function() {
|
|
setClassByBool('#leds_toggle_live',ledStreamActive,"btn-success","btn-danger");
|
|
if ( ledStreamActive )
|
|
{
|
|
ledStreamActivate(false);
|
|
|
|
led_count = $(".led").length;
|
|
for(var idx=0; idx<led_count; idx++)
|
|
{
|
|
$('#led_'+idx).css("background-color","hsl("+(idx*360/led_count)+",100%,50%)");
|
|
}
|
|
}
|
|
else
|
|
{
|
|
ledStreamActivate(true);
|
|
}
|
|
|
|
});
|
|
|
|
requestServerConfig();
|
|
});
|
|
</script>
|