- Nepieciešamās sastāvdaļas:
- Aveņu Pi sagatavošana:
- Pārbaudiet WebIOPi instalēšanu:
- Tīmekļa lietojumprogrammas izveide Raspberry Pi mājas automatizācijai:
- WebIOPi servera rediģēšana mājas automatizācijai:
- Shēmas shēma un skaidrojums:
Sveiki puiši, laipni lūdzam šodienas apmācībā! Viena no labajām lietām par Raspberry Pi ir lieliskā spēja un vieglums, ar kādu tā dod jums iespēju savienot ierīces ar internetu, īpaši ar mājas automatizāciju saistītiem projektiem. Šodien mēs izpētīsim iespēju kontrolēt maiņstrāvas ierīces, noklikšķinot uz tīmekļa lapas pogām, izmantojot internetu. Izmantojot šo IoT balstīto mājas automatizācijas sistēmu, varat kontrolēt sadzīves tehniku no jebkuras vietas pasaulē. Šo tīmekļa serveri var palaist no jebkuras ierīces, kas var palaist HTML lietojumprogrammas, piemēram, viedtālrunis, planšetdators, dators utt.
Nepieciešamās sastāvdaļas:
Šim projektam prasības būs divās kategorijās: aparatūra un programmatūra:
I. Aparatūras prasības:
- Raspberry Pi 3 (jebkura cita versija būs jauka)
- Atmiņas karte 8 vai 16 GB, kurā darbojas Raspbian Jessie
- 5v releji
- 2n222 tranzistori
- Diodes
- Džemperu vadi
- Savienojuma bloki
- Gaismas diodes, lai pārbaudītu.
- Maiņstrāvas spuldze pārbaudei
- Maizes dēļu un džemperu kabeļi
- 220 vai 100 omu rezistors
II. Prasības programmatūrai:
Papildus Raspbian Jessie operētājsistēmai, kas darbojas uz aveņu pi, mēs izmantosim arī WebIOPi rāmja darbu, datorā palaisto notepad ++ un filezila, lai kopētu failus no datora uz aveņu pi, it īpaši tīmekļa lietotņu failus.
Arī šim mājas automatizācijas projektam jums nav jākodē Python, WebIOPi veiks visu darbu.
Aveņu Pi sagatavošana:
Man tas ir sava veida ieradums, un es domāju, ka tas ir labs, pirmā lieta, ko daru katru reizi, kad vēlos izmantot Raspberry Pi, ir PI atjaunināšana. Šim projektam šī sadaļa ietvers Pi atjaunināšanas procedūras un WebIOPi ietvara instalēšanu, kas palīdzēs mums rīkoties saziņā no tīmekļa lapas līdz aveņu pi. Man droši vien būtu jāpasaka, ka to var izdarīt arī neapšaubāmi vieglāk, izmantojot python Flask rāmja darbu, bet viena no interesantākajām lietām par DIY ir tad, kad jūs apskatāt zem pārsega un veicat sarežģīto darbu. Tieši tur rodas viss prieks par DIY.
Lai atjauninātu aveņu Pi zemāk esošās komandas un pēc tam restartējiet RPi;
sudo apt-get update sudo apt-get upgrade sudo atsāknēšana
Kad tas ir izdarīts, nākamā lieta ir mums instalēt webIOPi sistēmu.
Pārliecinieties, ka atrodaties mājas direktorijā, izmantojot;
CD ~
Izmantojiet wget, lai iegūtu failu no viņu sourceforge lapas;
wget
Kad lejupielāde ir pabeigta, izvelciet failu un dodieties uz direktoriju;
tar xvzf WebIOPi-0.7.1.tar.gz cd WebIOPi-0.7.1 /
Šajā brīdī pirms iestatīšanas palaišanas mums jāinstalē plāksteris, jo šī WebIOPi versija nedarbojas ar aveņu pi 3, kuru es izmantoju, un es nevarēju atrast WebIOPi versiju, kas skaidri darbotos ar Pi 3.
Zemāk esošās komandas tiek izmantotas, lai instalētu ielāpu, vēl atrodoties WebIOPi direktorijā, palaidiet;
wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch patch -p1 -i webiopi-pi2bplus.patch
Tad mēs varam palaist WebIOPi iestatīšanas instalēšanu, izmantojot;
sudo./setup.sh
Turpiniet teikt jā, ja uzstādīšanas instalēšanas laikā tiek lūgts instalēt kādas atkarības. Kad tas ir izdarīts, restartējiet pi;
sudo atsāknēšana
Pārbaudiet WebIOPi instalēšanu:
Pirms pāriet uz shēmām un kodiem, kad Raspberry Pi atkal ir ieslēgts, mums būs jāpārbauda mūsu WebIOPi instalācija, lai pārliecinātos, ka viss darbojas labi, kā vēlaties.
Palaidiet komandu;
sudo webiopi -d -c / etc / webiopi / config
Pēc pi komandā iepriekš norādītās komandas izsniegšanas novirziet sava datora tīmekļa pārlūkprogrammu, kas savienota ar aveņu pi, uz http: // raspberrypi. mshome.net:8000 vai http; // thepi's IP adrese: 8000. Sistēma pieprasīs ievadīt lietotājvārdu un paroli.
Lietotājvārds ir webiopi Parole ir aveņu
Šo pieteikumvārdu var noņemt vēlāk, ja vēlaties, taču pat jūsu mājas automatizācijas sistēmai ir jāpiešķir papildu drošības līmenis, lai novērstu ikvienu, kam ir jūsu mājās esošās IP kontrolējošās ierīces un IOT ierīces.
Pēc pieteikšanās skatieties apkārt un pēc tam noklikšķiniet uz saites GPIO galvenes.
Šajā testā mēs savienosim LED ar GPIO 17, tāpēc turpiniet un iestatiet GPIO 17 kā izeju.
Kad tas izdarīts, pievienojiet vadu savam aveņu pī, kā parādīts zemāk esošajās shēmās.
Pēc savienojuma izveidošanas atgriezieties tīmekļa lapā un noklikšķiniet uz pogas 11, lai ieslēgtu vai izslēgtu LED. Tādā veidā mēs varam kontrolēt Raspberry Pi GPIO, izmantojot WebIOPi.
Pēc testa, ja viss strādāja, kā aprakstīts, tad mēs varam atgriezties pie termināļa un apturēt programmu ar CTRL + C. Ja jums ir kādas problēmas ar šo iestatījumu, tad nospiediet mani, izmantojot komentāru sadaļu.
Plašāka informācija par Webiopi ir atrodama tās Wiki lapā (http://webiopi.trouch.com/INSTALL.html)
Pēc testa pabeigšanas mēs esam gatavi sākt galveno projektu.
Tīmekļa lietojumprogrammas izveide Raspberry Pi mājas automatizācijai:
Šeit mēs rediģēsim noklusējuma WebIOPi pakalpojuma konfigurāciju un pievienosim savu kodu, kas tiks palaists, kad to izsauks. Pirmā lieta, ko mēs darīsim, ir iegūt datorā instalētu filezilla vai jebkuru citu FTP / SCP kopēšanas programmatūru. Jūs piekritīsit man, ka pi kodēšana, izmantojot termināli, ir diezgan saspringta, tāpēc filezilla vai jebkura cita SCP programmatūra šajā posmā noderēs. Pirms sākam rakstīt šīs IoT Home automatizācijas tīmekļa lietojumprogrammas html, css un java skriptu kodus un pārvietot tos uz Raspberry Pi, ļauj izveidot projekta mapi, kur būs visi mūsu tīmekļa faili.
Pārliecinieties, ka esat mājas direktorijā, izmantojot, pēc tam izveidojiet mapi, dodieties uz izveidoto mapi un direktorijā izveidojiet html mapi:
cd ~ mkdir webapp cd webapp mkdir html
Izveidojiet mapi skriptiem, CSS un attēliem HTML mapē
mkdir html / css mkdir html / img mkdir html / skripti
Ar mūsu izveidotajiem failiem ļauj pāriet uz kodu ierakstīšanu mūsu datorā un pēc tam pāriet uz Pi, izmantojot filezilla.
JavaScript kods:
Pirmais koda fragments, kuru mēs uzrakstīsim, ir javascript. Tas ir vienkāršs skripts saziņai ar WebIOPi pakalpojumu.
Ir svarīgi atzīmēt, ka šim projektam mūsu tīmekļa lietotne sastāvēs no četrām pogām, kas nozīmē, ka mēs plānojam kontrolēt tikai četras GPIO tapas, lai gan mēs demonstrācijā kontrolēsim tikai divus relejus. Pārbaudiet visu videoklipu beigās.
webiopi (). gatavs (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); poga = webiopi (). createGPIOButton (18, "2. relejs"); content.append (poga); poga = webiopi (). createGPIOButton (22, "3. relejs"); content.append (poga); poga = webiopi ().createGPIOButton (23, "4. relejs"); content.append (poga);});
Iepriekš redzamais kods darbojas, kad WebIOPi ir gatavs.
Zemāk mēs esam izskaidrojuši JavaScript kodu:
gatavs (function (): Tas vienkārši liek mūsu sistēmai izveidot šo funkciju un palaist to, kad webiopi ir gatavs.
webiopi (). setFunction (23, "out"); Tas mums palīdz WebIOPi pakalpojumam iestatīt GPIO23 kā izvadi. Mums šeit ir četras pogas, ja to ieviešat vairāk, jums to varētu būt vairāk.
var saturs, poga; Šī rinda liek mūsu sistēmai izveidot mainīgo ar nosaukumu saturs un padarīt mainīgo par pogu.
saturs = $ ("# saturs"); Satura mainīgais joprojām tiks izmantots mūsu html un css. Tātad, kad mēs atsaucamies uz #content, WebIOPi sistēma izveido visu, kas ar to saistīts.
poga = webiopi (). createGPIOButton (17, "1. relejs"); WebIOPi var izveidot dažāda veida pogas. Iepriekš minētais koda fragments palīdz mums WebIOPi dienestam izveidot GPIO pogu, kas kontrolē GPIO tapu šajā gadījumā 17 ar nosaukumu “1. relejs”. Tas pats attiecas uz pārējiem.
content.append (poga); Pievienojiet šo kodu jebkuram citam pogas kodam, kas izveidots vai nu HTML failā, vai citur. Var izveidot vairāk pogu, un visām tām būs vienādas šīs pogas īpašības. Tas ir īpaši noderīgi, rakstot CSS vai skriptu.
Pēc JS failu izveidošanas mēs tos saglabājam un pēc tam kopējam, izmantojot filezilla, uz webapp / html / skriptiem, ja failus izveidojāt tāpat kā es.
Kad tas ir izdarīts, mēs pārietam uz CSS izveidi. Jūs varat pilnībā lejupielādēt kodu no saites, kas sniegta sadaļā Kods beigās.
CSS kods:
CSS palīdz mums padarīt mūsu IoT Raspberry Pi mājas automatizācijas vietni izskatīgu.
Es gribēju, lai vietne izskatās kā attēlā zemāk, un tāpēc man bija jāuzraksta smarthome.css stila lapa, lai to sasniegtu.
Zemāk mēs esam izskaidrojuši CSS kodu:
CSS skripts šķiet pārāk apjomīgs, lai to šeit iekļautu, tāpēc es tikai izvēlēšos daļu no tā un izmantošu tos sadalījumam. Pilnu CSS failu varat lejupielādēt šeit. CSS ir viegli, un jūs to varat saprast, vienkārši izejot caur CSS kodu. Jūs varat viegli izlaist šo daļu un uzreiz izmantot mūsu CSS kodu.
Skripta pirmā daļa attēlo tīmekļa lietotnes pamatteksta un tā parādītās stila lapu;
ķermeņa {fona krāsa: #ffffff; fona attēls: url ('/ img / smart.png'); fona atkārtojums: neatkārtot; background-position: centrs; fona lielums: vāks; fonts: treknrakstā 18px / 25px Arial, sans-serif; krāsa: LightGray; }
Es gribu ticēt, ka iepriekš minētais kods ir pats par sevi saprotams, mēs iestatījām fona krāsu kā #ffffff, kas ir balta, pēc tam pievienojam fona attēlu, kas atrodas šajā mapes atrašanās vietā (atceraties mūsu iepriekšējo mapes iestatījumu?), Mēs nodrošinām, ka attēls nav ' t atkārtojiet, iestatot rekvizītu background-repeat uz neatkārtot, pēc tam uzdodiet CSS centralizēt fonu. Pēc tam mēs pārvietojamies, lai iestatītu fona lielumu, fontu un krāsu.
Kad ķermenis ir izdarīts, mēs rakstījām pogas css, lai tās izskatītos glīti.
poga {display: block; amats: radinieks; piemale: 10px; polsterējums: 0 10 pikseļi; text-align: center; teksta noformēšana: nav; platums: 130 pikseļi; augstums: 40px; fonts: treknrakstā 18px / 25px Arial, sans-serif; krāsa: melna; teksta ēna: 1px 1px 1px rgba (255,255,255,.22); -webkit-border-rādiuss: 30px; -moz-pierobežas rādiuss: 30px; apmales rādiuss: 30 pikseļi;
Lai saglabātu šo īsu informāciju, tika izdarītas arī visas citas lietas kodā, lai tas izskatītos labi. Jūs varat tos mainīt, lai redzētu, kas notiek, es domāju, ka to sauc par mācīšanos, izmantojot izmēģinājumus un kļūdas, bet viena laba lieta par CSS ir lietas, kas tiek izteiktas vienkāršā angļu valodā, kas nozīmē, ka tās ir diezgan viegli saprotamas. Otrajā pogu bloka daļā ir maz papildinājumu teksta ēnai uz pogas un pogas ēnas. Tam ir arī neliels pārejas efekts, kas, nospiežot pogu, palīdz izskatīties jauki un reāli. Tie ir atsevišķi definēti tīmekļa komplektiem, Firefox, Opera utt., Tikai lai nodrošinātu, ka tīmekļa lapa darbojas optimāli visās platformās.
Nākamais koda bloks ir paredzēts WebIOPi pakalpojumam pateikt, ka tas ir WebIOPi pakalpojuma ievads.
i nput {displejs: bloķēt; platums: 160 pikseļi; augstums: 45 pikseļi; }
Pēdējā lieta, ko mēs vēlamies darīt, ir dot kaut kādu norādi, kad poga ir nospiesta. Tātad jūs varat kārtot ekrāna skatījumu, un pogu krāsa ļauj jums zināt pašreizējo stāvokli. Lai to izdarītu, katrai pogai tika ieviesta zemāk redzamā koda rinda.
# gpio17.LOW {fona krāsa: Pelēka; krāsa: melna; } # gpio17.HIGH {fona krāsa: sarkana; krāsa: LightGray; }
Iepriekš minēto kodu rindas vienkārši maina pogas krāsu, pamatojoties uz tās pašreizējo stāvokli. Kad poga ir izslēgta (LOW), pogu fona krāsa kļūst pelēka, lai parādītu tās neaktīvo, un, kad tā ir ieslēgta (HIGH), pogas fona krāsa kļūst SARKANA.
CSS somā ļauj saglabāt kā smarthome.css, pēc tam pārvietojiet to caur filezilla (vai jebkuru citu SCP programmatūru, kuru vēlaties izmantot) uz mūsu aveņu pi stilu mapi un salabojiet pēdējo gabalu, html kodu. Atcerieties šeit lejupielādēt pilnu CSS.
HTML kods:
HTML kods savelk visu kopā, javascript un stila lapu.
Uzspied pogu; saņemt speķi
Ietvaros taga head pastāv dažas ļoti svarīgas funkcijas.
Iepriekš minētā koda rindiņa ļauj tīmekļa lietotni saglabāt mobilajā darbvirsmā, izmantojot hromu vai mobilo safari. To var izdarīt, izmantojot hromēto izvēlni. Tas dod lietotnei vieglu palaišanas sajūtu no mobilā darbvirsmas vai mājas.
Nākamā koda rinda sniedz zināmu atsaucību tīmekļa lietotnei. Tas ļauj aizņemt jebkuras ierīces ekrānu, kurā tā tika palaista.
Nākamā koda rinda deklarē nosaukumu, kas parādīts tīmekļa lapas virsrakstjoslā.
Nākamās četras kodu rindas katra veic funkciju, sasaistot html kodu ar vairākiem resursiem, kas tam jāstrādā pēc vēlēšanās.
Pirmā līnija Iepriekš zvanu galvenais WebIOPi regulējums JavaScript, kas ir iekodēts servera saknes. Tas ir jāizsauc katru reizi, kad tiek izmantota WebIOPi.
Otrajā rindā norāda html lapu mūsu jQuery skripts, trešo punktiem, to virzienā mūsu stila lapas. Visbeidzot, pēdējā rindiņa palīdz iestatīt ikonu, kas jāizmanto mobilajā darbvirsmā, ja mēs nolemjam to izmantot kā tīmekļa lietotni vai kā favicon vietnei.
HTML koda pamattekstā ir tikai pārtraukumu tagi, lai nodrošinātu, ka pogas ir pareizi izlīdzinātas ar zemāk esošo rindiņu, kurā mūsu html kodam tiek norādīts parādīt JavaScript failā ierakstīto. Id = "saturs" ir atgādinās jums par satura deklarācijas mūsu poga agrāk ar JavaScript kodu.
Jūs zināt urbjmašīnu, html kodu kā index.html un pārvietojieties uz html mapi Pi, izmantojot filezilla. Visus CSS, JS un HTML failus varat lejupielādēt šeit.
WebIOPi servera rediģēšana mājas automatizācijai:
Šajā posmā mēs esam gatavi sākt veidot mūsu shēmas un pārbaudīt mūsu tīmekļa lietotni, taču pirms tam mums ir jārediģē webiopi pakalpojuma konfigurācijas fails, lai tā norādītu uz datu izmantošanu no mūsu html mapes, nevis ar to piegādātajiem konfigurācijas failiem..
Lai rediģētu konfigurāciju, veiciet tālāk norādītās darbības ar root atļauju;
sudo nano / etc / webiopi / config
Meklējiet konfigurācijas faila sadaļu http, pārbaudiet sadaļā, kur jums ir kaut kas līdzīgs, #Izmantojiet doc-root, lai mainītu noklusējuma HTML un resursu failu atrašanās vietu
Komentējiet visu, kas atrodas zem tā, izmantojot #, tad, ja jūsu mape ir iestatīta tāpat kā mana, norādiet savu doc-root uz sava projekta faila ceļu
doc-root = / home / pi / webapp / html
Saglabāt un iziet. Varat arī mainīt portu no 8000, ja pi, izmantojot šo portu, darbojas cits serveris. Ja ne, saglabājiet un pārtrauciet, kad mēs ejam tālāk.
Ir svarīgi atzīmēt, ka WebIOPi pakalpojuma paroli var mainīt, izmantojot komandu;
sudo webiopi-passwd
Tas prasīs ievadīt jaunu lietotājvārdu un paroli. To var arī pilnībā noņemt, bet drošība ir svarīga, vai ne?
Visbeidzot palaidiet WebIOPi pakalpojumu, izsniedzot komandu zemāk:
sudo /etc/init.d/webiopi start
Servera statusu var pārbaudīt, izmantojot;
sudo /etc/init.d/webiopi statuss
To var apturēt, izmantojot;
sudo /etc/init.d/webiopi pietura
Lai WebIOPi iestatītu tā, lai tas darbotos sāknēšanas laikā, izmantojiet;
sudo update-rc.d webiopi noklusējums
Ja vēlaties mainīt darbību un apturēt tās darbību sāknēšanas laikā, izmantojiet;
sudo update-rc.d webiopi noņemt
Shēmas shēma un skaidrojums:
Kad programmatūra ir iestatīta, mēs visi esam gatavi sākt veidot shēmas šim tīmekļa kontrolētajam mājas ierīces projektam.
Kamēr es nevarēju pielikt rokas releju moduļiem, ar kuriem, manuprāt, ir vieglāk strādāt hobijiem. Tāpēc es šeit uzzīmēju parasto atsevišķo 5v releju shēmas.
Pievienojiet ķēdi, kā parādīts iepriekš redzamajā ķēdes ķēdē. Jums jāņem vērā, ka jūsu paša releja COM, NO (parasti atvērts) un NC (parasti aizverams) var atrasties dažādās pusēs / punktos. Lūdzu, izmantojiet milimetru, lai to pārbaudītu. Uzziniet vairāk par stafeti šeit.
Kad mūsu komponenti ir savienoti, aktivizējiet savu serveri no tīmekļa lapas, dodieties uz sava Raspberry Pi IP un norādiet portu, kā aprakstīts iepriekš, piesakieties ar savu lietotājvārdu un paroli, un jums vajadzētu redzēt vietni, kas izskatās tieši tāda, kā attēlā zemāk.
Tagad jūs varat viegli bez vadiem kontrolēt četrus maiņstrāvas mājas piederumus no jebkuras vietas, vienkārši noklikšķinot uz pogām. Tas darbosies no mobilā tālruņa, planšetdatora utt., Un jūs varat pievienot vairāk pogu un releju, lai kontrolētu vairāk ierīču. Pārbaudiet visu videoklipu zemāk.
Tas ir puiši, paldies, ka pieturaties pie šī. Ja jums ir kādi jautājumi, nometiet tos komentāru lodziņā.