Domáca automatizácia riadená internetom s využitím maliny pi

Ahoj chlapci, vitajte v dnešnom tutoriáli, jednou z dobrých vecí na Raspberry Pi je skvelá schopnosť a ľahkosť, s ktorou vám dáva možnosť pripojiť zariadenia k internetu, najmä pre projekty súvisiace s domácou automatizáciou. Dnes preskúmame možnosť ovládania sieťových spotrebičov kliknutím na tlačidlá na webovej stránke pomocou internetu. Pomocou tohto systému domácej automatizácie založenej na IoT môžete ovládať svoje domáce spotrebiče odkiaľkoľvek na svete. Tento webový server je možné spustiť z ľubovoľného zariadenia, na ktorom je možné spúšťať aplikácie HTML, ako napríklad Smart Phone, tablet, počítač atď.

Požadované komponenty:

Pre tento projekt budú požiadavky spadať do dvoch kategórií, Hardvér a softvér:

I. Hardvérové ​​požiadavky:

1. Raspberry Pi 3 (akákoľvek iná verzia bude pekná)
2. Pamäťová karta 8 alebo 16 GB so spustenou Raspbian Jessie
3. 5v relé
4. 2n222 tranzistorov
5. Diódy
6. Prepojovacie drôty
7. Bloky pripojenia
8. LED na testovanie.
9. AC lampa na test
10. Nepájivé pole a štartovacie káble
11. Rezistor 220 alebo 100 ohmov

II. Softvérové ​​požiadavky:

Okrem operačného systému Raspbian Jessie bežiaceho na malinovej pi tiež budeme na kopírovanie súborov z PC do malinovej pi používať predovšetkým prácu s rámcom WebIOPi, poznámkový blok ++ spustený na vašom PC a filezila, najmä súbory webových aplikácií.

Pre tento projekt domácej automatizácie tiež nemusíte kódovať v jazyku Python, WebIOPi urobí všetku prácu.

Príprava Raspberry Pi:

Je to pre mňa nejaký zvyk a myslím si, že je to dobrý. Prvá vec, ktorú urobím vždy, keď chcem použiť Raspberry Pi, je aktualizácia PI. Pre tento projekt bude táto časť obsahovať postupy aktualizácie Pi a inštaláciu rámca WebIOPi, ktorý nám pomôže zvládnuť komunikáciu z webovej stránky na malinovú pi. Pravdepodobne by som mal povedať, že to možno urobiť aj oveľa jednoduchšie pomocou práce rámu Pythonu, ale jedna zo zaujímavých vecí o DIY je, keď sa pozriete pod kapotu a urobíte náročnú prácu. Tam prichádza všetka radosť z domácich majstrov.

Ak chcete aktualizovať malinové Pi pod príkazmi a potom reštartovať RPi;

sudo apt-get aktualizácia sudo apt-get aktualizácia sudo reboot

Po dokončení je ďalšou vecou nainštalovať rámec webIOPi.

Uistite sa, že ste v domovskom adresári pomocou;

cd ~

Použite wget na získanie súboru z ich stránky sourceforge;

wget

Po dokončení sťahovania rozbaľte súbor a choďte do adresára;

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

V tomto okamihu pred spustením inštalácie musíme nainštalovať opravu, pretože táto verzia WebIOPi nefunguje s malinou pi 3, ktorú používam, a nenašiel som verziu WebIOPi, ktorá by výslovne fungovala s Pi 3.

Príkazy uvedené nižšie sa používajú na inštaláciu opravy, kým sú ešte v adresári WebIOPi, spustite;

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

Potom môžeme spustiť inštaláciu inštalácie pre WebIOPi pomocou;

sudo./setup.sh

Ak sa zobrazí výzva na inštaláciu akýchkoľvek závislostí počas inštalácie, stále hovorte áno. Po dokončení reštartujte svoje pi;

sudo reštart

Vyskúšajte inštaláciu WebIOPi:

