firing moar events

2025-12-14 14:01:28 +01:00 · 2018-09-30 14:29:00 +02:00
parent bc11832da1
commit 35ea491c57
12 changed files with 162 additions and 24 deletions
--- a/data/favicon.ico
+++ b/data/favicon.ico
--- a/data/gradients.js
+++ b/data/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": "<b>foo</b>", "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
+//         })
+//     });
--- a/data/index.html
+++ b/data/index.html
@@ -16,6 +16,13 @@
      <span class="heading">Pixels</span>
      <div class="content">
        <ul>
+            <li class="form-row ParamSelect"
+            data-label="Hue"
+            data-name="hue"
+            data-topic="pixels/hue"
+            data-default="0"
+            data-entries='[{"text": "None", "value": "0"}, {"text": "Cool", "value": "1"}, {"text": "Warm", "value": "2"}, {"text": "Alien", "value": "5"}]'
+            ></li>
          <li class="form-row ParamColor" 
            data-name="color" 
            data-topic="pixels/color"
@@ -34,14 +41,6 @@
          data-default="0"
          data-entries='[{"text": "None", "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"
@@ -49,6 +48,14 @@
            data-value="64"
            data-topic="pixels/brightness"
            data-label="Brightness">
+          </li>
+          <li class="form-row ParamSlider" 
+            data-name="totalSteps" 
+            data-min="1"
+            data-max="255"
+            data-value="255"
+            data-topic="pixels/totalSteps"
+            data-label="Steps">
          </li>    
        </ul>
      </div>
--- 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));
+
    }

 }