Startseite>Einstieg in WebIOPi
Aus Raspberry Pi Geek 01/2015

Einstieg in WebIOPi (Seite 2)

Bauen Sie nun gemäß dem Schaltplan in Abbildung 3 den Transistorschalter auf und verwenden Sie die Webapp, um ihn anzusteuern. Im bereits erwähnten Artikel diente er dazu, den Auslöser einer analogen Spiegelreflexkamera zu bedienen; er lässt sich aber auch für viele andere Zwecke einsetzen.

Abbildung 3: Der Schaltplan für den Transistorschalter.

Abbildung 3: Der Schaltplan für den Transistorschalter.

Sensoren auslesen

WebIOPi kommt mit verschiedensten Geräten klar, unter anderem auch mit Sensoren. Das können Sie nutzen, um beispielsweise den RasPi in ein webbasiertes Thermometer zu verwandeln. Dazu schließen Sie einfach einen entsprechenden Temperatursensor an und stellen eine WebIOPi-App zusammen, die dessen Sensordaten ausliest. Für das im Folgenden gezeigte Beispiel benötigen Sie einen 4,7k-Ohm-Widerstand sowie einen DS18B20-Temperatursensor. Letzteren erhalten Sie im einschlägigen Elektronik-Versandhandel, etwa bei Watterot [3].

Verbinden Sie zunächst die Komponenten wie in Abbildung 4 gezeigt. Anschließend aktivieren Sie den Sensor in der WebIOPi-Konfigurationsdatei /etc/webiopi/config. Dazu öffnen Sie diese in einem Texteditor Ihrer Wahl und kommentieren im Abschnitt [DEVICES] die Zeile für den DS18B20 ein, indem Sie das Kommentarzeichen # vor #temp2 = DS18B20 entfernen. Anschließend ist ein Neustart von WebIOPi mittels sudo /etc/init.d/webiopi restart fällig.

Abbildung 4: Das Verkabelungsdiagramm für den Temperatursensor DS18B20.

Abbildung 4: Das Verkabelungsdiagramm für den Temperatursensor DS18B20.

In einem Terminalfenster geben Sie nun die Befehle aus den ersten beiden Zeilen von Listing 4 ein, um die für unsere Anwendung notwendigen Kernel-Module zu laden. Wurde der Sensor korrekt erkannt und arbeitet er sauber, findet sich im System anschließend eine zugehörige Gerätedatei, die als Name die Seriennummer (in unserem Beispiel 28-000005311dc9) des Temperatursensors trägt. Dies können Sie auf der Kommandozeile prüfen (Zeilen 3 bis 5).

Listing 4

 

$ sudo modprobe w1-gpio
$ sudo modprobe w1-therm
$ cd /sys/bus/w1/devices/
$ ls
28-000005311dc9  w1_bus_master1

Dann rufen Sie im Browser die Seite http://RasPi-IP:8000/app/devices-monitor auf, um ein erstes Mal die Temperatur auszulesen. Freilich wirkt diese Vorgabeseite für das Überwachen von Sensoren und Geräten weder besonders schick, noch kann sie funktionell befriedigen. Es drängt sich also geradezu auf, für das Auslesen und Darstellen der Sensordaten wieder eine eigene kleine Webapp zu gestalten.

Dazu müssen Sie noch nicht einmal bei null anfangen: In einem Thread im offiziellen WebIOPi-Forum [4] findet sich eine clevere Webapp, die über eine Google-Gauge-Widget die ausgelesenen Temperaturwerte darstellt (Abbildung 5). Den Code der entsprechenden Webapp aus dem Foreneintrag zeigt Listing 5.

Abbildung 5: So sieht das webbasierte RasPi-Thermometer im Betrieb aus.

Abbildung 5: So sieht das webbasierte RasPi-Thermometer im Betrieb aus.

Listing 5

 

