Iot-basierte webgesteuerte Hausautomation mit Himbeer-Pi

Hallo Leute, willkommen zum heutigen Tutorial. Eines der guten Dinge am Raspberry Pi ist die großartige Fähigkeit und Leichtigkeit, mit der Sie Geräte speziell für Projekte im Zusammenhang mit der Heimautomation mit dem Internet verbinden können. Heute werden wir die Möglichkeit untersuchen , AC-Geräte mit einem Klick auf Schaltflächen auf einer Webseite über das Internet zu steuern. Mit diesem IoT-basierten Hausautomationssystem können Sie Ihre Haushaltsgeräte von überall auf der Welt aus steuern. Dieser Webserver kann von jedem Gerät ausgeführt werden, auf dem HTML-Anwendungen wie Smartphones, Tablets, Computer usw. ausgeführt werden können.

Erforderliche Komponenten:

Für dieses Projekt fallen die Anforderungen in zwei Kategorien: Hardware und Software:

I. Hardwareanforderungen:

1. Raspberry Pi 3 (Jede andere Version wird nett sein)
2. Speicherkarte 8 oder 16 GB mit Raspbian Jessie
3. 5v Relais
4. 2n222 Transistoren
5. Dioden
6. Überbrückungsdrähte
7. Verbindungsblöcke
8. LEDs zum Testen.
9. Wechselstromlampe zum Testen
10. Steckbrett- und Überbrückungskabel
11. 220 oder 100 Ohm Widerstand

II. Software Anforderungen:

Neben dem Raspbian Jessie-Betriebssystem, das auf dem Himbeer-Pi ausgeführt wird, verwenden wir auch das WebIOPi-Framework, Notepad ++, das auf Ihrem PC ausgeführt wird, und filezila, um Dateien vom PC auf den Himbeer-Pi zu kopieren, insbesondere die Web-App-Dateien.

Außerdem müssen Sie für dieses Hausautomationsprojekt nicht in Python codieren. WebIOPi erledigt die gesamte Arbeit.

Raspberry Pi vorbereiten:

Es ist eine Gewohnheit für mich und ich denke, es ist eine gute Gewohnheit. Das erste, was ich jedes Mal mache, wenn ich den Raspberry Pi verwenden möchte, ist, den PI zu aktualisieren. In diesem Abschnitt werden in diesem Abschnitt die Pi-Aktualisierungsverfahren und die Installation des WebIOPi-Frameworks beschrieben, mit deren Hilfe wir die Kommunikation von der Webseite zum Himbeer-Pi verwalten können. Ich sollte wahrscheinlich sagen, dass dies auch mit dem Python Flask-Rahmen auf eine wohl einfachere Art und Weise möglich ist, aber eines der interessanten Dinge beim Heimwerken ist, wenn Sie einen Blick unter die Haube werfen und die schwierige Arbeit erledigen. Hier kommt die ganze Freude am Heimwerken.

Um den Himbeer-Pi unter den Befehlen zu aktualisieren und dann das RPi neu zu starten;

sudo apt-get update sudo apt-get upgrade sudo reboot

Nachdem dies erledigt ist, müssen wir als nächstes das webIOPi-Framework installieren.

Stellen Sie sicher, dass Sie sich im Ausgangsverzeichnis befinden.

cd ~

Verwenden Sie wget, um die Datei von der SourceForge-Seite abzurufen.

wget

Wenn der Download abgeschlossen ist, extrahieren Sie die Datei und wechseln Sie in das Verzeichnis.

tar xvzf WebIOPi-0.7.1.tar.gz cd WebIOPi-0.7.1 /

Zu diesem Zeitpunkt müssen wir vor dem Ausführen des Setups einen Patch installieren, da diese Version von WebIOPi nicht mit dem von mir verwendeten Himbeer-Pi 3 funktioniert und ich keine Version von WebIOPi finden konnte, die ausdrücklich mit Pi 3 funktioniert.

Die folgenden Befehle werden verwendet, um den Patch zu installieren, während er sich noch im WebIOPi-Verzeichnis befindet.

wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch patch -p1 -i webiopi-pi2bplus.patch

Anschließend können wir die Setup-Installation für WebIOPi mit ausführen.

sudo./setup.sh

Sagen Sie weiterhin "Ja", wenn Sie während der Setup-Installation aufgefordert werden, Abhängigkeiten zu installieren. Wenn Sie fertig sind, starten Sie Ihren Pi neu.

sudo neu starten

Testen Sie die WebIOPi-Installation:

Bevor wir zu Schaltplänen und Codes springen, müssen wir bei wieder aktiviertem Raspberry Pi unsere WebIOPi-Installation testen, um sicherzustellen, dass alles wie gewünscht funktioniert.

Führen Sie den Befehl aus.

sudo webiopi -d -c / etc / webiopi / config

Zeigen Sie nach Eingabe des obigen Befehls auf dem pi mit dem Webbrowser Ihres Computers, der mit dem Himbeer-Pi verbunden ist, auf http: // raspberrypi. mshome.net:8000 oder http; // thepi'sIPaddress: 8000. Das System fordert Sie zur Eingabe von Benutzername und Passwort auf.

Benutzername ist webiopi Passwort ist Himbeere

Diese Anmeldung kann bei Bedarf später entfernt werden, aber selbst Ihr Hausautomationssystem verdient ein gewisses Maß an Sicherheit, um zu verhindern, dass nur Personen mit IP-Steuergeräten und IOT-Geräten in Ihrem Haus arbeiten.

Schauen Sie sich nach der Anmeldung um und klicken Sie dann auf den Link GPIO-Header.

Für diesen Test schließen wir eine LED an GPIO 17 an. Setzen Sie also GPIO 17 als Ausgang.

Verbinden Sie anschließend die LED mit Ihrem Himbeer-Pi, wie in den folgenden Schaltplänen gezeigt.

Gehen Sie nach der Verbindung zurück zur Webseite und klicken Sie auf die Pin 11-Taste, um die LED ein- oder auszuschalten. Auf diese Weise können wir den Raspberry Pi GPIO mit WebIOPi steuern.

Wenn nach dem Test alles wie beschrieben funktioniert hat, können wir zum Terminal zurückkehren und das Programm mit STRG + C stoppen. Wenn Sie Probleme mit diesem Setup haben, melden Sie sich über den Kommentarbereich bei mir.

