raspberry kiosk major update

diff --git a/raspberry-kiosk/kiosk.css b/raspberry-kiosk/kiosk.css
index 91e34b7..5832093 100644 (file)
--- a/raspberry-kiosk/kiosk.css
+++ b/raspberry-kiosk/kiosk.css
@@ -6,33 +6,38 @@ body {
   padding:0;
   margin:0;
   background-color: white;
+  overflow: hidden;
+  max-width:900px;
+  max-height:1440px;
 }
 
 div {
   width: 100%;
-  padding: 0;
 }
 
 div#siteheader {
   text-align: center;
-  font-size: 1.2em;
-  font-weight: bold;
   color: white;
   //background-color: #36373B;
   background-color: rgb(118, 20, 7);
   font-size:40px;
+  font-weight: bold;
   margin-top:10px;
 }
 
+span.r3red {
+  color: rgb(118, 20, 7);
+}
+
 img.headerphoto {
   width:100%;
-  margin: -60px 0 0 0px;
+  margin: -90px 0 0 0px;
 }
 
 div.headerphoto {
   display:block;
   width: 100%;
-  height: 350px;
+  height: 200px;
   overflow: hidden;
   padding: 0.1em 0;
   text-align: center;
@@ -47,69 +52,37 @@ div.status {
   margin-right:auto;
 }
 
-table.status {
-  width:571px;
-  display:inline;
-  margin-left: 0;
-  margin:right: 0;
-  margin-top:0;
-  margin-bottom:1ex;
-}
-
-p.anwesenheit_status {
-}
-
-td.anwesenheitsstatus {
-  height:100px;
-  text-align:center;
-  margin-left:105px;
-  margin-right:auto;
-  vertical-align:middle;
-  display:table-cell;
-  font-weight:bold;
-  font-size:30px;
-}
-
 p.topic {
   width: 100%;
-  margin-bottom:1ex;
+  margin-bottom:5px;
   margin-top:0px;
   margin-left:0px;
   margin-right:0px;
   font-weight: bold;
   font-variant:small-caps;
-  font-size: 110%;
+  font-size:22px;
   color: white;
   text-align:center;
   background-color: #36373B;
 }
 
-div.calendars {
+div.calendar {
   display:block;
   width: 100%;
-  height: 15em;
+  height: 16em;
   margin-top:10px;
   margin-left:0px;
   margin-right:0px;
-}
-
-div.calendar {
-  //width: 48%;
-  width: 99%;
-  height: 15em;
   overflow: hidden;
   border:1px solid #333;
-  margin-bottom:0ex;
-  margin-top:0ex;
-  margin-left:5px;
-  margin-right:5px;
+  font-size:26px;
 }
 
 div.sensorgraphs {
   display:block;
   text-align:center;
   border:1px solid #333;
-  width:99%;
+  width:399px;
   //height:35em;
   padding-bottom:2px;
   background-color:#fff;
@@ -119,9 +92,32 @@ div.sensorgraphs {
   margin-right:auto;
 }
 
+table.status {
+  width:397px;
+  display:inline;
+  margin-left: 0;
+  margin:right: 0;
+  margin-top:0;
+  margin-bottom:1ex;
+}
+
+p.anwesenheit_status {
+}
+
+td.anwesenheitsstatus {
+  height:100px;
+  text-align:center;
+  margin-left:105px;
+  margin-right:auto;
+  vertical-align:middle;
+  display:table-cell;
+  font-weight:bold;
+  font-size:30px;
+}
+
 div.sensorelem {
   display:block;
-  width:571px;
+  width:397px;
   margin-top:2px;
   margin-bottom:0;
   margin-left:auto;
@@ -132,7 +128,50 @@ img.sensorimg {
   margin:0;
   padding:0;
   border:0px none black;
-  width:571px;
+  width:397px;
+}
+
+div.gpluswall {
+  width: 497px;
+  height: 20em;
+  border:1px solid #333;
+  margin-bottom:0;
+  margin-top:10px;
+}
+
+div.gpluspost {
+  display:block;
+  width: 495px;
+  border-bottom:1px solid gray;
+  margin-top:0px;
+  margin-bottom:5px;
+}
+img.gplusactor {
+  margin:4px;
+  display:inline;
+  float:left;
+}
+p.gplustimestamp {
+  display:inline;
+  float: right;
+  margin-left:auto;
+  margin-right:8px;
+  font-size:9pt;
+}
+p.gplusimg {
+  display:block;
+  margin-top:2px;
+  margin-bottom: 4px;
+  overflow: hidden;
+  max-height:300px;
+}
+p.gplusimg {
+  width:495px;
+}
+p.gplustxt {
+  display:block;
+  font-size:11pt;
+  margin: 4px;
 }
 
 div.even {

diff --git a/raspberry-kiosk/kiosk.html b/raspberry-kiosk/kiosk.html
index 8a5b0e2..f2d93a5 100644 (file)
--- a/raspberry-kiosk/kiosk.html
+++ b/raspberry-kiosk/kiosk.html
@@ -4,6 +4,7 @@
   <title>Realraum Kiosk Seite</title>
   <script src="/jquery.min.js"></script>
   <!--script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script-->
+  <script type="text/javascript" src="gplusapikey.js"></script>
   <script type="text/javascript" src="kiosk.js"></script>
   <link rel="stylesheet" href="kiosk.css" type="text/css" />
  </head>
@@ -13,19 +14,13 @@
   <div id="headerphoto" class="headerphoto">
   <img class="headerphoto" src="http://realraum.at/wiki/lib/exe/fetch.php?media=xro:realraum_hdr.jpg"></img>
   </div>
-  <div class="calendars">
-   <div class="calendar" style="float:left;">
+  <div class="calendar" style="float:left;">
     <p class="topic">Upcoming Events</p>
     <div id="grical_upcoming">Loading calendar ...</div>
-   </div>
-   <!--div class="calendar" style="float:right;">
-    <p class="topic">Previous Events</p>
-    <div id="grical_previous">Loading Old Events ...</div>
-   </div-->
   </div>
-  <!-- Door and Presence Status ------------------------ -->
-  <br/>
    <!-- Sensor Data ------------------------ -->
+ <table border="0" cellpadding="0" cellspacing="0"><tr>
+ <td style="vertical-align:top;">
   <div class="sensorgraphs">
     <p class="topic">Sensor Data</p>
     <div class="sensorelem">
@@ -34,9 +29,9 @@
     <tr><td id="sensor_status" style="border:1px solid black; margin-top:5px;">Loading ...</td></tr>
     </table>
     </div>
-    <!--div class="sensorelem">
+    <div class="sensorelem">
      <img id="tempsensor" class="sensorimg" src="http://realraum.at/get_sensor.php?sensor=temp"/>
-    </div-->
+    </div>
     <div class="sensorelem">
       <img id="lightsensor" class="sensorimg" src="http://realraum.at/get_sensor.php?sensor=light"/>
     </div>
@@ -44,5 +39,14 @@
       <img id="movementsensor" class="sensorimg" src="http://realraum.at/get_sensor.php?sensor=movement"/>
     </div>
   </div>
+  
+  </td><td style="vertical-align:top;">
+
+   <div class="gpluswall">
+    <p class="topic">Google+</p>
+    <div id="gplusevents">G Plus Events</div>
+   </div>
+  </td></tr>
+  </table>
 </body>
 </html>

diff --git a/raspberry-kiosk/kiosk.js b/raspberry-kiosk/kiosk.js
index 15fe505..b090f24 100644 (file)
--- a/raspberry-kiosk/kiosk.js
+++ b/raspberry-kiosk/kiosk.js
@@ -1,3 +1,50 @@
+function writeGooglePlusEvents(data, elem)
+{
+  var ghtml = "";
+  for (var i=0; i< data.items.length; i++)
+  {
+    var item = data.items[i];
+    var noteobj = item.object;
+    var attach = noteobj.attachments;
+    var notetxt = noteobj.content;
+    var noteimg = false;
+    if (attach)
+    {
+      for (var a=0; a<attach.length; a++)
+      {
+        if ( attach[a].objectType == "photo")
+        {
+          noteimg = attach[a].image.url;
+        }
+        else if (attach[a].objectType == "event")
+        {
+          notetxt = "<b>" + attach[a].displayName+"</b><br/>"+notetxt;
+        }
+      }
+    }
+    ghtml += '<div class="gpluspost">'
+    ghtml += '<img class="gplusactor" src="'+item.actor.image.url+'"/><p class="gplustimestamp">'+item.updated+'</p>';
+    ghtml += '<p class="gplustxt">'+notetxt+'</p>';
+    if (noteimg)
+    {
+      ghtml += '<p class="gplusimg"><img class="gplusimg" src="'+noteimg+'"/></p>';
+    }
+    ghtml += '</div>';
+  }
+  elem.innerHTML=ghtml;
+}
+
+
+function loadGooglePlusEvents()
+{
+  var gplusuri = "https://www.googleapis.com/plus/v1/people/113737596421797426873/activities/public?maxResults=3&key="+gplusapikey;
+  var gpluscontainer=document.getElementById("gplusevents");
+  gpluscontainer.innerHTML="Plus loading ...";
+  $.getJSON(gplusuri, function(data){
+    writeGooglePlusEvents(data, gpluscontainer);
+  });
+}
+
 
 function writeCalendar(data, elem)
 {
@@ -19,7 +66,7 @@ function writeCalendar(data, elem)
         }
         when = data[s].start +", "+stime+" Uhr";
       }
-      calhtml += '<li class="level1"><div class="li">'+when+' - <a href="'+data[s].url+'" class="urlextern" title="'+data[s].title+'"  rel="nofollow">'+data[s].title+'</a></div></li>'+"\n";
+      calhtml += '<li class="level1"><span class="r3red">'+when+'</span> - '+data[s].title+'</li>'+"\n";
     }
     elem.innerHTML='<ul>'+calhtml+'</ul>';
 }
@@ -83,7 +130,7 @@ var anwesenheit_timer = window.setInterval("updateAnwesenheitStatus()", 10000);
 
 function updateSensors()
 {
-  //reloadImg(document.getElementById("tempsensor"));
+  reloadImg(document.getElementById("tempsensor"));
   reloadImg(document.getElementById("movementsensor"));
   reloadImg(document.getElementById("lightsensor"));
 }
@@ -98,9 +145,11 @@ $(document).ready(function()
   setInterval("clock()", 500);
   updateAnwesenheitStatus();
   loadCalendar();
+  loadGooglePlusEvents();
   setInterval("updateAnwesenheitStatus()", 10000);
   setInterval("loadCalendar()", 100000);
   setInterval("updateSensors()", 50000);
+  setInterval("loadGooglePlusEvents()", 3600*1000);
 });
 
 function updateDateClock(now)
@@ -156,6 +205,7 @@ function reloadImg(element)
         var new_image = new Image();
         //set up the new image
         new_image.id = element.id;
+        new_image.className = element.className;
         new_image.src = element.src;
         element.parentNode.insertBefore(new_image,element);
         element.parentNode.removeChild(element);