iot/sprocket-ui
1
0
Fork 0
mirror of https://gitlab.com/wirelos/sprocket-ui.git synced 2025-12-14 22:02:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

moar paramz

Browse Source
This commit is contained in:
0x1d
2018-09-17 15:34:41 +02:00
parent bd1ac5c7a4
commit 0a67f05189
7 changed files with 71 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
data/index.html
View File

@@ -31,24 +31,39 @@
<div class="content">
<ul>
<li class="form-row ParamColor"
data-mode="2"
data-name="color"
data-topic="pixels/color"
data-label="Color">
</li>
<li class="form-row ParamColor"
data-mode="2"
data-name="color"
data-topic="pixels/color2"
data-label="Color 2">
</li>
<!-- data-entries='[{"text": "Color", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}, {"text": "Wipe", "value": "3"}, {"text": "Scanner", "value": "4"}, {"text": "Fade", "value": "5"}]' -->
<li class="form-row ParamSelect"
data-label="Pattern"
data-name="pattern"
data-topic="pixels/pattern"
data-default="1"
data-entries='[{"text": "Color", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}]'
data-default="0"
data-entries='[{"text": "Color", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}, {"text": "Fade", "value": "5"}]'
></li>
<!-- <li class="form-row ParamSlider"
data-name="totalSteps"
data-min="1"
data-max="255"
data-value="255"
data-topic="pixels/totalSteps"
data-label="Total Steps">
</li> -->
<li class="form-row ParamSlider"
data-name="brightness"
data-min="0"
data-max="255"
data-value="64"
data-topic="pixels/brightness"
data-label="Brightness">
</li>
</ul>
</div>
</form>

18
data/script.js
View File

@@ -11897,23 +11897,22 @@ class PresetSwitch extends __WEBPACK_IMPORTED_MODULE_1__base_Switch_Switch__["a"
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__base_Slider_Slider__ = __webpack_require__(6);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(2);
//import Store from '../core/store/RestStore';
class ParamSlider extends __WEBPACK_IMPORTED_MODULE_1__base_Slider_Slider__["a" /* default */] {
constructor(ctx, node) {
super(ctx, node);
this.store = new __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__["a" /* default */](this.config.endpoint);
//this.store = new Store(this.config.endpoint);
}
onChange(evt) {
this.store.save({
param: this.config.name,
value: this.value
});
this.ctx.ws.send(JSON.stringify({
topic: this.config.topic,
payload: evt.target.value
}));
}
}
@@ -12022,7 +12021,10 @@ class ParamWs extends __WEBPACK_IMPORTED_MODULE_1__base_TextInput_TextInput__["a
obj[this.config.name] = this.value;
//this.store.save(obj);
console.log(this.value);
this.ws.send(this.value);
this.ctx.ws.send({
topic: this.config.topic,
payload: this.value
});
this.ctx.mediator.trigger(this.config.endpoint, this.value);
}

3
data/styles.css
View File

@@ -243,9 +243,6 @@ form .form-row input[type="checkbox"] {
flex: 5;
}
}
.sui input {
padding: .5em;
}
.sui input[type="text"],
.sui input[type="password"] {
height: 16px;

12
src/app/components/ParamSlider.js
View File

@@ -1,19 +1,19 @@
import $ from 'jquery';
import Slider from './base/Slider/Slider';
import Store from '../core/store/RestStore';
//import Store from '../core/store/RestStore';
export default class ParamSlider extends Slider {
constructor(ctx, node) {
super(ctx, node);
this.store = new Store(this.config.endpoint);
//this.store = new Store(this.config.endpoint);
}
onChange(evt) {
this.store.save({
param: this.config.name,
value: this.value
});
this.ctx.ws.send(JSON.stringify({
topic: this.config.topic,
payload: evt.target.value
}));
}
}

5
src/app/components/ParamWs.js
View File

@@ -30,7 +30,10 @@ export default class ParamWs extends TextInput {
obj[this.config.name] = this.value;
//this.store.save(obj);
console.log(this.value);
this.ws.send(this.value);
this.ctx.ws.send({
topic: this.config.topic,
payload: this.value
});
this.ctx.mediator.trigger(this.config.endpoint, this.value);
}

23
src/pages/index.html
View File

@@ -31,24 +31,39 @@
<div class="content">
<ul>
<li class="form-row ParamColor"
data-mode="2"
data-name="color"
data-topic="pixels/color"
data-label="Color">
</li>
<li class="form-row ParamColor"
data-mode="2"
data-name="color"
data-topic="pixels/color2"
data-label="Color 2">
</li>
<!-- data-entries='[{"text": "Color", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}, {"text": "Wipe", "value": "3"}, {"text": "Scanner", "value": "4"}, {"text": "Fade", "value": "5"}]' -->
<li class="form-row ParamSelect"
data-label="Pattern"
data-name="pattern"
data-topic="pixels/pattern"
data-default="1"
data-entries='[{"text": "Color", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}]'
data-default="0"
data-entries='[{"text": "Color", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}, {"text": "Fade", "value": "5"}]'
></li>
<!-- <li class="form-row ParamSlider"
data-name="totalSteps"
data-min="1"
data-max="255"
data-value="255"
data-topic="pixels/totalSteps"
data-label="Total Steps">
</li> -->
<li class="form-row ParamSlider"
data-name="brightness"
data-min="0"
data-max="255"
data-value="64"
data-topic="pixels/brightness"
data-label="Brightness">
</li>
</ul>
</div>
</form>

2
src/styles/form/input.less
View File

@@ -1,7 +1,7 @@
.sui {
input {
padding: .5em;
//padding: .5em;
}
input[type="text"], input[type="password"] {