Iot-basert nettstyrt hjemmeautomatisering ved hjelp av bringebær-pi

Hei gutter, velkommen til dagens opplæring, en av de gode tingene med Raspberry Pi er den store evnen og lettheten som det gir deg muligheten til å koble enheter til internett, spesielt for hjemmeautomatiseringsrelaterte prosjekter. I dag skal vi utforske muligheten for å kontrollere vekselstrømsapparater ved å klikke på knappene på en webside ved hjelp av internett. Ved å bruke dette IoT-baserte hjemmeautomatiseringssystemet kan du kontrollere hjemmeapparater fra hvor som helst i verden. Denne webserveren kan kjøres fra hvilken som helst enhet som kan kjøre HTML-applikasjoner, som smarttelefon, nettbrett, datamaskin etc.

Nødvendige komponenter:

For dette prosjektet vil kravene falle inn under to kategorier, maskinvare og programvare:

I. Maskinvarekrav:

1. Raspberry Pi 3 (En annen versjon vil være fin)
2. Minnekort 8 eller 16 GB som kjører Raspbian Jessie
3. 5v-reléer
4. 2n222 transistorer
5. Dioder
6. Jumper Wires
7. Tilkoblingsblokker
8. Lysdioder for å teste.
9. AC-lampe for å teste
10. Brettbrett og jumperkabler
11. Motstand 220 eller 100 ohm

II. Programvarekrav:

I tillegg til operativsystemet Raspbian Jessie som kjører på bringebær-pi, vil vi også bruke WebIOPi- rammearbeidet, notisblokk ++ som kjører på PC-en din og filezila for å kopiere filer fra PC-en til bringebær-pi, spesielt webappfilene.

Du trenger ikke kode i Python for dette hjemmeautomatiseringsprosjektet, WebIOPi vil gjøre alt arbeidet.

Klargjøre Raspberry Pi:

Det er en vane for meg, og jeg synes det er bra, det første jeg gjør hver gang jeg vil bruke Raspberry Pi er å oppdatere PI. For dette prosjektet vil denne delen omfatte Pi-oppdateringsprosedyrene og installere WebIOPi-rammeverket som vil hjelpe oss med å håndtere kommunikasjon fra nettsiden til bringebær-pi. Jeg burde sannsynligvis si at dette også kan gjøres på en uten tvil enklere måte ved hjelp av python Flask-rammearbeidet, men noe av det interessante med DIY er når du tar en titt under panseret og gjør det vanskelige arbeidet. Det er der all gleden ved DIY gjør det.

For å oppdatere bringebær Pi nedenfor kommandoer og deretter starte RPi på nytt;

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

Når dette er gjort, er det neste for oss å installere webIOPi-rammeverket.

Forsikre deg om at du bruker hjemmekatalogen;

cd ~

Bruk wget for å hente filen fra sourceforge-siden;

wget

Når nedlastingen er ferdig, trekker du ut filen og går inn i katalogen;

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

På dette punktet før vi kjører installasjonen, må vi installere en oppdatering, siden denne versjonen av WebIOPi ikke fungerer med bringebær pi 3 som jeg bruker, og jeg ikke kunne finne en versjon av WebIOPi som fungerer uttrykkelig med Pi 3.

Kommandoer nedenfor brukes til å installere oppdatering mens du fortsatt er i WebIOPi-katalogen, kjør;

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

Deretter kan vi kjøre installasjonsinstallasjonen for WebIOPi ved hjelp av;

sudo./setup.sh

Fortsett å si ja hvis du blir bedt om å installere noen avhengigheter under installasjonsinstallasjonen. Når du er ferdig, start pi på nytt;

sudo omstart

Test WebIOPi-installasjon:

Før du hopper inn i skjemaer og koder, Når Raspberry Pi er på igjen, må vi teste vår WebIOPi-installasjon for å være sikker på at alt fungerer bra som ønsket.

Kjør kommandoen;

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

Etter å ha gitt kommandoen ovenfor på pi, peker du nettleseren på datamaskinen din som er koblet til bringebær pi til http: // raspberrypi. mshome.net:8000 eller http; // thepi'sIP-adresse: 8000. Systemet vil be deg om brukernavn og passord.

Brukernavn er webiopi Passord er bringebær

Denne påloggingen kan fjernes senere hvis ønskelig, men til og med hjemmeautomatiseringssystemet ditt fortjener noe ekstra sikkerhetsnivå for å forhindre hvem som helst med IP-kontrollerende apparater og IOT-enheter i hjemmet ditt.

