From 0a142b0e7d8c725945a17e79d308820797b3ade4 Mon Sep 17 00:00:00 2001 From: redPanther Date: Sun, 9 Oct 2016 10:23:04 +0200 Subject: [PATCH] implement a function for easy json editor creation (#264) * implement a function for easy json editor creation * grabber and kodi moved to new editor func * webui: implement conf editors * add missing files and remove debug code --- assets/webconfig/content/colors.html | 21 +++ .../{generalconf.html => effects.html} | 4 +- assets/webconfig/content/grabber.html | 3 +- assets/webconfig/content/kodiconf.html | 141 ++---------------- assets/webconfig/content/network.html | 21 +++ assets/webconfig/index.html | 6 +- assets/webconfig/js/content_colors.js | 34 +++++ assets/webconfig/js/content_effects.js | 42 ++++++ assets/webconfig/js/content_generalconf.js | 83 ----------- assets/webconfig/js/content_grabber.js | 45 +----- assets/webconfig/js/content_index.js | 4 +- assets/webconfig/js/content_kodi.js | 33 +++- assets/webconfig/js/content_leds.js | 18 +-- assets/webconfig/js/content_network.js | 36 +++++ assets/webconfig/js/ui_utils.js | 29 +++- libsrc/hyperion/hyperion.schema.json | 2 + 16 files changed, 249 insertions(+), 273 deletions(-) create mode 100644 assets/webconfig/content/colors.html rename assets/webconfig/content/{generalconf.html => effects.html} (85%) create mode 100644 assets/webconfig/content/network.html create mode 100644 assets/webconfig/js/content_colors.js create mode 100644 assets/webconfig/js/content_effects.js delete mode 100644 assets/webconfig/js/content_generalconf.js create mode 100644 assets/webconfig/js/content_network.js diff --git a/assets/webconfig/content/colors.html b/assets/webconfig/content/colors.html new file mode 100644 index 00000000..c968608b --- /dev/null +++ b/assets/webconfig/content/colors.html @@ -0,0 +1,21 @@ + +
+
+
+

Image Processing

+
+

You can edit the general configuration here.

+
+
+
+ +
+ +
+ +
+
+
+ + + diff --git a/assets/webconfig/content/generalconf.html b/assets/webconfig/content/effects.html similarity index 85% rename from assets/webconfig/content/generalconf.html rename to assets/webconfig/content/effects.html index f01b6b66..98422b32 100644 --- a/assets/webconfig/content/generalconf.html +++ b/assets/webconfig/content/effects.html @@ -1,7 +1,7 @@
-

General

+

Effects

You can edit the general configuration here.

@@ -15,4 +15,4 @@
- + diff --git a/assets/webconfig/content/grabber.html b/assets/webconfig/content/grabber.html index 982c594f..c6d557eb 100644 --- a/assets/webconfig/content/grabber.html +++ b/assets/webconfig/content/grabber.html @@ -6,12 +6,13 @@

You can edit the general configuration here.

-
+
+
diff --git a/assets/webconfig/content/kodiconf.html b/assets/webconfig/content/kodiconf.html index e86ba152..4aec617e 100644 --- a/assets/webconfig/content/kodiconf.html +++ b/assets/webconfig/content/kodiconf.html @@ -1,136 +1,23 @@
-
-
+
+

Kodi Watch

-
-
-

The Kodi Watcher enables you to enable and disable the screencapture depending on Kodi state. This is not limited to the same machine, you could observe also a Kodi on any other device at your network.

-
-
- +
+

The Kodi Watcher enables you to enable and disable the screencapture depending on Kodi state. This is not limited to the same machine, you could observe also a Kodi on any other device at your network.

+
+
+ -
-
-
- -
-
- -
-
- - -
-
-
-
-
- -
- -

Set your Kodi IP, this could be also a running Kodi on your desktop computer

-
-
-
- -
- -
-
-
- -
-
- -
-
-
-
- -
-
- - -
-
-
-
- -
-
- - -
-
-
-
- -
-
- - -
-
-
-
- -
-
- - -
-
-
-
- -
-
- - -
-
-
-
- -
-
- - -
-
-
- - -
-
-
-
-
- Kodi options explained -
-
-
    -
  • Enabled: If checked, the Kodi Checker is enabled
    • -
  • Kodi IP-Address: The ip address of your kodi "127.0.01" means your kodi on the same machine (see hint below)
    • -
  • TCP Port: The TCP port of your Kodi. If you changed nothing, the default "9090" is correct.
    • -
  • Menu: If checked, the ambilight will be "ON" if you are at the kodi menu. "OFF" if unchecked
    • -
  • Video: If checked, the ambilight will be "ON" if you are playing a video (Movie/TV-Show/Youtube etc). "OFF" if unchecked
    • -
  • Picture: If checked, the ambilight will be "ON" if you are watching pictures. "OFF" if unchecked
    • -
  • Audio: If checked, the ambilight will be "ON" if you are listening to audio (music/web radio etc). "OFF" if unchecked
    • -
  • Screensaver: If checked, the ambilight will be "ON" if the screensaver is active. "OFF" if unchecked
    • -
  • 3D Check: If checked, Hyperion will be switching to the detected 3D mode. (SBS/TAB) no MVC yet!
    • -
  • Pause: If checked, the ambilight will be "ON" if the Kodi player is at pause state. "OFF" if unchecked
    • -
-
-
+
+
+
+ + \ No newline at end of file diff --git a/assets/webconfig/content/network.html b/assets/webconfig/content/network.html new file mode 100644 index 00000000..7551fefd --- /dev/null +++ b/assets/webconfig/content/network.html @@ -0,0 +1,21 @@ + +
+
+
+

Network Services

+
+

You can edit the general configuration here.

+
+
+
+ +
+ +
+ +
+
+
+ + + diff --git a/assets/webconfig/index.html b/assets/webconfig/index.html index fbadfd00..4f479a27 100644 --- a/assets/webconfig/index.html +++ b/assets/webconfig/index.html @@ -208,10 +208,12 @@
  • Configuration
  • Remote Control
    • diff --git a/assets/webconfig/js/content_colors.js b/assets/webconfig/js/content_colors.js new file mode 100644 index 00000000..95dde1e0 --- /dev/null +++ b/assets/webconfig/js/content_colors.js @@ -0,0 +1,34 @@ + +var conf_editor = null; +$(hyperion).one("cmd-config-getschema", function(event) { + parsedConfSchemaJSON = event.response.result; + schema = parsedConfSchemaJSON.properties; + + conf_editor = createJsonEditor('editor_container', + { + title:'', + properties: { + color : schema.color, + smoothing : schema.smoothing, + blackborderdetector: schema.blackborderdetector, + } + }); + + $('#editor_container .well').css("background-color","white"); + $('#editor_container .well').css("border","none"); + $('#editor_container .well').css("box-shadow","none"); + $('#editor_container .btn').addClass("btn-primary"); + $('#editor_container h3').first().remove(); + +}); + + +$(document).ready( function() { + requestServerConfigSchema(); + + document.getElementById('btn_submit').addEventListener('click',function() { + // Get the value from the editor + console.log(conf_editor.getValue()); + }); +}); + diff --git a/assets/webconfig/js/content_effects.js b/assets/webconfig/js/content_effects.js new file mode 100644 index 00000000..10b578b1 --- /dev/null +++ b/assets/webconfig/js/content_effects.js @@ -0,0 +1,42 @@ + +$(hyperion).one("cmd-config-getschema", function(event) { + parsedConfSchemaJSON = event.response.result; + + schema = parsedConfSchemaJSON.properties; + var general_conf_editor = createJsonEditor('editor_container', + { + title:'', + properties: { + effects : schema.effects, + initialEffect : schema.initialEffect + } + }); + + $('#editor_container .well').css("background-color","white"); +// $('#editor_container .well').css("border","none"); +// $('#editor_container .well').css("box-shadow","none"); + $('#editor_container .btn').addClass("btn-primary"); + $('#editor_container h3').first().remove(); + + //Called everytime a Input Field is changed = No need for save button +// 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 + $('#btn_submit').off().on('click',function() { + console.log(general_conf_editor.getValue()); + }); + + $(hyperion).on("cmd-config-setconfig",function(event){ + parsedServerInfoJSON = event.response; + console.log(parsedServerInfoJSON); + }); + +}); + +$(document).ready( function() { + requestServerConfigSchema(); + //$("[type='checkbox']").bootstrapSwitch(); +}); diff --git a/assets/webconfig/js/content_generalconf.js b/assets/webconfig/js/content_generalconf.js deleted file mode 100644 index 26f67a94..00000000 --- a/assets/webconfig/js/content_generalconf.js +++ /dev/null @@ -1,83 +0,0 @@ -/* -function removeAdvanced(obj,searchStack) -{ - searchStack = []; - $.each(obj, function(key, val) { - if ( typeof(val) == 'object' ) - { - searchStack.push(key); - if (! removeAdvanced(val,searchStack) ) - searchStack.pop(); - } - else if ( key == "advanced" && val == true ) - { - console.log(searchStack); - return true; - } - }); - return false; -} -*/ - -$(hyperion).one("cmd-config-getschema", function(event) { - parsedConfSchemaJSON = event.response.result; - - schema = parsedConfSchemaJSON.properties; - var element = document.getElementById('editor_container'); - - var general_conf_editor = new JSONEditor(element,{ - theme: 'bootstrap3', - iconlib: "fontawesome4", - disable_collapse: 'true', - form_name_root: 'sa', - disable_edit_json: 'true', - disable_properties: 'true', - no_additional_properties: 'true', - schema: { - title:'', - properties: { - blackborderdetector: schema.blackborderdetector, - color : schema.color, - effects : schema.effects, - forwarder : schema.forwarder, - initialEffect : schema.initialEffect, - kodiVideoChecker : schema.kodiVideoChecker, - smoothing : schema.smoothing, - logger : schema.logger, - jsonServer : schema.jsonServer, - protoServer : schema.protoServer, - boblightServer : schema.boblightServer, - udpListener : schema.udpListener, - webConfig : schema.webConfig - } - } - }); - -// $('#editor_container .well').css("background-color","white"); -// $('#editor_container .well').css("border","none"); -// $('#editor_container .well').css("box-shadow","none"); - $('#editor_container .btn').addClass("btn-primary"); - $('#editor_container h3').first().remove(); - - //Called everytime a Input Field is changed = No need for save button -// 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 - $('#btn_submit').off().on('click',function() { - console.log(general_conf_editor.getValue()); - }); - - $(hyperion).on("cmd-config-setconfig",function(event){ - parsedServerInfoJSON = event.response; - console.log(parsedServerInfoJSON); - }); - -}); - -$(document).ready( function() { - requestServerConfigSchema(); - //$("[type='checkbox']").bootstrapSwitch(); -}); diff --git a/assets/webconfig/js/content_grabber.js b/assets/webconfig/js/content_grabber.js index 6d442464..91cd8a11 100644 --- a/assets/webconfig/js/content_grabber.js +++ b/assets/webconfig/js/content_grabber.js @@ -1,49 +1,19 @@ -/* -function removeAdvanced(obj,searchStack) -{ - searchStack = []; - $.each(obj, function(key, val) { - if ( typeof(val) == 'object' ) - { - searchStack.push(key); - if (! removeAdvanced(val,searchStack) ) - searchStack.pop(); - } - else if ( key == "advanced" && val == true ) - { - console.log(searchStack); - return true; - } - }); - return false; -} -*/ -var grabber_conf_editor = null; +var conf_editor = null; $(hyperion).one("cmd-config-getschema", function(event) { parsedConfSchemaJSON = event.response.result; schema = parsedConfSchemaJSON.properties; - var element = document.getElementById('editor_container'); - - grabber_conf_editor = new JSONEditor(element,{ - theme: 'bootstrap3', - iconlib: "fontawesome4", - disable_collapse: 'true', - form_name_root: 'sa', - disable_edit_json: 'true', - disable_properties: 'true', - no_additional_properties: 'true', - schema: { + conf_editor = createJsonEditor('editor_container', + { title:'', properties: { framegrabber: schema.framegrabber, - grabberV4L2 : schema["grabberV4L2"] + grabberV4L2 : schema.grabberV4L2 } - } - }); - + }); + $('#editor_container .well').css("background-color","white"); $('#editor_container .well').css("border","none"); $('#editor_container .well').css("box-shadow","none"); @@ -58,8 +28,7 @@ $(document).ready( function() { document.getElementById('btn_submit').addEventListener('click',function() { // Get the value from the editor - console.log(grabber_conf_editor.getValue()); + console.log(conf_editor.getValue()); }); -// $("[type='checkbox']").bootstrapSwitch(); }); diff --git a/assets/webconfig/js/content_index.js b/assets/webconfig/js/content_index.js index 6d14d88a..926786e0 100644 --- a/assets/webconfig/js/content_index.js +++ b/assets/webconfig/js/content_index.js @@ -9,9 +9,11 @@ $(document).ready( function() { bindNavToContent("#load_support","support",false); bindNavToContent("#load_confKodi","kodiconf",false); bindNavToContent("#load_update","update",false); - bindNavToContent("#load_confGeneral","generalconf",false); + bindNavToContent("#load_confEffects","effects",false); bindNavToContent("#load_confLeds","leds",false); bindNavToContent("#load_confGrabber","grabber",false); + bindNavToContent("#load_confColors","colors",false); + bindNavToContent("#load_confNetwork","network",false); //Change all Checkboxes to Switches diff --git a/assets/webconfig/js/content_kodi.js b/assets/webconfig/js/content_kodi.js index 8d1c8b69..aa3ce414 100644 --- a/assets/webconfig/js/content_kodi.js +++ b/assets/webconfig/js/content_kodi.js @@ -1 +1,32 @@ - + +var conf_editor = null; +$(hyperion).one("cmd-config-getschema", function(event) { + parsedConfSchemaJSON = event.response.result; + schema = parsedConfSchemaJSON.properties; + + conf_editor = createJsonEditor('editor_container', + { + title:'', + properties: { + kodiVideoChecker: schema.kodiVideoChecker, + } + }); + + $('#editor_container .well').css("background-color","white"); + $('#editor_container .well').css("border","none"); + $('#editor_container .well').css("box-shadow","none"); + $('#editor_container .btn').addClass("btn-primary"); + $('#editor_container h3').remove(); + +}); + + +$(document).ready( function() { + requestServerConfigSchema(); + + document.getElementById('btn_submit').addEventListener('click',function() { + // Get the value from the editor + console.log(conf_editor.getValue()); + }); +}); + diff --git a/assets/webconfig/js/content_leds.js b/assets/webconfig/js/content_leds.js index 24bb7557..55582175 100644 --- a/assets/webconfig/js/content_leds.js +++ b/assets/webconfig/js/content_leds.js @@ -138,27 +138,15 @@ $(document).ready(function() { generalOptions = parsedConfSchemaJSON.properties.device; specificOptions = parsedConfSchemaJSON.properties.alldevices[$(this).val()]; //$('#ledDeviceOptions').html(JSON.stringify(generalOptions)+"
    "+JSON.stringify(specificOptions)); - $('#editor_container').off(); - $('#editor_container').html(""); - var element = document.getElementById('editor_container'); - - grabber_conf_editor = new JSONEditor(element,{ - theme: 'bootstrap3', - iconlib: "fontawesome4", - disable_collapse: 'true', - form_name_root: 'sa', - disable_edit_json: 'true', - disable_properties: 'true', - no_additional_properties: 'true', - schema: { + grabber_conf_editor = createJsonEditor('editor_container', + { title:' ', properties: { generalOptions : generalOptions, specificOptions : specificOptions, - } } }); - + values_general = {}; values_specific = {}; isCurrentDevice = (server.info.ledDevices.active == $(this).val()); diff --git a/assets/webconfig/js/content_network.js b/assets/webconfig/js/content_network.js new file mode 100644 index 00000000..e8b72d95 --- /dev/null +++ b/assets/webconfig/js/content_network.js @@ -0,0 +1,36 @@ + +var conf_editor = null; +$(hyperion).one("cmd-config-getschema", function(event) { + parsedConfSchemaJSON = event.response.result; + schema = parsedConfSchemaJSON.properties; + + conf_editor = createJsonEditor('editor_container', + { + title:'', + properties: { + jsonServer : schema.jsonServer, + protoServer : schema.protoServer, + boblightServer : schema.boblightServer, + udpListener : schema.udpListener, + forwarder : schema.forwarder, + } + }); + + $('#editor_container .well').css("background-color","white"); + $('#editor_container .well').css("border","none"); + $('#editor_container .well').css("box-shadow","none"); + $('#editor_container .btn').addClass("btn-primary"); + $('#editor_container h3').first().remove(); + +}); + + +$(document).ready( function() { + requestServerConfigSchema(); + + document.getElementById('btn_submit').addEventListener('click',function() { + // Get the value from the editor + console.log(conf_editor.getValue()); + }); +}); + diff --git a/assets/webconfig/js/ui_utils.js b/assets/webconfig/js/ui_utils.js index 0f060e43..533c7052 100644 --- a/assets/webconfig/js/ui_utils.js +++ b/assets/webconfig/js/ui_utils.js @@ -54,11 +54,34 @@ function showErrorDialog(header,message) $('#error_dialog').modal('show'); } -function isJsonString(str) { - try { +function isJsonString(str) +{ + try + { JSON.parse(str); - } catch (e) { + } + catch (e) + { return e; } return ""; } + + +function createJsonEditor(container,schema) +{ + $('#'+container).off(); + $('#'+container).html(""); + + return new JSONEditor(document.getElementById(container), + { + theme: 'bootstrap3', + iconlib: "fontawesome4", + disable_collapse: 'true', + form_name_root: 'sa', + disable_edit_json: 'true', + disable_properties: 'true', + no_additional_properties: 'true', + schema: schema + }); +} diff --git a/libsrc/hyperion/hyperion.schema.json b/libsrc/hyperion/hyperion.schema.json index 195bc739..1f8ab9ca 100644 --- a/libsrc/hyperion/hyperion.schema.json +++ b/libsrc/hyperion/hyperion.schema.json @@ -908,12 +908,14 @@ "json" : { "type" : "array", + "title" : "List of JSON clients", "required" : true, "propertyOrder" : 2 }, "proto" : { "type" : "array", + "title" : "List of PROTO clients", "required" : true, "propertyOrder" : 3 }