Iot-baseret webstyret hjemmeautomatisering ved hjælp af hindbær pi

Hej fyre, velkommen til dagens tutorial, en af de gode ting ved Raspberry Pi er den store evne og lethed, hvormed det giver dig mulighed for at forbinde enheder til internettet især til Home Automation-relaterede projekter. I dag skal vi undersøge muligheden for at kontrollere vekselstrømsapparater ved at klikke på knapperne på en webside ved hjælp af internettet. Ved hjælp af dette IoT-baserede hjemmeautomatiseringssystem kan du styre dine husholdningsapparater overalt i verden. Denne webserver kan køres fra enhver enhed, der kan køre HTML-applikationer, såsom Smart Phone, tablet, computer osv.

Nødvendige komponenter:

For dette projekt falder kravene ind under to kategorier, hardware og software:

I. Hardwarekrav:

Raspberry Pi 3 (Enhver anden version vil være god)
Hukommelseskort 8 eller 16 GB, der kører Raspbian Jessie
5v relæer
2n222 transistorer
Dioder
Jumper Wires
Forbindelsesblokke
LED'er til test.
AC-lampe til test
Breadboard og jumper kabler
220 eller 100 ohm modstand

II. Softwarekrav:

Bortset fra Raspbian Jessie-operativsystemet, der kører på raspberry pi, bruger vi også WebIOPi-rammearbejdet, notepad ++, der kører på din pc og filezila til at kopiere filer fra pc'en til raspberry pi, især webapp-filer.

Du behøver heller ikke kode i Python til dette Home Automation Project, WebIOPi vil gøre alt arbejdet.

Forberedelse af Raspberry Pi:

Det er en slags vane for mig, og jeg synes, det er godt, det første jeg gør hver gang jeg vil bruge Raspberry Pi er at opdatere PI. For dette projekt vil dette afsnit omfatte Pi-opdateringsprocedurer og installation af WebIOPi-rammen, som vil hjælpe os med at håndtere kommunikation fra websiden til hindbær-pi. Jeg burde nok sige, at dette også kan gøres på en uden tvivl lettere måde ved hjælp af python Flask-rammearbejdet, men en af de interessante ting ved DIY er, når du kigger under hætten og gør det vanskelige arbejde. Det er hvor al glæden ved DIY kommer.

For at opdatere hindbær Pi nedenfor kommandoer og derefter genstarte RPi;

sudo apt-get opdater sudo apt-get upgrade sudo genstart

Når dette er gjort, er den næste ting for os at installere webIOPi-rammen.

Sørg for, at du er i hjemmebiblioteket ved hjælp af;

cd ~

Brug wget til at hente filen fra deres sourceforge-side;

wget

Når download er udført, skal du udpakke filen og gå ind i biblioteket;

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

På dette tidspunkt, inden vi kører installationen, skal vi installere en patch, da denne version af WebIOPi ikke fungerer med hindbær pi 3, som jeg bruger, og jeg ikke kunne finde en version af WebIOPi, der fungerer udtrykkeligt med Pi 3.

Nedenstående kommandoer bruges til at installere patch, mens du stadig er i WebIOPi-biblioteket, kør;

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

Derefter kan vi køre installationsinstallationen til WebIOPi ved hjælp af;

sudo./setup.sh

Bliv ved med at sige ja, hvis du bliver bedt om at installere afhængigheder under installationsinstallationen. Når du er færdig, skal du genstarte din pi;

sudo genstart

Test installation af WebIOPi:

Inden vi springer ind på skemaer og koder, Når Raspberry Pi er tændt igen, bliver vi nødt til at teste vores WebIOPi-installation for at være sikker på, at alt fungerer fint som ønsket.

Kør kommandoen;

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

Efter at have udstedt kommandoen ovenfor på pi, skal du pege webbrowseren på din computer, der er forbundet med hindbær pi, til http: // raspberrypi. mshome.net:8000 eller http; // thepi'sIP-adresse: 8000. Systemet beder dig om brugernavn og adgangskode.

Brugernavn er webiopi Adgangskode er hindbær

Dette login kan fjernes senere, hvis det ønskes, men selv dit hjemmeautomationssystem fortjener noget ekstra sikkerhedsniveau for at forhindre, at alle med IP-styrende apparater og IOT-enheder i dit hjem.

Efter login skal du kigge dig omkring og derefter klikke på GPIO-headerlinket.

Til denne test forbinder vi en LED til GPIO 17, så fortsæt og indstil GPIO 17 som output.

