kiosk current files
[svn42.git] / raspberrypi_gpio_relay_licht / index.html
index 5bf1fba..e99dc1f 100644 (file)
@@ -1,5 +1,218 @@
 <html>
 <head>
-<meta http-equiv="refresh" content="0; URL=http://licht.realraum.at/cgi-bin/switch.cgi?nofloat=1">
+<link rel="stylesheet" type="text/css" href="style.css">
 </head>
+
+
+
+<script type="text/javascript">
+
+   var pc1_state=false;
+   var pc2_state=false;
+   var pc3_state=false;
+   var pc4_state=false;
+   var pc5_state=false;
+   var pc6_state=false;
+
+function callBackButtons(req)
+{
+       if(req.status != 200)
+       {
+               return;
+       }
+
+
+       var data = JSON.parse(req.responseText);
+
+               if(data['ceiling1']==true)
+               {
+                       pc1_state=true;
+                       document.getElementById("pc1").style.background="green";
+               }
+               else 
+               {
+                       pc1_state=false;
+                       document.getElementById("pc1").style.background="red";
+               }
+               
+
+                if(data['ceiling2']==true)
+                {
+                        pc2_state=true;
+                        document.getElementById("pc2").style.background="green";
+                }
+                else 
+                {
+                        pc2_state=false;
+                        document.getElementById("pc2").style.background="red";
+                }
+               
+                if(data['ceiling3']==true)
+                {
+                        pc3_state=true;
+                        document.getElementById("pc3").style.background="green";
+                }
+                else 
+                {
+                        pc3_state=false;
+                        document.getElementById("pc3").style.background="red";
+                }
+               
+
+                if(data['ceiling4']==true)
+                {
+                        pc4_state=true;
+                        document.getElementById("pc4").style.background="green";
+                }
+                else 
+                {
+                        pc4_state=false;
+                        document.getElementById("pc4").style.background="red";
+                }
+
+
+                if(data['ceiling5']==true)
+                {
+                        pc5_state=true;
+                        document.getElementById("pc5").style.background="green";
+                }
+                else 
+                {
+                        pc5_state=false;
+                        document.getElementById("pc5").style.background="red";
+                }
+
+                if(data['ceiling6']==true)
+                {
+                        pc6_state=true;
+                        document.getElementById("pc6").style.background="green";
+                }
+                else 
+                {
+                        pc6_state=false;
+                        document.getElementById("pc6").style.background="red";
+                }
+}
+
+function updateButtons(uri) {
+  var req = new XMLHttpRequest;
+  req.overrideMimeType("application/json");
+  req.open("GET", uri, true);
+  req.onload  = function() {callBackButtons(req)};
+  req.setRequestHeader("googlechromefix","");
+  req.send(null);
+}
+function sendMultiButton( str ) {
+ url = "/cgi-bin/mswitch.cgi?"+str;
+  updateButtons(url);
+}
+
+
+//function pc(n) switches light n
+
+function pc1()
+{
+       if(pc1_state===true)
+        {
+          pc1_state=false;
+          sendMultiButton("ceiling1=0")
+          document.getElementById("pc1").style.background="red";
+       }       
+       else
+       {
+          pc1_state=true;
+          sendMultiButton("ceiling1=1")
+           document.getElementById("pc1").style.background="green";
+       }
+}
+function pc2()
+{
+       if(pc2_state===true)
+        {
+          pc2_state=false;
+           sendMultiButton("ceiling2=0")               
+          document.getElementById("pc2").style.background="red";
+       }       
+       else
+       {
+          pc2_state=true;
+          sendMultiButton("ceiling2=1")        
+           document.getElementById("pc2").style.background="green";
+       }
+}
+function pc3()
+{
+       if(pc3_state===true)
+        {
+          pc3_state=false;
+          sendMultiButton("ceiling3=0")        
+          document.getElementById("pc3").style.background="red";
+       }       
+       else
+       {
+          pc3_state=true;
+          sendMultiButton("ceiling3=1")
+           document.getElementById("pc3").style.background="green";
+       }
+}
+function pc4()
+{
+       if(pc4_state===true)
+        {
+          pc4_state=false;
+          sendMultiButton("ceiling4=0")
+          document.getElementById("pc4").style.background="red";
+       }       
+       else
+       {
+          pc4_state=true;
+          sendMultiButton("ceiling4=1")
+           document.getElementById("pc4").style.background="green";
+       }
+}
+function pc5()
+{
+       if(pc5_state===true)
+        {
+          pc5_state=false;
+          sendMultiButton("ceiling5=0")
+          document.getElementById("pc5").style.background="red";
+       }       
+       else
+       {
+          pc5_state=true;
+          sendMultiButton("ceiling5=1")
+           document.getElementById("pc5").style.background="green";
+       }
+}
+
+function pc6()
+{
+       if(pc6_state===true)
+        {
+          pc6_state=false;
+          sendMultiButton("ceiling6=0")
+          document.getElementById("pc6").style.background="red";
+       }       
+       else
+       {
+          pc6_state=true;
+          sendMultiButton("ceiling6=1")
+           document.getElementById("pc6").style.background="green";
+       }
+}
+
+setInterval("updateButtons('/cgi-bin/mswitch.cgi');", 30*100 );
+updateButtons("/cgi-bin/mswitch.cgi");
+</script>
+
+<body>
+<div style="position:absolute; top:640px;"><a href="switch.html">Link to old switches</a></div>
+<div class="pc1" id="pc1" onclick="pc1()"></div>
+<div class="pc2" id="pc2" onclick="pc2()"></div>
+<div class="pc3" id="pc3" onclick="pc3()"></div>
+<div class="pc4" id="pc4" onclick="pc4()"></div>
+<div class="pc5" id="pc5" onclick="pc5()"></div>
+<div class="pc6" id="pc6" onclick="pc6()"></div>
+</body>
 </html>