<!DOCTYPE html>
<!--
file: index.html
author: Stefan Brand (seiichiro<at>seiichiro0185.org)
date: 17.08.2013
desc: This is the main file for the web-based RaspiControl.
It countains the jquerymobile UI code and the javascript to
fetch temperature data and control wireless switches
-->
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Temperaturen</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="inc/jquery.mobile-1.3.0.min.css" />
<script src="inc/jquery-1.8.2.min.js"></script>
<script src="inc/jquery.mobile-1.3.0.min.js"></script>
<script src="inc/dygraph-combined.js"></script>
<script>
var updateInterval = 0;
// Add a leading Zero if number is < 10
function twoDigits (num) {
if (num < 10) {
return "0" + num;
} else {
return num;
}
}
// Format the data for the detail pages
// Parameters:
// * line: CSV-like Line with the data
// * num: Number of the detail page
function formatDetail (line, num) {
var value = line.split(";");
$("#t"+num+"min").html(Number(value[1]).toFixed(2) + " °C");
//var tmin = Date(value[2] * 1000);
$("#t"+num+"mindat").html(value[2]);
$("#t"+num+"max").html(Number(value[3]).toFixed(2) + " °C");
//var tmax = Date(value[4] * 1000);
$("#t"+num+"maxdat").html(value[4]);
$("#t"+num+"avg").html(Number(value[5]).toFixed(2) + " °C");
}
// Load Temperature data using ajax and update the page
function loadData()
{
$.mobile.loading( "show" );
$.getJSON("/temp", function(data) {
$.each(data, function(i, item) {
$("#t" + item.id).html(Number(item.temp).toFixed(2) + " °C");
$("#t" + item.id + "name").html(item.name);
$("#t" + item.id + "min").html(Number(item.min).toFixed(2) + " °C")
$("#t" + item.id + "max").html(Number(item.max).toFixed(2) + " °C")
$("#t" + item.id + "avg").html(Number(item.avg).toFixed(2) + " °C")
var ts = new Date(item.tsmin*1000);
var month = ts.getMonth() + 1;
$("#t" + item.id + "mindat").html(twoDigits(ts.getDate()) + "." + twoDigits(month) + "." + ts.getFullYear() + " " + twoDigits(ts.getHours()) + ":" + twoDigits(ts.getMinutes()));
ts = new Date(item.tsmax*1000);
month = ts.getMonth() + 1;
$("#t" + item.id + "maxdat").html(twoDigits(ts.getDate()) + "." + twoDigits(month) + "." + twoDigits(ts.getFullYear()) + " " + twoDigits(ts.getHours()) + ":" + twoDigits(ts.getMinutes()));
});
$.mobile.loading( "hide" );
});
}
// Send command to the rfbb backend for power switches
// Parameters:
// * chan: Wireless channel of the switch (1-4)
// * id: Wireless ID of the switch (1-4)
// * cmd: Command to send (1 = on, 0 = off)
function pswitch(id)
{
$.ajax({url: "power/" + id});
}
$(document).bind("pagebeforeshow", function(event,pdata) {
var parsedUrl = $.mobile.path.parseUrl( location.href );
var ts=new Date();
switch ( parsedUrl.hash ) {
case "#t1detail":
$.getJSON("/temp/1", {"from": (ts.getTime()/1000)-(60*60*24), "to": ts.getTime()/1000}, function(data) {
var tdata = $.map(data, function(n) {return [ [ new Date(n[0]*1000), n[1] ] ]; });
g = new Dygraph(document.getElementById("t1graph"), tdata);
});
break;
case "#t2detail":
$.getJSON("/temp/2", {"from": (ts.getTime()/1000)-(60*60*24), "to": ts.getTime()/1000}, function(data) {
var tdata = $.map(data, function(n) {return [ [ new Date(n[0]*1000), n[1] ] ]; });
g = new Dygraph(document.getElementById("t2graph"), tdata);
});
break;
case "#t3detail":
$.getJSON("/temp/3", {"from": (ts.getTime()/1000)-(60*60*24), "to": ts.getTime()/1000}, function(data) {
var tdata = $.map(data, function(n) {return [ [ new Date(n[0]*1000), n[1] ] ]; });
g = new Dygraph(document.getElementById("t3graph"), tdata);
});
break;
case "#t4detail":
$.getJSON("/temp/4", {"from": (ts.getTime()/1000)-(60*60*24), "to": ts.getTime()/1000}, function(data) {
var tdata = $.map(data, function(n) {return [ [ new Date(n[0]*1000), n[1] ] ]; });
g = new Dygraph(document.getElementById("t4graph"), tdata);
});
break;
}
});
$(document).ready(function() {loadData(); updateInterval = setInterval("loadData()", 600000);})
</script>
</head>
<body>
<!-- Main Page -->
<div data-role="page" id="main">
<header data-role="header">
<h1>RasPiControl</h1>
</header>
<article data-role="content">
<ul data-role="listview">
<li data-icon="info">
<a href="#temp">
<h1>Temperaturen</h1>
</a>
</li>
<li data-icon="info">
<a href="#switch">
<h1>Schalter</h1>
</a>
</li>
</ul>
</article>
<footer data-role="footer" data-position="fixed">
<p style="padding-left: 15px; font-size:0.7em;"><span></span></p>
</footer>
</div>
<!-- Temperature Overview -->
<div data-role="page" id="temp">
<header data-role="header">
<a href="#main" data-icon="bars" data-iconpos="notext">Übersicht</a>
<h1>RasPiControl: Temperaturen</h1>
<a href="javascript:loadData()" data-icon="refresh" data-iconpos="notext" data-transition="slidedown">Neu laden</a>
</header>
<article data-role="content">
<ul data-role="listview">
<li data-icon="info">
<a href="#t1detail">
<h1 id="t1name">Keine Daten</h1>
<p id="t1">Keine Daten</p>
</a>
</li>
<li data-icon="info">
<a href="#t2detail">
<h1 id="t2name">Keine Daten</h1>
<p id="t2">Keine Daten</p>
</a>
</li>
<li data-icon="info">
<a href="#t3detail">
<h1 id="t3name">Keine Daten</h1>
<p id="t3">Keine Daten</p>
</a>
</li>
<li data-icon="info">
<a href="#t4detail">
<h1 id="t4name">Keine Daten</h1>
<p id="t4">Keine Daten</p>
</a>
</li>
</ul>
</article>
<footer data-role="footer" data-position="fixed">
<p style="padding-left: 15px; font-size:0.7em;"><span>Daten vom </span><span id="timestamp"></span></p>
</footer>
</div>
<!-- Temperature 1 Details -->
<div data-role="page" id="t1detail" data-cache="false">
<header data-role="header">
<h1>RasPiControl: Außen</h1>
<a href="#temp" data-icon="grid" data-iconpos="notext">Übersicht</a>
</header>
<article data-role="content">
<div class="ui-grid-b">
<div class="ui-block-a">
<div class="ui-bar ui-bar-c">
<h3>⇓</h3>
<p id="t1min">Keine Daten</p>
<p id="t1mindat" style="font-size:0.7em;">Keine Daten</p>
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<h3>⇑</h3>
<p id="t1max">Keine Daten</p>
<p id="t1maxdat" style="font-size:0.7em;">Keine Daten</p>
</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-c">
<h3>Ø</h3>
<p id="t1avg">Keine Daten</p>
<p style="font-size:0.7em;">Letzte 24h</p>
</div>
</div>
</div>
<div class="ui-grid-solo">
<div class="ui-grid-a" style="text-align: center; width: 95%; height: 300px; margin: 8px;" id="t1graph" />
</div>
</article>
<footer data-role="footer" data-position="fixed">
<p style="padding-left: 15px; font-size:0.7em;">Basierend auf Daten der letzten 24h<p>
</footer>
</div>
<!-- Temperature 2 Details -->
<div data-role="page" id="t2detail">
<header data-role="header">
<h1>RasPiControl: Wohnzimmer</h1>
<a href="#temp" data-icon="grid" data-iconpos="notext">Übersicht</a>
</header>
<article data-role="content">
<div class="ui-grid-b">
<div class="ui-block-a">
<div class="ui-bar ui-bar-c">
<h3>⇓</h3>
<p id="t2min">Keine Daten</p>
<p id="t2mindat" style="font-size:0.7em;">Keine Daten</p>
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<h3>⇑</h3>
<p id="t2max">Keine Daten</p>
<p id="t2maxdat" style="font-size:0.7em;">Keine Daten</p>
</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-c">
<h3>Ø</h3>
<p id="t2avg">Keine Daten</p>
<p style="font-size:0.7em;">Letzte 24h</p>
</div>
</div>
</div>
<div class="ui-grid-solo" style="text-align: center;">
<div class="ui-grid-a">
<div class="ui-grid-a" style="text-align: center; width: 95%; height: 300px; margin: 8px;" id="t2graph" />
</div>
</div>
</article>
<footer data-role="footer" data-position="fixed">
<p style="padding-left: 15px; font-size:0.7em;">Basierend auf Daten der letzten 24h<p>
</footer>
</div>
<!-- Temperature 3 Details -->
<div data-role="page" id="t3detail">
<header data-role="header">
<h1>RasPiControl: Schlafzimmer</h1>
<a href="#temp" data-icon="grid" data-iconpos="notext">Übersicht</a>
</header>
<article data-role="content">
<div class="ui-grid-b">
<div class="ui-block-a">
<div class="ui-bar ui-bar-c">
<h3>⇓</h3>
<p id="t3min">Keine Daten</p>
<p id="t3mindat" style="font-size:0.7em;">Keine Daten</p>
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<h3>⇑</h3>
<p id="t3max">Keine Daten</p>
<p id="t3maxdat" style="font-size:0.7em;">Keine Daten</p>
</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-c">
<h3>Ø</h3>
<p id="t3avg">Keine Daten</p>
<p style="font-size:0.7em;">Letzte 24h</p>
</div>
</div>
</div>
<div class="ui-grid-solo" style="text-align: center;">
<div class="ui-grid-a">
<div class="ui-grid-a" style="text-align: center; width: 95%; height: 300px; margin: 8px;" id="t3graph" />
</div>
</div>
</article>
<footer data-role="footer" data-position="fixed">
<p style="padding-left: 15px; font-size:0.7em;">Basierend auf Daten der letzten 24h<p>
</footer>
</div>
<!-- Temperature 4 Details -->
<div data-role="page" id="t4detail">
<header data-role="header">
<h1>RasPiControl: Netzwerkschrank</h1>
<a href="#temp" data-icon="grid" data-iconpos="notext">Übersicht</a>
</header>
<article data-role="content">
<div class="ui-grid-b">
<div class="ui-block-a">
<div class="ui-bar ui-bar-c">
<h3>⇓</h3>
<p id="t4min">Keine Daten</p>
<p id="t4mindat" style="font-size:0.7em;">Keine Daten</p>
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<h3>⇑</h3>
<p id="t4max">Keine Daten</p>
<p id="t4maxdat" style="font-size:0.7em;">Keine Daten</p>
</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-c">
<h3>Ø</h3>
<p id="t4avg">Keine Daten</p>
<p style="font-size:0.7em;">Letzte 24h</p>
</div>
</div>
</div>
<div class="ui-grid-solo" style="text-align: center;">
<div class="ui-grid-b">
<div class="ui-grid-a" style="text-align: center; width: 95%; height: 300px; margin: 8px;" id="t4graph" />
</div>
</div>
</article>
<footer data-role="footer" data-position="fixed">
<p style="padding-left: 15px; font-size:0.7em;">Basierend auf Daten der letzten 24h<p>
</footer>
</div>
<!-- Wireless Switches -->
<div data-role="page" id="switch">
<header data-role="header">
<a href="#main" data-icon="bars" data-iconpos="notext">Übersicht</a>
<h1>RasPiControl: Schalter</h1>
</header>
<article data-role="content">
<ul data-role="listview">
<li data-icon="info">
<a href="#" onclick="pswitch(2)"><h1>Monitor & Co</h1></a>
</li>
<li data-icon="info">
<a href="#" onclick="pswitch(1)"><h1>Drucker</h1></a>
</li>
<li data-icon="info">
<a href="#" onclick="pswitch(4)"><h1>Rechner</h1></a>
</li>
</ul>
</article>
<footer data-role="footer" data-position="fixed">
<p style="padding-left: 15px; font-size:0.7em;">Controlled by a Raspberry Pi</p>
</footer>
</div>
</body>