div.contentborder,
div.calendar,
div.sensorgraphs,
+div.sensorgauges,
div.gpluswall
{
display:block;
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;
<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">
}
+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="";
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>';
}
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>';
}
<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">
<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>
<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>