From 35ea491c57d3963bd43590b6f805512d38d15499 Mon Sep 17 00:00:00 2001 From: Patrick Balsiger Date: Sun, 30 Sep 2018 14:29:00 +0200 Subject: [PATCH] firing moar events --- data/favicon.ico | Bin 1150 -> 0 bytes data/gradients.js | 16 ++++++++ data/index.html | 23 ++++++++---- data/script.js | 54 +++++++++++++++++++++++++-- src/app/components/ParamColor.js | 9 ++++- src/app/components/ParamSelect.js | 11 +++++- src/app/components/ParamSlider.js | 8 +++- src/app/components/base/Form/Form.js | 3 ++ src/app/core/App.js | 1 + src/app/main.js | 22 ++++++++++- src/pages/gradients.js | 16 ++++++++ src/pages/index.html | 23 ++++++++---- 12 files changed, 162 insertions(+), 24 deletions(-) delete mode 100644 data/favicon.ico create mode 100644 data/gradients.js create mode 100644 src/pages/gradients.js diff --git a/data/favicon.ico b/data/favicon.ico deleted file mode 100644 index 4b46de8a7255c52916b7717978e5e56b615ade99..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1150 zcmZXT>uM8G5XUEM?FFGNO{rKLZAcU?w#780+l!iPx;L8yX*Bf`sX{9KXwfKW#oB&Q z(Kiu%hCYf9u}1{I_?zq!DiZ#gIWzO0GdnX!B*kxhT=<`ry#bLa5xEL5VTtVs5quM8 zWAx6+-;Y1v<&JS>)A++)R9OcdFLFKwrusE78y|gB{eo==6gdxa?$ftS1Fi?xnQlU zw~_Nmo45rqLoS8-mVx>zpa9-bQ-NH&=ue1M-!*I*a%8#l3_J_ns+-Wlp2eS`{yA)m z$Tt0Y1`e=q;-A4*L(k$LrKWz5RmVOC^29eZ7X2>u>x`6N!nOu4r+E6SEiJRv=Qo)V zb4ua60oTWLp36$)S9mMK0$1CAbINf5chq=G)vllKlVH zk4?y}Gsq<|)bH2PkAU`|jc;CigZ&b^_HRJ@M?F@e&tlJzYmRkc&O@iwu#KhwyiWM}kjqq9rFQsP_V zz83q}q<_Qgt{|tdb*bk$Ijh{!+h6Ua0v>N5&>lO)>{9bSoHWq6^xh9KX=>O3AArw! zl{)n;=r`#%@_yX6;30QRl8g5f@5u4*Lm{WY8{s|NB5#M;eB*o!c)!kPY`kBm1b+xy ce>Z*(iJVv>hpE1)r&uQfoo", "value": "0"}] + +// let msg = JSON.stringify({ +// topic: 'pixels/state', +// payload: JSON.stringify({ +// brightness: 32, +// color: parseInt(gradient[0].replace('#', '0x'), 16), +// color2: parseInt(gradient[1].replace('#', '0x'), 16), +// totalSteps: 100, +// pattern: 5 +// }) +// }); \ No newline at end of file diff --git a/data/index.html b/data/index.html index 6455fc8..c5981b4 100644 --- a/data/index.html +++ b/data/index.html @@ -16,6 +16,13 @@ Pixels
    +
  • -
  • +
    • +
diff --git a/data/script.js b/data/script.js index 2da6246..3b82ae7 100644 --- a/data/script.js +++ b/data/script.js @@ -10784,13 +10784,33 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); +const hues = [ ["#FDEB71", "#F8D800"], ["#ABDCFF", "#0396FF"], ["#FEB692", "#EA5455"], ["#CE9FFC", "#7367F0"], ["#90F7EC", "#32CCBC"], ["#FFF6B7", "#F6416C"], ["#81FBB8", "#28C76F"], ["#E2B0FF", "#9F44D3"], ["#F97794", "#623AA2"], ["#FCCF31", "#F55555"], ["#F761A1", "#8C1BAB"], ["#43CBFF", "#9708CC"], ["#5EFCE8", "#736EFE"], ["#FAD7A1", "#E96D71"], ["#FFD26F", "#3677FF"], ["#A0FE65", "#FA016D"], ["#FFDB01", "#0E197D"], ["#FEC163", "#DE4313"], ["#92FFC0", "#002661"], ["#EEAD92", "#6018DC"], ["#F6CEEC", "#D939CD"], ["#52E5E7", "#130CB7"], ["#F1CA74", "#A64DB6"], ["#E8D07A", "#5312D6"], ["#EECE13", "#B210FF"], ["#79F1A4", "#0E5CAD"], ["#FDD819", "#E80505"], ["#FFF3B0", "#CA26FF"], ["#FFF5C3", "#9452A5"], ["#F05F57", "#360940"], ["#2AFADF", "#4C83FF"], ["#FFF886", "#F072B6"], ["#97ABFF", "#123597"], ["#F5CBFF", "#C346C2"], ["#FFF720", "#3CD500"], ["#FF6FD8", "#3813C2"], ["#EE9AE5", "#5961F9"], ["#FFD3A5", "#FD6585"], ["#C2FFD8", "#465EFB"], ["#FD6585", "#0D25B9"], ["#FD6E6A", "#FFC600"], ["#65FDF0", "#1D6FA3"], ["#6B73FF", "#000DFF"], ["#FF7AF5", "#513162"], ["#F0FF00", "#58CFFB"], ["#FFE985", "#FA742B"], ["#FFA6B7", "#1E2AD2"], ["#FFAA85", "#B3315F"], ["#72EDF2", "#5151E5"], ["#FF9D6C", "#BB4E75"], ["#F6D242", "#FF52E5"], ["#69FF97", "#00E4FF"], ["#3B2667", "#BC78EC"], ["#70F570", "#49C628"], ["#3C8CE7", "#00EAFF"], ["#FAB2FF", "#1904E5"], ["#81FFEF", "#F067B4"], ["#FFA8A8", "#FCFF00"], ["#FFCF71", "#2376DD"], ["#FF96F9", "#C32BAC"] ]; let endpoint = '/pixel'; __WEBPACK_IMPORTED_MODULE_0_jquery___default()(() => { - new __WEBPACK_IMPORTED_MODULE_1__core_App__["a" /* default */](__WEBPACK_IMPORTED_MODULE_0_jquery___default()('body')) + let app = new __WEBPACK_IMPORTED_MODULE_1__core_App__["a" /* default */](__WEBPACK_IMPORTED_MODULE_0_jquery___default()('body')) .components(__WEBPACK_IMPORTED_MODULE_2__components_exports__) .websocket(new WebSocket(endpoint.indexOf('/') === 0 ? "ws://" + window.location.host + endpoint : endpoint)); + app.mediator.on('pixels/hue', (payload) => { + let msg = JSON.stringify({ + topic: 'pixels/state', + payload: JSON.stringify({ + brightness: 32, + color: parseInt(hues[payload][0].replace('#', '0x'), 16), + color2: parseInt(hues[payload][1].replace('#', '0x'), 16), + totalSteps: 32, + pattern: 5 + }) + }); + app.mediator.trigger('pixels/totalSteps', 32); + app.mediator.trigger('pixels/pattern', 5); + app.mediator.trigger('pixels/color', hues[payload][0]); + app.mediator.trigger('pixels/color2', hues[payload][1]); + console.log('pixels/hue: ' + msg); + app.ws.send(msg); + }); + // TODO make components __WEBPACK_IMPORTED_MODULE_0_jquery___default()('.collapsible').each((i, container) => { container.querySelector('.heading').addEventListener('click', (item) => { @@ -10936,6 +10956,7 @@ class App { websocket(websocket) { this.ws = websocket; + return this; } getStore(dataStore) { @@ -11110,6 +11131,9 @@ class Form extends __WEBPACK_IMPORTED_MODULE_1__core_Component__["a" /* default __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.post(this.config.endpoint, { fileName: this.config.filename, config: JSON.stringify(data) }) .done((data) => { alert("data saved"); + }) + .fail((data) => { + alert("save failed"); }); }; @@ -11968,7 +11992,13 @@ class ParamSlider extends __WEBPACK_IMPORTED_MODULE_1__base_Slider_Slider__["a" payload: evt.target.value })); } - + subscribe(){ + this.ctx.mediator.on(this.config.topic, (payload) => { + //console.log(this.config.topic + ":" + payload); + this.node.find('input').val(payload); + //this.notify(payload); + }); + } } /* harmony export (immutable) */ __webpack_exports__["a"] = ParamSlider; @@ -12019,12 +12049,19 @@ class ParamColor extends __WEBPACK_IMPORTED_MODULE_1__base_ColorPicker_ColorPick constructor(ctx, node) { super(ctx, node); + this.ctx.mediator.on(this.config.topic, (payload) => { + this.node.find('input').val(payload); + }); } onChange(evt) { + this.notify(evt.target.value); + } + + notify(val){ let obj = { topic: this.config.topic, - payload: parseInt(this.value.replace('#', '0x')) + payload: parseInt(val.replace('#', '0x')) }; this.ctx.ws.send(JSON.stringify(obj)); console.log(obj); @@ -12107,7 +12144,14 @@ class ParamSelect extends __WEBPACK_IMPORTED_MODULE_1__base_Select_Select__["a" name: this.config.name, entries: this.config.entries }); - this.node.find('option[value="'+this.config.default+'"]').attr('selected', 'selected'); + this.selectEntry(this.config.default); + this.ctx.mediator.on(this.config.topic, (payload) => { + this.selectEntry(payload); + }); + } + + selectEntry(payload){ + this.node.find('option[value="'+payload+'"]').attr('selected', 'selected'); } onChange(evt) { @@ -12115,7 +12159,9 @@ class ParamSelect extends __WEBPACK_IMPORTED_MODULE_1__base_Select_Select__["a" topic: this.config.topic, payload: evt.target.value }; + this.ctx.mediator.trigger(obj.topic, obj.payload); this.ctx.ws.send(JSON.stringify(obj)); + } } diff --git a/src/app/components/ParamColor.js b/src/app/components/ParamColor.js index ceaf1a8..1aa548a 100644 --- a/src/app/components/ParamColor.js +++ b/src/app/components/ParamColor.js @@ -5,12 +5,19 @@ export default class ParamColor extends ColorPicker { constructor(ctx, node) { super(ctx, node); + this.ctx.mediator.on(this.config.topic, (payload) => { + this.node.find('input').val(payload); + }); } onChange(evt) { + this.notify(evt.target.value); + } + + notify(val){ let obj = { topic: this.config.topic, - payload: parseInt(this.value.replace('#', '0x')) + payload: parseInt(val.replace('#', '0x')) }; this.ctx.ws.send(JSON.stringify(obj)); console.log(obj); diff --git a/src/app/components/ParamSelect.js b/src/app/components/ParamSelect.js index fc96548..0ea6b0f 100644 --- a/src/app/components/ParamSelect.js +++ b/src/app/components/ParamSelect.js @@ -11,7 +11,14 @@ export default class ParamSelect extends Select { name: this.config.name, entries: this.config.entries }); - this.node.find('option[value="'+this.config.default+'"]').attr('selected', 'selected'); + this.selectEntry(this.config.default); + this.ctx.mediator.on(this.config.topic, (payload) => { + this.selectEntry(payload); + }); + } + + selectEntry(payload){ + this.node.find('option[value="'+payload+'"]').attr('selected', 'selected'); } onChange(evt) { @@ -19,7 +26,9 @@ export default class ParamSelect extends Select { topic: this.config.topic, payload: evt.target.value }; + this.ctx.mediator.trigger(obj.topic, obj.payload); this.ctx.ws.send(JSON.stringify(obj)); + } } \ No newline at end of file diff --git a/src/app/components/ParamSlider.js b/src/app/components/ParamSlider.js index 564d587..507bef4 100644 --- a/src/app/components/ParamSlider.js +++ b/src/app/components/ParamSlider.js @@ -15,5 +15,11 @@ export default class ParamSlider extends Slider { payload: evt.target.value })); } - + subscribe(){ + this.ctx.mediator.on(this.config.topic, (payload) => { + //console.log(this.config.topic + ":" + payload); + this.node.find('input').val(payload); + //this.notify(payload); + }); + } } \ No newline at end of file diff --git a/src/app/components/base/Form/Form.js b/src/app/components/base/Form/Form.js index 1375ff3..c7dbffa 100644 --- a/src/app/components/base/Form/Form.js +++ b/src/app/components/base/Form/Form.js @@ -64,6 +64,9 @@ export default class Form extends Component { $.post(this.config.endpoint, { fileName: this.config.filename, config: JSON.stringify(data) }) .done((data) => { alert("data saved"); + }) + .fail((data) => { + alert("save failed"); }); }; diff --git a/src/app/core/App.js b/src/app/core/App.js index 490fecf..6ee3845 100644 --- a/src/app/core/App.js +++ b/src/app/core/App.js @@ -32,6 +32,7 @@ export default class App { websocket(websocket) { this.ws = websocket; + return this; } getStore(dataStore) { diff --git a/src/app/main.js b/src/app/main.js index 856743f..6b42192 100644 --- a/src/app/main.js +++ b/src/app/main.js @@ -4,13 +4,33 @@ import $ from 'jquery'; import App from './core/App'; import * as components from './components/exports'; +const hues = [ ["#FDEB71", "#F8D800"], ["#ABDCFF", "#0396FF"], ["#FEB692", "#EA5455"], ["#CE9FFC", "#7367F0"], ["#90F7EC", "#32CCBC"], ["#FFF6B7", "#F6416C"], ["#81FBB8", "#28C76F"], ["#E2B0FF", "#9F44D3"], ["#F97794", "#623AA2"], ["#FCCF31", "#F55555"], ["#F761A1", "#8C1BAB"], ["#43CBFF", "#9708CC"], ["#5EFCE8", "#736EFE"], ["#FAD7A1", "#E96D71"], ["#FFD26F", "#3677FF"], ["#A0FE65", "#FA016D"], ["#FFDB01", "#0E197D"], ["#FEC163", "#DE4313"], ["#92FFC0", "#002661"], ["#EEAD92", "#6018DC"], ["#F6CEEC", "#D939CD"], ["#52E5E7", "#130CB7"], ["#F1CA74", "#A64DB6"], ["#E8D07A", "#5312D6"], ["#EECE13", "#B210FF"], ["#79F1A4", "#0E5CAD"], ["#FDD819", "#E80505"], ["#FFF3B0", "#CA26FF"], ["#FFF5C3", "#9452A5"], ["#F05F57", "#360940"], ["#2AFADF", "#4C83FF"], ["#FFF886", "#F072B6"], ["#97ABFF", "#123597"], ["#F5CBFF", "#C346C2"], ["#FFF720", "#3CD500"], ["#FF6FD8", "#3813C2"], ["#EE9AE5", "#5961F9"], ["#FFD3A5", "#FD6585"], ["#C2FFD8", "#465EFB"], ["#FD6585", "#0D25B9"], ["#FD6E6A", "#FFC600"], ["#65FDF0", "#1D6FA3"], ["#6B73FF", "#000DFF"], ["#FF7AF5", "#513162"], ["#F0FF00", "#58CFFB"], ["#FFE985", "#FA742B"], ["#FFA6B7", "#1E2AD2"], ["#FFAA85", "#B3315F"], ["#72EDF2", "#5151E5"], ["#FF9D6C", "#BB4E75"], ["#F6D242", "#FF52E5"], ["#69FF97", "#00E4FF"], ["#3B2667", "#BC78EC"], ["#70F570", "#49C628"], ["#3C8CE7", "#00EAFF"], ["#FAB2FF", "#1904E5"], ["#81FFEF", "#F067B4"], ["#FFA8A8", "#FCFF00"], ["#FFCF71", "#2376DD"], ["#FF96F9", "#C32BAC"] ]; let endpoint = '/pixel'; $(() => { - new App($('body')) + let app = new App($('body')) .components(components) .websocket(new WebSocket(endpoint.indexOf('/') === 0 ? "ws://" + window.location.host + endpoint : endpoint)); + app.mediator.on('pixels/hue', (payload) => { + let msg = JSON.stringify({ + topic: 'pixels/state', + payload: JSON.stringify({ + brightness: 32, + color: parseInt(hues[payload][0].replace('#', '0x'), 16), + color2: parseInt(hues[payload][1].replace('#', '0x'), 16), + totalSteps: 32, + pattern: 5 + }) + }); + app.mediator.trigger('pixels/totalSteps', 32); + app.mediator.trigger('pixels/pattern', 5); + app.mediator.trigger('pixels/color', hues[payload][0]); + app.mediator.trigger('pixels/color2', hues[payload][1]); + console.log('pixels/hue: ' + msg); + app.ws.send(msg); + }); + // TODO make components $('.collapsible').each((i, container) => { container.querySelector('.heading').addEventListener('click', (item) => { diff --git a/src/pages/gradients.js b/src/pages/gradients.js new file mode 100644 index 0000000..994eba3 --- /dev/null +++ b/src/pages/gradients.js @@ -0,0 +1,16 @@ +const gradients = [ ["#FDEB71", "#F8D800"], ["#ABDCFF", "#0396FF"], ["#FEB692", "#EA5455"], ["#CE9FFC", "#7367F0"], ["#90F7EC", "#32CCBC"], ["#FFF6B7", "#F6416C"], ["#81FBB8", "#28C76F"], ["#E2B0FF", "#9F44D3"], ["#F97794", "#623AA2"], ["#FCCF31", "#F55555"], ["#F761A1", "#8C1BAB"], ["#43CBFF", "#9708CC"], ["#5EFCE8", "#736EFE"], ["#FAD7A1", "#E96D71"], ["#FFD26F", "#3677FF"], ["#A0FE65", "#FA016D"], ["#FFDB01", "#0E197D"], ["#FEC163", "#DE4313"], ["#92FFC0", "#002661"], ["#EEAD92", "#6018DC"], ["#F6CEEC", "#D939CD"], ["#52E5E7", "#130CB7"], ["#F1CA74", "#A64DB6"], ["#E8D07A", "#5312D6"], ["#EECE13", "#B210FF"], ["#79F1A4", "#0E5CAD"], ["#FDD819", "#E80505"], ["#FFF3B0", "#CA26FF"], ["#FFF5C3", "#9452A5"], ["#F05F57", "#360940"], ["#2AFADF", "#4C83FF"], ["#FFF886", "#F072B6"], ["#97ABFF", "#123597"], ["#F5CBFF", "#C346C2"], ["#FFF720", "#3CD500"], ["#FF6FD8", "#3813C2"], ["#EE9AE5", "#5961F9"], ["#FFD3A5", "#FD6585"], ["#C2FFD8", "#465EFB"], ["#FD6585", "#0D25B9"], ["#FD6E6A", "#FFC600"], ["#65FDF0", "#1D6FA3"], ["#6B73FF", "#000DFF"], ["#FF7AF5", "#513162"], ["#F0FF00", "#58CFFB"], ["#FFE985", "#FA742B"], ["#FFA6B7", "#1E2AD2"], ["#FFAA85", "#B3315F"], ["#72EDF2", "#5151E5"], ["#FF9D6C", "#BB4E75"], ["#F6D242", "#FF52E5"], ["#69FF97", "#00E4FF"], ["#3B2667", "#BC78EC"], ["#70F570", "#49C628"], ["#3C8CE7", "#00EAFF"], ["#FAB2FF", "#1904E5"], ["#81FFEF", "#F067B4"], ["#FFA8A8", "#FCFF00"], ["#FFCF71", "#2376DD"], ["#FF96F9", "#C32BAC"] ]; + + + +// [{"text": "foo", "value": "0"}] + +// let msg = JSON.stringify({ +// topic: 'pixels/state', +// payload: JSON.stringify({ +// brightness: 32, +// color: parseInt(gradient[0].replace('#', '0x'), 16), +// color2: parseInt(gradient[1].replace('#', '0x'), 16), +// totalSteps: 100, +// pattern: 5 +// }) +// }); \ No newline at end of file diff --git a/src/pages/index.html b/src/pages/index.html index 6455fc8..c5981b4 100644 --- a/src/pages/index.html +++ b/src/pages/index.html @@ -16,6 +16,13 @@ Pixels
    +
  • -
  • +
    • +