Domotică web controlată pe bază de IOT folosind raspberry pi

Bună, băieți, bine ați venit la tutorialul de astăzi, unul dintre lucrurile bune despre Raspberry Pi este abilitatea și ușurința excelentă cu care vă oferă posibilitatea de a conecta dispozitive la internet, în special pentru proiecte legate de automatizarea casei. Astăzi vom explora posibilitatea de a controla aparatele de curent alternativ cu un clic pe butoane pe o pagină web folosind internet. Folosind acest sistem de automatizare a locuinței bazat pe IoT, vă puteți controla aparatele electrocasnice de oriunde din lume. Acest server web poate fi rulat de pe orice dispozitiv care poate rula aplicații HTML, cum ar fi Smart Phone, tabletă, computer etc.

Componente necesare:

Pentru acest proiect, cerințele se vor încadra în două categorii, Hardware și Software:

I. Cerințe hardware:

Raspberry Pi 3 (Orice altă versiune va fi frumoasă)
Card de memorie de 8 sau 16 GB care rulează Raspbian Jessie
Relee 5v
2n222 tranzistori
Diodele
Sârme jumper
Blocuri de conexiune
LED-uri de testat.
Lampă AC pentru testare
Cabluri de panou și jumper
Rezistor de 220 sau 100 ohmi

II. Cerințe software:

În afară de sistemul de operare Raspbian Jessie care rulează pe raspberry pi, vom folosi, de asemenea, cadrul de lucru WebIOPi, notepad ++ care rulează pe computer și filezila pentru a copia fișiere de pe PC pe raspberry pi, în special fișierele aplicației web.

De asemenea, nu trebuie să codificați în Python pentru acest proiect de automatizare la domiciliu, WebIOPi va face toată treaba.

Pregătirea Raspberry Pi:

Este un obicei pentru mine și cred că este unul bun, primul lucru pe care îl fac de fiecare dată când vreau să folosesc Raspberry Pi este să actualizez PI. Pentru acest proiect, această secțiune va cuprinde procedurile de actualizare Pi și instalarea cadrului WebIOPi care ne va ajuta să gestionăm comunicarea de la pagina web la raspberry pi. Probabil ar trebui să afirm că acest lucru se poate face și într-un mod cu siguranță mai ușor folosind cadrul Python Flask, dar unul dintre cele mai interesante lucruri despre bricolaj este atunci când arunci o privire sub capotă și faci treaba dificilă. Acolo vine toată bucuria DIY-ului.

Pentru a actualiza raspberry Pi de mai jos comenzile și apoi reporniți RPi;

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

După ce ați făcut acest lucru, următorul lucru este să instalăm cadrul webIOPi.

Asigurați-vă că vă aflați în directorul principal folosind;

cd ~

Utilizați wget pentru a obține fișierul din pagina lor sourceforge;

wget

Când descărcarea este terminată, extrageți fișierul și mergeți în director;

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

În acest moment, înainte de a rula configurarea, trebuie să instalăm un patch, deoarece această versiune a WebIOPi nu funcționează cu raspberry pi 3 pe care o folosesc și nu am putut găsi o versiune a WebIOPi care să funcționeze în mod expres cu Pi 3.

Comenzile de mai jos sunt folosite pentru a instala patch-ul în timp ce se află încă în directorul WebIOPi, rulați;

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

Apoi putem rula instalarea de configurare pentru WebIOPi folosind;

sudo./setup.sh

Continuați să spuneți da dacă vi se solicită să instalați dependențe în timpul instalării instalării. Când ați terminat, reporniți pi;

sudo reboot

Testați instalarea WebIOPi:

Înainte de a accesa schemele și codurile, Cu Raspberry Pi pornit, va trebui să testăm instalarea WebIOPi pentru a ne asigura că totul funcționează bine după cum doriți.

Rulați comanda;

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

După ce ați lansat comanda de mai sus pe pi, îndreptați browserul web al computerului conectat la raspberry pi către http: // raspberrypi. mshome.net:8000 sau http; // adresa IP a thepi: 8000. Sistemul vă va solicita numele de utilizator și parola.

Numele de utilizator este webiopi Parola este zmeură

Această conectare poate fi eliminată ulterior, dacă se dorește, dar chiar și sistemul dvs. de automatizare a locuinței merită un anumit nivel suplimentar de securitate pentru a preveni doar oricine are aparatele de control IP și dispozitivele IOT de acasă.

După conectare, uitați-vă în jur, apoi faceți clic pe linkul antet GPIO.

