- Potrebne komponente:
- Priprema Raspberry Pi:
- Testirajte instalaciju WebIOPi:
- Izrada web aplikacije za automatizaciju kuće Raspberry Pi:
- Uređivanja WebIOPi poslužitelja za automatizaciju kuće:
- Kružni dijagram i objašnjenje:
Bok, momci, dobrodošli u današnji vodič, jedna od dobrih stvari u vezi s Raspberry Pi-om je sjajna sposobnost i lakoća s kojom vam pruža mogućnost povezivanja uređaja s internetom, posebno za projekte povezane s automatizacijom kuće. Danas ćemo istražiti mogućnost upravljanja AC uređajima klikom na gumbe na web stranici pomoću interneta. Koristeći ovaj sustav kućne automatizacije zasnovan na IoT-u, možete kontrolirati svoje kućanske uređaje s bilo kojeg mjesta na svijetu. Ovaj web poslužitelj može se pokretati s bilo kojeg uređaja koji može pokretati HTML aplikacije, poput pametnog telefona, tableta, računala itd.
Potrebne komponente:
Za ovaj projekt zahtjevi spadaju u dvije kategorije, hardver i softver:
I. Hardverski zahtjevi:
- Raspberry Pi 3 (Bilo koja druga verzija bit će lijepa)
- Memorijska kartica 8 ili 16 GB s Raspbian Jessie
- Releji 5v
- Tranzistori 2n222
- Diode
- Jumper žice
- Blokovi za spajanje
- LED diode za testiranje.
- AC lampica za testiranje
- Kablovi za razmještaj i kratkospojnike
- Otpornik od 220 ili 100 oma
II. Zahtjevi softvera:
Pored operativnog sustava Raspbian Jessie koji radi na Raspberry Pi, također ćemo koristiti WebIOPi frame work, notepad ++ pokrenut na vašem računalu i filezila za kopiranje datoteka s računala na Raspberry Pi, posebno datoteka web aplikacija.
Također ne trebate kodirati u Pythonu za ovaj projekt automatizacije kuće, WebIOPi će obaviti sav posao.
Priprema Raspberry Pi:
To mi je neka navika i mislim da je dobra, prva stvar koju napravim svaki put kad poželim koristiti Raspberry Pi je da ažuriram PI. Za ovaj će se projekt ovaj odjeljak sastojati od postupaka ažuriranja Pi-a i instaliranja WebIOPi okvira koji će nam pomoći u komunikaciji s web-stranice na Raspberry Pi. Vjerojatno bih trebao konstatirati da se to također može učiniti na nesumnjivo lakši način koristeći rad okvira python Flask, ali jedna od zanimljivosti DIY-a je kada bacite pogled ispod haube i napravite težak posao. Tu dolazi sva radost „uradi sam“.
Da biste ažurirali Raspberry Pi naredbe u nastavku, a zatim ponovno pokrenite RPi;
sudo apt-get update sudo apt-get nadogradnja sudo reboot
Nakon ovoga, sljedeća je stvar da instaliramo okvir webIOPi.
Provjerite jeste li u matičnom direktoriju koristeći;
cd ~
Upotrijebite wget za preuzimanje datoteke s njihove izvorne stranice;
wget
Kada je preuzimanje završeno, izvucite datoteku i idite u direktorij;
tar xvzf WebIOPi-0.7.1.tar.gz cd WebIOPi-0.7.1 /
U ovom trenutku prije pokretanja instalacije moramo instalirati zakrpu jer ova verzija WebIOPi-a ne radi s Raspberry Pi 3 koju koristim i nisam uspio pronaći verziju WebIOPi-a koja izričito radi s Pi 3.
Ispod se naredbe koriste za instaliranje zakrpe dok ste još uvijek u direktoriju WebIOPi, pokrenite;
wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch zakrpa -p1 -i webiopi-pi2bplus.patch
Tada možemo pokrenuti instalacijsku instalaciju za WebIOPi koristeći;
sudo./setup.sh
Nastavite ponavljati da ako se tijekom instalacije postavljanja zatraži instaliranje bilo kakvih ovisnosti. Kad završite, ponovno pokrenite pi;
sudo ponovno pokretanje
Testirajte instalaciju WebIOPi:
Prije nego što prijeđemo na sheme i kodove, s ponovnim uključivanjem Raspberry Pi, morat ćemo testirati našu WebIOPi instalaciju kako bismo bili sigurni da sve funkcionira u redu kako želite.
Pokrenite naredbu;
sudo webiopi -d -c / etc / webiopi / config
Nakon izdavanja gornje naredbe na pi, usmjerite web preglednik svog računala povezanog na Raspberry Pi na http: // raspberrypi. mshome.net:8000 ili http; // thepi'sIPaddress: 8000. Sustav će zatražiti korisničko ime i lozinku.
Korisničko ime je webiopi Lozinka je malina
Ovu prijavu možete ukloniti kasnije ako želite, ali čak i vaš sustav kućne automatizacije zaslužuje dodatnu razinu sigurnosti kako bi spriječio bilo koga s IP uređajima i IOT uređajima u vašem domu.
Nakon prijave, pogledajte oko sebe, a zatim kliknite vezu zaglavlja GPIO.
Za ovaj ćemo test spojiti LED na GPIO 17, zato nastavite i postavite GPIO 17 kao izlaz.
Nakon toga spojite led na malinu pi kao što je prikazano u donjim shemama.
Nakon veze, vratite se na web stranicu i kliknite gumb pin 11 da biste uključili ili isključili LED. Na ovaj način možemo kontrolirati Raspberry Pi GPIO pomoću WebIOPi.
Nakon testa, ako je sve funkcioniralo kako je opisano, možemo se vratiti na terminal i zaustaviti program CTRL + C. Ako imate problema s ovom postavkom, udarite me putem odjeljka za komentare.
Više informacija o Webiopiju možete pronaći na njegovoj Wiki stranici (http://webiopi.trouch.com/INSTALL.html)
Nakon završetka testa, tada smo spremni započeti glavni projekt.
Izrada web aplikacije za automatizaciju kuće Raspberry Pi:
Ovdje ćemo uređivati zadanu konfiguraciju usluge WebIOPi i dodati svoj vlastiti kôd koji će se pokretati kad bude pozvan. Prvo što ćemo učiniti je instalirati Filezilla ili bilo koji drugi FTP / SCP softver za kopiranje instaliran na našem računalu. Složit ćete se sa mnom da je kodiranje na pi preko terminala prilično stresno, pa će u ovoj fazi dobro doći filezilla ili bilo koji drugi SCP softver. Prije nego što počnemo pisati html, css i java kodove skripti za ovu internetsku aplikaciju IoT Home automation i premještamo ih na Raspberry Pi, omogućimo stvaranje mape projekta u kojoj će biti sve naše web datoteke.
Provjerite jeste li u matičnom direktoriju koristeći, zatim stvorite mapu, idite u stvorenu mapu i kreirajte html mapu u direktoriju:
cd ~ mkdir webapp cd webapp mkdir html
Stvorite mapu za skripte, CSS i slike unutar html mape
mkdir html / css mkdir html / img mkdir html / skripte
S našim stvorenim datotekama prelazimo na pisanje kodova na našem računalu, a od tada prelazimo na Pi putem filezile.
JavaScript kôd:
Prvi dio koda koji ćemo napisati je onaj javascripta. Njegova je jednostavna skripta za komunikaciju s uslugom WebIOPi.
Važno je napomenuti da će se za ovaj projekt naša web aplikacija sastojati od četiri gumba, što znači da planiramo kontrolirati samo četiri GPIO pina, iako ćemo u našoj demonstraciji kontrolirati samo dva releja. Provjerite cijeli Video na kraju.
webiopi (). spreman (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, "Relej 1"); content.append (gumb); button = webiopi (). createGPIOButton (18, "Relej 2"); content.append (button); button = webiopi (). createGPIOButton (22, "Relay 3"); content.append (button); button = webiopi ().createGPIOButton (23, "Relej 4"); content.append (gumb);});
Gornji kod se pokreće kad WebIOPi bude spreman.
U nastavku smo objasnili JavaScript kod:
webiopi (). ready (function (): Ovo samo upućuje naš sustav da kreira ovu funkciju i pokrene je kad webiopi bude spreman.
webiopi (). setFunction (23, "out"); To nam pomaže da poručimo usluzi WebIOPi da postavi GPIO23 kao izlaz. Ovdje imamo četiri gumba, mogli biste ih imati više ako implementirate više gumba.
sadržaj var, gumb; Ovaj redak govori našem sustavu da kreira varijablu s nazivom sadržaj i da varijablu učini gumbom.
sadržaj = $ ("# sadržaj"); Varijabla sadržaja i dalje će se koristiti u našim html i css. Dakle, kada se pozivamo na #content, WebIOPi okvir stvara sve što je povezano s njim.
button = webiopi (). createGPIOButton (17, "Relej 1"); WebIOPi može stvoriti različite vrste gumba. Gornji dio koda pomaže nam da poručimo usluzi WebIOPi da stvori GPIO gumb koji kontrolira GPIO pin u ovom slučaju 17 s oznakom "Relej 1". Isto vrijedi i za ostale.
content.append (gumb); Dodajte ovaj kôd bilo kojem drugom kodu gumba stvorenog u html datoteci ili negdje drugdje. Može se stvoriti više gumba i svi će imati ista svojstva kao ovaj gumb. To je posebno korisno pri pisanju CSS-a ili skripte.
Nakon stvaranja JS datoteka, spremamo ih i kopiramo pomoću filezille u webapp / html / skripte ako ste datoteke stvorili na isti način kao i ja.
Nakon toga prelazimo na stvaranje CSS-a. Kôd na kraju možete preuzeti s veze koja je data u odjeljku Code.
CSS kod:
CSS nam pomaže da naša web stranica IoT Raspberry Pi o kućnoj automatizaciji izgleda lijepo.
Htio sam da web stranica izgleda poput donje slike i zato sam morao napisati tablicu stilova smarthome.css da bih je postigao.
U nastavku smo objasnili CSS kod:
CSS skripta djeluje previše glomazno da bi se ovdje mogla uključiti, pa ću samo odabrati dio i koristiti ih za raščlambu. Cijelu CSS datoteku možete preuzeti ovdje. CSS je jednostavan i možete ga razumjeti samo prolazeći kroz CSS kôd. Možete jednostavno skeptirati ovaj dio i odmah koristiti naš CSS kod.
Prvi dio skripte predstavlja tablicu stilova za tijelo web aplikacije i prikazanu u nastavku;
tijelo {background-color: #ffffff; pozadinska slika: url ('/ img / smart.png'); pozadina-ponavljanje: bez ponavljanja; položaj pozadine: sredina; veličina pozadine: naslovnica; font: podebljano 18px / 25px Arial, sans-serif; boja: LightGray; }
Želim vjerovati da gornji kod sam po sebi objašnjava, boju pozadine postavljamo kao #ffffff koja je bijela, a zatim dodajemo pozadinsku sliku koja se nalazi na tom mjestu mape (Sjećate li se našeg ranijeg postavljanja mape?), Osiguravamo da slika ne ' t ponovite postavljanjem svojstva background-repeat na no-repeat, a zatim naredite CSS-u da centralizira pozadinu. Zatim prelazimo na postavljanje veličine pozadine, fonta i boje.
Nakon završetka tijela napisali smo css kako bi gumbi izgledali lijepo.
gumb {prikaz: blok; položaj: relativan; marža: 10 piksela; popunjavanje: 0 10px; poravnanje teksta: središte; ukras teksta: nijedan; širina: 130px; visina: 40px; font: podebljano 18px / 25px Arial, sans-serif; Crna boja; sjena teksta: 1px 1px 1px rgba (255,255,255,.22); -webkit-radijus-granice: 30px; -moz-radijus-granice: 30px; radijus obruba: 30 piksela;
Da bi bilo kratko, učinjene su i sve druge stvari u kodu kako bi izgledao dobro. Možete ih promijeniti, pogledajte što će se dogoditi, mislim da se to zove učenje pomoću pokušaja i pogrešaka, ali jedna dobra stvar kod CSS-a je to što su stvari izražene na jednostavnom engleskom jeziku, što znači da ih je prilično lako razumjeti. Drugi dio bloka gumba ima nekoliko dodataka za sjenku teksta na gumbu i sjeni gumba. Također ima blagi efekt prijelaza što pomaže da izgleda lijepo i realno kad se pritisne tipka. Oni su definirani odvojeno za webkit, firefox, operu itd. Samo kako bi se osiguralo da web stranica radi optimalno na svim platformama.
Sljedeći blok koda je da usluga WebIOPi kaže da je to ulaz u uslugu WebIOPi.
i nput {prikaz: blok; širina: 160px; visina: 45px; }
Posljednje što želimo učiniti je dati neku vrstu naznake kad je gumb pritisnut. Tako možete nekako pogledati zaslon, a boja gumba daje vam do znanja trenutno stanje. Da biste to učinili, donji redak koda implementiran je za svaki pojedini gumb.
# gpio17.LOW {pozadina-boja: siva; Crna boja; } # gpio17.HIGH {background-color: Red; boja: LightGray; }
Gornji retci kodova jednostavno mijenjaju boju gumba na temelju trenutnog stanja. Kada je gumb isključen (LOW), boja pozadine gumba postaje siva da bi pokazala da je neaktivna, a kada je uključena (HIGH) boja pozadine gumba postaje CRVENA.
CSS u vrećici omogućuje spremanje kao smarthome.css, a zatim ga premjestite putem filezille (ili bilo kojeg drugog SCP softvera koji želite koristiti) u mapu stilova na našoj Raspberry Pi i popravite završni dio, html kod. Ne zaboravite ovdje preuzeti cjelokupni CSS.
HTML kod:
HTML kôd spaja sve zajedno, javascript i tabelu stilova.
Pritisni gumb; primiti slaninu
Unutar oznake head postoje neke vrlo važne značajke.
Gornji redak koda omogućuje spremanje web aplikacije na mobilnu radnu površinu pomoću kroma ili mobilnog safarija. To se može učiniti putem kromiranog izbornika. To aplikaciji omogućuje lagan osjećaj pokretanja s mobilnog računala ili kuće.
Sljedeći redak koda u nastavku daje neku vrstu reakcije na web aplikaciju. Omogućuje mu zauzimanje zaslona bilo kojeg uređaja na kojem je pokrenut.
Sljedeći redak koda objavljuje naslov prikazan na naslovnoj traci web stranice.
Sljedeća četiri retka kodova izvršavaju funkciju povezivanja html koda s nekoliko resursa potrebnih za rad po želji.
Prva linija iznad poziva glavni WebIOPi okvir JavaScript koji je ugrađen u korijenu poslužitelja. To treba pozvati svaki put kada se koristi WebIOPi.
Drugi redak ukazuje html stranicu u našoj jQuery skripti, trećeg boda u smjeru našeg style sheet. Na kraju, zadnji redak pomaže u postavljanju ikone koja će se koristiti na mobilnoj radnoj površini u slučaju da je odlučimo koristiti kao web-aplikaciju ili kao favoriziranje web-stranice.
Odjeljak tijela html koda sadrži samo oznake prekida kako bi se osiguralo da se gumbi pravilno poravnaju s donjim retkom i govore našem html kodu da prikaže ono što je napisano u JavaScript datoteci. Id =”sadržaj” treba podsjetiti na deklaraciji sadržaja za našu gumb ranije pod JavaScript koda.
Vježbu, html kod znate kao index.html i premjestite se u html mapu na Pi putem filezile. Sve CSS, JS i HTML datoteke možete preuzeti ovdje.
Uređivanja WebIOPi poslužitelja za automatizaciju kuće:
U ovoj smo fazi spremni započeti s izradom naših shema i testirati našu web aplikaciju, ali prije toga moramo urediti konfiguracijsku datoteku usluge webiopi tako da ukazuje na upotrebu podataka iz naše mape html umjesto na konfiguracijske datoteke koje su isporučene s njom.
Za uređivanje konfiguracije pokrenite sljedeće s dopuštenjem root-a;
sudo nano / etc / webiopi / config
Potražite http odjeljak konfiguracijske datoteke, provjerite u odjeljku u kojem imate nešto poput # Koristite doc-root za promjenu zadanog mjesta HTML i datoteka datoteka resursa
Komentirajte bilo što ispod nje pomoću #, a zatim ako je vaša mapa postavljena poput moje, usmjerite svoj doc-root na stazu vaše projektne datoteke
doc-root = / home / pi / webapp / html
Spremi i izađi. Također možete promijeniti port s 8000, ako imate drugi poslužitelj pokrenut na pi koji koristi taj port. Ako ne spremite i zatvorite, kako idemo dalje.
Važno je napomenuti da lozinku usluge WebIOPi možete promijeniti pomoću naredbe;
sudo webiopi-passwd
Zatražit će vam novo korisničko ime i lozinku. To se također može potpuno ukloniti, ali sigurnost je važna, zar ne?
Na kraju pokrenite uslugu WebIOPi izdavanjem naredbe ispod:
sudo /etc/init.d/webiopi start
Status poslužitelja može se provjeriti pomoću;
status sudo /etc/init.d/webiopi
Može se zaustaviti izvođenje pomoću;
sudo /etc/init.d/webiopi stop
Da biste postavili WebIOPi za pokretanje prilikom pokretanja, upotrijebite;
zadane postavke sudo update-rc.d webiopi
Ako želite obrnuti i zaustaviti njegovo pokretanje prilikom pokretanja, upotrijebite;
sudo update-rc.d webiopi ukloniti
Kružni dijagram i objašnjenje:
Nakon što je naš softver postavljen, svi smo spremni započeti izradu shema za ovaj projekt kućanskih uređaja pod nadzorom weba.
Iako nisam mogao položiti ruke na relejne module, s kojima smatram da je lakše raditi s hobistima. Dakle, ovdje crtam sheme za obične samostalne pojedinačne 5v releje.
Spojite svoj krug kao što je prikazano u gornjem krugu fritzinga. Imajte na umu da se COM, NO (normalno otvoren) i NC (normalno zatvoren) vašeg vlastitog releja mogu nalaziti na različitim stranama / točkama. Molimo vas da ga isprobate milimetrom. Ovdje saznajte više o releju.
S našim povezanim komponentama, pokrenite svoj poslužitelj s web stranice, idite na IP vašeg Raspberry Pi i naznačite port kao što je ranije opisano, prijavite se svojim korisničkim imenom i lozinkom i trebali biste vidjeti web stranicu koja izgleda točno kao slika dolje.
Sada lako možete upravljati s četiri aplikacije AC Home s bilo kojeg mjesta bežično, samo klikom na gumbe. To će raditi s mobilnog telefona, tableta itd., A možete dodati više gumba i releja za kontrolu više uređaja. U nastavku pogledajte cijeli videozapis.
To je to, momci, hvala vam što se zadržavate na ovome. Ako imate pitanja, ispustite ih u okvir za komentare.