forms: horizontal layout and unit support (#245)

* update

* sync

[skip ci]

* always required

[skip ci]

* append support

* update schemas

[skip ci]

* typo

[skip ci]

* adjustment

* update

[skip ci]

* sync

[skip ci]

* slightly smaller logo

[skip ci]

* also for checkboxes

[skip ci]

* new connection lost page

[skip ci]

* update con_lost page

[skip ci]

* lost change

[skip ci]

* fix center position

[skip ci]

assets/webconfig/content/connection_lost.html

@@ -1,15 +1,22 @@
 <div id="wrapper">
-	<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom:0">
+	<div class="container" style="margin:20px auto;">
-		<div class="navbar-header">
+		<center>
-			<a class="navbar-brand" href="/"><img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!" height="55"></a>
+			<div class="logoimg" style="width:234px;height:80px;"></div>
-		</div>
+			<div>
-	</nav>
+				<h2>Lost connection to Hyperion service!<h1>
-
+				<hr>
-	<div class="container" style="margin-top:50px">
+				<h4>Possible reasons:</h4>
-		<div class="panel panel-danger" style="box-shadow: 10px 10px 5px #BBBBBB;">
+				<p>1. Hyperion restarts</p>
-			<div class="panel-heading"><i class="fa fa-exclamation-triangle"></i> Connection to Hyperion Service lost!</div>
+				<p>2. You perform an update</p>
-			<div class="panel-body"><a href="/">reconnect</a></div>
+				<p>3. An older browser session</p>
+				<p>3. Hyperion isn't running</p>
+				<hr>
+				<i class="fa fa-refresh fa-spin" style="font-size:50px"></i>
+				<h4>This page will be automatically refreshed.</h4>
+				<h4>We reconnect again after Hyperion is available.</h4>
+				<a href="/">If not, click me</a>
 			</div>
+		</center>
 	</div>
 </div>
 

assets/webconfig/css/hyperion.css

@@ -49,9 +49,21 @@ table.borderless td,table.borderless th{border: none !important;}
 .introd{padding-left:14px;border-left:5px solid #0088cc;}
 .introd h4{line-height:25px;}
 
-.overlay {
+/*backported bootstrap 4 forms-label alignment*/
+.col-form-label {
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+    margin-bottom: 0;
+}
+
+.logoimg{
 	background-image: url('/img/hyperion/hyperionlogo.png');
 	background-repeat: no-repeat;
+}
+
+.overlay {
+	background-image: url('/img/hyperion/hyperionwhitelogo.png');
+	background-repeat: no-repeat;
 	background-position: center center;
 	background-color: rgba(1, 1, 1, 0.7);
 	position: fixed;

assets/webconfig/js/lib/jsoneditor.js

@@ -1938,6 +1938,7 @@ JSONEditor.defaults.editors.string = JSONEditor.AbstractEditor.extend({
     var self = this, i;
     if(!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle());
     if(this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description);
+	if(this.schema.append) this.append = this.theme.getFormInputAppend(this.schema.append);
 
     this.format = this.schema.format;
     if(!this.format && this.schema.media && this.schema.media.type) {
@@ -2122,7 +2123,7 @@ JSONEditor.defaults.editors.string = JSONEditor.AbstractEditor.extend({
 
     if(this.format) this.input.setAttribute('data-schemaformat',this.format);
 
-    this.control = this.theme.getFormControl(this.label, this.input, this.description);
+    this.control = this.theme.getFormControl(this.label, this.input, this.description, this.append);
     this.container.appendChild(this.control);
 
     // Any special formatting that needs to happen after the input is added to the dom
@@ -2717,6 +2718,12 @@ JSONEditor.defaults.editors.object = JSONEditor.AbstractEditor.extend({
         this.container.appendChild(this.description);
       }
 	  
+	  // Appends
+      if(this.schema.append) {
+        this.append = this.theme.getAppend(this.schema.append);
+        this.container.appendChild(this.append);
+      }
+
       // Validation error placeholder area
       this.error_holder = document.createElement('div');
       this.container.appendChild(this.error_holder);
@@ -3313,6 +3320,10 @@ JSONEditor.defaults.editors.array = JSONEditor.AbstractEditor.extend({
       if(this.schema.description) {
         this.description = this.theme.getDescription(this.schema.description);
         this.container.appendChild(this.description);
+      }
+	  if(this.schema.append) {
+        this.append = this.theme.getAppend(this.schema.append);
+        this.container.appendChild(this.append);
       }
       this.error_holder = document.createElement('div');
       this.container.appendChild(this.error_holder);
@@ -3988,6 +3999,10 @@ JSONEditor.defaults.editors.table = JSONEditor.defaults.editors.array.extend({
       if(this.schema.description) {
         this.description = this.theme.getDescription(this.schema.description);
         this.container.appendChild(this.description);
+      }
+	 if(this.schema.append) {
+        this.append = this.theme.getAppend(this.schema.append);
+        this.container.appendChild(this.append);
       }
       this.panel = this.theme.getIndentedPanel();
       this.container.appendChild(this.panel);
@@ -4974,6 +4989,7 @@ JSONEditor.defaults.editors.select = JSONEditor.AbstractEditor.extend({
     var self = this;
     if(!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle());
     if(this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description);
+	if(this.schema.append) this.append = this.theme.getFormInputAppend(this.schema.append);
 	
     if(this.options.compact) this.container.className += ' compact';
 
@@ -5320,6 +5336,7 @@ JSONEditor.defaults.editors.selectize = JSONEditor.AbstractEditor.extend({
     var self = this;
     if(!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle());
     if(this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description);
+	if(this.schema.append) this.append = this.theme.getFormInputAppend(this.schema.append);
 
     if(this.options.compact) this.container.className += ' compact';
 
@@ -5547,6 +5564,7 @@ JSONEditor.defaults.editors.multiselect = JSONEditor.AbstractEditor.extend({
     var self = this, i;
     if(!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle());
     if(this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description);
+	if(this.schema.append) this.append = this.theme.getFormInputAppend(this.schema.append);
 
     if((!this.schema.format && this.option_keys.length < 8) || this.schema.format === "checkbox") {
       this.input_type = 'checkboxes';
@@ -6025,6 +6043,9 @@ JSONEditor.defaults.editors.arraySelectize = JSONEditor.AbstractEditor.extend({
     if(this.schema.description) {
       this.description = this.theme.getDescription(this.schema.description);
     }
+	if(this.schema.append) {
+      this.append = this.theme.getAppend(this.schema.append);
+    }
 
     this.input = document.createElement('select');
     this.input.setAttribute('multiple', 'multiple');
@@ -6307,6 +6328,11 @@ JSONEditor.AbstractTheme = Class.extend({
     el.innerHTML = text;
     return el;
   },
+  getAppend: function(text) {
+    var el = document.createElement('p');
+    el.innerHTML = text;
+    return el;
+  },
   getCheckboxDescription: function(text) {
     return this.getDescription(text);
   },
@@ -6518,7 +6544,13 @@ JSONEditor.defaults.themes.bootstrap2 = JSONEditor.AbstractTheme.extend({
     el.textContent = text;
     return el;
   },
-  getFormControl: function(label, input, description) {
+  getFormInputAppend: function(text) {
+    var el = document.createElement('div');
+    el.className = 'input-group-addon';
+    el.textContent = text;
+    return el;
+  },
+  getFormControl: function(label, input, description, append) {
     var ret = document.createElement('div');
     ret.className = 'control-group';
 
@@ -6676,26 +6708,35 @@ JSONEditor.defaults.themes.bootstrap3 = JSONEditor.AbstractTheme.extend({
     }
     return el;
   },
-  getFormControl: function(label, input, description) {
+  getFormControl: function(label, input, description, append) {
     var group = document.createElement('div');
+	var subgroup = document.createElement('div');
 
-    if(label && input.type === 'checkbox') {
+	if (append){
-      group.className += ' checkbox';
+		group.className += ' form-group';
-      label.appendChild(input);
+		if(label) {
-      label.style.fontSize = '14px';
+			label.className += ' col-form-label col-md-2';
-      group.style.marginTop = '0';
 			group.appendChild(label);
-      input.style.position = 'relative';
+		}
-      input.style.cssFloat = 'left';
+		group.appendChild(subgroup);
+		subgroup.className += 'col-md-10 input-group';
+		subgroup.appendChild(input);
+		subgroup.appendChild(append);
 	}
     else {
       group.className += ' form-group';
       if(label) {
-        label.className += ' control-label';
+        label.className += ' col-form-label col-md-2';
         group.appendChild(label);
       }
-      group.appendChild(input);
+		group.appendChild(subgroup);
+	      subgroup.className += ' input-group col-md-10';
+	      subgroup.appendChild(input);
+		if (input.type === 'checkbox'){
+			label.style.fontWeight = 'bold';
 		}
+	  }
+    
 
     if(description) group.appendChild(description);
 
@@ -6713,6 +6754,12 @@ JSONEditor.defaults.themes.bootstrap3 = JSONEditor.AbstractTheme.extend({
     el.innerHTML = text;
     return el;
   },
+  getFormInputAppend: function(text) {
+    var el = document.createElement('div');
+    el.className = 'input-group-addon';
+    el.textContent = text;
+    return el;
+  },
   getHeaderButtonHolder: function() {
     var el = this.getButtonHolder();
     el.style.marginLeft = '10px';

libsrc/hyperion/hyperion.schema.json

@@ -30,6 +30,7 @@
 				"name" :
 				{
 					"type" : "string",
+					"title" : "Configuration name",
 					"required" : true,
 					"propertyOrder" : 1
 				},
@@ -48,6 +49,7 @@
 				"colorOrder" :
 				{
 					"type" : "string",
+					"title" : "RGB byte order",
 					"enum" : ["rgb", "bgr", "rbg", "brg", "gbr", "grb"],
 					"propertyOrder" : 3
 				}
@@ -397,6 +399,7 @@
 					"minimum" : 25,
 					"maximum": 600,
 					"default" : 200,
+					"append" : "ms",
 					"propertyOrder" : 3
 				},
 				"updateFrequency" :
@@ -406,6 +409,7 @@
 					"minimum" : 1.000,
 					"maximum" : 100.000,
 					"default" : 25.000,
+					"append" : "Hz",
 					"propertyOrder" : 4
 				},
 				"updateDelay" :
@@ -415,6 +419,7 @@
 					"minimum" : 0,
 					"maximum": 2048,
 					"default" : 0,
+					"append" : "ms",
 					"propertyOrder" : 5
 				},
 				"continuousOutput" :
@@ -430,9 +435,11 @@
 		"grabber-v4l2" :
 		{
 			"type":"array",
+			"title" : "USB Grabber",
 			"items":
 			{
 				"type" : "object",
+				"title" : "USB Grabber",
 				"properties" :
 				{
 					"enable" :
@@ -469,6 +476,7 @@
 						"type" : "integer",
 						"title" : "Width",
 						"default" : -1,
+						"append" : "Pixel",
 						"propertyOrder" : 5
 					},
 					"height" :
@@ -476,6 +484,7 @@
 						"type" : "integer",
 						"title" : "Height",
 						"default" : -1,
+						"append" : "Pixel",
 						"propertyOrder" : 6
 					},
 					"frameDecimation" :
@@ -520,6 +529,7 @@
 						"title" : "Crop left",
 						"minimum" : 0,
 						"default" : 0,
+						"append" : "Pixel",
 						"propertyOrder" : 12
 					},
 					"cropRight" :
@@ -528,6 +538,7 @@
 						"title" : "Crop right",
 						"minimum" : 0,
 						"default" : 0,
+						"append" : "Pixel",
 						"propertyOrder" : 13
 					},
 					"cropTop" :
@@ -536,6 +547,7 @@
 						"title" : "Crop top",
 						"minimum" : 0,
 						"default" : 0,
+						"append" : "Pixel",
 						"propertyOrder" : 14
 					},
 					"cropBottom" :
@@ -544,6 +556,7 @@
 						"title" : "Crop bottom",
 						"minimum" : 0,
 						"default" : 0,
+						"append" : "Pixel",
 						"propertyOrder" : 15
 					},
 					"redSignalThreshold" :
@@ -553,6 +566,7 @@
 						"minimum" : 0.0,
 						"maximum" : 1.0,
 						"default" : 0.1,
+						"append" : "%",
 						"propertyOrder" : 16
 					},
 					"greenSignalThreshold" :
@@ -562,6 +576,7 @@
 						"minimum" : 0.0,
 						"maximum" : 1.0,
 						"default" : 0.1,
+						"append" : "%",
 						"propertyOrder" : 17
 					},
 					"blueSignalThreshold" :
@@ -571,6 +586,7 @@
 						"minimum" : 0.0,
 						"maximum" : 1.0,
 						"default" : 0.1,
+						"append" : "%",
 						"propertyOrder" : 18
 					}
 				},
@@ -601,20 +617,23 @@
 				{
 					"type" : "integer",
 					"title" : "Width",
-					"default" : 96
+					"default" : 96,
+					"append" : "Pixel"
 				},
 				"height" :
 				{
 					"type" : "integer",
 					"title" : "Height",
-					"default" : 96
+					"default" : 96,
+					"append" : "Pixel"
 				},
 				"frequency_Hz" :
 				{
 					"type" : "integer",
 					"title" : "Frequency",
 					"minimum" : 0,
-					"default" : 10
+					"default" : 10,
+					"append" : "Hz"
 				},
 				"priority" :
 				{
@@ -628,28 +647,32 @@
 					"type" : "integer",
 					"title" : "Crop left",
 					"minimum" : 0,
-					"default" : 0
+					"default" : 0,
+					"append" : "Pixel"
 				},
 				"cropRight" :
 				{
 					"type" : "integer",
 					"title" : "Crop right",
 					"minimum" : 0,
-					"default" : 0
+					"default" : 0,
+					"append" : "Pixel"
 				},
 				"cropTop" :
 				{
 					"type" : "integer",
 					"title" : "Crop top",
 					"minimum" : 0,
-					"default" : 0
+					"default" : 0,
+					"append" : "Pixel"
 				},
 				"cropBottom" :
 				{
 					"type" : "integer",
 					"title" : "Crop bottom",
 					"minimum" : 0,
-					"default" : 0
+					"default" : 0,
+					"append" : "Pixel"
 				},
 				"useXGetImage" :
 				{
@@ -707,6 +730,7 @@
 					"minimum" : 0.0,
 					"maximum" : 1.0,
 					"default" : 0.05,
+					"append" : "%",
 					"propertyOrder" : 2
 				},
 				"unknownFrameCnt"    :

libsrc/leddevice/schemas/schema-adalight.json

@@ -17,6 +17,7 @@
 			"type": "integer",
 			"title":"Delay after connect",
 			"default": 250,
+			"append" : "ms",
 			"propertyOrder" : 3
 		}
 	},

libsrc/leddevice/schemas/schema-adalightapa102.json

@@ -17,6 +17,7 @@
 			"type": "integer",
 			"title":"Delay after connect",
 			"default": 250,
+			"append" : "ms",
 			"propertyOrder" : 3
 		}
 	},

libsrc/leddevice/schemas/schema-atmo.json

@@ -17,6 +17,7 @@
 			"type": "integer",
 			"title":"Delay after connect",
 			"default": 250,
+			"append" : "ms",
 			"propertyOrder" : 3
 		}
 	},

libsrc/leddevice/schemas/schema-philipshue.json

@@ -23,8 +23,9 @@
 		},
 		"transitiontime": {
 			"type": "integer",
-			"title":"Transistion time (x100ms)",
+			"title":"Transistion time",
 			"default" : 1,
+			"append" : "x100ms",
 			"propertyOrder" : 4
 		},
 		"switchOffOnBlack": {