diff --git a/data/favicon.ico b/data/favicon.ico
deleted file mode 100644
index 4b46de8..0000000
Binary files a/data/favicon.ico and /dev/null differ
diff --git a/data/gradients.js b/data/gradients.js
new file mode 100644
index 0000000..994eba3
--- /dev/null
+++ 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
+//         })
+//     });
\ 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 @@
       <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>
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": "<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
+//         })
+//     });
\ 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 @@
       <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>