From 678624c959783dab801cd10fa46b10662cdc11fa Mon Sep 17 00:00:00 2001 From: redPanther Date: Fri, 9 Sep 2016 18:59:58 +0200 Subject: [PATCH] webui: merge remote control pages into one single page. (#231) * make enable/disable of bborder work * fix typo * smoothing can be disabled via config again * fix smoothing * merge remotecontrol into single page * tiny cleanup in general conf * tune icons * fix loading display * tune some layout stuff * merge huebridge into leddevice --- assets/webconfig/content/effects.html | 25 ---- assets/webconfig/content/generalconf.html | 3 +- assets/webconfig/content/huebridge.html | 44 ------ assets/webconfig/content/input_selection.html | 41 ------ assets/webconfig/content/leds.html | 49 +++++++ assets/webconfig/content/lighttest.html | 58 -------- assets/webconfig/content/remote.html | 52 ++++++++ .../webconfig/content/remote_components.html | 71 ---------- assets/webconfig/index.html | 13 +- assets/webconfig/js/content_generalconf.js | 9 +- assets/webconfig/js/content_index.js | 5 +- assets/webconfig/js/content_leds.js | 23 +++- assets/webconfig/js/content_remote.js | 126 ++++++++++++++++++ 13 files changed, 251 insertions(+), 268 deletions(-) delete mode 100644 assets/webconfig/content/effects.html delete mode 100644 assets/webconfig/content/huebridge.html delete mode 100644 assets/webconfig/content/input_selection.html delete mode 100644 assets/webconfig/content/lighttest.html create mode 100644 assets/webconfig/content/remote.html delete mode 100644 assets/webconfig/content/remote_components.html create mode 100644 assets/webconfig/js/content_remote.js diff --git a/assets/webconfig/content/effects.html b/assets/webconfig/content/effects.html deleted file mode 100644 index d3d7f570..00000000 --- a/assets/webconfig/content/effects.html +++ /dev/null @@ -1,25 +0,0 @@ -
-
-
-

Effects

-
-

The Effects remote enables you to set an effect for testing or demonstration purposes. Don't forget to stop it afterwards.

-
-
-
- Stop Effect
-
-
-
-
- - diff --git a/assets/webconfig/content/generalconf.html b/assets/webconfig/content/generalconf.html index 86137c35..5778fd1f 100644 --- a/assets/webconfig/content/generalconf.html +++ b/assets/webconfig/content/generalconf.html @@ -7,9 +7,8 @@
-
- +
diff --git a/assets/webconfig/content/huebridge.html b/assets/webconfig/content/huebridge.html deleted file mode 100644 index 9ceb9855..00000000 --- a/assets/webconfig/content/huebridge.html +++ /dev/null @@ -1,44 +0,0 @@ -
-
-
-

Hue Bridge

-
-
- - -
- - - - -
- -
-
-
-
-
-
-
-
- - - @@ -122,4 +170,5 @@ start
+ diff --git a/assets/webconfig/content/lighttest.html b/assets/webconfig/content/lighttest.html deleted file mode 100644 index b93d6d6e..00000000 --- a/assets/webconfig/content/lighttest.html +++ /dev/null @@ -1,58 +0,0 @@ -
-
-
-

Colors

-
- Set color: -
-
-
- - -
-
-
- -
-
-
-
- - - - diff --git a/assets/webconfig/content/remote.html b/assets/webconfig/content/remote.html new file mode 100644 index 00000000..49f4822c --- /dev/null +++ b/assets/webconfig/content/remote.html @@ -0,0 +1,52 @@ +
+

Remote Control

+
+ +
+ +
+
+
+
+
Colors / Effects
+
+ color: +
+ +
+
effect:
+ + + +
+
+
+ +
+
+ + +
+
+
+
+
Input Selection
+
+
+
+
+
+ +
+
+
Components
+
+
+
+
+
+
+
+
+ + diff --git a/assets/webconfig/content/remote_components.html b/assets/webconfig/content/remote_components.html deleted file mode 100644 index 2c0542e1..00000000 --- a/assets/webconfig/content/remote_components.html +++ /dev/null @@ -1,71 +0,0 @@ -
-
-
-

Effects

-
-

The components remote enables you to disable and enable certain components of Hyperion during runtime. Keep in mind this persist just until the next reboot! To enable/disable components permament, use the configuration section.

-
-
-
-
-
-
-
-
-
- - diff --git a/assets/webconfig/index.html b/assets/webconfig/index.html index 0031d2b4..fe6ca3f7 100644 --- a/assets/webconfig/index.html +++ b/assets/webconfig/index.html @@ -206,21 +206,12 @@
  • Capturing Hardware
  • LED Hardware
  • KODI Connector
    • -
  • Hue Bridge
    • - - -
  • - Remote Control -
    • +
  • Remote Control
  • Support
  • - System + System diff --git a/assets/webconfig/js/content_generalconf.js b/assets/webconfig/js/content_generalconf.js index c3af938a..3daf9d6c 100644 --- a/assets/webconfig/js/content_generalconf.js +++ b/assets/webconfig/js/content_generalconf.js @@ -21,9 +21,7 @@ function removeAdvanced(obj,searchStack) $(hyperion).one("cmd-config-getschema", function(event) { parsedConfSchemaJSON = event.response.result; - // remove all "advanced" options from schema - //removeAdvanced(parsedConfSchemaJSON, []); // not working atm - //console.log(JSON.stringify(parsedConfSchemaJSON)); + schema = parsedConfSchemaJSON.properties; blackborderdetector = schema.blackborderdetector; color = schema.color; @@ -40,7 +38,6 @@ $(hyperion).one("cmd-config-getschema", function(event) { webConfig = schema.webConfig; var element = document.getElementById('editor_holder'); - //JSONEditor.defaults.options.theme = 'bootstrap3'; var general_conf_editor = new JSONEditor(element,{ theme: 'bootstrap3', @@ -70,13 +67,13 @@ $(hyperion).one("cmd-config-getschema", function(event) { }); //Called everytime a Input Field is changed = No need for save button - general_conf_editor.on('change',function() { + general_conf_editor.off().on('change',function() { console.log(JSON.stringify(general_conf_editor.getValue())); requestWriteConfig(general_conf_editor.getValue()); }); //Alternative Function with submit button to get Values - document.getElementById('submit').addEventListener('click',function() { + $('btn_submit').off().on('click',function() { console.log(general_conf_editor.getValue()); }); diff --git a/assets/webconfig/js/content_index.js b/assets/webconfig/js/content_index.js index f7bafe1a..a6d33603 100644 --- a/assets/webconfig/js/content_index.js +++ b/assets/webconfig/js/content_index.js @@ -2,10 +2,7 @@ $(document).ready( function() { loadContentTo("#container_connection_lost","connection_lost"); initWebSocket(); bindNavToContent("#load_dashboard","dashboard",true); - bindNavToContent("#load_lighttest","lighttest",false); - bindNavToContent("#load_effects","effects",false); - bindNavToContent("#load_components","remote_components",false); - bindNavToContent("#load_input_selection","input_selection",false); + bindNavToContent("#load_remote","remote",false); bindNavToContent("#load_huebridge","huebridge",false); bindNavToContent("#load_support","support",false); bindNavToContent("#load_confKodi","kodiconf",false); diff --git a/assets/webconfig/js/content_leds.js b/assets/webconfig/js/content_leds.js index 113ef1db..2c37bede 100644 --- a/assets/webconfig/js/content_leds.js +++ b/assets/webconfig/js/content_leds.js @@ -68,19 +68,19 @@ $(document).ready(function() { }); // ------------------------------------------------------------------ - $('#leds_toggle_num').on("click", function() { + $('#leds_toggle_num').off().on("click", function() { $('.led_num').toggle(); toggleClass('#leds_toggle_num', "btn-danger", "btn-success"); }); // ------------------------------------------------------------------ - $('#leds_toggle').on("click", function() { + $('#leds_toggle').off().on("click", function() { $('.led').toggle(); toggleClass('#leds_toggle', "btn-success", "btn-danger"); }); // ------------------------------------------------------------------ - $('#leds_toggle_live').on("click", function() { + $('#leds_toggle_live').off().on("click", function() { setClassByBool('#leds_toggle_live',ledStreamActive,"btn-success","btn-danger"); if ( ledStreamActive ) { @@ -93,7 +93,7 @@ $(document).ready(function() { }); // ------------------------------------------------------------------ - $("#leds_custom_check").on("click", function() { + $("#leds_custom_check").off().on("click", function() { e = isJsonString($("#ledconfig").val()); if (e.length == 0) @@ -103,11 +103,11 @@ $(document).ready(function() { }); // ------------------------------------------------------------------ - $("#leds_custom_save").on("click", function() { + $("#leds_custom_save").off().on("click", function() { }); - $('#leds_cfg_nav a[data-toggle="tab"]').on('shown.bs.tab', function (e) { + $('#leds_cfg_nav a[data-toggle="tab"]').off().on('shown.bs.tab', function (e) { var target = $(e.target).attr("href") // activated tab if (target == "#menu_gencfg" && !ledsCustomCfgInitialized) { @@ -119,6 +119,17 @@ $(document).ready(function() { } }); + $("#leddevices").off().on("change", function(event) { + if ($(this).val() == "philipshue") + { + $("#huebridge").show(); + } + else + { + $("#huebridge").hide(); + } + }); + requestServerConfig(); }); diff --git a/assets/webconfig/js/content_remote.js b/assets/webconfig/js/content_remote.js new file mode 100644 index 00000000..85fc680e --- /dev/null +++ b/assets/webconfig/js/content_remote.js @@ -0,0 +1,126 @@ + + function updateInputSelect() + { + var data = ""; + var i; + for(i = 0; i < parsedServerInfoJSON.info.priorities.length; i++) { + var owner = parsedServerInfoJSON.info.priorities[i].owner; + var active = parsedServerInfoJSON.info.priorities[i].active; + var visible = parsedServerInfoJSON.info.priorities[i].visible; + var priority = parsedServerInfoJSON.info.priorities[i].priority; + var btn_type = "default"; + if (active) btn_type = "warning"; + if (visible) btn_type = "success"; + + data += '
    '; + } + data += '
    '; + $('#hyperion_inputs').html(data); + + var max_width=200; + $('.btn_input_selection').each(function() { + if ($(this).innerWidth() > max_width) + max_width = $(this).innerWidth(); + }); + $('.btn_input_selection').css("min-width",max_width+"px"); + } + + function updateComponents(event) { + if ($('#componentsbutton').length == 0) + { + $(hyperion).off("cmd-serverinfo",updateComponents); + } + else + { + updateInputSelect(); + components = event.response.info.components; + // create buttons + $('#componentsbutton').html(""); + for ( idx=0; idx'; + enable_style = (components[idx].enabled? "btn-success" : "btn-danger"); + enable_icon = (components[idx].enabled? "fa-play" : "fa-stop"); + comp_name = components[idx].name; + comp_btn_id = "comp_btn_"+comp_name; + + // create btn if not there + if ($("#"+comp_btn_id).length == 0) + { + d='

    '+components[idx].title+'

    '; + $('#componentsbutton').append(d); + } + else // already create, update state + { + setClassByBool( $('#'+comp_btn_id) , components[idx].enabled, "btn-danger", "btn-success" ); + setClassByBool( $('#'+comp_btn_id+"_icon"), components[idx].enabled, "fa-stop" , "fa-play" ); + $('#'+comp_btn_id).attr("onclick",'requestSetComponentState(\''+comp_name+'\','+(!components[idx].enabled)+')'); + } + + } + } +} + + + +$(document).ready(function() { + // color + $(function() { + $('#cp2').colorpicker({ + format: 'rgb', + + colorSelectors: { + 'default': '#777777', + 'primary': '#337ab7', + 'success': '#5cb85c', + 'info' : '#5bc0de', + 'warning': '#f0ad4e', + 'danger' : '#d9534f' + }, + customClass: 'colorpicker-2x', + sliders: { + saturation: { + maxLeft: 200, + maxTop: 200 + }, + hue: { + maxTop: 200 + }, + alpha: { + maxTop: 200 + }, + } + }); + + $('#cp2').colorpicker().on('changeColor', function(e) { + color = e.color.toRGB(); + requestSetColor(color.r, color.g, color.b); + }); + }); + + $("#reset_color").off().on("click", requestPriorityClear); + + $("#effect_select").off().on("change", function(event) { + efx = $(this).val(); + if(efx != "__none__") + { + requestPlayEffect(efx); + } + }); + + // effects + effects_html = ''; + for(i = 0; i < parsedServerInfoJSON.info.effects.length; i++) { + //console.log(parsedServerInfoJSON.info.effects[i].name); + effectName = parsedServerInfoJSON.info.effects[i].name; + effects_html += ''; + } + $('#effect_select').html(effects_html); + + + // components + $(hyperion).on("cmd-serverinfo",updateComponents); + +});