Example JSON Form Example with General setting (#185)

I have created a new Category "General" with several Settings for
Hyperion.
For now the Submit Button only console.log's the values.

Known Bug: For some reason it seems to do not load the bootstrap
correctly or maybe the Lib isn't compatible with the newest version of
bootstrap.

assets/webconfig/effects.html

@@ -16,39 +16,39 @@
 <script>
 
 	$(document).ready( function() {
-			
+
 		webSocket = new WebSocket('ws://'+document.location.hostname+':19444');
 		var serverInfo;
-		
+
 		webSocket.onerror = function(event) {
 			alert(event.data);
 		};
-		
+
-		
+
 		webSocket.onopen = function(event) {
 			webSocket.send('{"command":"serverinfo"}');
 		};
-		
+
 		webSocket.onmessage = function(response){
 			responseJSON = JSON.parse(response.data );
 			//console.log(response.data);
 			for(i = 0; i < responseJSON.info.effects.length; i++) {
 				//console.log(responseJSON.info.effects[i].name);
 				var effectName = responseJSON.info.effects[i].name;
-				
+
 				$('#buttondiv').append('<button type="button" class="btn btn-success" onclick="playEffect(\''+effectName+'\')"><i class="fa fa-play"></i></button> '+effectName+'<br />');
 			}
 		}
-		
+
 		$("#effect_stop").on("click", function() {
-			webSocket.send('{"command":"clear", "priority":1}');			
+			webSocket.send('{"command":"clear", "priority":1}');
 		});
 	});
-	
+
-	
+
 	function playEffect(effectName) {
 		console.log(effectName);
 		webSocket.send('{"command":"effect","effect":{"name":"'+effectName+'"},"priority":1}');
-	}	
+	}
 
-</script>
+</script>

assets/webconfig/generalconf.html

@@ -0,0 +1,75 @@
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-lg-12">
+            <h1 class="page-header" lang="en" data-lang-token="main_menu_general_conf_token">General</h1>
+			<div class="introd">
+				<h4 lang="en" data-lang-token="remote_general_conf_intro">You can edit the general configuration here.</h4>
+			</div>
+			<hr>
+			<div class="col-lg-12">
+        <form></form>
+      </div>
+		</div>
+	</div>
+</div>
+
+
+<script type="text/javascript">
+
+    </script>
+<script>
+
+	$(document).ready( function() {
+
+		webSocket = new WebSocket('ws://'+document.location.hostname+':19444');
+		var serverInfo;
+
+		webSocket.onerror = function(event) {
+			alert(event.data);
+		};
+
+
+		webSocket.onopen = function(event) {
+			webSocket.send('{"command":"config","subcommand":"getschema"}');
+		};
+
+		webSocket.onmessage = function(response){
+			logger = JSON.parse(response.data).result.properties.logger;
+      jsonServer = JSON.parse(response.data).result.properties.jsonServer;
+      protoServer = JSON.parse(response.data).result.properties.protoServer;
+      boblightServer = JSON.parse(response.data).result.properties.boblightServer;
+      udpListener = JSON.parse(response.data).result.properties.udpListener;
+      webConfig = JSON.parse(response.data).result.properties.webConfig;
+
+
+      $('form').jsonForm({
+        schema: {
+          logger,
+          jsonServer,
+          protoServer,
+          boblightServer,
+          udpListener,
+          webConfig,
+
+        },
+        onSubmit: function (errors, values) {
+          if (errors) {
+            console.log(errors);
+          }
+          else {
+            console.log(values);
+          }
+        }
+      });
+
+
+
+
+
+
+		}
+
+	});
+
+
+</script>

assets/webconfig/index.html

@@ -15,6 +15,10 @@
 	<!-- jQuery -->
     <script src="js/jquery.min.js"></script>
 
+  <!-- JSONForm -->
+    <script src="js/underscore.js"></script>
+    <script src="js/jsonform.js"></script>
+
 	<!--Language Support -->
 	<script src="js/jquery-lang.js" charset="utf-8" type="text/javascript"></script>
 	<script src="js/js.cookie.js"></script>
@@ -41,7 +45,7 @@
 
 
     <!-- Bootstrap Core CSS -->
-    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/bootstrap.css" rel="stylesheet">
 
 	<!-- Flags -->
 	<link href="css/flag-icon.min.css" rel="stylesheet">
@@ -280,6 +284,9 @@
 						            <li>
                             <a class="inactive" href="#"><i class="fa fa-cog fa-fw"></i><span lang="en" data-lang-token="main_menu_configuration_token">Configuration</span><span class="fa arrow"></span></a>
                             <ul class="nav nav-second-level">
+                                <li>
+                                    <a class="inactive" href="#" id="load_confGeneral"><i class="fa fa-play-circle-o fa-fw"></i><span lang="en" data-lang-token="main_menu_general_conf_token">General</span></a>
+                                </li>
                                 <li>
 									                  <a class="inactive" href="#" id="load_confKodi"><i class="fa fa-play-circle-o fa-fw"></i><span lang="en" data-lang-token="main_menu_kodiwatch_token">Kodi Watch</span></a>
 								                </li>
@@ -425,6 +432,10 @@
 			$("#load_confKodi").on("click", function() {
 				$("#page-wrapper").load("kodiconf.html");
 			});
