Intermediate version not finished, implement dialogs for configurations instead of json_editor usage
This commit is contained in:
parent
59b24a92a1
commit
22c1f060be
|
|
@ -11,8 +11,12 @@
|
||||||
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#^2.0.0",
|
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#^2.0.0",
|
||||||
"iron-media-query": "PolymerElements/iron-media-query#^2.0.0",
|
"iron-media-query": "PolymerElements/iron-media-query#^2.0.0",
|
||||||
"iron-pages": "PolymerElements/iron-pages#^2.0.0",
|
"iron-pages": "PolymerElements/iron-pages#^2.0.0",
|
||||||
|
"iron-label": "PolymerElements/iron-label#^2.0.0",
|
||||||
"iron-selector": "PolymerElements/iron-selector#^2.0.0",
|
"iron-selector": "PolymerElements/iron-selector#^2.0.0",
|
||||||
"paper-icon-button": "PolymerElements/paper-icon-button#^2.0.0",
|
"paper-icon-button": "PolymerElements/paper-icon-button#^2.0.0",
|
||||||
|
"paper-checkbox": "PolymerElements/paper-checkbox#^2.0.1",
|
||||||
|
"paper-input": "PolymerElements/paper-input#^2.0.1",
|
||||||
|
"paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^2.0.1",
|
||||||
"polymer": "Polymer/polymer#^2.0.0",
|
"polymer": "Polymer/polymer#^2.0.0",
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
|
||||||
"iron-ajax": "^2.0.6",
|
"iron-ajax": "^2.0.6",
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,11 @@
|
||||||
"shell": "src/my-app.html",
|
"shell": "src/my-app.html",
|
||||||
"fragments": [
|
"fragments": [
|
||||||
"src/status-view.html",
|
"src/status-view.html",
|
||||||
|
"src/settings-view.html",
|
||||||
"src/colors-view.html",
|
"src/colors-view.html",
|
||||||
|
"src/lamps-view.html",
|
||||||
"src/schedule-view.html",
|
"src/schedule-view.html",
|
||||||
|
"src/json-view.html",
|
||||||
"src/view404-view.html"
|
"src/view404-view.html"
|
||||||
],
|
],
|
||||||
"sources": [
|
"sources": [
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
|
|
||||||
<link rel="import" href="../bower_components/polymer/polymer-element.html">
|
<link rel="import" href="../bower_components/polymer/polymer-element.html">
|
||||||
<link rel="import" href="shared-styles.html">
|
<link rel="import" href="shared-styles.html">
|
||||||
|
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
|
||||||
|
<link rel="import" href="../bower_components/paper-input/paper-input.html">
|
||||||
|
<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
|
||||||
|
<link rel="import" href="../bower_components/paper-button/paper-button.html">
|
||||||
|
<link rel="import" href="../bower_components/iron-input/iron-input.html">
|
||||||
|
<link rel="import" href="../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
|
||||||
|
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html">
|
||||||
|
|
||||||
<dom-module id="colors-view">
|
<dom-module id="colors-view">
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -19,65 +26,71 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
input[readonly] {
|
||||||
|
border: 2px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
paper-checkbox {
|
||||||
|
--primary-color: #ff5722;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<!--<iron-ajax auto url="https://demo.vaadin.com/demo-data/1.0/people?count=200" handle-as="json" last-response="{{users}}"></iron-ajax>
|
||||||
|
-->
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="circle">2</div>
|
<div class="circle">3</div>
|
||||||
<h1>Color Definition</h1>
|
<h1>Edit Color Definition</h1>
|
||||||
<p>Edit the color definitions here:</p>
|
<p>
|
||||||
<p></p>
|
<paper-checkbox checked="{{editing}}">Enable Editing</paper-checkbox>
|
||||||
<div id="editor_holder" name="editor_holder"></div>
|
<vaadin-grid aria-label="Color Definitions" items="[[colors]]">
|
||||||
|
<vaadin-grid-column width="50px" flex-grow="0">
|
||||||
|
<template class="header">#</template>
|
||||||
|
<template>
|
||||||
|
[[index]]
|
||||||
|
</template>
|
||||||
|
</vaadin-grid-column>
|
||||||
|
|
||||||
|
<vaadin-grid-column>
|
||||||
|
<template class="header">Color Name</template>
|
||||||
|
<template>
|
||||||
|
<input type="text" maxLength="40" placeholder="Enter color name" value="{{item.name::input}}" readonly$="[[!editing]]">
|
||||||
|
</template>
|
||||||
|
</vaadin-grid-column>
|
||||||
|
|
||||||
|
<vaadin-grid-column>
|
||||||
|
<template class="header">Color Definition</template>
|
||||||
|
<template>
|
||||||
|
<input type="color" value="{{item.color::input}}" readonly$="[[!editing]]">
|
||||||
|
</template>
|
||||||
|
</vaadin-grid-column>
|
||||||
|
</vaadin-grid>
|
||||||
|
<br />
|
||||||
|
<paper-button raised on-click="addColorsRow">Add Row</paper-button>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script src="js/jsoneditor.js"></script>
|
|
||||||
<script>
|
<script>
|
||||||
var schema = {
|
class ColorsView extends Polymer.Element {
|
||||||
"$schema": "http://json-schema.org/draft-06/schema#",
|
|
||||||
"description": "DLite color definition",
|
|
||||||
"type": "array",
|
|
||||||
"format": "table",
|
|
||||||
"uniqueItems": true,
|
|
||||||
"disable_collapse": true,
|
|
||||||
"items": {
|
|
||||||
"type": "object",
|
|
||||||
"description": "Color definition",
|
|
||||||
"properties": {
|
|
||||||
"name": {
|
|
||||||
"type": "string",
|
|
||||||
"description": "Color name used as identifier"
|
|
||||||
},
|
|
||||||
"color": {
|
|
||||||
"type": "string",
|
|
||||||
"format": "color",
|
|
||||||
"description": "Color definition"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
class MyView2 extends Polymer.Element {
|
|
||||||
static get is() { return 'colors-view'; }
|
static get is() { return 'colors-view'; }
|
||||||
ready() {
|
ready() {
|
||||||
super.ready();
|
super.ready();
|
||||||
|
}
|
||||||
var element = this.$.editor_holder;
|
static get properties() {
|
||||||
var editor;
|
return {
|
||||||
|
editing: { type: Boolean, value: false },
|
||||||
if (!element) {
|
colors: { type: Array, value: [{name: "", color: "#000000"}] }
|
||||||
alert("Could not find editor_holder element!");
|
|
||||||
} else {
|
|
||||||
editor = new JSONEditor(element, {
|
|
||||||
schema: schema,
|
|
||||||
iconlib: "fontawesome4",
|
|
||||||
disable_properties: true,
|
|
||||||
no_additional_properties: false,
|
|
||||||
disable_edit_json: true
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
addColorsRow() {
|
||||||
|
this.push('colors', {name: "", color: "#000000"});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
window.customElements.define(MyView2.is, MyView2);
|
window.customElements.define(ColorsView.is, ColorsView);
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</dom-module>
|
</dom-module>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,110 @@
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
var definitions = {
|
||||||
|
"time": {
|
||||||
|
"type": "string",
|
||||||
|
"format": "time"
|
||||||
|
},
|
||||||
|
"schedule_item": {
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"time": {
|
||||||
|
"$ref": "#/definitions/time",
|
||||||
|
// "description": "Start time, when this schedule item should fire"
|
||||||
|
},
|
||||||
|
"lamp": {
|
||||||
|
"type": "string",
|
||||||
|
"watch": {
|
||||||
|
"lamps": "lampmapping"
|
||||||
|
},
|
||||||
|
"enumSource": [{ "source": "lamps", "value": "{{item}}" }]
|
||||||
|
},
|
||||||
|
"color": {
|
||||||
|
"type": "string",
|
||||||
|
"watch": { "selectableColors": "colors" },
|
||||||
|
"enumSource" : [{ "source": "selectableColors", "value": "{{item.name}}" }]
|
||||||
|
// "description": "Name of the color to be shown; corresponds to color name in color definitions."
|
||||||
|
},
|
||||||
|
"mode": {
|
||||||
|
"type": "string",
|
||||||
|
// "description": "Dynamic behaviour / mode; allowed values are: OnOff",
|
||||||
|
"enum": ["OnOff", "Ramp", "Neon-on"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var colorsProperties = {
|
||||||
|
"description": "DLite color definition",
|
||||||
|
"type": "array",
|
||||||
|
"format": "table",
|
||||||
|
"uniqueItems": true,
|
||||||
|
"disable_collapse": true,
|
||||||
|
"items": {
|
||||||
|
"type": "object",
|
||||||
|
"description": "Color definition",
|
||||||
|
"properties": {
|
||||||
|
"name": {
|
||||||
|
"type": "string",
|
||||||
|
/*"description": "Color name used as identifier"*/
|
||||||
|
},
|
||||||
|
"color": {
|
||||||
|
"type": "string",
|
||||||
|
"format": "color",
|
||||||
|
/*"description": "Color definition"*/
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var lampmappingProperties = {
|
||||||
|
"type": "array",
|
||||||
|
"format": "table",
|
||||||
|
"description": "LED/Lamp names, used as identifier; order according to LED address",
|
||||||
|
"items": {
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var settingsProperties = {
|
||||||
|
"description": "DLite settings",
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"comment": {
|
||||||
|
"type": "string",
|
||||||
|
"format": "textarea",
|
||||||
|
"description": "Info about this schedule definition"
|
||||||
|
},
|
||||||
|
"mrclock": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Name of a MR-Clock fastclock"
|
||||||
|
},
|
||||||
|
"clock_starttime": {
|
||||||
|
"$ref": "#/definitions/time",
|
||||||
|
"description": "After boot, at which clock should this start to animate?"
|
||||||
|
},
|
||||||
|
"clock_speed": {
|
||||||
|
"type": "number",
|
||||||
|
"description": "Real time seconds for every model minute"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
var scheduleProperties = {
|
||||||
|
"description": "DLite schedule definition",
|
||||||
|
"type": "array",
|
||||||
|
"format": "table",
|
||||||
|
// "description": "The schedule definition as an array of schedule items",
|
||||||
|
"items": { "$ref": "#/definitions/schedule_item" }
|
||||||
|
};
|
||||||
|
var schema = {
|
||||||
|
"$schema": "http://json-schema.org/draft-06/schema#",
|
||||||
|
"description": "DLite Light Controller Configuration",
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"colors": colorsProperties,
|
||||||
|
"lampmapping": lampmappingProperties,
|
||||||
|
"settings": settingsProperties,
|
||||||
|
"schedule": scheduleProperties,
|
||||||
|
},
|
||||||
|
"definitions": definitions
|
||||||
|
};
|
||||||
|
window.schema = schema;
|
||||||
|
})();
|
||||||
|
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
<!--
|
||||||
|
@license
|
||||||
|
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
|
||||||
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||||
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||||
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||||
|
Code distributed by Google as part of the polymer project is also
|
||||||
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||||
|
-->
|
||||||
|
|
||||||
|
<link rel="import" href="../bower_components/polymer/polymer-element.html">
|
||||||
|
<link rel="import" href="shared-styles.html">
|
||||||
|
|
||||||
|
<script src="js/jsoneditor.js"></script>
|
||||||
|
<script src="js/schema.js"></script>
|
||||||
|
|
||||||
|
<dom-module id="json-view">
|
||||||
|
<template>
|
||||||
|
<style include="shared-styles">
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="circle">J</div>
|
||||||
|
<h1>JSON Editor</h1>
|
||||||
|
<p>You may edit all config parameters</p>
|
||||||
|
<p>
|
||||||
|
</p>
|
||||||
|
<div id="editor_holder" name="editor_holder"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
class JsonView extends Polymer.Element {
|
||||||
|
static get is() { return 'json-view'; }
|
||||||
|
ready() {
|
||||||
|
super.ready();
|
||||||
|
|
||||||
|
var element = this.$.editor_holder;
|
||||||
|
var editor;
|
||||||
|
|
||||||
|
if (!element) {
|
||||||
|
alert("Could not find editor_holder element!");
|
||||||
|
} else {
|
||||||
|
editor = new JSONEditor(element, {
|
||||||
|
schema: window.schema,
|
||||||
|
iconlib: "fontawesome4",
|
||||||
|
disable_properties: true,
|
||||||
|
no_additional_properties: false,
|
||||||
|
disable_edit_json: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
editing: { type: Boolean, value: false },
|
||||||
|
comment: { type: String, value: "" },
|
||||||
|
clockStartTime: { type: Time, value: "00:00" },
|
||||||
|
clockSpeed: {type: Number, value: 4 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
|
||||||
|
window.customElements.define(JsonView.is, JsonView);
|
||||||
|
</script>
|
||||||
|
</dom-module>
|
||||||
|
|
@ -0,0 +1,97 @@
|
||||||
|
<!--
|
||||||
|
@license
|
||||||
|
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
|
||||||
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||||
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||||
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||||
|
Code distributed by Google as part of the polymer project is also
|
||||||
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||||
|
-->
|
||||||
|
|
||||||
|
<link rel="import" href="../bower_components/polymer/polymer-element.html">
|
||||||
|
<link rel="import" href="shared-styles.html">
|
||||||
|
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
|
||||||
|
<link rel="import" href="../bower_components/paper-input/paper-input.html">
|
||||||
|
<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
|
||||||
|
<link rel="import" href="../bower_components/paper-button/paper-button.html">
|
||||||
|
<link rel="import" href="../bower_components/iron-input/iron-input.html">
|
||||||
|
<link rel="import" href="../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
|
||||||
|
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html">
|
||||||
|
|
||||||
|
<dom-module id="lamps-view">
|
||||||
|
<template>
|
||||||
|
<style include="shared-styles">
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
paper-checkbox {
|
||||||
|
--primary-color: #ff5722;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="circle">4</div>
|
||||||
|
<h1>Lamp/LED Definition</h1>
|
||||||
|
<p>Edit the LED/lamp definitions here, define the order of the LEDs in the chain and give each node a unique name:</p>
|
||||||
|
<p>
|
||||||
|
<iron-input bind-value="{{editing}}">
|
||||||
|
<paper-checkbox checked="{{editing}}">Enable Editing</paper-checkbox>
|
||||||
|
</iron-input><br />
|
||||||
|
<!--Number of Lamps: <input type="number" min="1" max="120" value="{{numberleds::input}}"></input>-->
|
||||||
|
<iron-input>
|
||||||
|
<paper-input always-float-label label="Number of Lamps" type="number" auto-validate="true" value="{{numberleds::input}}" min="1" max="120" error-message="The value must be in the range of 1 to 120" readonly$="[[!editing]]"></paper-input>
|
||||||
|
<paper-button raised on-click="resizeLampList">Resize List of Lamp Names</paper-button>
|
||||||
|
</iron-input><br />
|
||||||
|
<br />
|
||||||
|
<vaadin-grid aria-label="Color Definitions" items="[[lampmapping]]">
|
||||||
|
<vaadin-grid-column width="50px" flex-grow="0">
|
||||||
|
<template class="header">#</template>
|
||||||
|
<template>
|
||||||
|
[[index]]
|
||||||
|
</template>
|
||||||
|
</vaadin-grid-column>
|
||||||
|
|
||||||
|
<vaadin-grid-column>
|
||||||
|
<template class="header">Lamp Name</template>
|
||||||
|
<template>
|
||||||
|
<!--<input type="text" maxLength="40" placeholder="Enter lamp name" value="{{item::input}}" readonly$="[[!editing]]">-->
|
||||||
|
<paper-input always-float-label label="Lamp Name" maxLength="40" value="{{item::input}}" readonly$="[[!editing]]"></paper-input>
|
||||||
|
</template>
|
||||||
|
</vaadin-grid-column>
|
||||||
|
</vaadin-grid>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
class LampsView extends Polymer.Element {
|
||||||
|
static get is() { return 'lamps-view'; }
|
||||||
|
ready() {
|
||||||
|
super.ready();
|
||||||
|
}
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
editing: { type: Boolean, value: false },
|
||||||
|
numberleds: { type: Number, value: 2 },
|
||||||
|
lampmapping: { type: Array, value: ["lamp1", "lamp2"] }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
resizeLampList() {
|
||||||
|
if (this.lampmapping.length < this.numberleds) {
|
||||||
|
for (var i=this.lampmapping.length; i<this.numberleds; ++i) {
|
||||||
|
this.push('lampmapping', "lamp"+(i+1));
|
||||||
|
}
|
||||||
|
} else if (this.lampmapping.length > this.numberleds) {
|
||||||
|
for (var i=this.lampmapping.length-1; i>=this.numberleds; --i) {
|
||||||
|
this.pop('lampmapping');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.customElements.define(LampsView.is, LampsView);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</dom-module>
|
||||||
|
|
@ -20,11 +20,21 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
|
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
|
||||||
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
|
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
|
||||||
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
|
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
|
||||||
|
<link rel="import" href="../bower_components/paper-input/paper-input.html">
|
||||||
|
<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
|
||||||
|
<link rel="import" href="../bower_components/paper-button/paper-button.html">
|
||||||
|
<link rel="import" href="../bower_components/iron-input/iron-input.html">
|
||||||
|
<link rel="import" href="../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
|
||||||
|
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html">
|
||||||
<link rel="import" href="my-icons.html">
|
<link rel="import" href="my-icons.html">
|
||||||
|
|
||||||
|
|
||||||
<link rel="lazy-import" href="status-view.html">
|
<link rel="lazy-import" href="status-view.html">
|
||||||
|
<link rel="lazy-import" href="settings-view.html">
|
||||||
<link rel="lazy-import" href="colors-view.html">
|
<link rel="lazy-import" href="colors-view.html">
|
||||||
|
<link rel="lazy-import" href="lamps-view.html">
|
||||||
<link rel="lazy-import" href="schedule-view.html">
|
<link rel="lazy-import" href="schedule-view.html">
|
||||||
|
<link rel="lazy-import" href="json-view.html">
|
||||||
<link rel="lazy-import" href="view404-view.html">
|
<link rel="lazy-import" href="view404-view.html">
|
||||||
|
|
||||||
<dom-module id="my-app">
|
<dom-module id="my-app">
|
||||||
|
|
@ -83,11 +93,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
<app-drawer-layout fullbleed narrow="{{narrow}}">
|
<app-drawer-layout fullbleed narrow="{{narrow}}">
|
||||||
<!-- Drawer content -->
|
<!-- Drawer content -->
|
||||||
<app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
|
<app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
|
||||||
<app-toolbar>Menu</app-toolbar>
|
<app-toolbar>Config</app-toolbar>
|
||||||
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
|
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
|
||||||
<a name="status" href="[[rootPath]]status">Status</a>
|
<a name="status" href="[[rootPath]]status">Status</a>
|
||||||
|
<a name="settings" href="[[rootPath]]settings">Settings</a>
|
||||||
<a name="colors" href="[[rootPath]]colors">Colors</a>
|
<a name="colors" href="[[rootPath]]colors">Colors</a>
|
||||||
|
<a name="lamps" href="[[rootPath]]lamps">Lamps</a>
|
||||||
<a name="schedule" href="[[rootPath]]schedule">Schedule</a>
|
<a name="schedule" href="[[rootPath]]schedule">Schedule</a>
|
||||||
|
<a name="json" href="[[rootPath]]json">JSON</a>
|
||||||
</iron-selector>
|
</iron-selector>
|
||||||
</app-drawer>
|
</app-drawer>
|
||||||
|
|
||||||
|
|
@ -107,8 +120,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
fallback-selection="view404"
|
fallback-selection="view404"
|
||||||
role="main">
|
role="main">
|
||||||
<status-view name="status"></status-view>
|
<status-view name="status"></status-view>
|
||||||
|
<settings-view name="settings"></settings-view>
|
||||||
<colors-view name="colors"></colors-view>
|
<colors-view name="colors"></colors-view>
|
||||||
|
<lamps-view name="lamps"></lamps-view>
|
||||||
<schedule-view name="schedule"></schedule-view>
|
<schedule-view name="schedule"></schedule-view>
|
||||||
|
<json-view name="json"></json-view>
|
||||||
</iron-pages>
|
</iron-pages>
|
||||||
</app-header-layout>
|
</app-header-layout>
|
||||||
</app-drawer-layout>
|
</app-drawer-layout>
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
|
|
||||||
<link rel="import" href="../bower_components/polymer/polymer-element.html">
|
<link rel="import" href="../bower_components/polymer/polymer-element.html">
|
||||||
<link rel="import" href="shared-styles.html">
|
<link rel="import" href="shared-styles.html">
|
||||||
|
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
|
||||||
|
<link rel="import" href="../bower_components/paper-input/paper-input.html">
|
||||||
|
<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
|
||||||
|
<link rel="import" href="../bower_components/paper-button/paper-button.html">
|
||||||
|
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
|
||||||
|
<link rel="import" href="../bower_components/iron-input/iron-input.html">
|
||||||
|
<link rel="import" href="../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
|
||||||
|
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html">
|
||||||
|
|
||||||
<dom-module id="schedule-view">
|
<dom-module id="schedule-view">
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -19,153 +27,114 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
paper-checkbox {
|
||||||
|
--primary-color: #ff5722;
|
||||||
|
}
|
||||||
|
.vertical-section-container {
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
paper-dropdown-menu {
|
||||||
|
width: 200px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="circle">3</div>
|
<div class="circle">5</div>
|
||||||
<h1>Schedule Definition</h1>
|
<h1>Schedule Definition</h1>
|
||||||
<p>Please define the lightning schedule here:</p>
|
<p>Please define the lightning schedule here:</p>
|
||||||
<p></p>
|
<p>
|
||||||
<div id="editor_holder" name="editor_holder"></div>
|
<paper-checkbox checked="{{editing}}">Enable Editing</paper-checkbox>
|
||||||
|
<vaadin-grid aria-label="Schedule Definitions" items="[[schedule]]">
|
||||||
|
<vaadin-grid-column width="50px" flex-grow="0">
|
||||||
|
<template class="header">#</template>
|
||||||
|
<template>
|
||||||
|
[[index]]
|
||||||
|
</template>
|
||||||
|
</vaadin-grid-column>
|
||||||
|
|
||||||
|
<vaadin-grid-column>
|
||||||
|
<template class="header">Time</template>
|
||||||
|
<template>
|
||||||
|
<paper-input type="time" value="{{item.time::input}}" readonly$="[[!editing]]">
|
||||||
|
</template>
|
||||||
|
</vaadin-grid-column>
|
||||||
|
|
||||||
|
<vaadin-grid-column>
|
||||||
|
<template class="header">Lamp</template>
|
||||||
|
<template>
|
||||||
|
<paper-dropdown-menu no-animations="true" keyBindings="{{item.lamp::input}}" raedonly$="[[!editing]]">
|
||||||
|
<paper-listbox slot="dropdown-content" class="dropdown-content">
|
||||||
|
<paper-item>eg1</paper-item>
|
||||||
|
<paper-item>eg2</paper-item>
|
||||||
|
<paper-item>eg3</paper-item>
|
||||||
|
<paper-item>og1</paper-item>
|
||||||
|
<paper-item>og2</paper-item>
|
||||||
|
</paper-listbox>
|
||||||
|
</paper-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</vaadin-grid-column>
|
||||||
|
|
||||||
|
<vaadin-grid-column>
|
||||||
|
<template class="header">Color</template>
|
||||||
|
<template>
|
||||||
|
<paper-dropdown-menu no-animations="true" keyBindings="{{item.color::input}}" raedonly$="[[!editing]]">
|
||||||
|
<paper-listbox slot="dropdown-content" class="dropdown-content">
|
||||||
|
<paper-item>black/off</paper-item>
|
||||||
|
<paper-item>candle</paper-item>
|
||||||
|
<paper-item>25Watt</paper-item>
|
||||||
|
<paper-item>40Watt</paper-item>
|
||||||
|
<paper-item>60Watt</paper-item>
|
||||||
|
<paper-item>100Watt</paper-item>
|
||||||
|
<paper-item>BrightWhite</paper-item>
|
||||||
|
</paper-listbox>
|
||||||
|
</paper-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</vaadin-grid-column>
|
||||||
|
|
||||||
|
<vaadin-grid-column>
|
||||||
|
<template class="header">Mode</template>
|
||||||
|
<template>
|
||||||
|
<paper-dropdown-menu no-animations="true" keyBindings="{{item.mode::input}}" raedonly$="[[!editing]]">
|
||||||
|
<paper-listbox slot="dropdown-content" class="dropdown-content">
|
||||||
|
<paper-item>OnOff</paper-item>
|
||||||
|
<paper-item>Ramp</paper-item>
|
||||||
|
<paper-item>NeonOn</paper-item>
|
||||||
|
<paper-item>TV-b&w</paper-item>
|
||||||
|
<paper-item>TV-color</paper-item>
|
||||||
|
</paper-listbox>
|
||||||
|
</paper-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</vaadin-grid-column>
|
||||||
|
</vaadin-grid>
|
||||||
|
<br />
|
||||||
|
<paper-button raised on-click="addScheduleRow">Add Row</paper-button>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script src="js/jsoneditor.js"></script>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var schema = {
|
|
||||||
"$schema": "http://json-schema.org/draft-06/schema#",
|
|
||||||
"description": "DLite Light Controller Configuration",
|
|
||||||
"type": "object",
|
|
||||||
"properties": {
|
|
||||||
"colors": {
|
|
||||||
"description": "DLite color definition",
|
|
||||||
"type": "array",
|
|
||||||
"format": "table",
|
|
||||||
"uniqueItems": true,
|
|
||||||
"disable_collapse": true,
|
|
||||||
"items": {
|
|
||||||
"type": "object",
|
|
||||||
"description": "Color definition",
|
|
||||||
"properties": {
|
|
||||||
"name": {
|
|
||||||
"type": "string",
|
|
||||||
"description": "Color name used as identifier"
|
|
||||||
},
|
|
||||||
"color": {
|
|
||||||
"type": "string",
|
|
||||||
"format": "color",
|
|
||||||
"description": "Color definition"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"lampmapping": {
|
|
||||||
"type": "array",
|
|
||||||
"format": "table",
|
|
||||||
"description": "LED/Lamp names, used as identifier; order according to LED address",
|
|
||||||
"items": {
|
|
||||||
"type": "string"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"schedule": {
|
|
||||||
"description": "DLite schedule definition",
|
|
||||||
"type": "object",
|
|
||||||
"required": [ "lampmapping", "schedule" ],
|
|
||||||
"properties": {
|
|
||||||
"comment": {
|
|
||||||
"type": "string",
|
|
||||||
"format": "textarea",
|
|
||||||
"description": "Info about this schedule definition"
|
|
||||||
},
|
|
||||||
"mrclock": {
|
|
||||||
"type": "string",
|
|
||||||
"description": "Name of a MR-Clock fastclock"
|
|
||||||
},
|
|
||||||
"clock_starttime": {
|
|
||||||
"$ref": "#/definitions/time",
|
|
||||||
"description": "After boot, at which clock should this animate start"
|
|
||||||
},
|
|
||||||
"clock_speed": {
|
|
||||||
"type": "number",
|
|
||||||
"description": "Real time seconds for every model minute"
|
|
||||||
},
|
|
||||||
"schedule": {
|
|
||||||
"type": "array",
|
|
||||||
"format": "table",
|
|
||||||
"description": "The schedule definition as an array of schedule items",
|
|
||||||
"items": {
|
|
||||||
"$ref": "#/definitions/schedule_item"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"definitions": {
|
|
||||||
"time": {
|
|
||||||
"type": "string",
|
|
||||||
"format": "time"
|
|
||||||
},
|
|
||||||
"schedule_item": {
|
|
||||||
"type": "object",
|
|
||||||
"properties": {
|
|
||||||
"time": {
|
|
||||||
"$ref": "#/definitions/time",
|
|
||||||
// "description": "Start time, when this schedule item should fire"
|
|
||||||
},
|
|
||||||
"lamp": {
|
|
||||||
"type": "string",
|
|
||||||
"watch": {
|
|
||||||
"lamps": "lampmapping"
|
|
||||||
},
|
|
||||||
"enumSource": [{
|
|
||||||
"source": "lamps",
|
|
||||||
"value": "{{item}}"
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
"color": {
|
|
||||||
"type": "string",
|
|
||||||
"watch": { "selectableColors": "colors" },
|
|
||||||
"enumSource" : [{ "source": "selectableColors", "value": "{{item.name}}" }]
|
|
||||||
// "description": "Name of the color to be shown; corresponds to color name in color definitions."
|
|
||||||
},
|
|
||||||
"mode": {
|
|
||||||
"type": "string",
|
|
||||||
// "description": "Dynamic behaviour / mode; allowed values are: OnOff",
|
|
||||||
"enum": ["OnOff","neon-on"]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
var json = {
|
var json = {
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
class MyView3 extends Polymer.Element {
|
class ScheduleView extends Polymer.Element {
|
||||||
static get is() { return 'schedule-view'; }
|
static get is() { return 'schedule-view'; }
|
||||||
ready() {
|
ready() {
|
||||||
super.ready();
|
super.ready();
|
||||||
|
}
|
||||||
var element = this.$.editor_holder;
|
static get properties() {
|
||||||
var editor;
|
return {
|
||||||
|
editing: { type: Boolean, value: false },
|
||||||
if (!element) {
|
schedule: { type: Array, value: [{time: "00:00", color: "#000000"}] }
|
||||||
alert("Could not find editor_holder element!");
|
|
||||||
} else {
|
|
||||||
editor = new JSONEditor(element, {
|
|
||||||
schema: schema,
|
|
||||||
iconlib: "fontawesome4",
|
|
||||||
disable_properties: true,
|
|
||||||
no_additional_properties: false,
|
|
||||||
disable_edit_json: true
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
addScheduleRow() {
|
||||||
|
this.push('schedule', {time: "00:00", lamp: "eg1", color: "black/off", mode: "OnOff"});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
window.customElements.define(MyView3.is, MyView3);
|
window.customElements.define(ScheduleView.is, ScheduleView);
|
||||||
</script>
|
</script>
|
||||||
</dom-module>
|
</dom-module>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
<!--
|
||||||
|
@license
|
||||||
|
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
|
||||||
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||||
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||||
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||||
|
Code distributed by Google as part of the polymer project is also
|
||||||
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||||
|
-->
|
||||||
|
|
||||||
|
<link rel="import" href="../bower_components/polymer/polymer-element.html">
|
||||||
|
<link rel="import" href="shared-styles.html">
|
||||||
|
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
|
||||||
|
<link rel="import" href="../bower_components/paper-input/paper-input.html">
|
||||||
|
<link rel="import" href="../bower_components/paper-input/paper-textarea.html">
|
||||||
|
<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
|
||||||
|
<link rel="import" href="../bower_components/paper-button/paper-button.html">
|
||||||
|
|
||||||
|
<dom-module id="settings-view">
|
||||||
|
<template>
|
||||||
|
<style include="shared-styles">
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
paper-checkbox {
|
||||||
|
--primary-color: #ff5722;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="circle">2</div>
|
||||||
|
<h1>Edit Settings</h1>
|
||||||
|
<p>
|
||||||
|
<paper-checkbox checked="{{editing}}">Enable Editing</paper-checkbox>
|
||||||
|
<paper-textarea always-float-label label="Comment:" readonly$="[[!editing]]">{{mrclock::input}}</paper-textarea>
|
||||||
|
<paper-input always-float-label label="Name of MR-Clock (leave empty if no MR-Clock is used):" type="text" value="{{mrclock::input}}" readonly$="[[!editing]]"></paper-input>
|
||||||
|
Either set a clock name, if a MR-Clock is used, or set clock start time and speed for an autonomous behaviour.
|
||||||
|
<paper-input always-float-label label="Start time of clock after boot:" type="time" pattern="\d{2}:\d{2}" value="{{clockStartTime::input}}" allowed-pattern="[0-9]" readonly$="[[!editing]]"></paper-input>
|
||||||
|
<paper-input always-float-label label="Clock Speed - Number of real-time seconds per model minute:" type="number" min="1" max="60" auto-validate="true" error-message="The value must be in the range of 1..60" value="{{clockSpeed::input}}" allowed-pattern="[0-9]" readonly$="[[!editing]]"></paper-input>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
class SettingsView extends Polymer.Element {
|
||||||
|
static get is() { return 'settings-view'; }
|
||||||
|
ready() { super.ready(); }
|
||||||
|
/*
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
editing: { type: Boolean, value: false },
|
||||||
|
comment: { type: String, value: "" },
|
||||||
|
clockStartTime: { type: Time, value: "00:00" },
|
||||||
|
clockSpeed: {type: Number, value: 4 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
|
||||||
|
window.customElements.define(SettingsView.is, SettingsView);
|
||||||
|
</script>
|
||||||
|
</dom-module>
|
||||||
|
|
@ -20,21 +20,21 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
<script src="../bower_components/web-component-tester/browser.js"></script>
|
<script src="../bower_components/web-component-tester/browser.js"></script>
|
||||||
|
|
||||||
<!-- Import the element to test -->
|
<!-- Import the element to test -->
|
||||||
<link rel="import" href="../src/my-view1.html">
|
<link rel="import" href="../src/settings-view.html">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<test-fixture id="BasicView">
|
<test-fixture id="BasicView">
|
||||||
<template>
|
<template>
|
||||||
<my-view1></my-view1>
|
<settings-view></settings-view>
|
||||||
</template>
|
</template>
|
||||||
</test-fixture>
|
</test-fixture>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
suite('my-view1 tests', function() {
|
suite('settings-view tests', function() {
|
||||||
test('Number in circle should be 1', function() {
|
test('Number in circle should be 2', function() {
|
||||||
var myView = fixture('BasicView');
|
var myView = fixture('BasicView');
|
||||||
var circle = myView.shadowRoot.querySelector('.circle');
|
var circle = myView.shadowRoot.querySelector('.circle');
|
||||||
assert.equal(circle.textContent, '1');
|
assert.equal(circle.textContent, '2');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
Loading…
Reference in New Issue