Jetzt werde ich eine Möglichkeit vorstellen, wie eine "Live" Darstellung der Pi Temperaturen möglich ist. Ziel ist es, die Temperaturen einfach über einen Browser auf seinen PC, Tablet oder Smartphone zu überwachen. Zur Visualisierung verwende ich hierzu die JavaScript Lib. Dygraph. Mit dieser lassen sich sehr einfach die erzeugten CSV Dateien im Browser darstellen.
Folgende Abbildung zeigt ein Beispiel:
Um eine einface Graphik zu Erzeugen reicht folgendes Grundgerüst:
<html>
<head>
<script type="text/javascript" src="dygraph-combined.js"></script>
</head>
<body>
<div id="graphdiv1"></div>
<script type="text/javascript">
chart = new Dygraph(document.getElementById("graphdiv1"),
// path to CSV file
"rpi_temperature.csv",
{
}
);
</script>
</body>
</html>
python -m SimpleHTTPServer 8081
Wenn man die Seite beim Start des Pi's gleich erreichbar haben möchte, sollte man den HTTPServer beim Booten gleich mit starten. Wie man dies einrichtet, beschreibe ich in folgendem Eintrag.
Jetzt lässt sich die Seite durch Aufruf folgender Adresse im Browser darstellen:
http://[Raspberry Pi IP]:8081/
Damit wird aber nur eine statische Graphik erzeugt, damit eine "LIVE" Darstellung ermöglicht wird, soll diese Graphik alle 10 Sekunden neu geladen werden. Damit wird auch die zu Grunde liegende CSV-Datei neu eingelesen und so die Darstellung aktualisiert. Hier die zugehörige HTML, ergänzt um ein par zusätzliche Dygraph Optionen:
<html>
<head>
<script type="text/javascript" src="dygraph-combined.js"></script>
</head>
<body>
<div id="legend" ></div>
<div id="graphdiv1" style="width:80%; height:80%;"></div>
<script type="text/javascript">
chart = new Dygraph(document.getElementById("graphdiv1"),
// path to CSV file
"rpi_temperature.csv",
{
legend: 'always',
labels: ['date','gpu_temperature','cpu_temperature'],
xlabel: 'Time',
ylabel: ' Temperatur in °C',
labelsDiv: document.getElementById('legend'),
}
);
setInterval(
function()
{
chart.updateOptions({'file': "rpi_temperature.csv"});
},10000
)
</script>
</body>
</html>