+
+      $("#load_confGeneral").on("click", function() {
+				$("#page-wrapper").load("generalconf.html");
+			});
     });
 		$(function(){
 			var sidebar = $('#side-menu');  // cache sidebar to a variable for performance

assets/webconfig/lang/de.json

@@ -9,7 +9,7 @@
 		"general_country_nl" : "Niederlande",
 		"general_speech_de" : "Deutsch",
 		"general_speech_en" : "Englisch",
-		"dashboard_label_intro" : "Das Dashboard zeigt dir Informationen zum Systemstatus, ob Updates verfügbar sind, den Komponenten Status sowie die letzten Blog-Posts vom Hyperion Team",
+		"dashboard_label_intro" : "Das Dashboard zeigt dir Informationen zum Systemstatus, ob Updates verfügbar sind, den Komponentenstatus sowie die letzten Blog-Posts vom Hyperion Team.",
 		"dashboard_label_infobox_title" : "Informationen",
 		"dashboard_label_infobox_currenthyp" : "Deine Hyperion Version:",
 		"dashboard_label_infobox_latesthyp" : "Aktuellste Hyperion Version:",
@@ -56,7 +56,9 @@
 		"support_label_wikititle" : "Wiki",
 		"support_label_wikitext" : "Von A bis Z - Alles wissenwerte zu Hyperion",
 		"support_label_forumtitle" : "Forum",
-		"support_label_forumtext" : "Diskussion und Hilfestellung von der Community"
+		"support_label_forumtext" : "Diskussion und Hilfestellung von der Community",
+		"main_menu_general_conf_token":"Allgemein",
+		"remote_general_conf_intro":"Hier kannst du allgemeine Einstellungen von Hyperion vornehmen."
 	},
 	"regex": [
 		["^Something at start of text", ""],

libsrc/hyperion/hyperion.schema.json

@@ -6,11 +6,13 @@
 		"logger" :
 		{
 			"type" : "object",
+			"title" : "Logging",
 			"properties" :
 			{
 				"level" :
-				{ 
+				{
-					"enum" : ["silent", "warn", "verbose", "debug"]
+					"enum" : ["silent", "warn", "verbose", "debug"],
+					"title" : "Log-Level"
 				}
 			},
 			"additionalProperties" : false
@@ -671,7 +673,7 @@
 				}
 			},
 			"additionalProperties" : false
-		},		
+		},
 		"forwarder" :
 		{
 			"type" : "object",
@@ -700,12 +702,14 @@
 		{
 			"type" : "object",
 			"required" : true,
+			"title" : "JSON Server",
 			"properties" :
 			{
 				"port" :
 				{
 					"type" : "integer",
 					"required" : true,
+					"title" : "Port",
 					"minimum" : 0,
 					"maximum" : 65535
 				}
@@ -716,12 +720,14 @@
 		{
 			"type" : "object",
 			"required" : true,
+			"title" : "Proto Server",
 			"properties" :
 			{
 				"port" :
 				{
 					"type" : "integer",
 					"required" : true,
+					"title" : "Port",
 					"minimum" : 0,
 					"maximum" : 65535
 				}
@@ -731,22 +737,26 @@
 		"boblightServer" :
 		{
 			"type" : "object",
+			"title" : "Boblight Server",
 			"properties" :
 			{
 				"enable" :
 				{
-					"type" : "boolean"
+					"type" : "boolean",
+					"title" : "Activate"
 				},
 				"port" :
 				{
 					"type" : "integer",
 					"required" : true,
+					"title" : "Port",
 					"minimum" : 0,
 					"maximum" : 65535
 				},
 				"priority" :
 				{
-					"type" : "integer"
+					"type" : "integer",
+					"title" : "Priority"
 				}
 			},
 			"additionalProperties" : false
@@ -754,34 +764,41 @@
 		"udpListener" :
 		{
 			"type" : "object",
+			"title" : "UDP Listener",
 			"properties" :
 			{
 				"enable" :
 				{
-					"type" : "boolean"
+					"type" : "boolean",
+					"title" : "Activate"
 				},
 				"address" :
 				{
 					"type" : "string",
+					"title" : "Address",
 					"required" : true
 				},
 				"port" :
 				{
 					"type" : "integer",
+					"title" : "Port",
 					"minimum" : 0,
 					"maximum" : 65535
 				},
 				"priority" :
 				{
-					"type" : "integer"
+					"type" : "integer",
+					"title" : "Priority"
 				},
 				"timeout" :
 				{
-					"type" : "integer"
+					"type" : "integer",
+					"title" : "Timeout"
 				},
 				"shared" :
 				{
-					"type" : "boolean"
+					"type" : "boolean",
+					"title" : "Shared"
 				}
 			},
 			"additionalProperties" : false
@@ -789,22 +806,26 @@
 		"webConfig" :
 		{
 			"type" : "object",
+			"title" : "WebUI - DANGER CHANGES CAN MAKE THE WEBUI UNREACHABLE!",
 			"required" : true,
 			"properties" :
 			{
 				"enable" :
 				{
 					"type" : "boolean",
+					"title" : "Activate",
 					"required" : true
 				},
 				"document_root" :
 				{
 					"type" : "string",
+					"title" : "Document Root",
 					"required" : true
 				},
 				"port" :
 				{
 					"type" : "integer",
+					"description" : "Port",
 					"required" : true
 				}
 			},