From 1fd2e2eaf515f15a1a38a59d4259edf920b33c5d Mon Sep 17 00:00:00 2001
From: Bernhard Tittelbach <xro@realraum.at>
Date: Tue, 8 Oct 2013 03:57:56 +0000
Subject: [PATCH] sensors in 768x1366

---
 raspberry-kiosk/kiosk.css          |    9 +++++++++
 raspberry-kiosk/kiosk.html         |    2 +-
 raspberry-kiosk/kiosk.js           |   14 ++++++++++++++
 raspberry-kiosk/kiosk1.html        |    2 +-
 raspberry-kiosk/kiosk768x1366.html |   21 ++++++++++++++++++---
 5 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/raspberry-kiosk/kiosk.css b/raspberry-kiosk/kiosk.css
index 13d0dca..50a0d81 100644
--- a/raspberry-kiosk/kiosk.css
+++ b/raspberry-kiosk/kiosk.css
@@ -59,6 +59,7 @@ div.headerphoto2 {
 div.contentborder,
 div.calendar,
 div.sensorgraphs,
+div.sensorgauges,
 div.gpluswall
 {
   display:block;
@@ -116,6 +117,14 @@ div.sensorgraphs {
   margin-right:auto;
 }
 
+div.sensorgauges {
+  text-align:center;
+  width:268px;
+  padding-bottom:1em;
+  margin-left:auto;
+  margin-right:auto;
+}
+
 table.status {
   width:397px;
   display:inline;
diff --git a/raspberry-kiosk/kiosk.html b/raspberry-kiosk/kiosk.html
index e396155..9313be9 100644
--- a/raspberry-kiosk/kiosk.html
+++ b/raspberry-kiosk/kiosk.html
@@ -40,7 +40,7 @@
       <img id="movementsensor" class="sensorimg" src="http://realraum.at/shmcache/movement.png"/>
     </div>
   </div>
-  
+
   </td><td style="vertical-align:top;">
    <!-- Google Plus Wall ------------------------ -->
    <div class="gpluswall">
diff --git a/raspberry-kiosk/kiosk.js b/raspberry-kiosk/kiosk.js
index bb69932..827861f 100644
--- a/raspberry-kiosk/kiosk.js
+++ b/raspberry-kiosk/kiosk.js
@@ -165,6 +165,18 @@ function loadCalendarMainPage()
 }
 
 
+function drawGauge(targetelem, label, temp, options) {
+    var data = google.visualization.arrayToDataTable([["Label", "Value"],[label,temp]]);
+    // Create and draw the visualization.
+    if (targetelem)
+    {
+        options["width"] = targetelem.getAttribute("width");
+        options["height"] = targetelem.getAttribute("height");
+        var chart = new google.visualization.Gauge(targetelem);
+        chart.draw(data, options);
+    }
+}
+
 function writeAnwesenheitStatus(data)
 {
   var html="";
@@ -198,6 +210,7 @@ function writeAnwesenheitStatus(data)
       sensorstd+='<td class="sensorstatus"><b>Temperatur</b>';
       $.each( data.sensors.temperature, function(s, sensorobj) {
         sensorstd+='<br/>'+sensorobj.location+': '+sensorobj.value.toFixed(2)+sensorobj.unit;
+		drawGauge(document.getElementById('tempgauge'), "Temp "+sensorobj.location, sensorobj.value, {redFrom: 33, redTo: 40, yellowFrom:29, yellowTo: 33,  minorTicks: 4, min:0, max:40});
       });
       sensorstd+='</td>';
     }
@@ -206,6 +219,7 @@ function writeAnwesenheitStatus(data)
       sensorstd+='<td class="sensorstatus"><b>Licht</b>';
       $.each( data.sensors.ext_illumination, function(s, sensorobj) {
         sensorstd+='<br/>'+sensorobj.location+': '+sensorobj.value;
+        drawGauge(document.getElementById('lightgauge'), "Licht "+sensorobj.location, sensorobj.value, {redFrom: 950, redTo: 1024,yellowFrom:0, yellowTo: 200,minorTicks: 4, min:0, max:1024});
       });
       sensorstd+='</td>';
     }
diff --git a/raspberry-kiosk/kiosk1.html b/raspberry-kiosk/kiosk1.html
index 6a59db1..8c674d0 100644
--- a/raspberry-kiosk/kiosk1.html
+++ b/raspberry-kiosk/kiosk1.html
@@ -34,7 +34,7 @@
       <img id="movementsensor" class="sensorimg" src="http://realraum.at/shmcache/movement.png"/>
     </div>
   </div>
-  
+
   </td><td style="vertical-align:top;">
    <!-- Google Plus Wall ------------------------ -->
    <div class="gpluswall">
diff --git a/raspberry-kiosk/kiosk768x1366.html b/raspberry-kiosk/kiosk768x1366.html
index f1a4ea2..b11d22e 100644
--- a/raspberry-kiosk/kiosk768x1366.html
+++ b/raspberry-kiosk/kiosk768x1366.html
@@ -5,12 +5,15 @@
   <link rel="stylesheet" href="kiosk.css" type="text/css" />
   <script type="text/javascript" src="/jquery.min.js"></script>
   <!--script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script-->
-  <!--script src="/purl.js"></script-->
+   <script type="text/javascript" src="https://www.google.com/jsapi"></script>
+   <script type="text/javascript">
+      google.load('visualization', '1', {packages: ['gauge']});
+  </script>
   <script type="text/javascript" src="kiosk.js"></script>
  </head>
  <body style="max-width:768px; max-height:1366px; font-size:19px;">
   <div id="dateclock"></div>
-  <div id="siteheader">Neuigkeiten auf <span style="font-size:110%;">http://realraum.at</span></div>  
+  <div id="siteheader">Neuigkeiten auf <span style="font-size:110%;">http://realraum.at</span></div>
   <div id="headerphoto" class="headerphoto">
   <img class="headerphoto" src="http://realraum.at/wiki/lib/exe/fetch.php?media=xro:realraum_hdr.jpg"></img>
   </div>
@@ -19,10 +22,22 @@
     <p class="topic">Veranstaltungskalender</p>
     <div id="grical_upcoming_kiosk">Kalendar lädt ...</div>
   </div>
+ <table border="0" cellpadding="0" cellspacing="0"><tr>
+ <td style="vertical-align:top; padding-right:3px;">
+ <div class="sensorgauges">
+ <p class="topic">Sensorwerte</p>
+ <div id="anwesenheit_status_kiosk" style="height:100px; border:0px none black;">Lädt ...</div>
+ <div id="sensor_status" style="border:0px none black; margin-top:5px;">Lädt ...</div>
+ <div id="tempgauge" style="width: 260px; height: 260px;"></div>
+ <div id="lightgauge" style="width: 260px; height: 260px;"></div>
+ </div>
+ </td>
+  </td><td style="vertical-align:top;">
    <!-- Google Plus Wall ------------------------ -->
    <div class="gpluswall" style="margin-left:auto; margin-right:auto;">
     <p class="topic">Google+</p>
     <div id="gplusevents">Lädt ...</div>
-   </center>
+     </td></tr>
+  </table>
 </body>
 </html>
-- 
1.7.10.4