added presets

server/public/js/client.js

@@ -16,8 +16,9 @@ var lamp_off_color = '#707070'
 var tries = 0
 var live = false
 var drawn = false
+var presets;
 
-DrawPage('main')
+DrawPage('main');
 Start()
 
 function Start() {
@@ -38,6 +39,11 @@ function Start() {
     var msg = JSON.parse(e.data);
 
     switch(msg.type) {
+      case 'init':
+      break;
+      case 'presets':
+        presets = msg.presets;
+      break;
       case 'status':
         lights_on = msg.on
         led_color = '#' + msg.color
@@ -127,7 +133,7 @@ function DrawWall() {
 
 // Button handlers
 $('div.b').on('input', '#br', function () {
-  SendBrightness($(this).val())
+  SendBrightness($(this).val());
 })
 
 $('div.b').on('click', '.button.amount', function () {
@@ -137,9 +143,13 @@ $('div.b').on('click', '.button.amount', function () {
 })
 
 $('div.b').on('click', '.button.preset', function () {
-  LoadPreset($(this).attr('data-preset'))
-})
+  SendPreset($(this).attr('data-id'));
+  console.log($(this).attr('data-id'));
+});
 
+$('div.b').on('click', '.button.main', () => {
+  DrawPage('main');
+});
 
 // On Wall button click
 $('div.b').on('click', 'div.wall', function () {
@@ -165,7 +175,7 @@ $('div.b').on('click', 'div.wall', function () {
 })
 
 // Longpress to show colorpicker
-var timer
+var timer;
 $('div.b').on('mousedown', '.color', function (e) {
   timer = setTimeout(() => {
     $('.button.colpicker').click();
@@ -194,7 +204,7 @@ $('div.b').on('click', '#onOff', function () {
 
 $('div.b').on('click', '.button.colpicker', function (e) {
   color = $(this).val().slice(1,7)
-})
+});
 
 function UpdateWalls() {
   for (let i = 0; i < wall_data.length; i++) {
@@ -212,7 +222,7 @@ function UpdateWalls() {
   }
 }
 
-function preset(id, data) {
+function SendPreset(id, data) {
   send({type: 'preset', presetId: id, data: data});
 }
 

server/public/layout/style.css

@@ -167,6 +167,10 @@ p {
     transition: 1s;
 }
 
+.button {
+  cursor: pointer;
+}
+
 .slider::-moz-range-thumb {
     width: 20px;
     height: 20px;

server/public/pages/main.tbd

@@ -51,6 +51,10 @@
 		<div class="effect amount button set" data-amount='5'><p>Jede 5. LED</p></div>
 		<div class="effect amount button set" data-amount='10'><p>Jede 10. LED</p></div>
 	</div>
+	<div class="colorpicker">
+		<!-- HACK:  -->
+		<button type="button" name="button" onclick="DrawPage('preset')">Presets</button>
+	</div>
 </div>
 <!-- <div class="center">
 	<div class="colorpicker">

server/public/pages/preset.tbd

@@ -0,0 +1,14 @@
+<div class="center">
+    <div class="presetHolder"></div>
+    <div class="main button">Go back</div>
+</div>
+
+<script type="text/javascript">
+  (function() {
+    'use strict';
+    let preset;
+    for (preset of presets) {
+      $('div.presetHolder').append('<div class="button preset" data-id="'+preset.id+'">' + preset.slug + '</div>');
+    }
+  }());
+</script>

server/server.js

@@ -60,7 +60,8 @@ presetDBInstance.add(new Preset('rainbow_animated', l_rainbow_factory));
 // If the server gets a connection
 wss.on('connection', function(ws, req) {
 
-  SendToEveryone({type: 'status', on: LedLib.on, max: LedLib.max_brightness, favorites: favorites, color: LedLib.color, wall_data: LedLib.wall_data })
+  SendToEveryone({type: 'status', on: LedLib.on, max: LedLib.max_brightness, favorites: favorites, color: LedLib.color, wall_data: LedLib.wall_data });
+  SendToEveryone({type: 'presets', presets: presetDBInstance.presets});
 
   ws.on('message', (msg) => {
     try {
@@ -123,6 +124,8 @@ function PresetDb() {
   }
 
   this.run = (id, data) => {
+    id = parseInt(id);
+
     let p = this.getPresetById(id);
     if (p === undefined) return false;
     let d = data === undefined ? p.data : data;