- Reikalingi komponentai:
- Raspberry Pi paruošimas:
- Išbandykite „WebIOPi“ diegimą:
- „Raspberry Pi“ namų automatikos žiniatinklio programos kūrimas:
- „WebIOPi“ serverio redagavimas namų automatizavimui:
- Grandinės schema ir paaiškinimas:
Sveiki, vaikinai, sveiki atvykę į šios dienos pamoką, vienas iš geriausių dalykų, susijusių su „Raspberry Pi“, yra puikus sugebėjimas ir lengvumas, kuriuo jis suteikia jums galimybę prijungti įrenginius prie interneto, ypač su namų automatika susijusiems projektams. Šiandien mes nagrinėsime galimybę valdyti kintamosios srovės prietaisus spustelėdami tinklalapio mygtukus, naudodamiesi internetu. Naudodami šią daiktų internetą naudojančią namų automatikos sistemą, galite valdyti buitinę techniką iš bet kurios pasaulio vietos. Šį žiniatinklio serverį galima paleisti iš bet kurio įrenginio, kuriame galima paleisti HTML programas, pvz., Išmanųjį telefoną, planšetinį kompiuterį, kompiuterį ir kt.
Reikalingi komponentai:
Šio projekto reikalavimai bus suskirstyti į dvi kategorijas: techninę ir programinę įrangą:
I. Techninės įrangos reikalavimai:
- Raspberry Pi 3 (bet kuri kita versija bus maloni)
- 8 arba 16 GB atminties kortelė su „Raspbian Jessie“
- 5v relės
- 2n222 tranzistoriai
- Diodai
- Šuolių laidai
- Ryšio blokai
- Šviesos diodai, kuriuos reikia išbandyti.
- Kintamosios srovės lempa išbandyti
- Duonos lentos ir trumpiklių laidai
- 220 arba 100 omų rezistorius
II. Programinės įrangos reikalavimai:
Be „Raspbian Jessie“ operacinės sistemos, veikiančios aviečių pi, mes taip pat naudosime „WebIOPi“ rėmo darbą, „ Notepad ++“, veikiantį jūsų kompiuteryje, ir „ filezila“, kad kopijuotume failus iš kompiuterio į aviečių pi, ypač žiniatinklio programų failus.
Be to, jums nereikia koduoti „Python “ šiam namų automatikos projektui, „WebIOPi“ atliks visą darbą.
Raspberry Pi paruošimas:
Man tai kažkoks įprotis, ir aš manau, kad tai geras, pirmas dalykas, kurį darau kiekvieną kartą, kai noriu naudoti „Raspberry Pi“, yra atnaujinti PI. Šiame skyriuje šiame skyriuje bus pateiktos Pi atnaujinimo procedūros ir „WebIOPi“ sistemos diegimas, kuris padės mums valdyti ryšį nuo tinklalapio iki aviečių pi. Tikriausiai turėčiau pareikšti, kad tai taip pat galima padaryti neabejotinai lengvesniu būdu naudojant „python Flask“ rėmo darbą, tačiau vienas iš įdomiausių dalykų, susijusių su „pasidaryk pats“, yra tai, kai pažvelgsi po gaubtu ir padarai sunkų darbą. Štai kur visas „pasidaryk pats“ džiaugsmas.
Norėdami atnaujinti aviečių Pi komandas žemiau, tada paleiskite RPi iš naujo;
sudo apt-get update sudo apt-get upgrade sudo perkrauti
Tai atlikus, mes turime įdiegti „webIOPi“ sistemą.
Įsitikinkite, kad esate namų kataloge naudodami;
cd ~
Naudokite wget, kad gautumėte failą iš jų sourceforge puslapio;
wget
Kai atsisiuntimas bus baigtas, ištraukite failą ir eikite į katalogą;
tar xvzf „WebIOPi-0.7.1.tar.gz cd“ „WebIOPi-0.7.1“ /
Šiuo metu, prieš vykdydami sąranką, turime įdiegti pleistrą, nes ši „WebIOPi“ versija neveikia su aviečių pi 3, kurią naudoju, ir negalėjau rasti „WebIOPi“ versijos, kuri aiškiai veiktų su „Pi 3“.
Žemiau pateiktos komandos naudojamos pataisui įdiegti, kol dar yra WebIOPi kataloge, wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch patch -p1 -i webiopi-pi2bplus.patch
Tada mes galime paleisti „WebIOPi“ sąrankos diegimą naudodami;
sudo./setup.sh
Tęskite „taip“, jei diegimo metu paprašoma įdiegti kokias nors priklausomybes. Baigę perkraukite savo pi;
sudo perkraukite
Išbandykite „WebIOPi“ diegimą:
Prieš pereidami prie schemų ir kodų, „Raspberry Pi“ vėl įjungę, turėsime išbandyti „WebIOPi“ diegimą, kad įsitikintume, jog viskas veikia gerai, kaip norima.
Paleiskite komandą;
sudo webiopi -d -c / etc / webiopi / config
Išdavę aukščiau pateiktą komandą pi, nukreipkite savo kompiuterio interneto naršyklę, prijungtą prie aviečių pi, adresu http: // raspberrypi. mshome.net:8000 arba http; // thepi's IP adresas: 8000. Sistema paprašys įvesti vartotojo vardą ir slaptažodį.
Vartotojo vardas yra webiopi Slaptažodis yra avietė
Jei norite, šį prisijungimą galima pašalinti vėliau, tačiau net jūsų namų automatikos sistema nusipelno tam tikro papildomo saugumo lygio, kad būtų užkirstas kelias bet kam, turinčiam jūsų namuose IP valdančius prietaisus ir IOT įrenginius.
Po prisijungimo apsižvalgykite ir spustelėkite nuorodą GPIO antraštėje.
Norėdami atlikti šį bandymą, prie GPIO 17 prijungsime šviesos diodą, todėl eikite ir nustatykite GPIO 17 kaip išvestį.
Tai padarę, prijunkite lemputę prie savo aviečių pi, kaip parodyta toliau pateiktose schemose.
Po ryšio grįžkite į tinklalapį ir spustelėkite mygtuką 11, kad įjungtumėte arba išjungtumėte šviesos diodą. Tokiu būdu mes galime valdyti „Raspberry Pi GPIO“ naudodami „ WebIOPi“.
Po bandymo, jei viskas veikė taip, kaip aprašyta, tada galime grįžti į terminalą ir sustabdyti programą naudodami CTRL + C. Jei turite kokių nors problemų dėl šios sąrankos, tada paspauskite mane per komentarų skyrių.
Daugiau informacijos apie „Webiopi“ galite rasti „Wiki“ puslapyje (http://webiopi.trouch.com/INSTALL.html)
Baigę testą, mes turime pradėti vykdyti pagrindinį projektą.
„Raspberry Pi“ namų automatikos žiniatinklio programos kūrimas:
Čia redaguosime numatytąją „WebIOPi“ paslaugos konfigūraciją ir pridėsime savo kodą, kuris bus paleistas, kai bus iškviestas. Pirmas dalykas, kurį padarysime, bus tai, kad į kompiuterį bus įdiegta „ filezilla“ ar kita FTP / SCP kopijavimo programinė įranga. Jūs sutiksite su manimi, kad kodavimas pi per terminalą yra gana įtemptas, todėl filezilla ar bet kuri kita SCP programinė įranga bus naudinga šiame etape. Prieš pradėdami rašyti šios „ IoT Home“ automatikos žiniatinklio programos HTML, css ir „Java“ scenarijų kodus ir perkeldami juos į „Raspberry Pi“, galime sukurti projekto aplanką, kuriame bus visi mūsų žiniatinklio failai.
Įsitikinkite, kad esate namų kataloge naudodami, tada sukurkite aplanką, eikite į sukurtą aplanką ir kataloge sukurkite HTML aplanką:
cd ~ mkdir webapp cd webapp mkdir html
HTML aplanke sukurkite aplanką scenarijams, CSS ir atvaizdams
mkdir html / css mkdir html / img mkdir html / scenarijai
Su sukurtais failais galime pereiti prie kodų rašymo savo kompiuteryje ir tada perkelti per „Pi“ per „filezilla“.
„JavaScript“ kodas:
Pirmasis kodas, kurį parašysime, yra „Javascript“. Tai paprastas scenarijus, skirtas bendrauti su „WebIOPi“ paslauga.
Svarbu pažymėti, kad šiam projektui mūsų internetinę programą sudarys keturi mygtukai, o tai reiškia, kad planuojame valdyti tik keturis GPIO kaiščius, nors demonstracijoje valdysime tik dvi reles. Pabaigoje patikrinkite visą vaizdo įrašą.
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); mygtukas = webiopi (). createGPIOButton (18, „2 relė“); content.append (mygtukas); mygtukas = webiopi (). createGPIOButton (22, „3 relė“); content.append (mygtukas); mygtukas = webiopi ().createGPIOButton (23, "Relay 4"); content.append (mygtukas);});
Aukščiau pateiktas kodas veikia, kai „WebIOPi“ yra parengta.
Žemiau mes paaiškinome „JavaScript“ kodą:
ready (function (): Tai tiesiog nurodo mūsų sistemai sukurti šią funkciją ir paleisti ją, kai webiopi bus paruošta.
webiopi (). setFunction (23, „out“); Tai mums padeda „WebIOPi“ tarnybai nustatyti GPIO23 kaip išvestį. Čia turime keturis mygtukus, jų galite turėti daugiau, jei įdiegsite daugiau mygtukų.
var content, button; Ši eilutė nurodo mūsų sistemai sukurti kintamąjį pavadinimu „content“ ir padaryti kintamąjį mygtuku.
turinys = $ ("# content"); Turinio kintamasis vis tiek bus naudojamas mūsų HTML ir CSS. Taigi, kai kalbame apie #content, „WebIOPi“ sistema sukuria viską, kas su ja susiję.
mygtukas = webiopi (). createGPIOButton (17, "1 relė"); „WebIOPi“ gali sukurti įvairių rūšių mygtukus. Aukščiau pateiktas kodo fragmentas padeda mums pasakyti „WebIOPi“ tarnybai sukurti GPIO mygtuką, kuris valdo GPIO kaištį, šiuo atveju 17 pažymėtą „1 relė“. Tas pats pasakytina ir apie kitus.
content.append (mygtukas); Pridėkite šį kodą prie bet kurio kito mygtuko, sukurto HTML faile ar kitur, kodo. Galima sukurti daugiau mygtukų, kurie visi turės tas pačias šio mygtuko savybes. Tai ypač naudinga rašant CSS ar scenarijų.
Sukūrę JS failus, mes juos išsaugome ir tada nukopijuojame naudodami „filezilla“ į „webapp / html / scripts“, jei failus sukūrėte taip pat, kaip ir aš.
Tai atlikę pereiname prie CSS kūrimo. Galite visą atsisiųsti kodą iš nuorodos, pateiktos skilties Kodas pabaigoje.
CSS kodas:
CSS padeda mums padaryti IoT „Raspberry Pi“ namų automatikos tinklalapį gražų.
Norėjau, kad tinklalapis atrodytų panašus į žemiau esantį paveikslėlį, todėl norėdamas jį pasiekti, turėjau parašyti „ smarthome.css“ stiliaus lapą.
Žemiau paaiškinome CSS kodą:
CSS scenarijus atrodo per didelis, kad jį būtų galima įtraukti čia, todėl aš tiesiog pasirinksiu dalį jo ir panaudosiu juos suskirstymui. Čia galite atsisiųsti visą CSS failą. CSS yra lengva, ir jūs galite tai suprasti tiesiog pereidami CSS kodą. Galite lengvai praleisti šią dalį ir iš karto naudoti mūsų CSS kodą.
Pirmoji scenarijaus dalis rodo žiniatinklio programos turinio ir toliau pateikto stiliaus lentelę;
body {background-color: #ffffff; fono paveikslėlis: url ('/ img / smart.png'); fonas pakartoti: ne kartoti; fonas-padėtis: centras; fono dydis: viršelis; šriftas: paryškintas 18 taškų / 25 taškų „Arial“, „sans-serif“; spalva: „LightGray“; }
Noriu tikėti, kad aukščiau pateiktas kodas yra savaime suprantamas, mes nustatėme fono spalvą kaip #ffffff, kuri yra balta, tada pridedame fono paveikslėlį, esantį toje aplanko vietoje (atsimenate ankstesnę aplanko sąranką?), Mes užtikriname, kad vaizdas nėra t pakartokite nustatydami ypatybę „fonas kartoti“ į „nekartoti“, tada nurodykite CSS centralizuoti foną. Tada mes nustatome fono dydį, šriftą ir spalvą.
Atlikę kūną, parašėme mygtukus „css“, kad jie atrodytų gražiai.
mygtukas {display: block; padėtis: giminaitis; paraštė: 10 taškų; užpildas: 0 10 taškų; text-align: centre; teksto dekoravimas: nėra; plotis: 130 taškų; aukštis: 40 taškų; šriftas: paryškintas 18 taškų / 25 taškų „Arial“, „sans-serif“; spalva: juoda; teksto šešėlis: 1px 1px 1px rgba (255,255,255,.22); -webkit-border-radius: 30 taškų; -moz-border-radius: 30 taškų; krašto spindulys: 30 taškų;
Kad būtų trumpai, visi kiti kodo dalykai taip pat buvo padaryti, kad jis atrodytų gerai. Galite juos pakeisti, kad sužinotumėte, kas atsitiks, manau, kad tai vadinama mokymusi per bandymus ir klaidas, tačiau vienas geras CSS dalykas yra tai, kad dalykai yra išreikšti paprasta anglų kalba, o tai reiškia, kad juos gana lengva suprasti. Kitoje mygtukų bloko dalyje yra keletas priedų, skirtų teksto šešėliui ant mygtuko ir mygtuko šešėlio. Jis taip pat turi nedidelį perėjimo efektą, kuris padeda gražiai ir tikroviškai atrodyti paspaudus mygtuką. Jie yra atskirai apibrėžti žiniatinklio rinkiniui, „Firefox“, „Opera“ ir kt., Tik siekiant užtikrinti, kad tinklalapis veiktų optimaliai visose platformose.
Kitas kodo blokas skirtas „ WebIOPi“ tarnybai pasakyti, kad tai yra „WebIOPi“ paslaugos įvestis.
i nput {rodyti: blokuoti; plotis: 160px; aukštis: 45px; }
Paskutinis dalykas, kurį norime padaryti, yra pateikti tam tikrą informaciją, kai paspaudžiamas mygtukas. Taigi galite rūšiuoti ekranu, o mygtukų spalva leidžia sužinoti dabartinę būseną. Norėdami tai padaryti, žemiau esanti kodo eilutė buvo įdiegta kiekvienam mygtukui.
# gpio17.LOW {fono spalva: pilka; spalva: juoda; } # gpio17.HIGH {fono spalva: Raudona; spalva: „LightGray“; }
Aukščiau nurodytos kodų eilutės tiesiog pakeičia mygtuko spalvą, atsižvelgiant į jo dabartinę būseną. Kai mygtukas yra išjungtas (LOW), mygtukų fono spalva tampa pilka, kad parodytų, kad jis neaktyvus, o įjungus (HIGH) mygtuko fono spalva tampa RED.
CSS krepšyje leidžia išsaugoti kaip smarthome.css, tada perkelkite jį per „filezilla“ (arba bet kurią kitą norimą naudoti SCP programinę įrangą) į mūsų aviečių pi stilių aplanką ir pataisykite paskutinį kūrinį - HTML kodą. Nepamirškite atsisiųsti visos CSS iš čia.
HTML kodas:
HTML kodas sujungia viską, „javascript“ ir stiliaus lapą.
Mygtukas; gauti lašinių
Ant galvos žymos yra keletas labai svarbių funkcijų.
Viršuje esanti kodo eilutė leidžia žiniatinklio programą išsaugoti mobiliajame darbalaukyje naudojant „Chrome“ arba mobilųjį safarį. Tai galima padaryti naudojant chromo meniu. Tai suteikia programai lengvą paleidimo jausmą iš mobiliojo darbalaukio ar namų.
Kita žemiau esanti kodo eilutė suteikia tam tikrą reagavimą į žiniatinklio programą. Tai leidžia užimti bet kurio įrenginio, kuriame jis paleistas, ekraną.
Kitoje kodo eilutėje nurodomas pavadinimas, rodomas tinklalapio antraštės juostoje.
Kiekviena kita keturi kodų eilutė atlieka funkciją, susiejančią HTML kodą su keliais ištekliais, kurių reikia norint dirbti.
Pirmoji eilutė virš skambučių pagrindinis WebIOPi sistema Javaskriptą, kuri yra sunkiai koduojami serverio root. Tai reikia iškviesti kiekvieną kartą, kai norite naudoti „WebIOPi“.
Antroje eilutėje nurodo HTML puslapio mūsų jQuery scenarijų, trečiųjų kiekis jį į mūsų stiliaus lapo kryptimi. Galiausiai paskutinė eilutė padeda nustatyti piktogramą, kuri bus naudojama mobiliajame darbalaukyje, jei nuspręstume ją naudoti kaip žiniatinklio programą arba kaip tinklalapio piktogramą.
HTML kodo kūno dalyje yra tik pertraukimo žymos, užtikrinančios, kad mygtukai būtų tinkamai sulyginti su žemiau esančia eilute, nurodant mūsų HTML kodui rodyti tai, kas parašyta „JavaScript“ faile. „ Id =“ content “ turėtų priminti mūsų mygtuko turinio deklaraciją anksčiau po„ JavaScript “kodu.
Jūs žinote grąžtą, HTML kodą kaip index.html ir perkelkite į „HTML“ aplanką per „filezilla“. Čia galite atsisiųsti visus CSS, JS ir HTML failus.
„WebIOPi“ serverio redagavimas namų automatizavimui:
Šiame etape mes esame pasirengę pradėti kurti savo schemas ir išbandyti savo žiniatinklio programą, tačiau prieš tai turime redaguoti „webiopi“ paslaugos konfigūracijos failą, kad ji nurodytų naudoti duomenis iš mūsų html aplanko, o ne su juo gautus konfigūrinius failus..
Norėdami redaguoti konfigūraciją, vykdykite šiuos veiksmus su root leidimu;
sudo nano / etc / webiopi / config
Ieškokite konfigūracijos failo http skyriaus, pažymėkite skiltį, kurioje turite kažką panašaus, #Naudokite numatytąją HTML ir išteklių failų vietą naudokite doc-root
Pakomentuokite bet ką po juo naudodamiesi #, tada, jei jūsų aplankas yra nustatytas kaip mano, nukreipkite savo doc šaknį į savo projekto failo kelią
doc-root = / home / pi / webapp / html
Išsaugoti ir išeiti. Taip pat galite pakeisti prievadą nuo 8000, jei turite kitą serverį, kuriame veikia pi. Jei ne išsaugok ir mesk, eidami toliau.
Svarbu pažymėti, kad naudodamiesi komanda galite pakeisti „WebIOPi“ paslaugos slaptažodį;
sudo webiopi-passwd
Tai paprašys įvesti naują vartotojo vardą ir slaptažodį. Tai taip pat galima visiškai pašalinti, tačiau saugumas yra svarbus, tiesa?
Galiausiai paleiskite „WebIOPi“ paslaugą išleisdami žemiau esančią komandą:
sudo /etc/init.d/webiopi start
Serverio būseną galima patikrinti naudojant;
sudo /etc/init.d/webiopi būsena
Jį galima sustabdyti naudojant;
sudo /etc/init.d/webiopi stop
Norėdami nustatyti „WebIOPi“ paleisti įkrovos metu, naudokite;
sudo update-rc.d webiopi numatytieji
Jei norite pakeisti ir sustabdyti jo veikimą įkrovos metu, naudokite;
sudo update-rc.d webiopi pašalinti
Grandinės schema ir paaiškinimas:
Atlikę programinės įrangos nustatymą, visi esame pasirengę pradėti kurti šio žiniatinklio valdomo namų apyvokos prietaiso projekto schemas.
Nors negalėjau numoti ranka į relinius modulius, kuriuos, mano manymu, mėgėjams lengviau dirbti. Taigi aš čia piešiu paprastų atskirų 5v relių schemas.
Prijunkite savo grandinę, kaip parodyta aukščiau esančioje šlifavimo grandinėje. Turėtumėte atkreipti dėmesį, kad jūsų relės COM, NO (paprastai atidarytas) ir NC (paprastai uždaromas) gali būti skirtingose pusėse / taškuose. Prašome išbandyti milimetrą. Sužinokite daugiau apie estafetę čia.
Sujungę mūsų komponentus, paleiskite savo serverį iš tinklalapio, eikite į savo „Raspberry Pi“ IP ir nurodykite prievadą, kaip aprašyta anksčiau, prisijunkite naudodami savo vartotojo vardą ir slaptažodį ir turėtumėte pamatyti tinklalapį, kuris atrodo tiksliai taip, kaip paveikslėlyje žemiau..
Dabar galite lengvai valdyti keturias kintamosios srovės namų aparatą bet kur belaidžiu būdu, tiesiog spustelėdami mygtukus. Tai veiks iš „Mobilephone“, planšetinio kompiuterio ir kt., Todėl galite pridėti daugiau mygtukų ir relių, kad valdytumėte daugiau įrenginių. Patikrinkite visą vaizdo įrašą žemiau.
Štai, vaikinai, ačiū, kad laikaisi šio. Jei turite klausimų, palikite juos komentarų laukelyje.