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:
redPanther
2016-09-07 20:10:37 +02:00
committed by GitHub
parent 4c6a4a1f93
commit 2beccb0912
35 changed files with 675 additions and 279 deletions

View File

@@ -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");
// });
}
});