Etter å ha logget på, se deg rundt, og klikk deretter på GPIO-topptektekoblingen.

For denne testen vil vi koble en LED til GPIO 17, så fortsett og sett GPIO 17 som utgang.

Når dette er gjort, kobler du ledningen til bringebær-pien din, som vist i skjemaene nedenfor.

Etter tilkoblingen, gå tilbake til nettsiden og klikk på knappen 11 for å slå LED-lampen på eller av. På denne måten kan vi kontrollere Raspberry Pi GPIO ved hjelp av WebIOPi.

Etter at alt fungerte som beskrevet etter testen, kan vi gå tilbake til terminalen og stoppe programmet med CTRL + C. Hvis du har noen problemer med dette oppsettet, så slå meg opp via kommentarseksjonen.

Mer informasjon om Webiopi finner du på Wiki-siden (http://webiopi.trouch.com/INSTALL.html)

Når testen er fullført, er vi deretter satt til å starte hovedprosjektet.

Bygg nettapplikasjonen for Raspberry Pi Home Automation:

Her vil vi redigere standardkonfigurasjonen av WebIOPi-tjenesten og legge til vår egen kode som skal kjøres når den blir ringt. Det første vi skal gjøre er å få filezilla eller annen FTP / SCP-kopiprogramvare installert på PC-en. Du er enig med meg i at koding på pi via terminalen er ganske belastende, så filezilla eller annen SCP-programvare vil være nyttig på dette stadiet. Før vi begynner å skrive html-, css- og java-skriptkodene for denne IoT-hjemmeautomatiserings -webapplikasjonen og flytte dem til Raspberry Pi, kan du opprette prosjektmappen der alle våre webfiler vil være.

Forsikre deg om at du bruker hjemmekatalogen, og opprett deretter mappen, gå inn i den opprettede mappen og opprett html-mappen i katalogen:

cd ~ mkdir webapp cd webapp mkdir html

Lag en mappe for skript, CSS og bilder i html-mappen

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

Med våre filer opprettet kan vi gå til å skrive kodene på PC-en vår og deretter flytte til Pi via filezilla.

JavaScript-koden:

Den første koden vi skriver, er javascriptet. Det er et enkelt skript for å kommunisere med WebIOPi-tjenesten.

Det er viktig å merke seg at for dette prosjektet vil webappen vår bestå av fire knapper, noe som betyr at vi planlegger å kontrollere bare fire GPIO-pinner, selv om vi bare skal kontrollere to reléer i demonstrasjonen. Sjekk hele videoen på slutten.

webiopi (). klar (funksjon () {webiopi (). setFunction (17, "ut"); webiopi (). setFunction (18, "ut"); webiopi (). setFunction (22, "ut"); webiopi ().setFunction (23, "ut"); var innhold, knapp; innhold = $ ("# innhold"); knapp = webiopi (). createGPIOButton (17, "Relé 1"); content.append (knapp); button = 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 (knapp);});

Koden ovenfor kjører når WebIOPi er klar.

Nedenfor har vi forklart JavaScript-koden:

webiopi (). ready (function (): Dette instruerer bare systemet vårt om å opprette denne funksjonen og kjøre den når webiopi er klar.

webiopi (). setFunction (23, "ut"); Dette hjelper oss med å fortelle WebIOPi-tjenesten å sette GPIO23 som utdata. Vi har fire knapper her, du kan ha mer av det hvis du implementerer flere knapper.

var innhold, knapp; Denne linjen forteller systemet vårt å lage en variabel som heter innhold og gjøre variabelen til en knapp.

innhold = $ ("# innhold"); Innholdsvariabelen kommer fortsatt til å bli brukt på tvers av html og css. Så når vi refererer til #content, skaper WebIOPi-rammeverket alt som er knyttet til det.

button = webiopi (). createGPIOButton (17, "Relay 1"); WebIOPi kan opprette forskjellige typer knapper. Kodestykket ovenfor hjelper oss med å fortelle WebIOPi-tjenesten å lage en GPIO-knapp som styrer GPIO-pinnen i dette tilfellet 17 merket “Relé 1”. Det samme gjelder de andre.

content.append (knapp); Legg denne koden til en hvilken som helst annen kode for knappen som er opprettet i html-filen eller andre steder. Flere knapper kan opprettes og har alle de samme egenskapene til denne knappen. Dette er spesielt nyttig når du skriver CSS eller Script.

Etter å ha opprettet JS-filene, lagrer vi den og kopierer den ved hjelp av filezilla til webapp / html / scripts hvis du opprettet filene dine på samme måte som jeg gjorde.

Når dette er gjort, går vi over til å lage CSS. Du kan til slutt laste ned koden fra lenken som er oppgitt i delen Kode.

CSS-koden:

CSS hjelper oss med å gjøre hjemmesiden til IoT Raspberry Pi hjemmeautomatisering pen.

Jeg ønsket at nettsiden skulle se ut som bildet nedenfor, og måtte derfor skrive smarthome.css stilark for å oppnå det.

Nedenfor har vi forklart CSS-koden:

CSS-skriptet føles for klumpete til å inkluderes her, så jeg vil bare velge en del av det og bruke dem til sammenbrudd. Du kan laste ned hele CSS-filen herfra. CSS er enkelt, og du kan forstå det bare ved å gå gjennom CSS-koden. Du kan enkelt skitte denne delen og bruke CSS-koden vår med en gang.

Den første delen av skriptet representerer stilarket for webappens kropp og dens vist nedenfor;

kropp {bakgrunnsfarge: #ffffff; bakgrunnsbilde: url ('/ img / smart.png'); bakgrunn-gjenta: nei-gjenta; bakgrunn-posisjon: sentrum; bakgrunnsstørrelse: omslag; font: fet 18px / 25px Arial, sans-serif; farge: LightGray; }

Jeg vil tro at koden ovenfor er selvforklarende, vi setter bakgrunnsfargen som #ffffff som er hvit, så legger vi til et bakgrunnsbilde som ligger på den mappeplasseringen (husker vi vårt tidligere mappeoppsett?), Vi sørger for at bildet ikke ' t gjenta ved å sette bakgrunns-gjenta egenskapen til ikke-gjenta, og be deretter CSS om å sentralisere bakgrunnen. Vi beveger oss deretter for å stille inn bakgrunnsstørrelse, skrift og farge.

Med kroppen ferdig, skrev vi css for at knappene skulle se pene ut.

knapp {display: blokk; posisjon: relativ; margin: 10px; polstring: 0 10px; tekstjustering: sentrum; tekstdekorasjon: ingen; bredde: 130px; høyde: 40px; font: fet 18px / 25px Arial, sans-serif; farge svart; tekst-skygge: 1px 1px 1px rgba (255,255,255,.22); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;

For å holde dette kort, ble alle andre ting i koden også gjort for å få det til å se bra ut. Du kan endre dem og se hva som skjer. Jeg tror det kalles læring via prøving og feiling, men en god ting med CSS er at ting blir uttrykt på vanlig engelsk, noe som betyr at de er ganske enkle å forstå. Den andre delen av knappeblokken har få tillegg for tekstskygge på knapp og knappeskygge. Den har også en liten overgangseffekt som hjelper den til å se fin og realistisk ut når du trykker på knappen. Disse er definert separat for webkit, Firefox, opera osv. Bare for å sikre at websiden fungerer optimalt på alle plattformer.

Den neste koden er for WebIOPi-tjenesten å fortelle den at dette er en inngang til WebIOPi-tjenesten.

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

Det siste vi ønsker å gjøre er å gi en slags indikasjon når du har trykket på knappen. Så du kan se på skjermen og fargen på knappene fortelle deg den nåværende tilstanden. For å gjøre dette ble kodelinjen nedenfor implementert for hver enkelt knapp.

# gpio17.LOW {bakgrunnsfarge: Grå; farge svart; } # gpio17.HIGH {bakgrunnsfarge: Rød; farge: LightGray; }

Linjene med koder over endrer ganske enkelt fargen på knappen basert på den nåværende tilstanden. Når knappen er av (LAV) blir bakgrunnsfargen på knappene grå for å vise at den er inaktiv, og når den er på (HØY), blir bakgrunnsfargen på knappen RØD.

CSS i vesken, kan lagre som smarthome.css, og deretter flytte den via filezilla (eller hvilken som helst annen SCP-programvare du vil bruke) til stilmappen på bringebær-pi og fikse den endelige delen, html-koden. Husk å laste ned full CSS herfra.

HTML-kode:

HTML-koden trekker alt sammen, javascript og stilarket.

Trykknapp; motta bacon

Innenfor hodetiketten finnes det noen veldig viktige funksjoner.

Kodelinjen ovenfor gjør at webappen kan lagres på et mobilt skrivebord ved hjelp av krom eller mobilsafari. Dette kan gjøres via krommenyen. Dette gir appen en enkel lanseringsfølelse fra det mobile skrivebordet eller hjemmet.

Den neste linjen med kode nedenfor gir en slags respons på webappen. Det gjør det mulig å okkupere skjermen på en hvilken som helst enhet som den ble lansert på.

Neste kodelinje erklærer tittelen som vises på tittellinjen på websiden.

De neste fire kodelinjene utfører hver sin funksjon for å koble html-koden til flere ressurser den trenger for å fungere som ønsket.

Den første linjen ovenfor kaller det viktigste WebIOPi-rammeverket JavaScript som er hardkodet i serverroten. Dette må kalles hver gang WebIOPi skal brukes.

Den andre linjen peker html-siden til jQuery-skriptet vårt, den tredje peker den i retning av stilarket vårt. Til slutt hjelper den siste linjen med å sette opp et ikon som skal brukes på det mobile skrivebordet i tilfelle vi bestemmer oss for å bruke det som en webapp eller som et favorittikon for websiden.

Kroppsdelen av html-koden inneholder bare pausekoder for å sikre at knappene er riktig justert med linjen nedenfor og forteller html-koden vår å vise hva som er skrevet i JavaScript-filen. Den id =”innhold” skal minne deg om innholdet erklæring for vår knappen tidligere i henhold til Javascript-kode.

Du kjenner øvelsen, html-koden som index.html og flytter til html-mappen på Pi via filezilla. Du kan laste ned alle CSS-, JS- og HTML-filene herfra.

WebIOPi Server Edits for Home Automation:

På dette stadiet er vi klare til å begynne å lage skjemaene våre og teste webappen vår, men før da må vi redigere konfigurasjonsfilen til webiopi- tjenesten, så den peker på å bruke data fra html-mappen vår i stedet for konfigurasjonsfilene som fulgte med den..

For å redigere konfigurasjonen, kjør følgende med rottillatelse;

sudo nano / etc / webiopi / config

Se etter http-delen av konfigurasjonsfilen, sjekk under delen der du har noe sånt, #Bruk doc-root for å endre standard HTML- og ressursfiler plassering

Kommenter noe under det ved hjelp av #, og hvis mappen din er konfigurert som min, peker du doc-root mot banen til prosjektfilen din

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

Lagre og lukk. Du kan også endre porten fra 8000, i tilfelle du har en annen server som kjører på pi ved hjelp av den porten. Hvis ikke lagre og slutte, når vi går videre.

Det er viktig å merke seg at du kan endre passordet til WebIOPi-tjenesten ved hjelp av kommandoen;

sudo webiopi-passwd

Det vil be deg om et nytt brukernavn og passord. Dette kan også fjernes helt, men sikkerhet er viktig, ikke sant?

Til slutt kjører du WebIOPi-tjenesten ved å utstede kommandoen nedenfor:

sudo /etc/init.d/webiopi start

Serverstatus kan kontrolleres ved hjelp av;

sudo /etc/init.d/webiopi-status

Det kan stoppes fra å løpe ved hjelp av;

sudo /etc/init.d/webiopi stopp

For å konfigurere WebIOPi til å kjøre ved oppstart, bruk;

sudo update-rc.d webiopi er standardinnstillinger

Hvis du vil reversere og forhindre at den kjører ved oppstart, bruk;

sudo update-rc.d webiopi fjern

Kretsdiagram og forklaring:

Når programvaren vår er ferdig, er vi klar til å begynne å lage skjemaene for dette nettstyrte husholdningsapparatet.

Mens jeg ikke kunne legge hendene mine på stafettmoduler, som jeg føler er lettere å jobbe med for hobbyfolk. Så jeg tegner her skjemaene for vanlige frittstående enkelt 5v-reléer.

Koble kretsen din som vist i kretsløpet ovenfor. Vær oppmerksom på at COM, NO (normalt åpen) og NC (normalt Lukk) på ditt eget relé kan være plassert på forskjellige sider / punkter. Bruk en millimeter for å teste den. Lær mer om stafett her.

Når komponentene våre er tilkoblet, kan du starte serveren din, fra en webside, gå til IP-en til Raspberry Pi og indikere porten som beskrevet tidligere, logge inn med brukernavnet og passordet ditt, og du bør se en webside som ser ut som bildet nedenfor.

Nå kan du enkelt kontrollere fire AC-hjemmeapparater trådløst hvor som helst, bare ved å klikke på knappene. Dette fungerer fra mobiltelefon, nettbrett etc., og du kan legge til flere knapper og reléer for å kontrollere flere enheter. Sjekk hele videoen nedenfor.

Det er det gutta, takk for å holde fast i denne. Hvis du har spørsmål, kan du slippe dem i kommentarfeltet.