pi-switch

Kasa Steckdosen via Weboberfläche steuern mit Raspberry Pi und Python

Im vorherigen Tutorial, haben wir uns die smarten Steckdosen von TP-Link mal genauer angeschaut. Das Ein- und Ausschalten funktioniert gut über das Terminal, doch leider ist es sehr umständlich. Deswegen musste ein neuer Ansatz her. Eine Weboberfläche ist leicht erreichbar und geräteübergreifend nutzbar. Da wir hauptsächlich mit Python arbeiten, bietet es sich an die Website auch mit Python zu erstellen. In dieser Anleitung wollen wir also einen Python Webserver auf unserem Raspberry Pi installieren. Dazu erstellen wir eine Website, zum Steuern der smarten Steckdosen.

In dieser Anleitung werde ich nicht darauf eingehen, wie Raspberry Pi OS installiert wird. Ich arbeite mit einem Windows 10 PC und einem Raspberry Pi 3 auf dem Raspberry Pi OS Lite läuft.

Wir benötigen:

  • Raspberry Pi egal welches Modell
  • TP-Link Kasa Steckdose
  • Texteditor wie Notepad++
  • Putty mit SSH zugrifft auf den Pi
  • FTP Client wie Filezilla und FTP Server auf dem Pi

01. Bibliotheken

Um die Steckdosen steuern zu können, benötigen wir die kostenlose Python Bibliothek “pyHS100” die wir mit “pip3” installieren. Das gesamte Projekt wurde in Python 3 programmiert, das ist für unseren Raspberry kein Problem, wir müssen es ihm nur sagen. Damit wir mit “pip3” arbeiten können, müssen wir es zuerst einrichten, das machen wir mit diesem Befehl:

sudo apt install python3-pip

Nachdem wir “pip3” installiert haben, können wir endlich die Bibliothek “pyHS100” auf unseren Raspberry Pi laden, dafür geben wir Folgendes ein:

pip3 install pyHS100

Unseren Webserver wollen wir mit “flask” realisieren, dafür benötigen wir ebenfalls wieder Python 3. Die Bibliothek “flask” laden wir mit folgendem Befehl:

pip3 install flask

02. Ordnerstruktur

Als erstes benötigt unser Webserver eine passende Ordnerstruktur. Dabei sind zwei Ordner besonders wichtig. Im Verzeichnis “templates” werden sämtliche HTML Dokumente gespeichert und im Ordner “static” landen alle CSS und JS Dateien. Unser Verzeichnis legen wir wie folgt an:

mkdir webapp
cd webapp
mkdir static
mkdir templates

Ergebnis:

-/webapp
  --/static
  --/templates

03. Steckdosen schalten

Nachdem unsere Struktur steht, legen wir endlich mit dem Programmieren los. Im Ordner “webapp” erstellen wir eine neue Datei namens “webapp.py”. Von hieraus starten und steuern wir unseren Webserver.

3.1 Python

Folgenden Code packen wir in unsere “webapp.py”:

from flask import Flask, render_template
from pyHS100 import SmartPlug
from pyHS100 import Discover

app = Flask(__name__)

 
@app.route("/")
def pi_plug(): 
     piswitch = []
     for dev in Discover.discover().values():
         piswitch += [dev]       
     return render_template('index.html', piswitch=piswitch) 
 

@app.route('/piswitch/on/<name>')
def led_on(name):
     myipaddress = name
     plug = SmartPlug(myipaddress)
     plug.turn_on()
     return render_template('page.html', name=name)
 
 
@app.route('/piswitch/off/<name>')
def led_off(name):
     myipaddress = name
     plug = SmartPlug(myipaddress)
     plug.turn_off()
     return render_template('page.html', name=name)     


if __name__ == '__main__':
    app.run(debug=True, port=5000, host='0.0.0.0')

Im ersten Abschnitt unter “@app.route(“/”)” listen wir dank der “Scan” Funktion von “pyHS100”, die Steckdosen auf. Das Skript sucht also selbstständig im Netzwerk unsere Steckdosen und wir müssen diese nicht einzeln im Code hinterlegen.