Predtým, ako sa prihlásime k schémam a kódom, bude Raspberry Pi znova zapnuté, budeme musieť otestovať našu inštaláciu WebIOPi, aby sme sa uistili, že všetko funguje podľa vašich predstáv.

Spustite príkaz;

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

Po zadaní vyššie uvedeného príkazu na pi nasmerujte webový prehľadávač vášho počítača pripojeného k malinovej pí na adresu http: // raspberrypi. mshome.net:8000 alebo http; // thepi'sIPaddress: 8000. Systém vás vyzve na zadanie používateľského mena a hesla.

Užívateľské meno je webiopi Heslo je malinové

Toto prihlásenie je možné v prípade potreby neskôr odstrániť, ale aj váš systém domácej automatizácie si zaslúži vyššiu úroveň zabezpečenia, aby zabránil komukoľvek so zariadeniami ovládajúcimi IP a zariadeniami IOT vo vašej domácnosti.

Po prihlásení sa rozhliadnite a potom kliknite na odkaz na hlavičku GPIO.

Pre tento test budeme pripájať LED k GPIO 17, takže pokračujte a nastavte GPIO 17 ako výstup.

Keď je to hotové, pripojte žiarovku k malinovej pí tak, ako je to znázornené na schémach nižšie.

Po pripojení sa vráťte na webovú stránku a kliknutím na tlačidlo PIN 11 zapnite alebo vypnite LED. Týmto spôsobom môžeme ovládať Raspberry Pi GPIO pomocou WebIOPi.

Po teste, ak všetko fungovalo tak, ako je popísané, môžeme sa vrátiť späť k terminálu a program zastaviť pomocou kombinácie klávesov CTRL + C. Ak máte s týmto nastavením akýkoľvek problém, stlačte ma v sekcii komentárov.

Viac informácií o Webiopi nájdete na jeho wiki stránke (http://webiopi.trouch.com/INSTALL.html)

Po dokončení testu sme pripravení zahájiť hlavný projekt.

Budovanie webovej aplikácie pre domácu automatizáciu Raspberry Pi:

Tu upravíme predvolenú konfiguráciu služby WebIOPi a pridáme vlastný kód, ktorý sa má spustiť pri volaní. Prvá vec, ktorú urobíme, je inštalácia súboru filezilla alebo iného softvéru na kopírovanie FTP / SCP do nášho počítača. Súhlasíte so mnou, že kódovanie pí cez terminál je dosť namáhavé, takže v tejto fáze vám príde vhod filezilla alebo akýkoľvek iný softvér SCP. Predtým, ako začneme písať kódy skriptov html, css a java pre túto webovú aplikáciu automatizácie IoT Home a presunieme ich do formátu Raspberry Pi, vytvorme priečinok projektu, kde budú všetky naše webové súbory.

Uistite sa, že ste v domovskom adresári pomocou, potom vytvorte priečinok, choďte do vytvoreného priečinka a v priečinku vytvorte priečinok html:

cd ~ mkdir webapp cd webapp mkdir html

Vytvorte priečinok pre skripty, CSS a obrázky vo vnútri priečinka html

mkdir html / css mkdir html / img mkdir html / skripty

S našimi vytvorenými súbormi umožnime prejsť na písanie kódov na našom PC a potom prejsť na Pi cez filezilla.

Kód JavaScript:

Prvý kúsok kódu, ktorý napíšeme, je kód JavaScriptu. Je to jednoduchý skript na komunikáciu so službou WebIOPi.

Je dôležité poznamenať, že pre tento projekt bude naša webová aplikácia pozostávať zo štyroch tlačidiel, čo znamená, že plánujeme ovládať iba štyri piny GPIO, hoci v našej ukážke budeme ovládať iba dve relé. Na konci si pozrite celé video.

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, „Relé 4“); content.append (tlačidlo);});

Vyššie uvedený kód sa spustí, keď je WebIOPi pripravený.

Ďalej sme vysvetlili kód JavaScript:

