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

33
data/index.html
View File

@@ -31,24 +31,39 @@
<div class="content"> <div class="content">
<ul> <ul>
<li class="form-row ParamColor" <li class="form-row ParamColor"
data-mode="2"
data-name="color" data-name="color"
data-topic="pixels/color" data-topic="pixels/color"
data-label="Color"> data-label="Color">
</li> </li>
<li class="form-row ParamColor" <li class="form-row ParamColor"
data-mode="2"
data-name="color" data-name="color"
data-topic="pixels/color2" data-topic="pixels/color2"
data-label="Color 2"> data-label="Color 2">
</li> </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" <li class="form-row ParamSelect"
data-label="Pattern" data-label="Pattern"
data-name="pattern" data-name="pattern"
data-topic="pixels/pattern" data-topic="pixels/pattern"
data-default="1" data-default="0"
data-entries='[{"text": "Color", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}]' data-entries='[{"text": "Color", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}, {"text": "Fade", "value": "5"}]'
></li> ></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> </ul>
</div> </div>
</form> </form>

20
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__ = __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_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_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 */] { class ParamSlider extends __WEBPACK_IMPORTED_MODULE_1__base_Slider_Slider__["a" /* default */] {
constructor(ctx, node) { constructor(ctx, node) {
super(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) { onChange(evt) {
this.store.save({ this.ctx.ws.send(JSON.stringify({
param: this.config.name, topic: this.config.topic,
value: this.value 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; obj[this.config.name] = this.value;
//this.store.save(obj); //this.store.save(obj);
console.log(this.value); 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); 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; flex: 5;
} }
} }
.sui input {
padding: .5em;
}
.sui input[type="text"], .sui input[type="text"],
.sui input[type="password"] { .sui input[type="password"] {
height: 16px; height: 16px;

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

@@ -1,19 +1,19 @@
import $ from 'jquery'; import $ from 'jquery';
import Slider from './base/Slider/Slider'; import Slider from './base/Slider/Slider';
import Store from '../core/store/RestStore'; //import Store from '../core/store/RestStore';
export default class ParamSlider extends Slider { export default class ParamSlider extends Slider {
constructor(ctx, node) { constructor(ctx, node) {
super(ctx, node); super(ctx, node);
this.store = new Store(this.config.endpoint); //this.store = new Store(this.config.endpoint);
} }
onChange(evt) { onChange(evt) {
this.store.save({ this.ctx.ws.send(JSON.stringify({
param: this.config.name, topic: this.config.topic,
value: this.value 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; obj[this.config.name] = this.value;
//this.store.save(obj); //this.store.save(obj);
console.log(this.value); 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); this.ctx.mediator.trigger(this.config.endpoint, this.value);
} }

33
src/pages/index.html
View File

@@ -31,24 +31,39 @@
<div class="content"> <div class="content">
<ul> <ul>
<li class="form-row ParamColor" <li class="form-row ParamColor"
data-mode="2"
data-name="color" data-name="color"
data-topic="pixels/color" data-topic="pixels/color"
data-label="Color"> data-label="Color">
</li> </li>
<li class="form-row ParamColor" <li class="form-row ParamColor"
data-mode="2"
data-name="color" data-name="color"
data-topic="pixels/color2" data-topic="pixels/color2"
data-label="Color 2"> data-label="Color 2">
</li> </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" <li class="form-row ParamSelect"
data-label="Pattern" data-label="Pattern"
data-name="pattern" data-name="pattern"
data-topic="pixels/pattern" data-topic="pixels/pattern"
data-default="1" data-default="0"
data-entries='[{"text": "Color", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}]' data-entries='[{"text": "Color", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}, {"text": "Fade", "value": "5"}]'
></li> ></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> </ul>
</div> </div>
</form> </form>

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

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