<html>
  <head>
    <script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script type="text/javascript" src="/webiopi.js"></script>
    <script type="text/javascript">
      webiopi().ready(function() {
        tmp = new Temperature("temp2");{
          setInterval(updateUI,1000);
        }
        function updateUI() {
          tmp.getCelsius(temperatureCallback);
        }
        function temperatureCallback(tmp, data) {
          gaugeData.setValue(0, 0, data);
          gauge.draw(gaugeData, gaugeOptions);
        }
      });
    </script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['gauge']});
      google.setOnLoadCallback(drawGauge);
      var gaugeOptions = {min: 0, max: 110, yellowFrom: 50, yellowTo: 70,
      redFrom: 70, redTo: 110, minorTicks: 5};
      var gauge;
      function drawGauge() {
        gaugeData = new google.visualization.DataTable();
        gaugeData.addColumn('number', 'Temp');
        gaugeData.addRows(1);
        gaugeData.setCell(0, 0, 0);
        gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));{
          gauge.draw(gaugeData, gaugeOptions);
        }
      }
  </script>
</head>
<body>
  <div id="gauge_div" style="width:560px; height: 280px;"></div>
</body>
</html>

WebIOPi und Python

Die Fähigkeiten der WebIOPi-Apps beschränken sich nicht ausschließlich auf die Kontrolle der GPIO-Pins. Das Framework erlaubt daneben auch, Python-Skripte (in der WebIOPi-Terminologie heißen sie Makros) in Webapps einzubinden. Das wiederum eröffnet die Möglichkeit, so gut wie jede vorstellbare Webanwendung mit WebIOPi zu realisieren. Wie das funktioniert, zeigen wir im Folgenden am Beispiel einer einfachen App, die ein Python-Skript auf dem RasPi triggert.

Stellen Sie sich vor, Sie haben ein Skript, das so aussieht wie in Listing 6. Wie Sie sehen, ruft der Code wiederum ein Shell-Skript auf, das ein Backup anstößt. Um den Python-Code für den Einsatz mit WebIOPi vorzubereiten, importieren Sie an dessen Anfang die Python-Bibliothek webiopi (Listing 7, Zeile 3). Dann fügen Sie den Dekorator @webiopi.macro hinzu (Zeile 4) und schreiben den Kernbefehl zu einer Funktion um (Zeile 5 und 6).

Listing 6

 

#!/usr/bin/env python
import os
os.system('/home/pi/backup.sh')

Listing 7

 

#!/usr/bin/env python
import os
import webiopi
@webiopi.macro
def RunBackup():
  os.system('/home/pi/backup.sh')

Speichern Sie das entsprechend modifizierte Skript als backup.py im Verzeichnis /home/pi/project/scripts, wechseln Sie dorthin und machen Sie die Datei mit dem Kommando chmod +x backup.py ausführbar. Nun öffnen Sie in einem Texteditor die Konfigurationsdatei /etc/webiopi/config und fügen dort dem Abschnitt [SCRIPTS] die folgende Zeile hinzu:

myproject = /home/pi/project/scripts/backup.py

Über das Kommando sudo /etc/init.d/webiopi restart starten Sie jetzt WebIOPi neu. Damit die Webapp aus Listing 2 mit dem Python-Makro zusammenspielt, ersetzen Sie den GPIO-Schalter durch den Makro-Button aus Listing 8. Die Routine webiopi().createMacroButton, die den Makro-Button definiert, nimmt dazu drei Parameter entgegen: eine ID (hier: macro), ein Label (Backup) und einen Bezeichner für das Makro (RunBackup). Dabei muss der Makro-Bezeichner dem Funktionsnamen aus dem Python-Skript entsprechen.

Listing 8

 

<script type="text/javascript">
  webiopi().ready(function() {
    var button = webiopi().createMacroButton("macro", "Backup", "RunBackup");
    $("#controls").append(button);
  });
</script>

Um das Ganze auszuprobieren, laden Sie die App im Webbrowser und klicken dann den Schalter Backup an. Haben Sie alles richtig gemacht, läuft daraufhin das Python-Skript an.

DIESEN ARTIKEL ALS PDF KAUFEN
EXPRESS-KAUF ALS PDFUmfang: 6 HeftseitenPreis €0,99
(inkl. 19% MwSt.)
€0,99 – Kaufen
RASPBERRY PI GEEK KAUFEN
EINZELNE AUSGABE Print-Ausgaben Digitale Ausgaben
ABONNEMENTS Print-Abos Digitales Abo
TABLET & SMARTPHONE APPS
Deutschland