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

use global websocket

Browse Source
This commit is contained in:
0x1d
2018-09-17 08:40:39 +02:00
parent feb4f088d3
commit 20e87b30f3
7 changed files with 28 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
data/index.html
View File

@@ -33,38 +33,33 @@
<li class="form-row ParamColor" <li class="form-row ParamColor"
data-mode="2" data-mode="2"
data-name="color" data-name="color"
data-label="Color" data-label="Color">
data-endpoint="ws://192.168.1.246/pixel">
</li> </li>
<li class="form-row ParamColor" <li class="form-row ParamColor"
data-mode="2" data-mode="2"
data-name="color2" data-name="color2"
data-label="Color 2" data-label="Color 2">
data-endpoint="/pixel">
</li> </li>
<li class="form-row LedStripPatternSwitch" <li class="form-row LedStripPatternSwitch"
data-group="stripPattern" data-group="stripPattern"
data-id="1" data-id="1"
data-mode="3" data-mode="3"
data-name="Rainbow" data-name="Rainbow"
data-label="Rainbow" data-label="Rainbow">
data-endpoint="ws://192.168.1.246/pixel">
</li> </li>
<li class="form-row LedStripPatternSwitch" <li class="form-row LedStripPatternSwitch"
data-group="stripPattern" data-group="stripPattern"
data-name="TheaterChase" data-name="TheaterChase"
data-label="Theater Chase" data-label="Theater Chase"
data-id="2" data-id="2"
data-mode="3" data-mode="3">
data-endpoint="ws://192.168.1.246/pixel">
</li> </li>
<li class="form-row LedStripPatternSwitch" <li class="form-row LedStripPatternSwitch"
data-group="stripPattern" data-group="stripPattern"
data-name="Scanner" data-name="Scanner"
data-label="Scanner" data-label="Scanner"
data-id="4" data-id="4"
data-mode="3" data-mode="3">
data-endpoint="ws://192.168.1.246/pixel">
</li> </li>
</ul> </ul>
</div> </div>

20
data/script.js
View File