Pentru acest test, vom conecta un LED la GPIO 17, deci continuați și setați GPIO 17 ca ieșire.

După ce ați terminat, conectați ledul la zmeura pi așa cum se arată în schemele de mai jos.

După conectare, reveniți la pagina web și faceți clic pe butonul pin 11 pentru a porni sau opri LED-ul. În acest fel putem controla Raspberry Pi GPIO folosind WebIOPi.

După test, dacă totul a funcționat așa cum este descris, atunci putem să ne întoarcem la terminal și să oprim programul cu CTRL + C. Dacă aveți vreo problemă cu această configurare, atunci apăsați-mă prin secțiunea de comentarii.

Mai multe informații despre Webiopi pot fi găsite pe pagina Wiki (http://webiopi.trouch.com/INSTALL.html)

După finalizarea testului, suntem pregătiți să începem proiectul principal.

Construirea aplicației web pentru automatizarea casnică Raspberry Pi:

Aici vom edita configurația implicită a serviciului WebIOPi și vom adăuga propriul nostru cod pentru a fi rulat atunci când sunteți. Primul lucru pe care îl vom face este să instalăm filezilla sau orice alt software de copiere FTP / SCP pe computerul nostru. Vei fi de acord cu mine că codarea pe pi prin terminal este destul de stresantă, așa că filezilla sau orice alt software SCP va fi util în această etapă. Înainte de a începe să scriem codurile de script html, css și java pentru această aplicație Web IoT Home automatizare și să le mutăm în Raspberry Pi, permite crearea folderului de proiect în care vor fi toate fișierele noastre web.

Asigurați-vă că vă aflați în directorul de acasă folosind, apoi creați folderul, accesați folderul creat și creați folderul html în director:

cd ~ mkdir webapp cd webapp mkdir html

Creați un folder pentru scripturi, CSS și imagini în folderul html

mkdir html / css mkdir html / img mkdir html / scripturi

Cu fișierele noastre create, puteți trece la scrierea codurilor pe computerul nostru și, de atunci, treceți la Pi prin filezilla.

Codul JavaScript:

Prima bucată de cod pe care o vom scrie este cea a javascriptului. Este un script simplu pentru a comunica cu serviciul WebIOPi.

Este important de reținut că pentru acest proiect, aplicația noastră web va consta din patru butoane, ceea ce înseamnă că intenționăm să controlăm doar patru pini GPIO, deși vom demonstra doar două relee în demonstrația noastră. Verificați videoclipul complet la final.

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, „Releu 4”); content.append (buton);});

Codul de mai sus rulează când WebIOPi este gata.

Mai jos am explicat codul JavaScript:

