IoT-gebaseerde webgestuurde domotica met Raspberry Pi

Hallo allemaal, welkom bij de tutorial van vandaag, een van de goede dingen van de Raspberry Pi is het grote vermogen en het gemak waarmee het je de mogelijkheid geeft om apparaten met internet te verbinden, vooral voor aan huisautomatisering gerelateerde projecten. Vandaag gaan we de mogelijkheid onderzoeken om AC-apparaten te bedienen met een klik op de knoppen op een webpagina via internet. Met dit op IoT gebaseerde domoticasysteem kunt u uw huishoudelijke apparaten overal ter wereld bedienen. Deze webserver kan worden uitgevoerd vanaf elk apparaat waarop HTML-toepassingen kunnen worden uitgevoerd, zoals smartphones, tablets, computers enz.

Vereiste componenten:

Voor dit project vallen de vereisten onder twee categorieën, hardware en software:

I. hardwarevereisten:

1. Raspberry Pi 3 (elke andere versie zal goed zijn)
2. Geheugenkaart 8 of 16 GB met Raspbian Jessie
3. 5v relais
4. 2n222 transistors
5. Diodes
6. Doorverbindingsdraden
7. Verbindingsblokken
8. LED's om te testen.
9. AC-lamp om te testen
10. Breadboard en startkabels
11. 220 of 100 ohm weerstand

II. Softwarevereisten:

Naast het Raspbian Jessie-besturingssysteem dat op de Raspberry Pi draait, zullen we ook het WebIOPi- framewerk, notepad ++ op uw pc en filezila gebruiken om bestanden van de pc naar de Raspberry Pi te kopiëren, vooral de webapp-bestanden.

Je hoeft ook niet te coderen in Python voor dit Home Automation Project, WebIOPi doet al het werk.

De Raspberry Pi voorbereiden:

Het is een soort gewoonte voor mij en ik denk dat het een goede is, het eerste dat ik doe elke keer dat ik de Raspberry Pi wil gebruiken, is de PI updaten. Voor dit project zal deze sectie bestaan ​​uit de Pi-updateprocedures en het installeren van het WebIOPi-framework dat ons zal helpen om de communicatie van de webpagina naar de Raspberry Pi af te handelen. Ik zou waarschijnlijk moeten zeggen dat dit ook op een aantoonbaar eenvoudigere manier kan worden gedaan met behulp van het python Flask-framewerk, maar een van de interessante dingen aan DIY is wanneer je een kijkje onder de motorkap neemt en het moeilijke werk maakt. Dat is waar alle plezier van DIY komt.

Om de onderstaande commando's van de Raspberry Pi bij te werken en vervolgens de RPi opnieuw op te starten;

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

Nu dit is gebeurd, is het volgende dat we het webIOPi-framework installeren.

Zorg ervoor dat u zich in de homedirectory bevindt met;

cd ~

Gebruik wget om het bestand van hun sourceforge-pagina te halen;

wget

Als het downloaden is voltooid, pak je het bestand uit en ga je naar de directory;

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

Voordat we de installatie uitvoeren, moeten we op dit punt een patch installeren, aangezien deze versie van de WebIOPi niet werkt met de raspberry pi 3 die ik gebruik en ik kon geen versie van de WebIOPi vinden die uitdrukkelijk werkt met de Pi 3.

Onderstaande commando's worden gebruikt om patch te installeren terwijl u zich nog in de WebIOPi-directory bevindt, run;

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

Vervolgens kunnen we de installatie-installatie voor de WebIOPi uitvoeren met;

sudo./setup.sh

Blijf ja zeggen als u wordt gevraagd om afhankelijkheden te installeren tijdens de installatie. Als u klaar bent, start u uw pi opnieuw op;

sudo opnieuw opstarten

Test WebIOPi-installatie:

Voordat we beginnen met schema's en codes, met de Raspberry Pi weer aan, zullen we onze WebIOPi-installatie moeten testen om er zeker van te zijn dat alles goed werkt zoals gewenst.

Voer het commando uit;

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

Na het geven van de bovenstaande opdracht op de pi, wijst u de webbrowser van uw computer die is verbonden met de raspberry pi naar http: // raspberrypi. mshome.net:8000 of http; // thepi's IP-adres: 8000. Het systeem zal u om gebruikersnaam en wachtwoord vragen.

Gebruikersnaam is webiopi Wachtwoord is framboos

Deze login kan desgewenst later worden verwijderd, maar zelfs uw domoticasysteem verdient een extra niveau van beveiliging om te voorkomen dat iedereen met de IP-controlerende apparaten en IOT-apparaten in uw huis.

Kijk na het inloggen rond en klik vervolgens op de GPIO-headerlink.

Voor deze test zullen we een LED aansluiten op GPIO 17, dus ga door en stel GPIO 17 in als uitgang.

