Gut, jetzt geht es an die Darstellung mit dem Browser. Dazu werden erst einmal die Highcharts Java Script Bibliotheken benötigt. Die Bibliotheken für den nicht kommerziellen Einsatz gibt es unter http://www.highcharts.com/download. Nachdem das Paket heruntergeladen und entpackt wurde, wird alles, was im Verzeichnis "js" des Highcharts Paketes liegt auf den Raspberry unter "js/lib" im Webverzeichnis abgelegt.
Der Inhalt sollte dann wie folgt aussehen (die Dateien steelseries-min.js und tween-min.js gehören zu den Steelseries Gauges):
mypywws@rcweb /var/www/js/lib $ ls adapters highcharts-3d.src.js highcharts.js highcharts-more.src.js modules themes highcharts-3d.js highcharts-all.js highcharts-more.js highcharts.src.js steelseries-min.js tween-min.js
Damit die Highcharts verwendet werden können, benötigen wir jetzt eine Java Script Datei mit dem Namen "24hrsChart.js", welche im Verzeichnis "js" abgelegt wird. Der Inhalt der Datei sieht wie folgt aus:
$(function () {
var chart, options, rawRealtime, interval,
// countdown timer, 60 secs/1 min
count = 60,
// 120 = 2 hours at 1 minute per data point
numDisplayRecs = 24,
// Returns a UTC date value from date & time strings
getDate = function (strDate, strTime) {
var d = strDate.split(dateDelimiter),
t = strTime.split(timeDelimiter);
return Date.UTC('20' + d[2], +d[1] - 1, d[0], t[0], t[1], t[2]);
};
$(document).ready(function () {
// define the chart options
temp_opts = { chart: { renderTo: 'canvas_temp' },
credits: { enabled: false },
title: { text: 'Verlauf, 24 Stunden', y: 10, margin: 20 },
subtitle: { text: null },
xAxis: { type: 'datetime', maxPadding: 0, minPadding: 0, dateTimeLabelFormats: { millisecond: '%H:%M:%S', second: '%H:%M:%S', minute: '%H:%M', hour: '%H:%M' } },
yAxis: [ { // y axis 0
title: { text: 'Temperatur (°C)' },
opposite: true,
min: -20,
max: 40
},
{ // y axis 1
title: { text: 'Luftdruck (hPa)' },
opposite: true,
min: 970,
max: 1040,
labels: {
formatter: function () {
return this.value.toFixed(1);
}
}
},
{ // y axis 2
title: { text: 'Regen (mm)' },
min: 0,
minRange: 1
},
{ // y axis 3
title: { text: 'Luftfeuchte (%)' },
max: 100
},
{ // y axis 4
title: { text: 'Taupunkt (°C)' },
opposite: true,
min: -20,
max: 40
}
],
legend: {
align: 'left',
verticalAlign: 'top',
y: 5,
floating: true,
borderWidth: 0
},
plotOptions: {
series: {
cursor: 'pointer',
marker: { enabled: false }
}
},
series: [
{
name: 'Temperatur',
type: 'spline',
data: [],
yAxis: 0,
tooltip: { valueSuffix: ' °C' }
},
{
name: 'Luftdruck',
type: 'spline',
data: [],
yAxis: 1,
tooltip: { valueSuffix: ' hPa' }
},
{
name: 'Regen',
type: 'area',
data: [],
yAxis: 2,
tooltip: { valueSuffix: ' mm' },
color: 'rgba(100,200,255,0.8)',
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, 'rgba(10,100,255,0.3)'],
[1, 'rgba(2,0,0,0)']
]
}
},
{
name: 'Luftfeuchte',
type: 'spline',
data: [],
yAxis: 3,
tooltip: { valueSuffix: ' %' }
},
{
name: 'Taupunkt',
type: 'spline',
data: [],
yAxis: 4,
tooltip: { valueSuffix: ' °C' }
}
]
}; // end temp_opts
wind_opts = { chart: { renderTo: 'canvas_wind' },
credits: { enabled: false },
title: { text: 'Wind, 24 Stunden Verlauf', y: 10, margin: 20 },
subtitle: { text: null },
xAxis: { type: 'datetime', maxPadding: 0, minPadding: 0, dateTimeLabelFormats: { millisecond: '%H:%M:%S', second: '%H:%M:%S', minute: '%H:%M', hour: '%H:%M' } },
yAxis: [ { // right y axis 0
title: { text: 'Wind (km/h)' },
min: 0,
max: 60
},
{ // right y axis 0
title: { text: 'Boeen (km/h)' },
opposite: true,
min: 0,
max: 60
}
],
legend: {
align: 'left',
verticalAlign: 'top',
y: 5,
floating: true,
borderWidth: 0
},
plotOptions: {
series: {
cursor: 'pointer',
marker: { enabled: false }
}
},
series: [
{
name: 'Wind',
type: 'spline',
data: [],
yAxis: 0,
tooltip: { valueSuffix: ' km/h' }
},
{
name: 'Böen',
type: 'spline',
data: [],
yAxis: 1,
tooltip: { valueSuffix: ' km/h' }
}
]
}; // end wind_opts
wind_dir_opts = { chart: { renderTo: 'canvas_wind_dir', type: 'scatter' },
credits: { enabled: false },
title: { text: 'Windrichtung, 24 Stunden Verlauf', y: 10, margin: 20 },
subtitle: { text: null },
xAxis: { type: 'datetime', maxPadding: 0, minPadding: 0, dateTimeLabelFormats: { millisecond: '%H:%M:%S', second: '%H:%M:%S', minute: '%H:%M', hour: '%H:%M' } },
yAxis: [ { // right y axis 0
title: { text: 'Richtung' },
min: 0,
max: 360
}
],
legend: {
align: 'left',
verticalAlign: 'top',
y: 5,
floating: true,
borderWidth: 0
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.y}'
}
}
},
series: [
{
name: 'Wind',
data: [],
yAxis: 0,
tooltip: { valueSuffix: ' °' }
}
]
}; // end wind_dir_opts
// Fetch the 'historic' realtime data from the server using a PHP call
$.ajax({
// Use the 'webtag' names of the fields to pull back
url: './php-scripts/realtimeLogParser24hrs.php?count=' + numDisplayRecs + '&temp_out&hum_out&dew_point&rel_pressure&rain&wind_ave&wind_gust&wind_dir&wind_dir_text',
datatype: "json",
success: function (resp) {
// pre-load the log data
temp_opts.series[0].data = resp.temp_out;
temp_opts.series[1].data = resp.rel_pressure;
temp_opts.series[2].data = resp.rain;
temp_opts.series[3].data = resp.hum_out;
temp_opts.series[4].data = resp.dew_point;
// draw the chart
chart = new Highcharts.Chart(temp_opts);
// wind speed series
wind_opts.series[0].data = resp.wind_ave;
wind_opts.series[1].data = resp.wind_gust;
// draw wind speed chart
chart = new Highcharts.Chart(wind_opts);
// wind dir series
wind_dir_opts.series[0].data = resp.wind_dir;
// draw wind speed chart
chart = new Highcharts.Chart(wind_dir_opts);
}
}); // end ajax()
// fetch some more data every count interval
interval = setInterval(function () { getRealtime(); }, count * 1000);
}); // end document ready()
});
Die Datei beruht wieder auf dem Code von sandaysoft und wurde nur von mir entsprechend meinen Anforderungen angepasst.
Im letzten Schritt muss noch die Datei "24hrsChart.php" erstellt werden, welche vom Browser aufgerufen wird. Diese stellt dann das Gerüst der angezeigten Seite dar und lädt die Highcharts Darstellung. Die Datei "24hrsChart.php" wird im Doc Root des Webserver, ebenso wie die "index.php" abgelegt. Durch Eingabe der URL "http://<Name des raspberies oder dessen IP-Adresse>/24hrsChart.php" wird diese dann aufgerufen. Hier nun der Inhalt der PHP Datei:
<!DOCTYPE HTML>
<html>
<!--
Realtime Cumulus Highcart
Mark Crossley 2012
v1.0 - 29 Nov 2012
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Meine Wetterstation"/>
<meta name="keywords" content="aktuelles wetter"/>
<title>Meine Wetterstation</title>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<meta http-equiv="Cache-control" content="no-cache" />
<link rel="stylesheet" type="text/css" href="/./css/highslide.css" />
<link rel="stylesheet" href="/./css/template.css" type="text/css" />
</head>
<body>
<div id="page">
<div id="charts">
<!-- Stick the chart in here -->
<div id="canvas_wind" style="min-width: 400px; width: 740px; height: 400px; margin-top: 5px; margin-left: 2px; margin-right: 2px;"></div>
<div id="canvas_wind_dir" style="min-width: 400px; width: 740px; height: 400px; margin-top: 5px; margin-left: 2px; margin-right: 2px;"></div>
<div id="canvas_temp" style="min-width: 400px; width: 740px; height: 400px; margin-top: 5px; margin-left: 2px; margin-right: 2px;"></div>
</div>
</div>
<!-- JQuery script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- Basic Highcharts script -->
<script src="/./js/lib/highcharts.js"></script>
<!-- Add some 'styling' -->
<script src="/./js/lib/themes/grid.js"></script>
<!-- Additional files for the Highslide popup effect -->
<script src="http://www.highcharts.com/highslide/highslide-full.min.js"></script>
<script src="http://www.highcharts.com/highslide/highslide.config.js"></script>
<script src="/./js/24hrsChart.js"></script>
</body>
</html>
Ach ja, auch hier gibt es eine CSS Datei. Dies lässt sich direkt von "http://www.highcharts.com/highslide/highslide.css" herunterladen oder direkt wie folgt referenzieren:
<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/highslide/highslide.css" />
Hinweis für "Offline User" (d. h. Nutzer welche die Wetterdaten auch ohne externe Internetverbindung nutzen möchten, z. B. auf einem Boot):
Wenn eine Bibliothek oder Datei über eine CDN oder einen externen Link eingebunden wird, dann muss dies für den offline Betrieb aufgelöst werden. Dazu den referenzierten Inhalt über den Browser aufrufen, bzw. mit Rechtsklick und "Speichern unter" herunterladen. Dann die entsprechende Datei auf dem Raspberry im Webverzeichnis ablegen und anschliessend die Referenz auf die lokale Datei setzen.
Viel Spaß noch beim Nachbauen!
