.. | ||
chart.js | ||
dbutil.php | ||
README.md | ||
upload.php | ||
wetter.css |
Web- und Datenbankserver
Voraussetzung: Es steht ein Webserver und ein Datenbankserver zur Verfügung. Getestet wurde die Konfiguration mit
- MYSQL
- APACHE2
Dateien
info.txt ..... diese Datei
chart.js ..... Javascriptdatei für Grafiken
dbutil.php ... Datenbankverbindung
upload.php ... php-Datei zum Eintragen eines neuen Messwertes
wetter.css ... CSS-Formatdatei
wetter.php ... Anzeigeseite
wetter.sql ... Befehle zum Anlegen der Tabellen
Datenbank anlegen:
Die Datenbank 'wetter' enthält für jeden Sensor eine Tabelle, deren Aufbau identisch ist:
CREATE TABLE `indoor` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
`temperature` float(4,2) NOT NULL,
`pressure` float(6,2) NOT NULL,
`humidity` float(3,1) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8
Neue Messwerte eintragen
Das Python-Programm ruft die URL mit Parametern auf:
<server>/upload.php?m=table&t=temp&p=pres&h=hum
table = indoor oder outdoor (String
temp = Temperatur (double)
pres = Luftdruck (double)
hum = Luftfeuchtigkeit (double)
Auf dem Server fügt die Auswertung dieser URL die Daten in die Datenbank ein.
Auf diese Art werden die Daten nur lokal auf dem Server verarbeitet. Ein externer Zugriff auf die Datenbank (direkt vom Raspberry Pi) würde ein Sicherheitsrisiko für die Datenbank darstellen.
Messwerte abrufen
Die grafische Anzeige basiert auf https://d3js.org/d3.v3.min.js. In der Datei chart.js werden dazu zwei Funktionen definiert, die für die Anzeige aufgerufen werden.
// ************************************************************
// Funktion zur Erzeugung einer Grafik (Linie)
// Die Daten müssen zwei Spalten enthalten: (zeit | value)
//
// Parameter:
// o titel Diagrammtitel oben
// o sql wird z.Zt. nicht genutzt
// o textX Beschrfitung der x-Achse
// o textY Beschriftung der y-Achse
// o breite Breite des Diagramms
// o hoehe Höhe des Diagramms
// o data Daten im JSON-Format
// o scaleY 0=automatisch skalieren, 1=Prozent 0..100
// o units Einheiten für die Tooltipps
// o id id in css-Klasse
// #id ............ Breite, Rand/farbe)
// #id .title ...... Farbe, Größe des Titels
// #id .y .......... Farbe der y-Beschriftung
// #id .linecolor .. Linienfarbe
// #id .tooltip .... Frarbe Tooltipps
// ***********************************************************
function showDiagram1Line(titel, sql, textX, textY, breite, hoehe,
data, scaleY, units, id)
// ************************************************************
// Funktion zur Erzeugung einer Grafik (2 Linien)
// Die Daten müssen drei Spalten enthalten: (zeit | value1 | value2 )
//
// Parameter:
// o titel Diagrammtitel oben
// o data Daten im JSON-Format
// o textX Beschrfitung der x-Achse
// o textY1 Beschriftung der y1Achse (links)
// o textY2 Beschriftung der y1-Achse (rechts)
// o breite Breite des Diagramms
// o hoehe Höhe des Diagramms
// o scaleY1 0=automatisch skalieren, 1=Prozent 0..100 value1
// o scaleY2 0=automatisch skalieren, 1=Prozent 0..100 value2
// o units1 Einheiten für die Tooltipps value1
// o units2 Einheiten für die Tooltipps value2
// o id id in css-Klasse
// #id ............ Breite, Rand/farbe)
// #id .title ...... Farbe, Größe des Titels
// #id .y1 ......... Farbe der y-Beschriftung value1
// #id .y2 ......... Farbe der y-Beschriftung value2
// #id .linecolor1 . Linienfarbe value1
// #id .linecolor2 . Linienfarbe value2
// #id .tooltip .... Farbe Tooltipps
// ***********************************************************
function showDiagram2Lines(titel, data, textX, textY1, textY2, breite,
hoehe, scaleY1, scaleY2, units1, units2, id)
Die Anzeige soll exemplarisch an der Temperatur (1 Linie) beschrieben werden. Die Box um den Graphen mit farbigem Titel kann über css realisiert werden.
FÜr das Auslesen der Daten wird die Funktion getJSON_Data1($sqlT)
verwendet,
die in dbutil.php
definiert ist. Das Ergebnis wird in 'data'
gespeichert.
<script>
<?php
$json_data = getJSON_Data1($sqlT);
echo "data=".$json_data.";"
?>
showDiagram1Line("Temperatur (in °C)","","Zeit",
"", 600, 300, data, 0, "°C",
"#graphTemperature");
</script>
Der SQL-Befehl zur Abfrage:
$sqlT = "SELECT time AS Zeit,
temperature AS value
FROM (SELECT * FROM outdoor ORDER BY time DESC) AS tab
ORDER BY Zeit";