Mit “@app.route(‘/piswitch/on/’)” senden wir einen Schaltbefehl an die jeweilige Steckdose. Die Information, welche IP-Adresse gemeint ist, entnimmt das Skript aus der URL

3.2 index.html

Weiter geht es mit den HTML Seiten, wir erstellen als Erstes eine Datei mit dem Namen “index.html” im Ordner “templates” und füllen das Dokument mit folgendem Code:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Pi-Switch - Control your Smart plug</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="/static/css/style.css" />
</head>
<body style="background-color:#f8f9fa;">
	<div class="container">
		<div class="header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
			<h1 class="display-4">Pi-Switch</h1>
			<p class="lead">Control your Smart plug</p>
		</div>
         <div class="mb-3">	  
             <table class="table table-striped table-bordered table-sm table-hover">
                 <thead class="table-dark">
			         <th>Name</th>
			         <th>State</th>
			         <th>Switch</th>
                 </thead>
                 <tbody>
                     {% for plug in piswitch %}
                         <tr>
                             <td title="{{ plug.host }}">{{ plug.alias }}</td>
					         <td title="{{ plug.time }}">{{ plug.state }}</td>
					         <td><a href="piswitch/on/{{ plug.host }}"><button type="button" class="btn btn-success">ON</button></a> <a href="piswitch/off/{{ plug.host }}"><button type="button" class="btn btn-danger">OFF</button></a></td>
                         </tr>
                     {% endfor%}
                 </tbody>
             </table>				
         </div>
         <footer class="my-5 pt-5 text-muted text-center text-small">
             <hr>
             <p class="mb-1">Pi-Switch by Andreas Schmidt</p>
             <ul class="list-inline">
                 <li class="list-inline-item"><a href="https://www.andreas-schmidt-arts.de/">AS-Arts</a></li>
                 <li class="list-inline-item"><a href="https://theartsblog.de/">ArtsBlog</a></li>
             </ul>
      </footer>
     </div>
</body>
</html>

In der “for” Schleife erzeugen wir für jede Steckdose eine neue Tabellenzeile. Die jeweilige IP-Adresse fügen wir dem Link hinzu, der später den Schaltbefehl senden soll.

3.3 page.html

Zum Schluss, legen wir die “page.html” Seite an mit folgendem Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pi-Switch - Loading...</title>
	<meta http-equiv="refresh" content="0; URL=/">
</head>
<body>
</body>
</html>

Die Datei leitet uns nach einem Schaltbefehl wieder auf die “index.html” Seite zurück. Dafür nutzen wir die “meta” Funktion von HTML im “head” Bereich.

3.4 style.css

Ich verwende hier das Bootstrap Framework von Twitter. Damit kann das Design einfach angepasst und weiterentwickelt werden. In der Datei “style.css” die im Ordner “/static/css/” abgelegt ist, habe ich noch ein paar kleine Anpassungen vorgenommen.

html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.container {
  max-width: 960px;
}

.header {
  max-width: 700px;
}

.table-bordered td, .table-bordered th {
    border: 0.09375rem solid #d5d8db;
}

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  background-color: #B4C3CB;
}

3.5 Wir starten den Webserver

Nachdem alle Arbeiten beendet sind, starten wir unseren Webserver mit:

python3 /home/pi/webapp/webapp.py

Nun sollte im Browser, unter der IP-Adresse des Raspberry Pi`s und der “port” Bezeichnung, die wir im Skript “webapp.py” festgelegt haben, unsere neue Weboberfläche erscheinen.

http://xxx.xxx.xxx.xx:5000/

04. Download

Ich habe hier nochmal alle Files zusammengestellt, damit das Einrichten nochmal etwas schneller von der Hand geht. Ich hoffe, ihr habt genauso viel Spaß mit dem Projekt wie ich und jetzt wünsche ich euch gutes Gelingen.

zip-file-icon

artsblog-piswitch-master.zip

Filesize: 0,2 mb
Related Posts