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]
This commit is contained in:
brindosch 2016-09-17 23:37:44 +02:00 committed by redPanther
parent 70eed516c4
commit f349f4b0ee
9 changed files with 130 additions and 36 deletions

View File

@ -1,15 +1,22 @@
<div id="wrapper"> <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>
</div> <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>
</div> </div>

View File

@ -49,9 +49,21 @@ table.borderless td,table.borderless th{border: none !important;}
.introd{padding-left:14px;border-left:5px solid #0088cc;} .introd{padding-left:14px;border-left:5px solid #0088cc;}
.introd h4{line-height:25px;} .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-image: url('/img/hyperion/hyperionlogo.png');
background-repeat: no-repeat; background-repeat: no-repeat;
}
.overlay {
background-image: url('/img/hyperion/hyperionwhitelogo.png');
background-repeat: no-repeat;
background-position: center center; background-position: center center;
background-color: rgba(1, 1, 1, 0.7); background-color: rgba(1, 1, 1, 0.7);
position: fixed; position: fixed;

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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