<!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>
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);
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);
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(chan, id, cmd)
{
$.ajax({url: "rfbb?chan=" + chan + "&id=" + id + "&cmd=" + cmd});
}
/*$(document).bind("pagebeforeshow", function(event,pdata) {
var parsedUrl = $.mobile.path.parseUrl( location.href );
switch ( parsedUrl.hash ) {
case "#t1detail":
$("#t1img").attr("src", "tgraph?id=1&from=now-24h&to=now&step=1&w=800&h=240&title=Außen&r="+Math.random());
break;
case "#t2detail":
$("#t2img").attr("src", "tgraph?id=2&from=now-24h&to=now&step=1&w=800&h=240&title=Wohnzimmer&r="+Math.random());
break;
case "#t3detail":
$("#t3img").attr("src", "tgraph?id=3&from=now-24h&to=now&step=1&w=800&h=240&title=Schlafzimmer&r="+Math.random());
break;
case "#t4detail":
$("#t4img").attr("src", "tgraph?id=4&from=now-24h&to=now&step=1&w=800&h=240&title=Netzwerkschrank&r="+Math.random());
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;">
<img src="" id="t1img" style="width: 100%;"/>
</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 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">
<img src="" id="t2img" style="width: 100%;"/>
</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">
<img src="" id="t3img" style="width: 100%;"/>
</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">
<img src="" id="t4img" style="width: 100%;"/>
</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">
<h1>Monitor & Co.</h1>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" onclick="pswitch(1, 2, 1)" data-role="button">An</a>
<a href="#" onclick="pswitch(1, 2, 0)" data-role="button">Aus</a>
</div>
</li>
<li data-icon="info">
<h1>Drucker</h1>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" onclick="pswitch(1, 1, 1)" data-role="button">An</a>
<a href="#" onclick="pswitch(1, 1, 0)" data-role="button">Aus</a>
</div>
</li>
<li data-icon="info">
<h1>Rechner</h1>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" onclick="pswitch(1, 4, 1)" data-role="button">An</a>
<a href="#" onclick="pswitch(1, 4, 0)" data-role="button">Aus</a>
</div>
</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>