Når dette er gjort, skal du forbinde ledningen til din hindbær pi som vist i skemaerne nedenfor.

Efter forbindelsen skal du gå tilbage til websiden og klikke på knappen 11 pin for at tænde eller slukke for LED. På denne måde kan vi styre Raspberry Pi GPIO ved hjælp af WebIOPi.

Efter testen, hvis alt fungerede som beskrevet, kan vi gå tilbage til terminalen og stoppe programmet med CTRL + C. Hvis du har noget problem med denne opsætning, så slå mig op via kommentarsektionen.

Mere info om Webiopi kan findes på dens Wiki-side (http://webiopi.trouch.com/INSTALL.html)

Når testen er gennemført, er vi derefter indstillet til at starte hovedprojektet.

Opbygning af webapplikationen til Raspberry Pi Home Automation:

Her redigerer vi standardkonfigurationen af WebIOPi-tjenesten og tilføjer vores egen kode, der skal køres, når den kaldes. Den første ting, vi skal gøre, er at få filezilla eller anden FTP / SCP-kopisoftware installeret på vores pc. Du er enig med mig i, at kodning på pi via terminalen er ret stressende, så filezilla eller anden SCP-software vil komme til nytte på dette tidspunkt. Før vi begynder at skrive HTML, CSS og Java Script koder for denne tingenes internet Home system webprogrammer og flytte dem til Raspberry Pi, lader oprette projektet mappe, hvor alle vores web-filer vil være.

Sørg for, at du er i hjemmebiblioteket ved hjælp af, og opret derefter mappen, gå ind i den oprettede mappe og opret html-mappen i biblioteket:

cd ~ mkdir webapp cd webapp mkdir html

Opret en mappe til scripts, CSS og billeder inde i html-mappen

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

Med vores oprettede filer kan vi flytte til at skrive koder på vores pc og derefter flytte til Pi via filezilla.

JavaScript-koden:

Det første stykke kode, vi skriver, er javascriptet. Det er et simpelt script til at kommunikere med WebIOPi-tjenesten.

Det er vigtigt at bemærke, at til dette projekt vil vores webapp bestå af fire knapper, hvilket betyder, at vi kun planlægger at kontrollere fire GPIO-ben, selvom vi kun styrer to relæer i vores demonstration. Tjek den fulde video i slutningen.

webiopi (). klar (funktion () {webiopi (). setFunction (17, "ud"); webiopi (). setFunction (18, "ud"); webiopi (). setFunction (22, "ud"); webiopi ().setFunction (23, "ud"); var indhold, knap; indhold = $ ("# indhold"); knap = webiopi (). createGPIOButton (17, "Relæ 1"); content.append (knap); knap = webiopi (). createGPIOButton (18, "Relay 2"); content.append (button); button = webiopi (). createGPIOButton (22, "Relay 3"); content.append (button); button = webiopi ().createGPIOButton (23, "Relæ 4"); content.append (knap);});

Koden ovenfor kører, når WebIOPi er klar.

Nedenfor har vi forklaret JavaScript-koden:

webiopi (). ready (funktion (): Dette instruerer bare vores system om at oprette denne funktion og køre den, når webiopi er klar.

webiopi (). setFunction (23, "ud"); Dette hjælper os med at fortælle WebIOPi-tjenesten at indstille GPIO23 som output. Vi har fire knapper her, du kan have mere af det, hvis du implementerer flere knapper.

var indhold, knap; Denne linje fortæller vores system at oprette en variabel med navnet indhold og gøre variablen til en knap.

indhold = $ ("# indhold"); Indholdsvariablen vil stadig blive brugt på tværs af vores html og css. Så når vi henviser til #content, skaber WebIOPi-rammen alt, hvad der er knyttet til det.

knap = webiopi (). createGPIOButton (17, "Relæ 1"); WebIOPi kan oprette forskellige slags knapper. Ovenstående kode hjælper os med at fortælle WebIOPi-tjenesten at oprette en GPIO-knap, der styrer GPIO-stiften i dette tilfælde 17 mærket “Relæ 1”. Det samme gælder for de andre.

content.append (knap); Føj denne kode til en hvilken som helst anden kode for knappen, der oprettes enten i html-filen eller andre steder. Flere knapper kan oprettes og har alle de samme egenskaber som denne knap. Dette er især nyttigt, når du skriver CSS eller Script.

Efter at have oprettet JS-filerne gemmer vi det og kopierer det derefter ved hjælp af filezilla til webapp / html / scripts, hvis du oprettede dine filer på samme måde som jeg gjorde mine.

Når dette er gjort, går vi over til at oprette CSS. Du kan downloade koden helt fra det link, der er givet i afsnittet Kode til sidst.

CSS-koden:

CSS hjælper os med at gøre vores IoT Raspberry Pi-hjemmeautomatiseringswebside smuk.

Jeg ville have websiden til at ligne billedet nedenfor og måtte derfor skrive smarthome.css -stilarket for at opnå det.

Nedenfor har vi forklaret CSS-koden:

CSS-scriptet føles for omfangsrigt til at medtage her, så jeg vælger bare en del af det og bruger dem til sammenbruddet. Du kan downloade den fulde CSS-fil herfra. CSS er let, og du kan forstå det bare ved at gennemgå CSS-koden. Du kan let skitte denne del og bruge vores CSS-kode med det samme.

Den første del af scriptet repræsenterer stilarket til webappens brødtekst og dens vist nedenfor;

krop {baggrundsfarve: #ffffff; baggrundsbillede: url ('/ img / smart.png'); baggrund-gentagelse: ingen gentagelse; baggrund-position: center; baggrundsstørrelse: omslag; skrifttype: fed 18px / 25px Arial, sans-serif; farve: LightGray; }

Jeg vil tro, at koden ovenfor er selvforklarende, vi indstiller baggrundsfarven som #ffffff, der er hvid, så tilføjer vi et baggrundsbillede, der ligger på den mappeplacering (husker vi vores tidligere mappeopsætning?), Vi sikrer, at billedet ikke ' t gentag ved at indstille egenskaben baggrund-gentagelse til ingen gentagelse, og bed derefter CSS om at centrere baggrunden. Vi flytter derefter for at indstille baggrundsstørrelse, skrifttype og farve.

Når kroppen er færdig, skrev vi css for at knapper skulle se smukke ud.

knap {display: blok; position: relativ; margen: 10 pixel; polstring: 0 10px; tekstjustering: center; tekst-dekoration: ingen; bredde: 130px; højde: 40px; skrifttype: fed 18px / 25px Arial, sans-serif; farve: sort; tekst-skygge: 1px 1px 1px rgba (255,255,255,.22); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;

For at holde dette kort blev alle andre ting i koden også gjort for at få det til at se godt ud. Du kan ændre dem, se hvad der sker, jeg tror, det kaldes læring via prøving og fejl, men en god ting ved CSS er ting, der udtrykkes på almindeligt engelsk, hvilket betyder, at de er ret lette at forstå. Den anden del af knapblokken har få ekstra til tekstskygge på knap og knapskygge. Det har også en let overgangseffekt, som hjælper det med at se flot og realistisk ud, når der trykkes på knappen. Disse defineres separat for webkit, firefox, opera osv. Bare for at sikre, at websiden fungerer optimalt på tværs af alle platforme.

Den næste blok med kode er, at WebIOPi-tjenesten fortæller den, at dette er et input til WebIOPi-tjenesten.

i nput {display: block; bredde: 160px; højde: 45px; }

Den sidste ting, vi vil gøre, er at give en slags indikation, når der er trykket på knappen. Så du kan se på skærmen, og farven på knapperne fortæller dig den aktuelle tilstand. For at gøre dette blev nedenstående kodelinje implementeret for hver enkelt knap.

# gpio17.LOW {baggrundsfarve: Grå; farve: sort; } # gpio17.HIGH {baggrundsfarve: Rød; farve: LightGray; }

Linjerne med koder ovenfor ændrer blot farven på knappen baseret på dens aktuelle tilstand. Når knappen er slukket (LAV), bliver baggrundsfarven på knapperne grå for at vise, at den er inaktiv, og når den er tændt (HØJ), bliver baggrundsfarven på knappen RØD.

CSS i posen, lad os gemme som smarthome.css, flyt den derefter via filezilla (eller en hvilken som helst anden SCP-software, du vil bruge) til stilmappen på vores hindbær-pi og fix det sidste stykke, html-koden. Husk at downloade fuld CSS herfra.

HTML-kode:

HTML-koden trækker alt sammen, javascript og stilarket.

Smart Home

Trykknap; modtage bacon

Inden i hovedmærket findes nogle meget vigtige funktioner.

Ovenstående kode gør det muligt at gemme webappen på et mobilt skrivebord ved hjælp af krom eller mobil safari. Dette kan gøres via krommenuen. Dette giver appen en let startfølelse fra det mobile skrivebord eller hjemmet.

Den næste linje med kode nedenfor giver en slags lydhørhed over for webappen. Det gør det muligt at besætte skærmen på enhver enhed, som den blev lanceret på.

Den næste kodelinje erklærer titlen vist på titellinjen på websiden.

Smart Home

De næste fire linier med koder udfører hver især funktionen til at forbinde html-koden til flere ressourcer, den har brug for, for at fungere som ønsket.

Den første linje ovenfor kalder det primære WebIOPi framework JavaScript, som er hårdkodet i serverens rod. Dette skal kaldes hver gang WebIOPi skal bruges.

Den anden linje peger html-siden til vores jQuery-script, den tredje peger den i retning af vores stilark. Endelig hjælper den sidste linje med at oprette et ikon, der skal bruges på det mobile skrivebord, hvis vi beslutter at bruge det som en webapp eller som et favicon til websiden.

Body-sektionen af html-koden indeholder bare break tags for at sikre, at knapperne er justeret korrekt med linjen nedenfor, der fortæller vores html-kode at vise, hvad der er skrevet i JavaScript-filen. Den id =”indhold” bør minde dig om indholdet erklæring for vores knap tidligere under JavaScript-kode.

Du kender øvelsen, html-koden som index.html og flytter til html-mappen på Pi via filezilla. Du kan downloade alle CSS-, JS- og HTML-filerne herfra.

WebIOPi-serverredigeringer til hjemmeautomatisering:

På dette stadium er vi klar til at begynde at oprette vores skemaer og teste vores webapp, men inden da skal vi redigere konfigurationsfilen til webiopi- tjenesten, så det peger på at bruge data fra vores html-mappe i stedet for de konfigurationsfiler, der fulgte med den.

For at redigere konfigurationen skal du køre følgende med rodtilladelse;

sudo nano / etc / webiopi / config

Se efter http-sektionen i konfigurationsfilen, tjek under sektionen, hvor du har noget som # Brug doc-root for at ændre standard HTML- og ressourcefiler placering

Kommenter noget under det ved hjælp af #, så hvis din mappe er opsat som min, skal du pege din doc-root til stien til din projektfil

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

Gem og luk. Du kan også ændre porten fra 8000, hvis du kører en anden server på pi'en ved hjælp af den port. Hvis ikke gemme og afslutte, når vi går videre.

Det er vigtigt at bemærke, at du kan ændre adgangskoden til WebIOPi-tjenesten ved hjælp af kommandoen;

sudo webiopi-passwd

Det vil bede dig om et nyt brugernavn og adgangskode. Dette kan også fjernes helt, men sikkerhed er vigtigt, ikke?

Endelig kør WebIOPi-tjenesten ved at udstede kommandoen nedenfor:

sudo /etc/init.d/webiopi start

Serverstatus kan kontrolleres ved hjælp af;

sudo /etc/init.d/webiopi status

Det kan stoppes fra at køre ved hjælp af;

sudo /etc/init.d/webiopi stop

For at indstille WebIOPi til at køre ved opstart skal du bruge;

sudo update-rc.d standardindstillinger for webiopi

Hvis du vil vende om og forhindre det i at køre ved opstart, skal du bruge;

sudo update-rc.d webiopi fjern

Kredsløbsdiagram og forklaring:

Når vores software er konfigureret, er vi alle klar til at oprette skemaerne til dette webstyrede husholdningsapparatprojekt.

Mens jeg ikke kunne lægge mine hænder på relæmoduler, som jeg føler er lettere at arbejde med for hobbyfolk. Så jeg tegner her skemaerne for almindelige enkeltstående 5v-relæer.

Tilslut dit kredsløb som vist i fritzing-kredsløbet ovenfor. Du skal bemærke, at COM, NO (normalt åben) og NC (normalt tæt) på dit eget relæ kan være placeret på forskellige sider / punkter. Brug en millimeter til at teste den. Lær mere om relæ her.

Når vores komponenter er tilsluttet, skal du starte din server, fra en webside, gå til IP'en på din Raspberry Pi og angive porten som beskrevet tidligere, logge ind med dit brugernavn og din adgangskode, og du skal se en webside, der ligner billedet nedenfor.

Nu kan du nemt styre fire AC-hjemmeapparater trådløst hvor som helst, bare ved at klikke på knapperne. Dette fungerer fra mobiltelefon, tablet osv., Og du kan tilføje flere knapper og relæer for at kontrollere flere enheder. Tjek den fulde video nedenfor.

Det er det fyre, tak for at holde fast i denne. Hvis du har spørgsmål, skal du slippe dem i kommentarfeltet.