mirror of
https://github.com/skaringa/water-counter.git
synced 2024-11-21 17:04:25 +01:00
Website added
This commit is contained in:
Martin Kompf
parent
8a3a787351
commit
b41b81c9f4
6
.gitignore
vendored
Normal file
6
.gitignore
vendored
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
*~
|
||||||
|
*.bak
|
||||||
|
*.rrd
|
||||||
|
nohup.out
|
||||||
|
*.gif
|
||||||
|
minicom.cap
|
||||||
2
graph.sh
2
graph.sh
@ -2,7 +2,7 @@
|
|||||||
rrdtool graph counter.gif \
|
rrdtool graph counter.gif \
|
||||||
-s 'now -1 day' -e 'now' \
|
-s 'now -1 day' -e 'now' \
|
||||||
-w 800 -h 600 \
|
-w 800 -h 600 \
|
||||||
-X 0 -A \
|
-A -Y \
|
||||||
DEF:counter=water.rrd:counter:LAST \
|
DEF:counter=water.rrd:counter:LAST \
|
||||||
VDEF:lastcount=counter,LAST \
|
VDEF:lastcount=counter,LAST \
|
||||||
"GPRINT:lastcount:%6.3lf m³" \
|
"GPRINT:lastcount:%6.3lf m³" \
|
||||||
|
|||||||
119
www/graph.pl
Executable file
119
www/graph.pl
Executable file
@ -0,0 +1,119 @@
|
|||||||
|
#!/usr/bin/perl
|
||||||
|
#
|
||||||
|
# CGI script to create image using RRD graph
|
||||||
|
use CGI qw(:all);
|
||||||
|
use RRDs;
|
||||||
|
use POSIX qw(locale_h);
|
||||||
|
|
||||||
|
$ENV{'LANG'}='de_DE.UTF-8';
|
||||||
|
setlocale(LC_ALL, 'de_DE.UTF-8');
|
||||||
|
|
||||||
|
# path to database
|
||||||
|
$rrd='../../water-counter/water.rrd';
|
||||||
|
|
||||||
|
# force to always create image from rrd
|
||||||
|
#$force=1;
|
||||||
|
|
||||||
|
$query=new CGI;
|
||||||
|
#$query=new CGI("type=consumweek&size=small");
|
||||||
|
|
||||||
|
$size=$query->param('size');
|
||||||
|
$type=$query->param('type');
|
||||||
|
if ($size eq 'big') {
|
||||||
|
$width=900;
|
||||||
|
$height=700;
|
||||||
|
$size="b";
|
||||||
|
} else {
|
||||||
|
$width=500;
|
||||||
|
$height=160;
|
||||||
|
$size="s";
|
||||||
|
}
|
||||||
|
die "invalid type\n" unless $type =~ /(count|consum)(day|week|month|year)/;
|
||||||
|
$ds=$1;
|
||||||
|
$range=$2;
|
||||||
|
$filename="/tmp/em${type}_${size}.png";
|
||||||
|
|
||||||
|
# create new image if existing file is older than rrd file
|
||||||
|
my $maxdiff = 10;
|
||||||
|
if ((mtime($rrd) - mtime($filename) > $maxdiff) or $force) {
|
||||||
|
$tmpfile="/tmp/wai${type}_${size}_$$.png";
|
||||||
|
# call sub to create image according to type
|
||||||
|
&$ds($range);
|
||||||
|
# check error
|
||||||
|
my $err=RRDs::error;
|
||||||
|
die "$err\n" if $err;
|
||||||
|
rename $tmpfile, $filename;
|
||||||
|
}
|
||||||
|
|
||||||
|
# feed image to stdout
|
||||||
|
open(IMG, $filename) or die "can't open $filename";
|
||||||
|
print header('image/png');
|
||||||
|
print <IMG>;
|
||||||
|
close IMG;
|
||||||
|
|
||||||
|
# end MAIN
|
||||||
|
|
||||||
|
# Return modification date of file
|
||||||
|
sub mtime {
|
||||||
|
my $file=shift;
|
||||||
|
my ($dev,$ino,$mode,$nlink,$uid,$gid,$rdev,$fsize,
|
||||||
|
$atime,$mtime,$ctime,$blksize,$blocks)
|
||||||
|
= stat($file);
|
||||||
|
return $mtime;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub count {
|
||||||
|
my $range = shift;
|
||||||
|
my @opts=(
|
||||||
|
"-w", $width,
|
||||||
|
"-h", $height,
|
||||||
|
"-s", "now - 1 $range",
|
||||||
|
"-e", "now",
|
||||||
|
"-D",
|
||||||
|
"-Y",
|
||||||
|
"-A");
|
||||||
|
RRDs::graph($tmpfile,
|
||||||
|
@opts,
|
||||||
|
"DEF:counter=$rrd:counter:LAST",
|
||||||
|
"LINE2:counter#000000:Zähler",
|
||||||
|
"VDEF:countlast=counter,LAST",
|
||||||
|
"GPRINT:countlast:%.3lf m³"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
sub consum {
|
||||||
|
my $range = shift;
|
||||||
|
my @opts=(
|
||||||
|
"-w", $width,
|
||||||
|
"-h", $height,
|
||||||
|
"-D",
|
||||||
|
"-Y",
|
||||||
|
"-A",
|
||||||
|
"-e", "now",
|
||||||
|
"-s"
|
||||||
|
);
|
||||||
|
if ($range eq 'month') {
|
||||||
|
push(@opts, "now - 30 days");
|
||||||
|
} else {
|
||||||
|
push(@opts, "now - 1 $range");
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($range eq 'day') {
|
||||||
|
RRDs::graph($tmpfile,
|
||||||
|
@opts,
|
||||||
|
"DEF:consum=$rrd:consum:AVERAGE",
|
||||||
|
"CDEF:conlpmin=consum,60000,*",
|
||||||
|
"CDEF:conlpd=conlpmin,60,*,24,*",
|
||||||
|
"VDEF:conlpdtotal=conlpd,AVERAGE",
|
||||||
|
"GPRINT:conlpdtotal:Total %4.0lf l/d",
|
||||||
|
"LINE2:conlpmin#00FF00:Verbrauch [l/min]"
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
RRDs::graph($tmpfile,
|
||||||
|
@opts,
|
||||||
|
"DEF:consum=$rrd:consum:AVERAGE",
|
||||||
|
"CDEF:conlpd=consum,60000,*,60,*,24,*",
|
||||||
|
"LINE2:conlpd#00FF00:l/d"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
105
www/index.html
Normal file
105
www/index.html
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||||
|
<meta name="viewport" content="initial-scale=1, minimum-scale=0.75, width=device-width"/>
|
||||||
|
<title>Wasserverbrauch</title>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
// <![CDATA[
|
||||||
|
|
||||||
|
// open table popup window
|
||||||
|
function table(href) {
|
||||||
|
window.open(href, 'table', 'width=400,height=500,scrollbars=yes');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// open graph popup window
|
||||||
|
function graph(href) {
|
||||||
|
window.open(href, 'graph', 'width=950,height=750,scrollbars=no');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// initialize the page
|
||||||
|
function init() {
|
||||||
|
// reload after 5 min
|
||||||
|
window.setTimeout("window.location.reload(true)", 5 * 60 * 1000);
|
||||||
|
}
|
||||||
|
// ]]>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
body, table, form {
|
||||||
|
font: 10px/16px verdana, arial, helvetica, sans-serif;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.datatable {
|
||||||
|
width: 500px;
|
||||||
|
border: 0px;
|
||||||
|
}
|
||||||
|
img.graph {
|
||||||
|
width: 500px;
|
||||||
|
height: 160px;
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
border-width: 0px 0px 1px 0px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #998DB3;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body onload="init()">
|
||||||
|
|
||||||
|
<table class="datatable">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<h2>Wasserverbrauch</h2>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<img alt="Zählerstand (24 h)" id="i0l" class="graph" src="graph.pl?type=countday" title="Zählerstand (24 h)"/>
|
||||||
|
<br/>
|
||||||
|
<a href="graph.pl?type=countday&size=big" onclick="return graph(this.href);">Vergrößern</a>
|
||||||
|
| <a href="table.pl?type=countday" onclick="return table(this.href);" target="table">Tabelle</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<img alt="Verbrauch (24 h)" id="i1l" class="graph" src="graph.pl?type=consumday" title="Verbrauch (24 h)"/>
|
||||||
|
<br/>
|
||||||
|
<a href="graph.pl?type=consumday&size=big" onclick="return graph(this.href);" >Vergrößern</a>
|
||||||
|
| <a href="table.pl?type=consumday" onclick="return table(this.href);" target="table">Tabelle</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<img alt="Verbrauch (Woche)" id="i2l" class="graph" src="graph.pl?type=consumweek" title="Verbrauch (Woche)"/>
|
||||||
|
<br/>
|
||||||
|
<a href="graph.pl?type=consumweek&size=big" onclick="return graph(this.href);" >Vergrößern</a>
|
||||||
|
| <a href="table.pl?type=consumweek" onclick="return table(this.href);" target="table">Tabelle</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<img alt="Verbrauch (Monat)" id="i3l" class="graph" src="graph.pl?type=consummonth" title="Verbrauch (Monat)"/>
|
||||||
|
<br/>
|
||||||
|
<a href="graph.pl?type=consummonth&size=big" onclick="return graph(this.href);" >Vergrößern</a>
|
||||||
|
| <a href="table.pl?type=consummonth" onclick="return table(this.href);" target="table">Tabelle</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<img alt="Verbrauch (Jahr)" id="i4l" class="graph" src="graph.pl?type=consumyear" title="Verbrauch (Jahr)"/>
|
||||||
|
<br/>
|
||||||
|
<a href="graph.pl?type=consumyear&size=big" onclick="return graph(this.href);" >Vergrößern</a>
|
||||||
|
| <a href="table.pl?type=consumyear" onclick="return table(this.href);" target="table">Tabelle</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
150
www/table.pl
Executable file
150
www/table.pl
Executable file
@ -0,0 +1,150 @@
|
|||||||
|
#!/usr/bin/perl
|
||||||
|
#
|
||||||
|
# CGI script to create a table of values from RRD
|
||||||
|
use CGI qw(:all *table *Tr);
|
||||||
|
use RRDs;
|
||||||
|
use POSIX qw(strftime);
|
||||||
|
use POSIX qw(locale_h);
|
||||||
|
|
||||||
|
$ENV{'LANG'}='de_DE.UTF-8';
|
||||||
|
setlocale(LC_TIME, 'de_DE.UTF-8');
|
||||||
|
|
||||||
|
# path to database
|
||||||
|
$rrdb='../../water-counter/water.rrd';
|
||||||
|
|
||||||
|
$query=new CGI;
|
||||||
|
#$query=new CGI("type=consumweek");
|
||||||
|
|
||||||
|
print header(-charset=>"utf-8");
|
||||||
|
|
||||||
|
$type=$query->param('type');
|
||||||
|
if ($type !~ /(count|consum)(day|week|month|year)/) {
|
||||||
|
print "Invalid type\n";
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
$sensor=$1;
|
||||||
|
$range=$2;
|
||||||
|
|
||||||
|
#print "Sensor: $sensor Range: $range\n";
|
||||||
|
|
||||||
|
$timeformat="%a, %d. %b %Y";
|
||||||
|
$resolution=24*60*60;
|
||||||
|
if ($range eq 'day') {
|
||||||
|
$resolution=60*60;
|
||||||
|
$timeformat="%a, %d. %b %Y %H:%M";
|
||||||
|
} elsif ($range eq 'year') {
|
||||||
|
$resolution=7*24*60*60;
|
||||||
|
$timeformat="Wo %d. %b %Y";
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($range eq 'day') {
|
||||||
|
@factors = (1.0, 60000.0); # consumption in l/min
|
||||||
|
@headings = ('m³', 'l/min');
|
||||||
|
@formats = ('%7.3f', '%3.1f');
|
||||||
|
} else {
|
||||||
|
@factors = (1.0, 60000.0*60*24); # consumption l/day
|
||||||
|
@headings = ('m³', 'l/d');
|
||||||
|
@formats = ('%7.3f', '%4.0f');
|
||||||
|
}
|
||||||
|
|
||||||
|
($laststart,$laststep,$lastnames,$lastdata) = getdata($rrdb, 'LAST', $resolution, $range);
|
||||||
|
($avrstart,$avrstep,$avrnames,$avrdata) = getdata($rrdb, 'AVERAGE', $resolution, $range);
|
||||||
|
# print result
|
||||||
|
|
||||||
|
# print heading
|
||||||
|
$style=<<END;
|
||||||
|
<!--
|
||||||
|
body {
|
||||||
|
font: 10px/16px verdana, arial, helvetica, sans-serif;
|
||||||
|
background-color: white;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
th, td {
|
||||||
|
border-width: 1px 1px 0px 0px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #998DB3;
|
||||||
|
text-align: right;
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
background-color: lightgreen;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
thead {
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
background-color: white;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
tbody {
|
||||||
|
position: absolute;
|
||||||
|
top: 30px;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.mindata {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
.maxdata {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
.time {
|
||||||
|
color: black;
|
||||||
|
text-align: left;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
-->
|
||||||
|
END
|
||||||
|
|
||||||
|
print start_html(-title=>"Wasserverbrauch",
|
||||||
|
-style=>{-code=>$style},
|
||||||
|
-meta=>{"viewport"=>"initial-scale=1, minimum-scale=0.75, width=device-width"}
|
||||||
|
);
|
||||||
|
print start_table();
|
||||||
|
print "\n";
|
||||||
|
print thead(Tr(th({-class=>'time'}, ' '), th([@headings])));
|
||||||
|
print "\n";
|
||||||
|
|
||||||
|
# print data
|
||||||
|
$avrstart -= 12*60*60 unless $timeformat =~ / %H:%M$/;
|
||||||
|
for $avrline (@$avrdata) {
|
||||||
|
$lastline = shift(@$lastdata);
|
||||||
|
print start_Tr({-class=>'avrdata'});
|
||||||
|
print td({-class=>'time'}, strftime($timeformat, localtime($avrstart)));
|
||||||
|
print formatline(@$lastline[0], @$avrline[1]);
|
||||||
|
print end_Tr;
|
||||||
|
print "\n";
|
||||||
|
|
||||||
|
$avrstart += $avrstep;
|
||||||
|
}
|
||||||
|
print end_table();
|
||||||
|
print end_html;
|
||||||
|
|
||||||
|
sub getdata {
|
||||||
|
my ($db, $cf, $resolution, $range) = @_;
|
||||||
|
|
||||||
|
my $sarg = "now -1 $range";
|
||||||
|
if ($range eq 'month') {
|
||||||
|
$sarg = "now - 30 days";
|
||||||
|
}
|
||||||
|
my ($start,$step,$names,$data) = RRDs::fetch($db, $cf, '-r', $resolution, '-s', $sarg, '-e', 'now');
|
||||||
|
|
||||||
|
# check error
|
||||||
|
my $err=RRDs::error;
|
||||||
|
print "$err\n" if $err;
|
||||||
|
exit if $err;
|
||||||
|
return ($start,$step,$names,$data);
|
||||||
|
}
|
||||||
|
|
||||||
|
sub formatline {
|
||||||
|
my $str = '';
|
||||||
|
my $i = 0;
|
||||||
|
for $val (@_) {
|
||||||
|
if (defined $val) {
|
||||||
|
$str .= td(sprintf $formats[$i], $val * $factors[$i]);
|
||||||
|
} else {
|
||||||
|
$str .= td;
|
||||||
|
}
|
||||||
|
$i++;
|
||||||
|
}
|
||||||
|
return $str;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user