Als u dit gedaan heeft, sluit u de led aan op uw raspberry pi zoals weergegeven in het onderstaande schema.

Ga na de verbinding terug naar de webpagina en klik op de pin 11-knop om de LED in of uit te schakelen. Op deze manier kunnen we de Raspberry Pi GPIO aansturen met WebIOPi.

Als na de test alles werkte zoals beschreven, kunnen we teruggaan naar de terminal en het programma stoppen met CTRL + C. Als je een probleem hebt met deze setup, bel me dan via het commentaargedeelte.

Meer informatie over Webiopi is te vinden op de Wiki-pagina (http://webiopi.trouch.com/INSTALL.html)

Als de test is voltooid, zijn we klaar om het hoofdproject te starten.

Bouwen van de webapplicatie voor Raspberry Pi Home Automation:

Hier zullen we de standaardconfiguratie van de WebIOPi-service bewerken en onze eigen code toevoegen die wordt uitgevoerd wanneer deze wordt aangeroepen. Het eerste dat we zullen doen, is filezilla of een andere FTP / SCP-kopieersoftware op onze pc installeren. U zult het met mij eens zijn dat coderen op de pi via de terminal behoorlijk stressvol is, dus filezilla of andere SCP-software zal in dit stadium van pas komen. Voordat we beginnen met het schrijven van de html-, css- en java-scriptcodes voor deze IoT Home Automation-webtoepassing en deze naar de Raspberry Pi verplaatsen, laten we de projectmap maken waar al onze webbestanden zullen zijn.

Zorg ervoor dat je in de homedirectory bent met, maak vervolgens de map aan, ga naar de gemaakte map en maak een html-map in de map:

cd ~ mkdir webapp cd webapp mkdir html

Maak een map voor scripts, CSS en afbeeldingen in de html-map

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

Met onze gemaakte bestanden gaan we verder met het schrijven van de codes op onze pc en vanaf dat moment naar de Pi via filezilla.

De JavaScript-code:

Het eerste stukje code dat we gaan schrijven is dat van de javascript. Het is een eenvoudig script om te communiceren met de WebIOPi-service.

Het is belangrijk op te merken dat onze web-app voor dit project uit vier knoppen zal bestaan, wat betekent dat we van plan zijn slechts vier GPIO-pinnen te bedienen, hoewel we in onze demonstratie slechts twee relais zullen besturen. Bekijk de volledige video aan het einde.

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 (knop); button = webiopi (). createGPIOButton (18, "Relay 2"); content.append (knop); button = webiopi (). createGPIOButton (22, "Relay 3"); content.append (knop); button = webiopi ().createGPIOButton (23, "Relay 4"); content.append (knop);});

De bovenstaande code wordt uitgevoerd wanneer de WebIOPi klaar is.

Hieronder hebben we de JavaScript-code uitgelegd:

webiopi (). ready (function (): Dit instrueert ons systeem om deze functie te maken en uit te voeren wanneer de webiopi gereed is.

webiopi (). setFunction (23, "uit"); Dit helpt ons de WebIOPi-service te vertellen dat GPIO23 als uitvoer moet worden ingesteld. We hebben hier vier knoppen, u zou er meer van kunnen hebben als u meer knoppen implementeert.

var inhoud, knop; Deze regel vertelt ons systeem om een ​​variabele met de naam content te maken en de variabele een knop te maken.

content = $ ("# content"); De inhoudsvariabele wordt nog steeds gebruikt in onze html en css. Dus als we verwijzen naar #content, creëert het WebIOPi-framework alles wat ermee samenhangt.

button = webiopi (). createGPIOButton (17, "Relay 1"); WebIOPi kan verschillende soorten knoppen maken. Het bovenstaande stukje code helpt ons om de WebIOPi-service te vertellen dat een GPIO-knop moet worden gemaakt die de GPIO-pin bestuurt, in dit geval 17 met het label "Relay 1". Hetzelfde geldt voor de andere.

content.append (knop); Voeg deze code toe aan elke andere code voor de knop die is gemaakt in het html-bestand of ergens anders. Er kunnen meer knoppen worden gemaakt en deze hebben allemaal dezelfde eigenschappen van deze knop. Dit is vooral handig bij het schrijven van de CSS of het script.

Nadat we de JS-bestanden hebben gemaakt, slaan we het op en kopiëren het vervolgens met filezilla naar webapp / html / scripts als je je bestanden op dezelfde manier hebt gemaakt als bij de mijne.

Als dit klaar is, gaan we verder met het maken van de CSS. Je kunt de code helemaal downloaden via de link die aan het einde in het gedeelte Code wordt gegeven.

De CSS-code:

De CSS helpt ons om onze IoT Raspberry Pi-domotica-webpagina er mooi uit te laten zien.

Ik wilde dat de webpagina eruit zou zien als de onderstaande afbeelding en moest daarom de stijlpagina van smarthome.css schrijven om dit te bereiken.

Hieronder hebben we de CSS-code uitgelegd:

Het CSS-script voelt te omvangrijk om hier op te nemen, dus ik zal er gewoon een deel van kiezen en ze gebruiken voor de analyse. U kunt hier het volledige CSS-bestand downloaden. CSS is eenvoudig en u kunt het begrijpen door gewoon de CSS-code te doorlopen. U kunt dit deel gemakkelijk doorlopen en onze CSS-code meteen gebruiken.

Het eerste deel van het script vertegenwoordigt de stylesheet voor de hoofdtekst van de webapp en wordt hieronder weergegeven;

body {achtergrondkleur: #ffffff; achtergrondafbeelding: url ('/ img / smart.png'); achtergrondherhaling: geen herhaling; achtergrondpositie: midden; achtergrondgrootte: omslag; lettertype: vet 18px / 25px Arial, sans-serif; kleur: LightGray; }

Ik wil geloven dat de bovenstaande code voor zichzelf spreekt, we stellen de achtergrondkleur in op #ffffff, wat wit is, dan voegen we een achtergrondafbeelding toe die zich op die maplocatie bevindt (Herinner je je onze eerdere mapinstellingen nog?), We zorgen ervoor dat de afbeelding niet ' t herhalen door de eigenschap background-repeat in te stellen op no-repeat, en vervolgens de CSS te instrueren om de achtergrond te centraliseren. We gaan dan verder om de achtergrondgrootte, het lettertype en de kleur in te stellen.

Toen de body klaar was, hebben we de css geschreven voor knoppen om er mooi uit te zien.

knop {display: block; positie: relatief; marge: 10px; opvulling: 0 10px; text-align: center; tekstversiering: geen; breedte: 130px; hoogte: 40px; lettertype: vet 18px / 25px Arial, sans-serif; de kleur zwart; tekstschaduw: 1px 1px 1px rgba (255,255,255,.22); -webkit-border-radius: 30px; -moz-border-radius: 30px; grensradius: 30px;

Om dit kort te houden, is al het andere in de code gedaan om het er goed uit te laten zien. Je kunt ze veranderen om te zien wat er gebeurt, ik denk dat het leren wordt genoemd met vallen en opstaan, maar een goed ding over CSS is dat dingen in gewoon Engels worden uitgedrukt, wat betekent dat ze vrij gemakkelijk te begrijpen zijn. Het andere deel van het knoppenblok heeft enkele extra's voor tekstschaduw op de knop en knopschaduw. Het heeft ook een licht overgangseffect waardoor het er mooi en realistisch uitziet wanneer de knop wordt ingedrukt. Deze worden afzonderlijk gedefinieerd voor webkit, firefox, opera enz. Om ervoor te zorgen dat de webpagina optimaal presteert op alle platforms.

Het volgende codeblok is bedoeld om de WebIOPi-service te laten weten dat dit een invoer is voor de WebIOPi-service.

i nput {display: block; breedte: 160px; hoogte: 45px; }

Het laatste dat we willen doen, is een soort indicatie geven wanneer de knop is ingedrukt. U kunt dus een beetje naar het scherm kijken en de kleur van de knoppen laat u de huidige status weten. Om dit te doen, is de onderstaande regel code geïmplementeerd voor elke afzonderlijke knop.

# gpio17.LOW {achtergrondkleur: grijs; de kleur zwart; } # gpio17.HIGH {achtergrondkleur: Rood; kleur: LightGray; }

De regels met codes hierboven veranderen eenvoudig de kleur van de knop op basis van de huidige status. Als de knop uit is (LAAG), wordt de achtergrondkleur van de knop grijs om aan te geven dat deze inactief is en als deze aan staat (HOOG) wordt de achtergrondkleur van de knop ROOD.

CSS in de tas, laten we opslaan als smarthome.css, verplaats het dan via filezilla (of een andere SCP-software die je wilt gebruiken) naar de styles-map op onze Raspberry Pi en repareer het laatste stukje, de html-code. Vergeet niet om vanaf hier de volledige CSS te downloaden.

HTML code:

De html-code brengt alles samen, javascript en de stylesheet.

Druk op de knop; ontvang spek

Binnen de head-tag bevinden zich enkele zeer belangrijke kenmerken.

Met de bovenstaande regel code kan de web-app worden opgeslagen op een mobiele desktop met behulp van Chrome of Mobile Safari. Dit kan via het Chrome-menu. Dit geeft de app een gemakkelijk startgevoel vanaf de mobiele desktop of thuis.

De volgende regel code hieronder geeft een soort van reactievermogen op de web-app. Hiermee kan het het scherm bezetten van elk apparaat waarop het is gelanceerd.

De volgende regel code geeft de titel aan die op de titelbalk van de webpagina wordt weergegeven.

De volgende vier regels codes hebben elk de functie van het koppelen van de html-code aan verschillende bronnen die nodig zijn om naar wens te werken.

De eerste regel hierboven noemt het belangrijkste WebIOPi-framework JavaScript dat hard gecodeerd is in de serverroot. Dit moet elke keer dat de WebIOPi wordt gebruikt worden aangeroepen.

De tweede regel verwijst de html-pagina naar ons jQuery-script, de derde wijst het in de richting van ons stylesheet. Ten slotte helpt de laatste regel bij het instellen van een pictogram voor gebruik op de mobiele desktop voor het geval we besluiten het te gebruiken als een webapp of als een favicon voor de webpagina.

Het hoofdgedeelte van de html-code bevat alleen break-tags om ervoor te zorgen dat de knoppen correct zijn uitgelijnd met de onderstaande regel die onze html-code vertelt om weer te geven wat er in het JavaScript-bestand is geschreven. De id = ”content” zou u moeten herinneren aan de inhoudsverklaring voor onze knop eerder onder de JavaScript-code.

Je kent de oefening, de html-code als index.html en verplaats je naar de html-map op de Pi via filezilla. U kunt hier alle CSS-, JS- en HTML-bestanden downloaden.

WebIOPi-serverbewerkingen voor domotica:

In dit stadium zijn we klaar om te beginnen met het maken van onze schema's en het testen van onze web-app, maar daarvoor moeten we het configuratiebestand van de webiopi- service bewerken, zodat het erop wijst om gegevens uit onze html-map te gebruiken in plaats van de configuratiebestanden die erbij zijn geleverd.

Voer het volgende uit met root-toestemming om de configuratie te bewerken;

sudo nano / etc / webiopi / config

Zoek naar de http-sectie van het configuratiebestand, kijk onder de sectie waar je zoiets hebt, #Gebruik doc-root om de standaard HTML- en bronbestandenlocatie te wijzigen

Geef commentaar op iets eronder met # en als uw map is ingesteld zoals de mijne, wijs dan uw doc-root naar het pad van uw projectbestand

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

Bewaar en sluit af. Je kunt ook de poort wijzigen van 8000, voor het geval je een andere server op de pi hebt die die poort gebruikt. Zo niet, sla dan op en stop, terwijl we verder gaan.

Het is belangrijk om op te merken dat u het wachtwoord van de WebIOPi-service kunt wijzigen met het commando;

sudo webiopi-passwd

U wordt om een ​​nieuwe gebruikersnaam en wachtwoord gevraagd. Dit kan ook volledig worden verwijderd, maar beveiliging is belangrijk toch?

Voer ten slotte de WebIOPi-service uit door de onderstaande opdracht op te geven:

sudo /etc/init.d/webiopi start

De serverstatus kan worden gecontroleerd met;

sudo /etc/init.d/webiopi status

Het kan worden gestopt met werken met;

sudo /etc/init.d/webiopi stop

Om WebIOPi in te stellen om bij het opstarten te starten, gebruikt u;

sudo update-rc.d webiopi standaardinstellingen

Als u wilt omkeren en wilt stoppen met opstarten tijdens het opstarten, gebruikt u;

sudo update-rc.d webiopi verwijderen

Schakelschema en uitleg:

Nu onze software is ingesteld, zijn we helemaal klaar om de schema's voor dit webgestuurde Home Appliance-project te maken.

Terwijl ik de relaismodules niet in handen kon krijgen, waarvan ik vind dat ze gemakkelijker zijn om mee te werken voor hobbyisten. Dus ik teken hier de schema's voor gewone stand-alone enkele 5v-relais.

Sluit uw circuit aan zoals weergegeven in het fritzingscircuit hierboven. Houd er rekening mee dat COM, NO (normaal open) en NC (normaal gesloten) van uw eigen relais zich aan verschillende kanten / punten kunnen bevinden. Gebruik een millimeter om het uit te testen. Lees hier meer over relay.

Met onze componenten verbonden, start u uw server, vanaf een webpagina, gaat u naar het IP-adres van uw Raspberry Pi en geeft u de poort aan zoals eerder beschreven, log in met uw gebruikersnaam en wachtwoord en u zou een webpagina moeten zien die er precies zo uitziet als de afbeelding hieronder.

Nu kunt u eenvoudig vier AC Home-apparaten overal draadloos bedienen, gewoon door op de knoppen te klikken. Dit werkt vanaf een mobiele telefoon, tablet enz. En u kunt meer knoppen en relais toevoegen om meer apparaten te bedienen. Bekijk de volledige video hieronder.

Dat is het jongens, bedankt dat je voor deze blijft hangen. Als je vragen hebt, zet ze dan in het opmerkingenveld.