Weitere Informationen zu Webiopi finden Sie auf der Wiki-Seite (http://webiopi.trouch.com/INSTALL.html).

Nach Abschluss des Tests können wir das Hauptprojekt starten.

Erstellen der Webanwendung für Raspberry Pi Home Automation:

Hier bearbeiten wir die Standardkonfiguration des WebIOPi-Dienstes und fügen unseren eigenen Code hinzu, der beim Aufruf ausgeführt werden soll. Als erstes werden Filezilla oder eine andere FTP / SCP-Kopiersoftware auf unserem PC installiert. Sie werden mir zustimmen, dass das Codieren auf dem Pi über das Terminal ziemlich stressig ist, so dass Filezilla oder jede andere SCP-Software in diesem Stadium nützlich sein wird. Bevor wir mit dem Schreiben der HTML-, CSS- und Java-Skriptcodes für diese IoT Home Automation-Webanwendung beginnen und sie auf den Raspberry Pi verschieben, erstellen wir den Projektordner, in dem sich alle unsere Webdateien befinden.

Stellen Sie sicher, dass Sie sich im Ausgangsverzeichnis befinden, erstellen Sie den Ordner, wechseln Sie in den erstellten Ordner und erstellen Sie den HTML-Ordner im Verzeichnis:

cd ~ mkdir webapp cd webapp mkdir html

Erstellen Sie einen Ordner für Skripte, CSS und Bilder im HTML-Ordner

mkdir html / css mkdir html / img mkdir html / scripts

Wenn unsere Dateien erstellt sind, können Sie die Codes auf unseren PC schreiben und von dort über filezilla zum Pi wechseln.

Der JavaScript-Code:

Der erste Code, den wir schreiben werden, ist der des Javascript. Es ist ein einfaches Skript für die Kommunikation mit dem WebIOPi-Dienst.

Es ist wichtig zu beachten, dass unsere Web-App für dieses Projekt aus vier Schaltflächen besteht. Dies bedeutet, dass wir nur vier GPIO-Pins steuern möchten, obwohl wir in unserer Demonstration nur zwei Relais steuern werden. Überprüfen Sie das vollständige Video am Ende.

webiopi (). ready (function () {webiopi (). setFunction (17, "out"); webiopi (). setFunction (18, "out"); webiopi (). setFunction (22, "out"); webiopi ().setFunction (23, "out"); var content, button; content = $ ("# content"); button = webiopi (). createGPIOButton (17, "Relay 1"); content.append (button); button = webiopi (). createGPIOButton (18, "Relay 2"); content.append (button); button = webiopi (). createGPIOButton (22, "Relay 3"); content.append (button); button = webiopi ().createGPIOButton (23, "Relay 4"); content.append (Schaltfläche);});

Der obige Code wird ausgeführt, wenn WebIOPi bereit ist.

Im Folgenden haben wir den JavaScript-Code erklärt:

webiopi (). ready (function (): Dies weist unser System lediglich an, diese Funktion zu erstellen und auszuführen, wenn das webiopi bereit ist.

webiopi (). setFunction (23, "out"); Dies hilft uns, den WebIOPi-Dienst anzuweisen, GPIO23 als Ausgabe festzulegen. Wir haben hier vier Schaltflächen. Sie könnten mehr davon haben, wenn Sie mehr Schaltflächen implementieren.

var content, button; Diese Zeile weist unser System an, eine Variable mit dem Namen content zu erstellen und die Variable zu einer Schaltfläche zu machen.

content = $ ("# content"); Die Inhaltsvariable wird weiterhin in HTML und CSS verwendet. Wenn wir also auf #content verweisen, erstellt das WebIOPi-Framework alles, was damit verbunden ist.

button = webiopi (). createGPIOButton (17, "Relais 1"); WebIOPi kann verschiedene Arten von Schaltflächen erstellen. Der obige Code hilft uns, den WebIOPi-Dienst anzuweisen, eine GPIO-Schaltfläche zu erstellen, die den GPIO-Pin in diesem Fall 17 mit der Bezeichnung „Relais 1“ steuert. Gleiches gilt für die anderen.

content.append (Schaltfläche); Hängen Sie diesen Code an einen anderen Code für die Schaltfläche an, die entweder in der HTML-Datei oder an einer anderen Stelle erstellt wurde. Es können weitere Schaltflächen erstellt werden, die alle dieselben Eigenschaften wie diese Schaltfläche haben. Dies ist besonders nützlich, wenn Sie das CSS oder Skript schreiben.

Nachdem wir die JS-Dateien erstellt haben, speichern wir sie und kopieren sie dann mit filezilla nach webapp / html / scripts, wenn Sie Ihre Dateien auf die gleiche Weise wie ich erstellt haben.

Nachdem dies erledigt ist, erstellen wir das CSS. Sie können den Code vollständig über den Link herunterladen, der am Ende im Abschnitt Code angegeben ist.

Der CSS-Code:

Das CSS hilft uns dabei, unsere IoT Raspberry Pi-Hausautomationswebseite hübsch aussehen zu lassen.

Ich wollte, dass die Webseite wie im Bild unten aussieht und musste daher das smarthome.css-Stylesheet schreiben, um dies zu erreichen.

Nachfolgend haben wir den CSS-Code erklärt:

Das CSS-Skript fühlt sich zu umfangreich an, um es hier aufzunehmen, daher werde ich nur einen Teil davon auswählen und sie für die Aufschlüsselung verwenden. Sie können die vollständige CSS-Datei hier herunterladen. CSS ist einfach und Sie können es verstehen, indem Sie einfach den CSS-Code durchgehen. Sie können diesen Teil einfach überspringen und unseren CSS-Code sofort verwenden.

Der erste Teil des Skripts repräsentiert das Stylesheet für den Hauptteil der Web-App und das unten gezeigte.

Körper {Hintergrundfarbe: #ffffff; Hintergrundbild: URL ('/ img / smart.png'); Hintergrundwiederholung: keine Wiederholung; Hintergrundposition: Mitte; Hintergrundgröße: Cover; Schriftart: fett 18px / 25px Arial, serifenlos; Farbe: LightGray; }}

Ich möchte glauben, dass der obige Code selbsterklärend ist. Wir setzen die Hintergrundfarbe auf #ffffff, was weiß ist. Dann fügen wir ein Hintergrundbild hinzu, das sich an diesem Ordner befindet (Erinnern Sie sich an unsere frühere Ordnereinrichtung?). Wir stellen sicher, dass das Bild nicht funktioniert. t Wiederholen Sie diesen Vorgang, indem Sie die Eigenschaft background-repeat auf no-repeat setzen. Weisen Sie dann das CSS an, den Hintergrund zu zentralisieren. Wir bewegen uns dann, um die Hintergrundgröße, Schriftart und Farbe festzulegen.

Nachdem der Körper fertig ist, haben wir das CSS geschrieben, damit die Schaltflächen hübsch aussehen.

Taste {Anzeige: Block; Position: relativ; Rand: 10px; Polsterung: 0 10px; Textausrichtung: Mitte; Textdekoration: keine; Breite: 130px; Höhe: 40px; Schriftart: fett 18px / 25px Arial, serifenlos; Farbe schwarz; Textschatten: 1px 1px 1px rgba (255,255,255, 0,22); -webkit-border-radius: 30px; -Moz-Rand-Radius: 30px; Randradius: 30px;

Um dies kurz zu halten, wurde alles andere im Code getan, damit es gut aussieht. Sie können sie ändern, um zu sehen, was passiert. Ich denke, es heißt Lernen durch Ausprobieren, aber eine gute Sache bei CSS ist, dass Dinge in einfachem Englisch ausgedrückt werden, was bedeutet, dass sie ziemlich einfach zu verstehen sind. Der andere Teil des Schaltflächenblocks enthält einige Extras für Textschatten auf der Schaltfläche und den Schaltflächenschatten. Es hat auch einen leichten Übergangseffekt, der dazu beiträgt, dass es beim Drücken der Taste schön und realistisch aussieht. Diese werden separat für Webkit, Firefox, Oper usw. definiert, um sicherzustellen, dass die Webseite auf allen Plattformen optimal funktioniert.

Der nächste Codeblock besteht darin, dass der WebIOPi-Dienst ihm mitteilt, dass dies eine Eingabe für den WebIOPi-Dienst ist.

i nput {display: block; Breite: 160px; Höhe: 45px; }}

Das Letzte, was wir tun möchten, ist eine Anzeige zu geben, wenn die Taste gedrückt wurde. Sie können also auf den Bildschirm schauen und anhand der Farbe der Schaltflächen den aktuellen Status anzeigen. Zu diesem Zweck wurde die folgende Codezeile für jede einzelne Schaltfläche implementiert.

# gpio17.LOW {Hintergrundfarbe: Grau; Farbe schwarz; } # gpio17.HIGH {Hintergrundfarbe: Rot; Farbe: LightGray; }}

Die obigen Codezeilen ändern einfach die Farbe der Schaltfläche basierend auf ihrem aktuellen Status. Wenn die Schaltfläche ausgeschaltet (LOW) ist, wird die Hintergrundfarbe der Schaltfläche grau, um ihre Inaktivität anzuzeigen, und wenn sie aktiviert ist (HIGH), wird die Hintergrundfarbe der Schaltfläche ROT.

CSS in der Tasche, können Sie als smarthome.css speichern und dann über Filezilla (oder eine andere SCP-Software, die Sie verwenden möchten) in den Styles-Ordner auf unserem Himbeer-Pi verschieben und das letzte Stück, den HTML-Code, korrigieren. Denken Sie daran, das vollständige CSS hier herunterzuladen.

HTML Quelltext:

Der HTML-Code fasst alles zusammen, Javascript und das Stylesheet.

Druckknopf; Speck erhalten

Innerhalb des Head-Tags existieren einige sehr wichtige Merkmale.

Mit der obigen Codezeile kann die Web-App mithilfe von Chrome oder Mobile Safari auf einem mobilen Desktop gespeichert werden. Dies kann über das Chrome-Menü erfolgen. Dies gibt der App ein einfaches Startgefühl vom mobilen Desktop oder von zu Hause aus.

Die nächste Codezeile unten gibt eine gewisse Reaktionsfähigkeit auf die Web-App. Es ermöglicht es, den Bildschirm jedes Geräts zu belegen, auf dem es gestartet wurde.

In der nächsten Codezeile wird der Titel deklariert, der in der Titelleiste der Webseite angezeigt wird.

Die nächsten vier Codezeilen erfüllen jeweils die Funktion, den HTML-Code mit mehreren Ressourcen zu verknüpfen, die für die gewünschte Arbeit erforderlich sind.

In der ersten Zeile oben wird das Haupt-JavaScript des WebIOPi-Frameworks aufgerufen, das im Serverstamm fest codiert ist. Dies muss jedes Mal aufgerufen werden, wenn WebIOPi verwendet werden soll.

Die zweite Zeile zeigt die HTML-Seite auf unser jQuery-Skript, die dritte in Richtung unseres Stylesheets. Zuletzt hilft die letzte Zeile beim Einrichten eines Symbols für den mobilen Desktop, falls wir es als Web-App oder als Favicon für die Webseite verwenden möchten.

Der Hauptteil des HTML-Codes enthält nur Umbruch-Tags, um sicherzustellen, dass die Schaltflächen richtig an der Zeile darunter ausgerichtet sind und unser HTML-Code anzeigt, was in der JavaScript-Datei geschrieben ist. Die ID = "Inhalt" sollte Sie an die Inhaltsdeklaration für unsere Schaltfläche früher unter dem JavaScript-Code erinnern.

Sie kennen den Drill, den HTML-Code als index.html und wechseln über filezilla in den HTML-Ordner auf dem Pi. Sie können alle CSS-, JS- und HTML-Dateien von hier herunterladen.

WebIOPi Server-Änderungen für die Heimautomation:

Zu diesem Zeitpunkt sind wir bereit, mit der Erstellung unserer Schaltpläne und dem Testen unserer Web-App zu beginnen. Zuvor müssen wir jedoch die Konfigurationsdatei des Webiopi- Dienstes so bearbeiten, dass anstelle der mitgelieferten Konfigurationsdateien Daten aus unserem HTML-Ordner verwendet werden.

Führen Sie zum Bearbeiten der Konfiguration Folgendes mit Root-Berechtigung aus:

sudo nano / etc / webiopi / config

Suchen Sie nach dem http-Abschnitt der Konfigurationsdatei und überprüfen Sie unter dem Abschnitt, in dem Sie Folgendes haben: #Verwenden Sie doc-root, um den Standardspeicherort für HTML- und Ressourcendateien zu ändern

Kommentieren Sie alles darunter mit # aus. Wenn Ihr Ordner wie meiner eingerichtet ist, zeigen Sie mit Ihrem doc-root auf den Pfad Ihrer Projektdatei

doc-root = / home / pi / webapp / html

Speichern und schließen. Sie können den Port auch von 8000 ändern, falls auf dem pi ein anderer Server mit diesem Port ausgeführt wird. Wenn nicht, speichern und beenden Sie, während wir fortfahren.

Es ist wichtig zu beachten, dass Sie das Kennwort des WebIOPi-Dienstes mit dem Befehl ändern können.

sudo webiopi-passwd

Sie werden aufgefordert, einen neuen Benutzernamen und ein neues Passwort einzugeben. Dies kann auch vollständig entfernt werden, aber Sicherheit ist wichtig, oder?

Führen Sie zuletzt den WebIOPi-Dienst aus, indem Sie den folgenden Befehl eingeben:

sudo /etc/init.d/webiopi starten

Der Serverstatus kann überprüft werden mit;

sudo /etc/init.d/webiopi Status

Es kann gestoppt werden mit;

sudo /etc/init.d/webiopi stop

Verwenden Sie Folgendes, um WebIOPi so einzurichten, dass es beim Booten ausgeführt wird.

sudo update-rc.d webiopi Standardeinstellungen

Wenn Sie den Start beim Booten rückgängig machen und stoppen möchten, verwenden Sie;

sudo update-rc.d webiopi entfernen

Schaltplan und Erklärung:

Nachdem unsere Software eingerichtet ist, können wir alle mit der Erstellung der Schaltpläne für dieses webgesteuerte Home Appliance-Projekt beginnen.

Ich konnte zwar keine Relaismodule in die Hand nehmen, mit denen Hobbyisten meiner Meinung nach leichter arbeiten können. Daher zeichne ich hier die Schaltpläne für gewöhnliche eigenständige 5-V-Einzelrelais.

Schließen Sie Ihren Stromkreis wie oben gezeigt an. Sie sollten beachten, dass sich COM, NO (normalerweise offen) und NC (normalerweise geschlossen) Ihres eigenen Relais an verschiedenen Seiten / Punkten befinden können. Verwenden Sie bitte einen Millimeter, um es zu testen. Erfahren Sie hier mehr über Relais.

Wenn unsere Komponenten verbunden sind, starten Sie Ihren Server von einer Webseite aus, rufen Sie die IP Ihres Raspberry Pi auf und geben Sie den zuvor beschriebenen Port an, melden Sie sich mit Ihrem Benutzernamen und Passwort an, und Sie sollten eine Webseite sehen, die genau wie im Bild unten aussieht.

Jetzt können Sie vier AC Home-Geräte von überall aus drahtlos steuern, indem Sie einfach auf die Schaltflächen klicken. Dies funktioniert von Mobiltelefonen, Tablets usw. aus, und Sie können weitere Tasten und Relais hinzufügen, um mehr Geräte zu steuern. Überprüfen Sie das vollständige Video unten.

Das ist es, Leute, danke, dass ihr hier geblieben seid. Wenn Sie Fragen haben, geben Sie diese in das Kommentarfeld ein.