webiopi (). ready (function (): Týmto iba poučíte náš systém, aby vytvoril túto funkciu a spustil ju, keď je webiopi pripravený.

webiopi (). setFunction (23, „out“); To nám pomáha povedať službe WebIOPi, aby nastavila GPIO23 ako výstup. Máme tu štyri tlačidlá. Ak implementujete viac tlačidiel, mohli by ste ich mať viac.

var obsah, gombík; Tento riadok hovorí nášmu systému, aby vytvoril premennú s názvom obsah a urobil z nej tlačidlo.

obsah = $ ("# obsah"); Premenná obsahu sa bude stále používať v našich html a css. Takže keď sa zmienime o #content, rámec WebIOPi vytvorí všetko, čo je s ním spojené.

button = webiopi (). createGPIOButton (17, "Relé 1"); WebIOPi môže vytvárať rôzne druhy tlačidiel. Vyššie uvedená časť kódu nám pomáha povedať službe WebIOPi, aby vytvorila tlačidlo GPIO, ktoré ovláda pin GPIO, v tomto prípade 17 s označením „Relé 1“. To isté platí aj pre ostatné.

content.append (tlačidlo); Pripojte tento kód k inému kódu pre tlačidlo vytvorené buď v html súbore alebo inde. Je možné vytvoriť viac tlačidiel a všetky budú mať rovnaké vlastnosti ako toto tlačidlo. To je obzvlášť užitočné pri písaní CSS alebo Script.

Po vytvorení súborov JS ich uložíme a potom skopírujeme pomocou súboru filezilla do webapp / html / skriptov, ak ste súbory vytvorili rovnakým spôsobom ako ja.

Po dokončení sme sa dostali k vytvoreniu CSS. Celý kód si môžete stiahnuť z odkazu uvedeného v časti Kód na konci.

Kód CSS:

CSS nám pomáha, aby naša webová stránka domácej automatizácie IoT Raspberry Pi vyzerala pekne.

Chcel som, aby webová stránka vyzerala ako na obrázku nižšie, a aby som to dosiahla, musím napísať šablónu štýlov smarthome.css .

Ďalej sme vysvetlili kód CSS:

Skript CSS je príliš objemný na to, aby som ho sem zahrnul, takže iba vyberiem jeho časť a použijem ich na rozdelenie. Celý súbor CSS si môžete stiahnuť tu. CSS je jednoduché a pochopíte ho iba tak, že si prejdete kód CSS. Túto časť môžete ľahko skĺznuť a ihneď použiť náš kód CSS.

Prvá časť skriptu predstavuje šablónu štýlov pre telo webovej aplikácie a je uvedená nižšie;

body {background-color: #ffffff; background-image: url ('/ img / smart.png'); background-repeat: no-repeat; Pozícia na pozadí: stred; veľkosť pozadia: obal; písmo: tučné 18px / 25px Arial, bezpätkové; farba: LightGray; }

Chcem uveriť, že vyššie uvedený kód je samozrejmý, nastavili sme farbu pozadia na #ffffff, ktorá je biela, a potom pridáme obrázok pozadia umiestnený v danom umiestnení priečinka (Pamätáte si na naše staršie nastavenie priečinkov?), Zabezpečíme, aby obraz nebol t opakujte nastavením vlastnosti background-repeat na no-repeat, potom dajte CSS pokyn, aby centralizovala pozadie. Potom presunieme nastavenie veľkosti pozadia, písma a farby.

Keď je telo hotové, napísali sme css pre tlačidlá, aby vyzerali pekne.

tlačidlo {display: block; poloha: relatívna; okraj: 10px; výplň: 0 10px; zarovnanie textu: na stred; dekorácia textu: žiadny; šírka: 130px; výška: 40px; písmo: tučné 18px / 25px Arial, bezpätkové; farba: čierna; textový tieň: 1px 1px 1px rgba (255 255 255, 0,22); -webkit-border-radius: 30px; -moz-border-radius: 30px; polomer okraja: 30px;

Aby sme zostali struční, urobili sme aj všetky ďalšie veci v kóde, aby vyzeral dobre. Môžete ich zmeniť, aby ste videli, čo sa stane, myslím, že sa to volá učenie pomocou pokusov a omylov, ale jedna dobrá vec v CSS je, že veci sú vyjadrené obyčajnou angličtinou, čo znamená, že sú ľahko pochopiteľné. Druhá časť bloku tlačidiel má niekoľko doplnkov na tieňovanie textu na tlačidle a na tieni tlačidla. Má tiež mierny prechodový efekt, vďaka ktorému vyzerá pri stlačení tlačidla pekne a realisticky. Tieto sú definované osobitne pre webkit, firefox, operu atď., Aby sa zaistila optimálna výkonnosť webovej stránky na všetkých platformách.

Ďalším blokom kódu je služba WebIOPi, ktorá mu oznámi, že ide o vstup do služby WebIOPi.

i nput {display: block; šírka: 160px; výška: 45px; }

Posledná vec, ktorú chceme urobiť, je dať nejaký signál, keď bolo stlačené tlačidlo. Môžete sa tak trochu pozrieť na obrazovku a farba tlačidiel vám oznámiť aktuálny stav. Za týmto účelom bol pre každé jednotlivé tlačidlo implementovaný riadok kódu uvedený nižšie.

# gpio17.LOW {farba pozadia: šedá; farba: čierna; } # gpio17.HIGH {farba pozadia: červená; farba: LightGray; }

Riadky kódov vyššie jednoducho menia farbu tlačidla na základe jeho aktuálneho stavu. Keď je tlačidlo vypnuté (LOW), farba pozadia tlačidiel bude sivá, aby sa zobrazilo neaktívne, a keď je zapnutá (HIGH), farba pozadia tlačidla bude ČERVENÁ.

CSS v taške, umožní uložiť ako smarthome.css, potom ho presunúť cez filezilla (alebo akýkoľvek iný softvér SCP, ktorý chcete použiť) do priečinka štýlov na našej malinovej pi a opraviť posledný kúsok, html kód. Nezabudnite si odtiaľto stiahnuť úplné CSS.

HTML kód:

HTML kód spája všetko, javascript a šablónu štýlov.

Tlačidlo; prijať slaninu

V hlavovej značke existujú niektoré veľmi dôležité funkcie.

Riadok kódu vyššie umožňuje uložiť webovú aplikáciu na mobilnú plochu pomocou chrómu alebo mobilného safari. To je možné vykonať pomocou ponuky chrómu. Vďaka tomu je aplikácia ľahko spustiteľná z mobilného počítača alebo domácnosti.

Ďalší riadok kódu uvedený nižšie poskytuje webovej aplikácii určitú odozvu. Umožňuje mu obsadiť obrazovku ľubovoľného zariadenia, na ktorom bola spustená.

Ďalší riadok kódu deklaruje nadpis zobrazený v záhlaví webovej stránky.

Nasledujúci štyri riadky kódov vykonávajú funkciu prepojenia html kódu s niekoľkými prostriedkami, ktoré potrebuje, aby fungoval podľa želania.

Prvý riadok vyššie výziev hlavným WebIOPi framework JavaScript, ktorý je pevne v koreňovom adresári servera. Toto je potrebné volať zakaždým, keď sa má používať WebIOPi.

Druhý riadok upozorňuje na html stránku nášho jQuery skript, tretí body v smere našej štýlov. Posledný riadok nakoniec pomáha nastaviť ikonu, ktorá sa má použiť na mobilnej pracovnej ploche pre prípad, že by sme sa rozhodli použiť ju ako webovú aplikáciu alebo ako favicon pre webovú stránku.

Časť tela html kódu obsahuje iba značky prerušenia, aby sa zabezpečilo správne zarovnanie tlačidiel s riadkom nižšie, ktorý nášmu html kódu hovorí, aby zobrazoval to, čo je napísané v súbore JavaScript. Identifikátor id = ”content” by vám mal pripomenúť vyhlásenie o obsahu pre naše tlačidlo skôr pod kódom JavaScript.

Cvičenie, html kód poznáte ako index.html a presuniete sa do html zložky na Pi cez filezilla. Tu si môžete stiahnuť všetky súbory CSS, JS a HTML.

Úpravy servera WebIOPi pre domácu automatizáciu:

V tejto fáze sme pripravení začať vytvárať naše schémy a testovať našu webovú aplikáciu, ale dovtedy musíme upraviť konfiguračný súbor služby webiopi, aby ukázal, že namiesto konfiguračných súborov, ktoré boli dodané, budú použité údaje z nášho priečinka html..

Ak chcete upraviť konfiguráciu, spustite nasledujúci príkaz s oprávnením root;

sudo nano / etc / webiopi / config

V konfiguračnom súbore vyhľadajte časť http. V sekcii, kde máte niečo podobné, skontrolujte # Použite doc-root na zmenu predvoleného umiestnenia HTML a zdrojových súborov.

Komentujte čokoľvek pod ním pomocou #, potom ak je váš priečinok nastavený ako môj, nasmerujte svoj doc-root na cestu k vášmu súboru projektu

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

Uložiť a ukončiť. Môžete tiež zmeniť port z 8000, v prípade, že na tomto pi beží iný server využívajúci tento port. Ak nie, uložte a ukončite, ako ideme ďalej.

Je dôležité si uvedomiť, že heslo služby WebIOPi môžete zmeniť pomocou príkazu;

sudo webiopi-passwd

Zobrazí sa výzva na zadanie nového používateľského mena a hesla. To sa dá tiež úplne odstrániť, ale bezpečnosť je dôležitá, že?

Nakoniec spustite službu WebIOPi zadaním nasledujúceho príkazu:

sudo /etc/init.d/webiopi start

Stav servera je možné skontrolovať pomocou;

sudo /etc/init.d/webiopi status

Dá sa zastaviť spustením pomocou;

sudo /etc/init.d/webiopi stop

Ak chcete nastaviť WebIOPi tak, aby sa spúšťal pri bootovaní, použite;

predvolené nastavenia sudo update-rc.d webiopi

Ak chcete cúvať a zabrániť jej chodu pri štarte, použite;

sudo update-rc.d webiopi odstrániť

Schéma zapojenia a vysvetlenie:

Po nastavení nášho softvéru sme všetci pripravení začať vytvárať schémy pre tento webom riadený projekt domácich spotrebičov.

Aj keď som nemohol položiť ruky na reléové moduly, s ktorými sa podľa mňa ľahšie pracuje pre fanúšikov. Takže tu nakreslím schémy pre bežné samostatné samostatné 5V relé.

Pripojte svoj obvod tak, ako je to znázornené na fritovacom okruhu vyššie. Mali by ste pamätať na to, že COM, NO (normálne otvorené) a NC (normálne zatvorené) vášho vlastného relé môžu byť umiestnené na rôznych stranách / bodoch. Vyskúšajte to prosím milimetrom. Viac informácií o relé sa dozviete tu.

Po pripojení našich komponentov spustite server z webovej stránky, prejdite na adresu IP vášho Raspberry Pi a označte port, ako je popísané vyššie, prihláste sa pomocou svojho používateľského mena a hesla a mala by sa vám zobraziť webová stránka, ktorá vyzerá presne ako na obrázku nižšie..

Teraz môžete bezdrôtovo ovládať štyri domáce spotrebiče AC odkiaľkoľvek, iba kliknutím na tlačidlá. Toto bude fungovať od mobilných telefónov, tabletov atď. A môžete pridať ďalšie tlačidlá a relé na ovládanie viacerých zariadení. Skontrolujte celé video nižšie.

To je to, chlapci, ďakujem, že ste sa tu držali. Ak máte nejaké otázky, vložte ich do poľa pre poznámky.