369 lines
11 KiB
HTML
369 lines
11 KiB
HTML
|
<!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>
|