mirror of
https://github.com/hyperion-project/hyperion.ng.git
synced 2025-03-01 10:33:28 +00:00
Webui: extend led hardware config + connection lost page (#226)
* split content and js tune leds config * implement connection lost page * split js/html in huebridge * add js action for connection lost * extend led config make connection loss nicer * tune led code add menu entry for grabber * more tuning of webui * switch back to botstrap textarea add v4l to components * add icon * extend schema for jsoneditor * implement ledcolors streaming with 4fps * implement component state
This commit is contained in:
@@ -1,51 +1,48 @@
|
||||
|
||||
var ledsCustomCfgInitialized = false;
|
||||
|
||||
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++)
|
||||
$(hyperion).on("cmd-ledcolors-ledstream-update",function(event){
|
||||
if ($("#leddevices").length == 0)
|
||||
{
|
||||
led = ledColors[idx]
|
||||
$("#led_"+led.index).css("background","rgb("+led.red+","+led.green+","+led.blue+")");
|
||||
requestLedColorsStop();
|
||||
}
|
||||
else
|
||||
{
|
||||
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++)
|
||||
$(hyperion).on("cmd-ledcolors-ledstream-stop",function(event){
|
||||
led_count = $(".led").length;
|
||||
for(var idx=0; idx<led_count; idx++)
|
||||
{
|
||||
led = ledColors[idx]
|
||||
$("#led_"+led.index).css("background","rgb("+led.red+","+led.green+","+led.blue+")");
|
||||
$('#led_'+idx).css("background-color","hsl("+(idx*360/led_count)+",100%,50%)");
|
||||
}
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
$(hyperion).one("cmd-serverinfo",function(event){
|
||||
server = event.response;
|
||||
ledDevices = server.info.ledDevices.available
|
||||
|
||||
ledDevicesHtml = "";
|
||||
for (idx=0; idx<ledDevices.length; idx++)
|
||||
{
|
||||
ledDevicesHtml += '<option value="'+ledDevices[idx]+'">'+ledDevices[idx]+'</option>';
|
||||
}
|
||||
$("#leddevices").html(ledDevicesHtml);
|
||||
$("#leddevices").val(server.info.ledDevices.active);
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
$(hyperion).on("cmd-config-getconfig",function(event){
|
||||
parsedConfJSON = event.response.result;
|
||||
@@ -68,7 +65,6 @@ $(document).ready(function() {
|
||||
}
|
||||
$('#leds_canvas').html(leds_html);
|
||||
$('#led_0').css("border","2px dotted red");
|
||||
ledStreamActivate(false);
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
@@ -88,23 +84,18 @@ $(document).ready(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%)");
|
||||
}
|
||||
requestLedColorsStop();
|
||||
}
|
||||
else
|
||||
{
|
||||
ledStreamActivate(true);
|
||||
requestLedColorsStart();
|
||||
}
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
$("#leds_custom_check").on("click", function() {
|
||||
e = isJsonString($("#ledconfig").val());
|
||||
|
||||
if (e.length == 0)
|
||||
showErrorDialog("Validation success", "Your config is valid!");
|
||||
else
|
||||
@@ -118,10 +109,13 @@ $(document).ready(function() {
|
||||
|
||||
$('#leds_cfg_nav a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
||||
var target = $(e.target).attr("href") // activated tab
|
||||
if (target == "#menu_customcfg" && !ledsCustomCfgInitialized)
|
||||
if (target == "#menu_gencfg" && !ledsCustomCfgInitialized)
|
||||
{
|
||||
ledsCustomCfgInitialized = true;
|
||||
$("#ledconfig").linedtextarea();
|
||||
// $("#ledconfig").linedtextarea();
|
||||
// $(window).resize(function(){
|
||||
// $("#ledconfig").trigger("resize");
|
||||
// });
|
||||
}
|
||||
});
|
||||
|
||||
|
Reference in New Issue
Block a user