- Zahtevane komponente:
- Priprava Raspberry Pi:
- Preizkusite namestitev WebIOPi:
- Izdelava spletne aplikacije za Raspberry Pi Home Automation:
- Urejanja strežnika WebIOPi za avtomatizacijo doma:
- Shema vezja in razlaga:
Pozdravljeni, dobrodošli v današnji vadnici, ena izmed dobrih stvari pri Raspberry Pi je izjemna sposobnost in enostavnost, s katero imate priložnost za povezovanje naprav z internetom, zlasti za projekte, povezane z avtomatizacijo doma. Danes bomo raziskali možnost nadzora nad napravami z izmeničnim tokom s klikom na gumbe na spletni strani z uporabo interneta. S tem sistemom za avtomatizacijo domov, ki temelji na IoT, lahko nadzorujete svoje gospodinjske aparate od koder koli na svetu. Ta spletni strežnik lahko zaženete iz katere koli naprave, ki lahko zažene aplikacije HTML, kot so pametni telefon, tablični računalnik, računalnik itd.
Zahtevane komponente:
Za ta projekt bodo zahteve spadale v dve kategoriji, strojno in programsko opremo:
I. Zahteve glede strojne opreme:
- Raspberry Pi 3 (katera koli druga različica bo lepa)
- Pomnilniška kartica 8 ali 16 GB z Raspbian Jessie
- Releji 5v
- Tranzistorji 2n222
- Diode
- Jumper žice
- Povezovalni bloki
- LED za testiranje.
- AC žarnica za preizkus
- Breadboard in mostički
- Upor 220 ali 100 ohmov
II. Zahteve za programsko opremo:
Poleg operacijskega sistema Raspbian Jessie, ki deluje na Raspberry Pi, bomo za kopiranje datotek iz računalnika v Raspberry Pi uporabili tudi delo FrameI WebIOPi, notepad ++, ki se izvaja v vašem računalniku, in filezila, zlasti datoteke spletnih aplikacij.
Prav tako vam za ta projekt avtomatizacije doma ni treba kodirati v Pythonu, WebIOPi bo opravil vse delo.
Priprava Raspberry Pi:
Zame je to neka navada in mislim, da je dobra, prva stvar, ki jo naredim vsakič, ko želim uporabiti Raspberry Pi, je posodobitev PI. Za ta projekt bo ta odsek obsegal postopke posodabljanja Pi in namestitev ogrodja WebIOPi, ki nam bo pomagal pri komunikaciji s spletne strani do maline pi. Verjetno bi moral trditi, da je to mogoče storiti tudi na verjetno lažji način z uporabo ogrodja python Flask, toda ena izmed zanimivih stvari pri DIY je, ko pogledaš pod pokrov in narediš težko delo. Tam pride vse veselje do DIY-ja.
Če želite posodobiti spodnji ukaz maline Pi in nato znova zagnati RPi;
sudo apt-get posodobitev sudo apt-get nadgradnja sudo reboot
Ko to storimo, je naslednja stvar, da namestimo ogrodje webIOPi.
Prepričajte se, da ste v domačem imeniku;
cd ~
Uporabite wget za pridobitev datoteke z njihove strani sourceforge;
wget
Ko je prenos končan, izvlecite datoteko in pojdite v imenik;
tar xvzf WebIOPi-0.7.1.tar.gz cd WebIOPi-0.7.1 /
Na tej točki moramo pred namestitvijo namestiti popravek, saj ta različica WebIOPi ne deluje z Raspberry Pi 3, ki ga uporabljam, in nisem našel različice WebIOPi, ki izrecno deluje s Pi 3.
Spodaj se ukazi uporabljajo za namestitev popravka, ko je še vedno v imeniku WebIOPi, zaženi;
wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch obliž -p1 -i webiopi-pi2bplus.patch
Nato lahko zaženemo namestitveno namestitev za WebIOPi;
sudo./setup.sh
Še naprej govorite pritrdilno, če boste med namestitvijo nameščeni kateri koli odvisnosti. Ko končate, znova zaženite pi;
sudo ponovni zagon
Preizkusite namestitev WebIOPi:
Preden se lotimo shem in kod, bomo morali znova vklopiti Raspberry Pi, da preizkusimo namestitev WebIOPi, da se prepričamo, da vse deluje v redu.
Zaženite ukaz;
sudo webiopi -d -c / etc / webiopi / config
Po izdaji zgornjega ukaza na pi usmerite spletni brskalnik računalnika, ki je povezan z malino pi, na http: // raspberrypi. mshome.net:8000 ali http; // thepi'sIPaddress: 8000. Sistem vas bo pozval k uporabniškemu imenu in geslu.
Uporabniško ime je webiopi Geslo je malina
To prijavo lahko po želji odstranite pozneje, vendar celo vaš sistem za avtomatizacijo doma zasluži nekaj dodatne stopnje varnosti, da prepreči vsakogar z napravami za nadzor IP in napravami IOT v vašem domu.
Po prijavi poglejte okoli sebe in kliknite povezavo glave GPIO.
Za ta test bomo na GPIO 17 priključili LED, zato nadaljujte in nastavite GPIO 17 kot izhod.
Ko to storite, povežite led z malino pi, kot je prikazano na spodnji shemi.
Po povezavi se vrnite na spletno stran in kliknite gumb pin 11, da vklopite ali izklopite LED. Na ta način lahko Raspberry Pi GPIO nadzorujemo s pomočjo WebIOPi.
Če je po preizkusu vse delovalo, kot je opisano, se lahko vrnemo na terminal in zaustavimo program s tipkama CTRL + C. Če imate kakršno koli težavo s to nastavitvijo, me prosite v razdelku za komentarje.
Več informacij o Webiopiju najdete na njeni Wiki strani (http://webiopi.trouch.com/INSTALL.html)
Po končanem preizkusu bomo nato začeli glavni projekt.
Izdelava spletne aplikacije za Raspberry Pi Home Automation:
Tu bomo uredili privzeto konfiguracijo storitve WebIOPi in dodali lastno kodo, ki se bo zagnala ob klicu. Prva stvar, ki jo bo naredil, je dobil filezilla ali vsi ostali FTP / SCP izvod programske opreme, nameščene na našem računalniku. Strinjali se boste z mano, da je kodiranje na pi-ju prek terminala precej stresno, zato bo filezilla ali katera koli druga programska oprema SCP v tej fazi prišla prav. Preden začnemo pisati kode skript html, css in java za to spletno aplikacijo IoT Home Automation in jih premaknemo v Raspberry Pi, ustvarimo mapo projekta, v kateri bodo vse naše spletne datoteke.
Prepričajte se, da ste v domačem imeniku, nato ustvarite mapo, pojdite v ustvarjeno mapo in v imeniku ustvarite mapo html:
cd ~ mkdir webapp cd webapp mkdir html
Ustvarite mapo za skripte, CSS in slike znotraj mape html
mkdir html / css mkdir html / img mkdir html / skripte
Z našimi ustvarjenimi datotekami se lahko premaknemo na pisanje kod v naš računalnik in se nato preko Filezille premaknemo na Pi.
Koda JavaScript:
Prvi del kode, ki ga bomo napisali, je javascript. To je preprost skript za komunikacijo s storitvijo WebIOPi.
Pomembno je omeniti, da bo za ta projekt naša spletna aplikacija sestavljena iz štirih gumbov, kar pomeni, da načrtujemo nadzor nad samo štirimi zatiči GPIO, čeprav bomo v predstavitvi nadzorovali le dva releja. Na koncu preverite celoten video.
webiopi (). pripravljen (funkcija () {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, "Rele 1"); content.append (gumb); button = webiopi (). createGPIOButton (18, "Rele 2"); content.append (button); button = webiopi (). createGPIOButton (22, "Relay 3"); content.append (button); button = webiopi ().createGPIOButton (23, "Rele 4"); content.append (gumb);});
Zgornja koda se zažene, ko je WebIOPi pripravljen.
Spodaj smo razložili kodo JavaScript:
webiopi (). pripravljen (funkcija (): To samo navodi našemu sistemu, naj ustvari to funkcijo in jo zažene, ko bo webiopi pripravljen.
webiopi (). setFunction (23, "out"); To nam pomaga, da storitvi WebIOPi povemo, da nastavi GPIO23 kot izhod. Tu imamo štiri gumbe, lahko bi jih imeli več, če nameščate več gumbov.
vsebina var, gumb; Ta vrstica našemu sistemu sporoča, naj ustvari spremenljivko z imenom vsebina in spremenljivko spremeni v gumb.
vsebina = $ ("# vsebina"); Spremenljivka vsebine se bo še vedno uporabljala v naših html in css. Ko se torej sklicujemo na #content, ogrodje WebIOPi ustvari vse, kar je z njim povezano.
button = webiopi (). createGPIOButton (17, "Rele 1"); WebIOPi lahko ustvari različne vrste gumbov. Zgornja koda nam pomaga, da storitvi WebIOPi naročimo, naj ustvari gumb GPIO, ki nadzoruje GPIO zatič, v tem primeru z oznako »Rele 1«. Enako velja za druge.
content.append (gumb); To kodo dodajte kateri koli drugi kodi za gumb, ustvarjen v datoteki html ali drugje. Ustvari se lahko več gumbov, ki bodo imeli enake lastnosti kot ta gumb. To je še posebej koristno pri pisanju CSS ali skripta.
Po ustvarjanju datotek JS jih shranimo in nato z datoteko filezilla kopiramo v skripte webapp / html / scripts, če ste datoteke ustvarili na enak način kot jaz.
S tem smo prešli na ustvarjanje CSS. Kodo lahko na koncu prenesete s povezave, ki je na koncu navedena v razdelku Koda.
Koda CSS:
CSS nam pomaga, da je naša spletna stran IoT Raspberry Pi za avtomatizacijo doma videti lepa.
Želel sem, da je spletna stran podobna spodnji sliki, zato sem moral napisati slogan smarthome.css, da jo dosežem.
Spodaj smo razložili kodo CSS:
Skript CSS se zdi preveč obsežen, da bi ga lahko vključil sem, zato ga bom le izbral in uporabil za razčlenitev. Celotno datoteko CSS lahko prenesete od tukaj. CSS je enostaven in ga lahko razumete že s pomočjo kode CSS. Ta del lahko preprosto skeptirate in takoj uporabite našo kodo CSS.
Prvi del skripta predstavlja tabelo slogi za telo spletne aplikacije in prikazano spodaj;
body {ozadje-barva: #ffffff; slika ozadja: url ('/ img / smart.png'); background-repeat: no-repeat; položaj ozadja: sredina; velikost ozadja: naslovnica; pisava: krepko 18px / 25px Arial, brez serifa; barva: LightGray; }
Želim verjeti, da je zgornja koda samoumevna, barvo ozadja nastavimo na #ffffff, ki je bela, nato dodamo sliko za ozadje, ki se nahaja na tem mestu mape (Se spomniš naše prejšnje nastavitve mape?), Zagotovimo, da slika ne ' t ponovite tako, da nastavite lastnost background-repeat na no-repeat, nato CSS naročite, naj ozadje centralizira. Nato se premaknemo, da nastavimo velikost ozadja, pisavo in barvo.
Ko je bilo telo končano, smo napisali css, da so gumbi videti lepo.
gumb {zaslon: blok; položaj: sorodnik; marža: 10 slikovnih pik; oblazinjenje: 0 10px; poravnava besedila: sredina; okrasitev besedila: nobena; širina: 130px; višina: 40px; pisava: krepko 18px / 25px Arial, brez serifa; barva: črna; text-shadow: 1px 1px 1px rgba (255,255,255,.22); -splet-meja-polmer: 30 slikovnih pik; -moz-polmer meje: 30 slikovnih pik; polmer obrobe: 30 slikovnih pik;
Če je bilo to kratko, so bile narejene tudi vse druge stvari v kodi, da je videti dobro. Lahko jih spremenite, da vidite, kaj se zgodi, mislim, da se to imenuje učenje s poskusi in napakami, toda dobra stvar CSS je, da so stvari izražene v preprosti angleščini, kar pomeni, da jih je dokaj enostavno razumeti. Drugi del bloka gumbov ima nekaj dodatkov za senco besedila na gumbu in senci gumba. Ima tudi rahel prehodni učinek, ki pomaga, da ob pritisku gumba izgleda lepo in realistično. Ti so opredeljeni ločeno za webkit, firefox, opero itd. Samo zato, da se spletna stran optimalno obnese na vseh platformah.
Naslednji blok kode je, da storitev WebIOPi sporoči, da je to vhod v storitev WebIOPi.
i nput {prikaz: blok; širina: 160px; višina: 45px; }
Zadnja stvar, ki jo želimo narediti, je nekakšen znak, ko je bil gumb pritisnjen. Tako lahko nekako pogledate zaslon, barva gumbov pa vam sporoči trenutno stanje. V ta namen je bila spodnja vrstica kode implementirana za vsak posamezen gumb.
# gpio17.LOW {ozadje-barva: siva; barva: črna; } # gpio17.HIGH {barva ozadja: rdeča; barva: LightGray; }
Vrstice kod zgoraj preprosto spremenijo barvo gumba glede na njegovo trenutno stanje. Ko je gumb izklopljen (LOW), barva ozadja gumbov postane siva, da prikaže svojo neaktivnost, in ko je vklopljena (HIGH), barva ozadja gumba postane RDEČA.
CSS v vrečki, shranite ga kot smarthome.css, nato ga prek filezille (ali katere koli druge programske opreme SCP, ki jo želite uporabiti) premaknite v mapo slogi na naši malini pi in popravite zadnji del, html kodo. Ne pozabite prenesti celotnega CSS od tukaj.
Koda HTML:
Koda html združuje vse skupaj, javascript in tabelo s slogi.
Pritisni gumb; prejme slanino
Znotraj oznake head obstaja nekaj zelo pomembnih lastnosti.
Zgornja vrstica kode omogoča, da se spletna aplikacija shrani na mobilno namizje z uporabo kroma ali mobilnega safarija. To lahko storite v kromiranem meniju. To aplikaciji omogoča enostaven zagon z mobilnega namizja ali doma.
Naslednja vrstica spodnje kode daje nekakšno odzivnost na spletno aplikacijo. Omogoča, da zasede zaslon katere koli naprave, na kateri je bila lansirana.
V naslednji vrstici kode je naveden naslov, prikazan v naslovni vrstici spletne strani.
Vsaka naslednja štiri vrstice kode opravljajo funkcijo povezovanja html kode z več viri, ki jih potrebuje za pravilno delovanje.
Prvi vrstici nad klici glavni okvir WebIOPi JavaScript, ki je težko kodirane v korenu strežnika. To je treba poklicati vsakič, ko je treba uporabiti WebIOPi.
Druga vrstica poudarja stran html za naše jQuery scenarij, tretje točke je v smeri našega slogi. Nazadnje zadnja vrstica pomaga nastaviti ikono za uporabo na mobilnem namizju, če se odločimo, da jo uporabimo kot spletno aplikacijo ali kot pripomoček za spletno stran.
Odsek telesa html kode vsebuje samo oznake prekinitve, da se zagotovi, da so gumbi pravilno poravnani s spodnjo vrstico, ki naši html kodi prikaže, kaj je zapisano v datoteki JavaScript. Id = "vsebina" naj bi vas spomnil na izjave vsebin za naše gumb prej pod kode JavaScript.
Sveder, html kodo poznate kot index.html in se prek filezile premaknete v mapo html na Pi. Vse datoteke CSS, JS in HTML lahko prenesete od tukaj.
Urejanja strežnika WebIOPi za avtomatizacijo doma:
Na tej stopnji smo pripravljeni začeti ustvarjati naše sheme in preizkusiti našo spletno aplikacijo, toda pred tem moramo urediti konfiguracijsko datoteko storitve webiopi, tako da je treba namesto nastavitvenih datotek, ki so priložene, uporabljati podatke iz mape html.
Če želite urediti konfiguracijo, zaženite naslednje s korenskim dovoljenjem;
sudo nano / etc / webiopi / config
Poiščite razdelek http v konfiguracijski datoteki, preverite v razdelku, kjer imate nekaj podobnega: #Uporabite doc-root, da spremenite privzeto lokacijo datotek HTML in datotek z viri
Komentirajte kar koli pod njo z #, nato pa, če je vaša mapa nastavljena kot moja, usmerite doc-root na pot vaše projektne datoteke
doc-root = / home / pi / webapp / html
Shrani in izstopi. Vrata lahko spremenite tudi z 8000, če imate na strežniku pi še en strežnik, ki uporablja ta vrata. Če ne shranite in zapustite, ko gremo naprej.
Pomembno je omeniti, da lahko z ukazom spremenite geslo storitve WebIOPi;
sudo webiopi-passwd
Pozval vas bo k novemu uporabniškemu imenu in geslu. Tudi to je mogoče popolnoma odstraniti, vendar je varnost pomembna, kajne?
Nazadnje zaženite storitev WebIOPi tako, da izdate spodnji ukaz:
sudo /etc/init.d/webiopi start
Stanje strežnika lahko preverite s pomočjo;
sudo /etc/init.d/webiopi status
Ne morete ga ustaviti z uporabo;
sudo /etc/init.d/webiopi stop
Če želite nastaviti WebIOPi za zagon ob zagonu, uporabite;
privzete nastavitve sudo update-rc.d webiopi
Če želite obrniti in preprečiti, da bi se zagnal ob zagonu, uporabite;
sudo update-rc.d webiopi odstrani
Shema vezja in razlaga:
Ko je naša programska oprema pripravljena, smo vsi pripravljeni začeti ustvarjati sheme za ta spletni nadzorni projekt gospodinjskih aparatov.
Čeprav nisem mogel položiti rok na relejne module, s katerimi se po mojem mnenju lažje ukvarjam s konjički. Torej sem risal sheme za navadne samostojne enojne 5v releje.
Povežite svoje vezje, kot je prikazano v zgornjem fritzing vezju. Upoštevajte, da so lahko COM, NO (običajno odprti) in NC (običajno zaprti) vašega releja na različnih straneh / točkah. Za preizkus uporabite milimeter. Več o releju preberite tukaj.
Ko so naše komponente povezane, zaženite strežnik s spletne strani, pojdite na IP vašega Raspberry Pi in navedite vrata, kot je opisano prej, prijavite se z uporabniškim imenom in geslom, pri čemer bi morali videti spletno stran, ki je videti popolnoma tako kot spodnja slika.
Zdaj lahko brezžično upravljate štiri aplikacije AC Home od koder koli, samo s klikom na gumbe. To bo delovalo prek mobilnega telefona, tabličnega računalnika itd., Za nadzor več naprav pa lahko dodate več gumbov in relejev. Spodaj si oglejte celoten video.
To je to, fantje, hvala za to. Če imate kakršna koli vprašanja, jih spustite v polje za komentar.