@@ -10752,10 +10752,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
__WEBPACK_IMPORTED_MODULE_0_jquery___default()(() => { __WEBPACK_IMPORTED_MODULE_0_jquery___default()(() => {
new __WEBPACK_IMPORTED_MODULE_1__core_App__["a" /* default */](__WEBPACK_IMPORTED_MODULE_0_jquery___default()('body')) new __WEBPACK_IMPORTED_MODULE_1__core_App__["a" /* default */](__WEBPACK_IMPORTED_MODULE_0_jquery___default()('body'))
.components(__WEBPACK_IMPORTED_MODULE_2__components_exports__); .components(__WEBPACK_IMPORTED_MODULE_2__components_exports__)
/* .websocket({ .websocket(new WebSocket('ws://192.168.1.246/pixel'));
led: new WebSocket('ws://ledstrip/')
}); */
}); });
@@ -11925,13 +11923,13 @@ class ParamColor extends __WEBPACK_IMPORTED_MODULE_1__base_ColorPicker_ColorPick
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);
this.ws = new WebSocket(this.config.endpoint.indexOf('/') === 0 ? "ws://" + window.location.host + this.config.endpoint : this.config.endpoint ); /* this.ws = new WebSocket(this.config.endpoint.indexOf('/') === 0 ? "ws://" + window.location.host + this.config.endpoint : this.config.endpoint );
this.ws.onopen = (event) => { this.ws.onopen = (event) => {
console.log('open ' + this.config.endpoint); console.log('open ' + this.config.endpoint);
}; };
this.ws.onmessage = (event) => { this.ws.onmessage = (event) => {
console.log(event.data); console.log(event.data);
}; }; */
} }
onChange(evt) { onChange(evt) {
@@ -11940,7 +11938,7 @@ class ParamColor extends __WEBPACK_IMPORTED_MODULE_1__base_ColorPicker_ColorPick
});*/ });*/
//let cmd = this.config.id + parseInt(this.value.replace('#', '0x')); //let cmd = this.config.id + parseInt(this.value.replace('#', '0x'));
console.log(parseInt(this.value.replace('#', '0x'))); console.log(parseInt(this.value.replace('#', '0x')));
this.ws.send(JSON.stringify({ this.ctx.ws.send(JSON.stringify({
mode: this.config.mode, mode: this.config.mode,
value: parseInt(this.value.replace('#', '0x')) value: parseInt(this.value.replace('#', '0x'))
})); }));
@@ -11969,14 +11967,14 @@ class ParamWs extends __WEBPACK_IMPORTED_MODULE_1__base_TextInput_TextInput__["a
super(ctx, node); super(ctx, node);
//this.store = new Store(this.config.endpoint); //this.store = new Store(this.config.endpoint);
this.ws = new WebSocket(this.config.endpoint.indexOf('/') === 0 ? "ws://" + window.location.host + this.config.endpoint : this.config.endpoint ); /* this.ws = new WebSocket(this.config.endpoint.indexOf('/') === 0 ? "ws://" + window.location.host + this.config.endpoint : this.config.endpoint );
this.ws.onopen = (event) => { this.ws.onopen = (event) => {
console.log('open ' + this.config.endpoint); console.log('open ' + this.config.endpoint);
}; };
this.ws.onmessage = (event) => { this.ws.onmessage = (event) => {
//console.log(event.data); //console.log(event.data);
this.node.find('input').val(event.data); this.node.find('input').val(event.data);
}; }; */
this.ctx.mediator.on(this.config.endpoint, this.onMessage.bind(this)); this.ctx.mediator.on(this.config.endpoint, this.onMessage.bind(this));
} }
@@ -12016,9 +12014,9 @@ class LedStripPatternSwitch extends __WEBPACK_IMPORTED_MODULE_1__base_Switch_Swi
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 RestStore(this.config.endpoint);
this.ws = new WebSocket(this.config.endpoint.indexOf('/') === 0 ? "ws://" + window.location.host + this.config.endpoint : this.config.endpoint ); this.ws = this.ctx.ws;
this.modes = ["init", "Color", "Pattern", "octoPrint"]; this.modes = ["init", "Color", "Pattern", "octoPrint"];
this.patterns = [ "none", "Rainbow", "Scanner", "ColorWipe", "TheaterChase"]; this.patterns = [ "none", "Rainbow", "Scanner", "ColorWipe", "TheaterChase"];

4
src/app/components/LedStripPatternSwitch.js
View File

@@ -6,9 +6,9 @@ export default class LedStripPatternSwitch extends Switch {
constructor(ctx, node) { constructor(ctx, node) {
super(ctx, node); super(ctx, node);
this.store = new RestStore(this.config.endpoint); //this.store = new RestStore(this.config.endpoint);
this.ws = new WebSocket(this.config.endpoint.indexOf('/') === 0 ? "ws://" + window.location.host + this.config.endpoint : this.config.endpoint ); this.ws = this.ctx.ws;
this.modes = ["init", "Color", "Pattern", "octoPrint"]; this.modes = ["init", "Color", "Pattern", "octoPrint"];
this.patterns = [ "none", "Rainbow", "Scanner", "ColorWipe", "TheaterChase"]; this.patterns = [ "none", "Rainbow", "Scanner", "ColorWipe", "TheaterChase"];

6
src/app/components/ParamColor.js
View File

@@ -7,13 +7,13 @@ export default class ParamColor extends ColorPicker {
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);
this.ws = new WebSocket(this.config.endpoint.indexOf('/') === 0 ? "ws://" + window.location.host + this.config.endpoint : this.config.endpoint ); /* this.ws = new WebSocket(this.config.endpoint.indexOf('/') === 0 ? "ws://" + window.location.host + this.config.endpoint : this.config.endpoint );
this.ws.onopen = (event) => { this.ws.onopen = (event) => {
console.log('open ' + this.config.endpoint); console.log('open ' + this.config.endpoint);
}; };
this.ws.onmessage = (event) => { this.ws.onmessage = (event) => {
console.log(event.data); console.log(event.data);
}; }; */
} }
onChange(evt) { onChange(evt) {
@@ -22,7 +22,7 @@ export default class ParamColor extends ColorPicker {
});*/ });*/
//let cmd = this.config.id + parseInt(this.value.replace('#', '0x')); //let cmd = this.config.id + parseInt(this.value.replace('#', '0x'));
console.log(parseInt(this.value.replace('#', '0x'))); console.log(parseInt(this.value.replace('#', '0x')));
this.ws.send(JSON.stringify({ this.ctx.ws.send(JSON.stringify({
mode: this.config.mode, mode: this.config.mode,
value: parseInt(this.value.replace('#', '0x')) value: parseInt(this.value.replace('#', '0x'))
})); }));

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

