Grundlegendes
Bei diesem Projekt ist der Arduino via USB-Kabel mit einem Raspberry Pi verbunden, auf dem Apache und PHP7 installiert ist.
Der Arduino zeichnet alle 5s einen Helligkeiswert auf und schickt diesen über das USB-Kabel an den Raspberry Pi. Via Python werden dort die vom Arduino empfangenen Helligkeitswerte in einer CSV-Datei gespeichert. Via p5.js wird die CSV-Datei ausgelesen und als Graph im Browser dargestellt.
Arduino-Hardware-Aufbau
Der Arduino-Hardware-Aufbau ist identisch mit dem vorherigen Aufbau („Photo-Resistor (Fotozelle)“)
Der Arduino-Code unterscheidet sich auch nicht groß, nur das Abfrage-Intervall wurde auf 5s verlängert!
Arduino
int fotozelle = A0; // Pin Zuweisung bei A0; Widerstand 10 kOhm
void setup() {
pinMode(fotozelle, INPUT);
Serial.begin(9600);
}
void loop() {
int hell = analogRead(fotozelle); // Wert, den Fotozelle ausgibt, wird gelesen
Serial.println(hell); // Ausgabe des Helligkeitswertes der Foto-Zelle
// alle 5sek Messung, entsprechend Python-Script "fotozelle_csv_datei.py"
delay(5000);
}
Das hier gezeigte Python-Script läuft auf dem Raspberry Pi und erzeugt die CSV-Datei "data_log.csv" und speichert diese an einer Stelle, an der p5.js einfach darauf zugreifen kann:
Python
#!/user/bin/env python
# speichert die CSV-Datei im Ordner "/var/www/html/fotozelle/"
# damit das geht, muss das Script mit "sudo" ausgefuehrt werden
# sudo python fotozelle_csv_datei_2.py
import os
import time
from time import sleep
from datetime import datetime
import serial
# hier richtigen Serial-Port des Arduinos angeben!
port = "/dev/ttyACM0"
# pfad zum HTML-Ordner
pfadDatei = "/var/www/html/fotozelle/daten/data_log.csv"
# Geschwindigkeit muss identisch wie bei Arduino-Script sein!
s1 = serial.Serial(port,9600)
s1.flushInput()
file = open(pfadDatei, "a")
while True:
if s1.inWaiting()>0:
# formatierte Datum- und Zeit-Kombination
now = datetime.now().strftime('%Y-%m-%d,%H:%M:%S')
# gibt den Helligkeiswert jeweil in einer Zeile aus
inputValue =s1.readline()
# "\n" macht jeweils eine Leerzeile
file.write(str(now)+","+inputValue+"\n")
file.flush()
# Script wartet 5 Sekunden, bis es sich wiederholt (entsprechend der Zeit im Arduino-Sketch
time.sleep(5)
file.close()
Das oben gezeigte Python-Script erzeugt eine CSV-Datei "data_log.csv", die beispielsweise so aussehen könnte:
CSV-Datei (Ausschnitt)
2018-11-03,14:59:43,793
2018-11-03,14:59:48,815
2018-11-03,14:59:53,352
2018-11-03,14:59:58,46
2018-11-03,15:00:03,29
2018-11-03,15:00:08,794
2018-11-03,15:00:13,793
2018-11-03,15:00:18,810
Via p5.js wird diese CSV-Datei eingelesen und als Graph im Canvas einer Website dargestellt
p5.js
var aktuelleWerte;
var HelligkeitsPunkte = [];
var factor = 0.6; // um wieviel wird Skala und Wert skaliert
var breite = 20; // Breite der Säulen
var abstand = 5; // Abstand der Säulen
var rowCount = 0; // wieviele Datensätze sind vorhanden?
var x; // Position des senkrechtes Nullpunktes
var y; // Position des waagrechten Nullpunktes
function preload() {
// alle 5 Sekunden Werte laden
loadTable("daten/data_log.csv", tableFuellen);
}
function tableFuellen(data) {
aktuelleWerte = data;
// console.log(aktuelleWerte);
}
function setup() {
var myCanvas = createCanvas(800, 658);
myCanvas.parent("graph");
x = 35;
y = height - 20;
textFont("roboto_condensedregular");
textStyle(NORMAL);
// Ausgabe der aktuellen Zeit
zeitAngabe();
// wieviele Datensätze befinden sich in der CSV-Datei?
rowCount = aktuelleWerte.getRowCount();
AnzeigeUeberCanvas();
// wieviele Werte sollen dargestellt werden?
var anzahl;
if (rowCount >= 30) {
anzahl = 30;
} else {
anzahl = rowCount;
}
noStroke();
// Darstellung der Rechtecke mit den Helligkeitswerten
// werden von rechts nach links dargestellt
// der aktuellste Wert ist also recht, nach links geht es in die Vergangenheit
for (var i = 0; i <= anzahl; i++) {
var helligkeit = HelligkeitsPunkte[rowCount - i];
// Rechtecke werden Stufenweise dunkler
fill(255 - 8.5 * i, 0, 0);
rect(
width - 5 - (breite + abstand) * i,
y,
breite,
helligkeit * -1 * factor
);
}
// Zeichnen von Skala, senkrechter Beschriftung
SkalaLinien();
}
function draw() {}
// Angaben zu Anzahl Datensätzen und letztem Wert oberhalb des Canvas
function AnzeigeUeberCanvas() {
var ausgabe = "Datensätze: " + rowCount;
document.getElementById("AnzahlDaten").innerHTML = ausgabe;
for (var i = 0; i < rowCount; i++) {
HelligkeitsPunkte[i] = aktuelleWerte.getNum(i, 2);
}
var letzterWert = HelligkeitsPunkte[rowCount - 1];
var ausgabe = "letzter Wert: " + letzterWert;
document.getElementById("letzterWert").innerHTML = ausgabe;
}
function zeitAngabe() {
var a = new Date();
var h = a.getHours();
var m = a.getMinutes();
var s = a.getSeconds();
var tag = a.getDate();
var mon = a.getMonth() + 1; //Monat fängt bei 0 an
var jahr = a.getFullYear();
var h = zahlenAuffuellen(h);
var m = zahlenAuffuellen(m);
var s = zahlenAuffuellen(s);
akt_datum = tag + "." + mon + "." + jahr;
akt_zeit = h + ":" + m + ":" + s;
var ausgabe = "Aktualisiert am " + akt_datum + " um " + akt_zeit + " Uhr";
document.getElementById("AktualisierungsDatum").innerHTML = ausgabe;
}
// wenn Stunden, Minuten, Sekunden nur einstellig sind
// werden diese mit einer Null aufgefüllt
function zahlenAuffuellen(ziffer) {
if (ziffer < 10) {
ziffer = "0" + ziffer;
}
return ziffer;
}
function SkalaLinien() {
stroke(150);
// X-Linie
line(x, y, width, y);
// Y-Linie
line(x, 10, x, y + 5);
// waagrechte SkalaLinien
stroke(190);
for (var i = 0; i <= 10; i++) {
line(x - 3, y - i * 100 * factor, width, y - i * 100 * factor);
}
// Einstellungen für Beschriftung
noStroke();
fill(100);
textSize(16);
textAlign(RIGHT);
// Beschriftung der Y-Achse
for (var i = 0; i <= 10; i++) {
var yBeschriftung = 100 * i;
text(yBeschriftung, x - 5, y - yBeschriftung * factor + 5);
}
// Beschriftung der X-Achse
textAlign(CENTER);
for (var i = 0; i <= 29; i = i + 2) {
var xBeschriftung = -5 * i + "s";
// width - 5 - (breite + abstand) * i
text(xBeschriftung, width - 20 - (breite + abstand) * i, y + 18);
}
}