webiopi (). ready (function (): Aceasta instruiește doar sistemul nostru să creeze această funcție și să o ruleze când webiopi este gata.

webiopi (). setFunction (23, "out"); Acest lucru ne ajută să spunem serviciului WebIOPi să seteze GPIO23 ca ieșire. Avem patru butoane aici, ați putea avea mai multe dintre acestea dacă implementați mai multe butoane.

conținut var, buton; Această linie spune sistemului nostru să creeze o variabilă numită conținut și să facă din variabilă un buton.

content = $ ("# content"); Variabila de conținut va fi încă utilizată în html și css. Deci, când ne referim la #content, cadrul WebIOPi creează tot ceea ce este asociat cu acesta.

button = webiopi (). createGPIOButton (17, "Releu 1"); WebIOPi poate crea diferite tipuri de butoane. Bucata de cod de mai sus ne ajută să spunem serviciului WebIOPi să creăm un buton GPIO care controlează pinul GPIO în acest caz 17 etichetat „Releu 1”. Același lucru este valabil și pentru celelalte.

content.append (buton); Adăugați acest cod la orice alt cod pentru butonul creat fie în fișierul html, fie în altă parte. Pot fi create mai multe butoane și toate vor avea aceleași proprietăți ale acestui buton. Acest lucru este util mai ales atunci când scrieți CSS sau Script.

După crearea fișierelor JS, îl salvăm și apoi îl copiem folosind filezilla în webapp / html / scripturi dacă ați creat fișierele în același mod în care l-am făcut eu.

Odată realizat acest lucru, trecem la crearea CSS. Puteți descărca integral codul de la linkul dat în secțiunea Cod la final.

Codul CSS:

CSS ne ajută să facem ca pagina noastră web de automatizare pentru casă IoT Raspberry Pi să arate drăguță.

Am vrut ca pagina web să arate ca imaginea de mai jos și, prin urmare, a trebuit să scriu foaia de stil smarthome.css pentru a o realiza.

Mai jos am explicat codul CSS:

Scriptul CSS pare prea voluminos pentru a fi inclus aici, așa că voi alege doar o parte din acesta și le voi folosi pentru detaliere. Puteți descărca întregul fișier CSS de aici. CSS este ușor și îl puteți înțelege doar prin parcurgerea codului CSS. Puteți schita cu ușurință această parte și puteți utiliza codul nostru CSS imediat.

Prima parte a scriptului reprezintă foaia de stil pentru corpul aplicației web și este prezentată mai jos;

corp {fundal-culoare: #ffffff; imagine de fundal: url ('/ img / smart.png'); background-repeat: no-repeat; fundal-poziție: centru; fundal-dimensiune: coperta; font: bold 18px / 25px Arial, sans-serif; culoare: LightGray; }

Vreau să cred că codul de mai sus este auto-explicativ, stabilim culoarea de fundal ca #ffffff care este albă, apoi adăugăm o imagine de fundal situată în locația respectivă a folderului (Vă amintiți configurarea folderului nostru anterior?), Ne asigurăm că imaginea nu t repetați setând proprietatea background-repeat pe no-repeat, apoi instruiți CSS să centralizeze fundalul. Ne mutăm apoi pentru a seta dimensiunea fundalului, fontul și culoarea.

Cu corpul terminat, am scris css pentru ca butoanele să arate frumos.

buton {display: block; poziție: relativă; margine: 10px; umplutură: 0 10px; text-align: centru; decor-text: nici unul; lățime: 130px; înălțime: 40px; font: bold 18px / 25px Arial, sans-serif; culoarea neagra; text-shadow: 1px 1px 1px rgba (255,255,255,, 22); -webkit-border-radius: 30px; -moz-border-radius: 30px; raza chenarului: 30 px;

Pentru a păstra acest scurt, orice alt lucru din cod a fost făcut, de asemenea, pentru a face să arate bine. Le puteți schimba, vedeți ce se întâmplă, cred că se numește învățare prin încercare și eroare, dar un lucru bun despre CSS este că lucrurile sunt exprimate în engleză simplă, ceea ce înseamnă că sunt destul de ușor de înțeles. Cealaltă parte a blocului de butoane are puține elemente suplimentare pentru umbra textului pe buton și umbra butonului. De asemenea, are un ușor efect de tranziție care îl ajută să arate frumos și realist atunci când butonul este apăsat. Acestea sunt definite separat pentru webkit, firefox, opera etc doar pentru a se asigura că pagina web funcționează optim pe toate platformele.

Următorul bloc de cod este ca serviciul WebIOPi să-i spună că aceasta este o intrare în serviciul WebIOPi.

i nput {display: block; lățime: 160px; înălțime: 45px; }

Ultimul lucru pe care vrem să-l facem este să oferim un fel de indicație când butonul a fost apăsat. Așadar, puteți să vă uitați la ecran și culoarea butoanelor să vă anunțe starea curentă. Pentru a face acest lucru, linia de cod de mai jos a fost implementată pentru fiecare buton.

# gpio17.LOW {fundal-culoare: Gri; culoarea neagra; } # gpio17.HIGH {fundal-culoare: Roșu; culoare: LightGray; }

Liniile de coduri de mai sus schimbă pur și simplu culoarea butonului pe baza stării sale curente. Când butonul este oprit (LOW), culoarea de fundal a butoanelor devine gri pentru a-i arăta inactivitatea și când este activată (HIGH), culoarea de fundal a butonului devine ROȘU.

CSS în geantă, permite salvarea ca smarthome.css, apoi mutați-l prin filezilla (sau orice alt software SCP pe care doriți să-l utilizați) în folderul de stiluri de pe raspberry pi și să remediați piesa finală, codul html. Nu uitați să descărcați CSS complet de aici.

Cod HTML:

Codul html reunește totul, javascript și foaia de stil.

Smart Home

Apasa butonul; primi slănină

În cadrul etichetei de cap există câteva caracteristici foarte importante.

Linia de cod de mai sus permite ca aplicația web să fie salvată pe un desktop mobil utilizând Safari Chrome sau mobil. Acest lucru se poate face prin meniul crom. Acest lucru oferă aplicației o senzație de lansare ușoară de pe desktopul mobil sau de acasă.

Următoarea linie de cod de mai jos oferă un fel de reacție aplicației web. Îi permite să ocupe ecranul oricărui dispozitiv pe care a fost lansat.

Următoarea linie de cod declară titlul afișat pe bara de titlu a paginii web.

Smart Home

Următoarele patru linii de coduri îndeplinesc fiecare funcția de a lega codul html la mai multe resurse de care are nevoie pentru a funcționa după cum doriți.

Prima linie de mai sus solicită cadrul principal WebIOPi JavaScript, care este codificată în rădăcina serverului. Acest lucru trebuie apelat de fiecare dată când este utilizat WebIOPi.

Al doilea rând indică pagina html către scriptul nostru jQuery, al treilea îl îndreaptă în direcția foii noastre de stil. În cele din urmă, ultima linie ajută la configurarea unei pictograme care să fie utilizată pe desktopul mobil în cazul în care decidem să o folosim ca aplicație web sau ca un favicon pentru pagina web.

Secțiunea de corp a codului html conține doar etichete de pauză pentru a asigura butoanele aliniate corect cu linia de mai jos care indică codului nostru html să afișeze ceea ce este scris în fișierul JavaScript. Id =“conținut“ ar trebui să amintesc de declarația de conținut pentru butonul nostru anterior sub codul JavaScript.

Cunoașteți drill-ul, codul html ca index.html și vă mutați în folderul html de pe Pi prin filezilla. Puteți descărca toate fișierele CSS, JS și HTML de aici.

Modificări ale serverului WebIOPi pentru automatizare la domiciliu:

În această etapă, suntem gata să începem să ne creăm schemele și să testăm aplicația noastră web, dar înainte de aceasta trebuie să edităm fișierul de configurare al serviciului webiopi, astfel încât să fie indicat să folosească datele din folderul nostru html în locul fișierelor de configurare care au venit cu acesta.

Pentru a edita configurația rulați următoarele cu permisiunea root;

sudo nano / etc / webiopi / config

Căutați secțiunea http a fișierului de configurare, verificați sub secțiunea unde aveți ceva de genul, #Use doc-root pentru a schimba locația implicită a fișierelor HTML și a resurselor

Comentează orice sub el folosind # atunci dacă folderul tău este configurat ca al meu, îndreaptă doc-root către calea fișierului proiectului tău

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

Salvează și ieși. De asemenea, puteți schimba portul de la 8000, în cazul în care aveți un alt server care rulează pe pi folosind acel port. Dacă nu, salvați și renunțați, pe măsură ce mergem mai departe.

Este important să rețineți că puteți schimba parola serviciului WebIOPi utilizând comanda;

sudo webiopi-passwd

Vă va solicita un nou nume de utilizator și o parolă. Acest lucru poate fi, de asemenea, eliminat în totalitate, dar securitatea este importantă, nu?

În cele din urmă, executați serviciul WebIOPi prin emiterea comenzii de mai jos:

sudo /etc/init.d/webiopi start

Starea serverului poate fi verificată folosind;

sudo /etc/init.d/webiopi status

Poate fi oprit să ruleze folosind;

sudo /etc/init.d/webiopi stop

Pentru a configura WebIOPi să ruleze la pornire, utilizați;

sudo update-rc.d implicit webiopi

Dacă doriți să inversați și să opriți rularea la boot, utilizați;

sudo update-rc.d webiopi elimina

Schema și explicația circuitului:

Odată ce software-ul nostru este configurat, suntem pregătiți să începem să creăm schemele pentru acest proiect controlat de web de electrocasnice.

Deși nu am putut pune mâna pe modulele de releu, pe care le simt mai ușor de lucrat pentru pasionați. Așa că desenez aici schemele pentru relee obișnuite unice de 5v.

Conectați-vă circuitul așa cum se arată în circuitul fritzing de mai sus. Trebuie să rețineți că COM, NO (normal deschis) și NC (normal închis) ale propriului releu pot fi amplasate în diferite părți / puncte. Folosiți un milimetru pentru a-l testa. Aflați mai multe despre ștafetă aici.

Cu componentele noastre conectate, deschideți serverul dvs. de pe o pagină web, accesați adresa IP a Raspberry Pi și indicați portul așa cum este descris anterior, conectați-vă cu numele de utilizator și parola și ar trebui să vedeți o pagină web care arată exact ca imaginea de mai jos.

Acum puteți controla cu ușurință patru aparate AC Home de oriunde fără fir, doar făcând clic pe butoane. Acest lucru va funcționa de pe telefonul mobil, tabletă etc. și puteți adăuga mai multe butoane și relee pentru a controla mai multe dispozitive. Verificați videoclipul complet de mai jos.

Asta e, băieți, vă mulțumim că ați păstrat asta. Dacă aveți întrebări, puneți-le în caseta de comentarii.