@@ -8,14 +8,14 @@ export default class ParamWs extends TextInput {
super(ctx, node); super(ctx, node);
//this.store = new Store(this.config.endpoint); //this.store = new Store(this.config.endpoint);
this.ws = new WebSocket(this.config.endpoint.indexOf('/') === 0 ? "ws://" + window.location.host + this.config.endpoint : this.config.endpoint ); /* this.ws = new WebSocket(this.config.endpoint.indexOf('/') === 0 ? "ws://" + window.location.host + this.config.endpoint : this.config.endpoint );
this.ws.onopen = (event) => { this.ws.onopen = (event) => {
console.log('open ' + this.config.endpoint); console.log('open ' + this.config.endpoint);
}; };
this.ws.onmessage = (event) => { this.ws.onmessage = (event) => {
//console.log(event.data); //console.log(event.data);
this.node.find('input').val(event.data); this.node.find('input').val(event.data);
}; }; */
this.ctx.mediator.on(this.config.endpoint, this.onMessage.bind(this)); this.ctx.mediator.on(this.config.endpoint, this.onMessage.bind(this));
} }

6
src/app/main.js
View File

@@ -6,10 +6,8 @@ import * as components from './components/exports';
$(() => { $(() => {
new App($('body')) new App($('body'))
.components(components); .components(components)
/* .websocket({ .websocket(new WebSocket('ws://192.168.1.246/pixel'));
led: new WebSocket('ws://ledstrip/')
}); */
}); });

15
src/pages/index.html
View File

@@ -33,38 +33,33 @@
<li class="form-row ParamColor" <li class="form-row ParamColor"
data-mode="2" data-mode="2"
data-name="color" data-name="color"
data-label="Color" data-label="Color">
data-endpoint="ws://192.168.1.246/pixel">
</li> </li>
<li class="form-row ParamColor" <li class="form-row ParamColor"
data-mode="2" data-mode="2"
data-name="color2" data-name="color2"
data-label="Color 2" data-label="Color 2">
data-endpoint="/pixel">
</li> </li>
<li class="form-row LedStripPatternSwitch" <li class="form-row LedStripPatternSwitch"
data-group="stripPattern" data-group="stripPattern"
data-id="1" data-id="1"
data-mode="3" data-mode="3"
data-name="Rainbow" data-name="Rainbow"
data-label="Rainbow" data-label="Rainbow">
data-endpoint="ws://192.168.1.246/pixel">
</li> </li>
<li class="form-row LedStripPatternSwitch" <li class="form-row LedStripPatternSwitch"
data-group="stripPattern" data-group="stripPattern"
data-name="TheaterChase" data-name="TheaterChase"
data-label="Theater Chase" data-label="Theater Chase"
data-id="2" data-id="2"
data-mode="3" data-mode="3">
data-endpoint="ws://192.168.1.246/pixel">
</li> </li>
<li class="form-row LedStripPatternSwitch" <li class="form-row LedStripPatternSwitch"
data-group="stripPattern" data-group="stripPattern"
data-name="Scanner" data-name="Scanner"
data-label="Scanner" data-label="Scanner"
data-id="4" data-id="4"
data-mode="3" data-mode="3">
data-endpoint="ws://192.168.1.246/pixel">
</li> </li>
</ul> </ul>
</div> </div>