Kampis Elektroecke

Senden und Empfangen von Daten

Raspberry Pi

Als nächstes schauen wir uns an, wie Daten vom Raspberry Pi auslesen und über die Webseite anzeigen, bzw. wie Daten (wie z. B. eine Eingabe) von der Webseite entgegen genommen und auf dem Raspberry Pi verarbeitet werden können.

In diesem Beispiel soll ein Button als Eingabeelement verwendet werden. Bei einem Klick soll dann die aktuelle CPU-Temperatur anzeigt werden. Für den Button soll (noch) kein JavaScript, sondern das einfachere HTML-Formular verwendet werden. Die empfangenen Daten werden dann in einer Tabelle angezeigt. Damit ergibt sich der folgende HTML-Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Flask I/O Example</title>
        <link rel = "stylesheet" href = "{{ url_for('static', filename='css/index.css') }}">
    </head>
    <body>
        <header>
            <h1 class = "Title">Flask I/O Example</h1>
        </header>
        <main>
            <table width = "10%" border = "0">
                <tr>
                    <td> Temperature [°C] </td>
                    <td> {{ Data }} </td>
                </tr>
            </table>

            <form method = "get">
                <button class = "ActionButton" type = "submit" name = "action_button" value = "Temp">Temperature</button>
            </form>
        </main>
    </body>
</html>

Bei diesem Beispiel soll das Formular hauptsächlich Daten vom Server in Empfang nehmen, weshalb als Formular-Methode GET verwendet wird. Die Felder name und value des Buttons müssen belegt werden, damit der Server die Eingaben verarbeiten kann. Für das Aussehen des Buttons habe ich im Stylesheet eine neue Klasse namens ActionButton erzeugt und das Aussehen der Objekte dieser Klasse definiert. Diese Klasse weise ich dann dem Button zu.

<form method = "get">
    <button class = "ActionButton" type = "submit" name = "action_button" value = "Temp">Temperature</button>
</form>

Für die angefragten Daten wird eine einreihige Tabelle mit zwei Spalten erstellt. In die erste Spalte wird ein fester Text hinein geschrieben und die zweite Spalte beinhaltet einen Platzhalter, der beim Seitenaufruf mit einer übergebenen Variable aus dem Python-Skript gefüllt wird.

<table width = "10%" border = "0">
    <tr>
        <td> Temperature [°C] </td>
        <td> {{ Data }} </td>
    </tr>
</table>

Als nächstes muss das Python-Skript erstellt werden. Der Code aus dem ersten Beispiel soll als Ausgangsbasis für dieses Beispiel dienen. Für dieses Beispiel wird das Modul requests von Flask benötigt, welches zunächst importiert werden muss. Anschließend muss der Aufruf der add_url_methode der Flask-Applikation angepasst werden. Über den Parameter methods werden die unterstützen HTTP-Methoden definiert. Per default, also wenn nichts spezifiziert ist, sind alle Methoden erlaubt. Dies wollen wir ändern und nur Methoden vom Typ GET erlauben.

app.add_url_rule("/", "index", GetIndex, methods = ["GET"])

Jetzt wird noch die GetIndex-Methode angepasst. Die Methode wird bei jedem Aufruf der entsprechenden Seite (also hier der Hauptseite) aufgerufen. Da bei dem HTML-Formular keine Zielseite angegeben wurde, wird die aktuelle Seite erneut geladen und damit erneut die Methode GetIndex aufgerufen.

def GetIndex():
    Temperature = 0.0

    if(request.method == "GET"):
        if(request.args.get("action_button")):
            File = open("/sys/class/thermal/thermal_zone0/temp")
            Temperature = float(File.read()) / 1000.0
            print("[DEBUG] Temperature: {}".format(Temperature))

    return render_template("index.html", Data = Temperature)

Daher wird in der Methode GetIndex bei jedem Aufruf die Art der HTTP-Methode überprüft. Wenn es sich um eine GET-Methode handelt, werden die Argumente ausgewertet und überprüft ob ein Argument mit dem Namen des Buttons action_button existiert, sprich der Button betätigt worden ist. Wenn auch dies der Fall ist, wird die CPU-Temperatur eingelesen. Der formatierte Temperaturwert wird als Parameter Data in die render_template-Methode übergeben. Bei dem Funktionsaufruf von render_template wird der Platzhalter {{ Data }} in der HTML-Vorlage dann mit dem Inhalt der Variable Temperature ersetzt und das Ergebnis angezeigt.

Das fertige Programm kann von meinem Raspberry Pi GitLab-Repository heruntergeladen werden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.