diff --git a/src/main/webapp/WEB-INF/jsp/index.jsp b/src/main/webapp/WEB-INF/jsp/index.jsp
index 1916e1e..b793aef 100644
--- a/src/main/webapp/WEB-INF/jsp/index.jsp
+++ b/src/main/webapp/WEB-INF/jsp/index.jsp
@@ -18,17 +18,18 @@
     <script type="text/javascript" src="<c:url value="/resources/js/jquery.mousewheel.js" />"></script>
 
     <script type="text/javascript">
+        var volumes = $.parseJSON('{"room1":0,"room2":0,"room3":0,"room4":0}');
+        var devices = [
+            {"red":72,"green":69,"blue":255,"startAddress":1,"type":"Par56Spot","deviceId":0,"deviceName":"Par56 Lampe 1","picture":null},
+            {"red":111,"green":222,"blue":23,"startAddress":6,"type":"Par56Spot","deviceId":1,"deviceName":"Par56 Lampe 2","picture":null},
+            {"red":0,"green":0,"blue":0,"startAddress":11,"type":"Par56Spot","deviceId":2,"deviceName":"Par56 Lampe 3","picture":null},
+            {"red":0,"green":0,"blue":0,"startAddress":16,"type":"Par56Spot","deviceId":3,"deviceName":"Par56 Lampe 4","picture":null},
+            {"mode":0,"speed":0,"intensity":0,"startAddress":21,"type":"Strobe1500","deviceId":4,"deviceName":"Stroboskop 1","picture":null},
+            {"red":0,"green":0,"blue":0,"startAddress":508,"type":"Par56Spot","deviceId":5,"deviceName":"Par56 Lampe 5","picture":null}
+        ];
         $(document).ready(
             function() {
-                var volumes = $.parseJSON('{"room1":0,"room2":0,"room3":0,"room4":0}');
-                var devices = [
-                    {"red":72,"green":69,"blue":255,"startAddress":1,"type":"Par56Spot","deviceId":0,"deviceName":"Par56 Lampe 1","picture":null},
-                    {"red":111,"green":222,"blue":23,"startAddress":6,"type":"Par56Spot","deviceId":1,"deviceName":"Par56 Lampe 2","picture":null},
-                    {"red":0,"green":0,"blue":0,"startAddress":11,"type":"Par56Spot","deviceId":2,"deviceName":"Par56 Lampe 3","picture":null},
-                    {"red":0,"green":0,"blue":0,"startAddress":16,"type":"Par56Spot","deviceId":3,"deviceName":"Par56 Lampe 4","picture":null},
-                    {"mode":0,"speed":0,"intensity":0,"startAddress":21,"type":"Strobe1500","deviceId":4,"deviceName":"Stroboskop 1","picture":null},
-                    {"red":0,"green":0,"blue":0,"startAddress":508,"type":"Par56Spot","deviceId":5,"deviceName":"Par56 Lampe 5","picture":null}
-                ];
+
 
                 function sendData(data) {
                     $.ajax({
@@ -38,6 +39,8 @@
                         dataType: "json",
                         data: JSON.stringify(data)
                     });
+                    console.log(data);
+                    console.log(JSON.stringify(data));
                 }
 
                 var senden = function sendOutAllDevices() {
@@ -45,14 +48,15 @@
                     for(var i=0;i<devices.length;i++) {
                         if(devices[i].type=="Par56Spot" && devices[i].dirty) {
                             delete devices[i].dirty;
-                            changedDevs.push(devices[i]);
+                            var dev = {"deviceId": i, "options":{"red":devices[i].red, "green":devices[i].green, "blue":devices[i].blue}};
+                            changedDevs.push(dev);
                         }
                     }
                     if (changedDevs.length > 0) {
-                        sendData(changedDevs);
+                        sendData({"timeStamp": Math.round(new Date().getTime()/1000), "updates": changedDevs});
                     }
                     console.log("set new interval for sending");
-                    //window.setTimeout(senden, 100);
+                    window.setTimeout(senden, 100);
                 };
 
                 // vielleicht baut man lieber was mit setTimeout und setzt das jeweils neu wenn man daten ändert
@@ -93,8 +97,13 @@
                         red = hexcolor.substr(1,2);
                         green = hexcolor.substr(3,2);
                         blue = hexcolor.substr(5,2);
+                        $('#par56select option:selected').each(function() {
+                            devices[$(this).attr('name')].red = parseInt(red, 16);
+                            devices[$(this).attr('name')].green = parseInt(green, 16);
+                            devices[$(this).attr('name')].blue = parseInt(blue, 16);
+                            devices[$(this).attr('name')].dirty = true;
+                        });
                         console.log("data changed");
-                        dataChanged = true;
 
                     }
                 });
@@ -107,6 +116,13 @@
                     }
 
                 });
+                $('#par56select').change(function() {
+                    $('#par56select option:selected').each(function() {
+                        var hexstring = '#' + devices[$(this).attr('name')].red.toString(16) + devices[$(this).attr('name')].green.toString(16) + devices[$(this).attr('name')].blue.toString(16);
+                        console.log(hexstring);
+                        colorpicker_raum1.hex(hexstring);
+                    });
+                });
             }
         );