Iot alapú webes vezérlésű otthoni automatizálás málna pi használatával

Sziasztok srácok, üdvözöljük a mai oktatóanyagon! A Raspberry Pi egyik jó tulajdonsága az a nagyszerű képesség és könnyűség, amellyel lehetőséget ad készülékek internethez való csatlakoztatására, különös tekintettel az otthoni automatizálással kapcsolatos projektekre. Ma megvizsgáljuk a váltóáramú készülékek vezérlésének lehetőségét a weboldal gombjainak kattintásával az internet segítségével. Ennek az IoT-alapú otthoni automatizálási rendszernek a segítségével a világ bármely pontjáról vezérelheti háztartási készülékeit. Ez a webszerver bármilyen eszközről futtatható, amely futtathat HTML alkalmazásokat, például Okos telefon, táblagép, számítógép stb.

Szükséges alkatrészek:

Ennek a projektnek a követelményei két kategóriába sorolhatók: Hardver és szoftver:

I. Hardverkövetelmények:

1. Raspberry Pi 3 (Bármelyik másik verzió jó lesz)
2. 8 vagy 16 GB-os memóriakártya, amelyen Raspbian Jessie fut
3. 5v relék
4. 2n222 tranzisztorok
5. Diódák
6. Jumper huzalok
7. Csatlakozási blokkok
8. LED-ek a teszteléshez.
9. AC lámpa tesztelésére
10. Kenyérlemez és jumper kábelek
11. 220 vagy 100 ohmos ellenállás

II. Szoftverkövetelmények:

A málna pi-n futó Raspbian Jessie operációs rendszer mellett a WebIOPi keretrendszert, a PC-n futó notepad ++ programot és a filezilát is felhasználjuk fájlok másolásához a PC-ről a málna pi-re, különösen a webalkalmazás fájljaira.

Is dont kell kódot Python erre Home Automation Project, WebIOPi mindent megtesz a munkát.

A Raspberry Pi elkészítése:

Ez valamiféle szokás számomra, és azt hiszem, ez jó, az első dolog, amit minden egyes alkalommal megtenek, amikor a Raspberry Pi-t akarom használni, az a PI frissítése. Ehhez a projekthez ez a szakasz a Pi frissítési eljárásait és a WebIOPi keretrendszer telepítését fogja tartalmazni, amely segít kezelni a kommunikációt a weboldaltól a málna pi-ig. Valószínűleg meg kell állapítanom, hogy ezt vitathatatlanul könnyebb módon meg lehet csinálni a python lombik vázmunkájával is, de a barkácsolás egyik érdekessége, amikor megnézi a motorháztető alatt és elvégzi a nehéz munkát. Ott jön a barkácsolás öröme.

Az alábbi málna Pi frissítéséhez frissítse a parancsokat, majd indítsa újra az RPi-t;

sudo apt-get update sudo apt-get upgrade sudo újraindítás

Ezzel a következő dolog az, hogy telepítsük a webIOPi keretrendszert.

Győződjön meg róla, hogy az otthoni könyvtárban van;

cd ~

Használja a wget fájlt a forrásforge oldalukról;

wget

Ha a letöltés megtörtént, bontsa ki a fájlt, és menjen a könyvtárba;

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

Ezen a ponton a telepítés futtatása előtt telepítenünk kell egy javítást, mivel a WebIOPi ezen verziója nem működik az általam használt málna pi 3-mal, és nem találtam a WebIOPi olyan verzióját, amely kifejezetten a Pi 3-mal működne.

Az alábbi parancsok a patch telepítésére szolgálnak, miközben még a WebIOPi könyvtárban vannak, futtassa;

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

Ezután futtathatjuk a WebIOPi telepítési telepítését;

sudo./setup.sh

Mondja tovább az igent, ha a telepítés során bármilyen függőség telepítését kéri. Ha kész, indítsa újra a pi-t;

sudo újraindítás

A WebIOPi telepítésének tesztelése:

Mielőtt áttérne a sematikákra és a kódokra, a Raspberry Pi újbóli bekapcsolásával tesztelnie kell a WebIOPi telepítést, hogy megbizonyosodhassunk róla, hogy minden rendben működik-e a kívánt módon.

Futtassa a parancsot;

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

Miután kiadta a fenti parancsot a pi-n, irányítsa számítógépének a málna pi-hez csatlakoztatott webböngészőjét a http: // raspberrypi címre. mshome.net:8000 vagy http; // thepi IP-címe: 8000. A rendszer kéri a felhasználónév és jelszó megadását.

A felhasználónév webiopi A jelszó málna

Ezt a bejelentkezést később eltávolíthatjuk, ha szükséges, de még az otthoni automatizálási rendszere is megérdemel bizonyos fokú biztonságot annak megakadályozása érdekében, hogy bárki rendelkezzen otthoni IP-vezérlő és IOT-eszközökkel.

A bejelentkezés után nézzen körül, majd kattintson a GPIO fejléc linkre.

Ehhez a teszthez egy LED-et fogunk csatlakoztatni a GPIO 17-hez, így folytassa és állítsa kimenetként a GPIO 17-et.

Ehhez csatlakoztassa a vezetéket a málna pi-hez az alábbi vázlatok szerint.

A csatlakozás után térjen vissza a weboldalra, és kattintson a 11-es tűre a LED be- vagy kikapcsolásához. Így a WebIOPi segítségével vezérelhetjük a Raspberry Pi GPIO-t .

A teszt után, ha minden a leírtak szerint működött, akkor visszatérhetünk a terminálhoz, és leállíthatjuk a programot a CTRL + C billentyűkombinációval. Ha bármilyen problémája van ezzel a beállítással, akkor a megjegyzés szakaszon keresztül üssön le.

További információ a Webiopiról a Wiki oldalán található (http://webiopi.trouch.com/INSTALL.html)

A teszt befejezése után beállíthatjuk a fő projekt elindítását.

Webes alkalmazás készítése a Raspberry Pi otthoni automatizálásához:

Itt szerkesztjük a WebIOPi szolgáltatás alapértelmezett konfigurációját, és hozzáadjuk saját kódunkat, amelyet futtatáskor futtatni kell. Az első dolog, amit tenni fogunk, hogy a filezilla vagy bármely más FTP / SCP másolószoftvert telepítjük a számítógépünkre. Ön egyetért velem abban, hogy a pi kódolása a terminálon keresztül meglehetősen megterhelő, ezért a filezilla vagy bármely más SCP szoftver ebben a szakaszban jól jön. Mielőtt elkezdenénk írni az IoT Home Automation webalkalmazás html, css és java szkript kódjait, és áthelyeznénk őket a Raspberry Pi programba, létrehozhatjuk a projekt mappát, ahol minden webfájlunk megtalálható lesz.

Győződjön meg róla, hogy a saját könyvtárában tartózkodik a használatával, majd hozza létre a mappát, lépjen a létrehozott mappába, és hozzon létre html mappát a könyvtárban:

cd ~ mkdir webapp cd webapp mkdir html

Hozzon létre egy mappát a parancsfájlok, a CSS és a képek számára a html mappában

mkdir html / css mkdir html / img mkdir html / szkriptek

A létrehozott fájljainkkal átírhatjuk a kódokat a számítógépünkre, majd a filezilla segítségével a Pi-re léphetünk.

A JavaScript kód:

Az első kódrész, amelyet megírunk, a javascript. Egyszerű szkript a WebIOPi szolgáltatással való kommunikációhoz.

Fontos megjegyezni, hogy ehhez a projekthez webalkalmazásunk négy gombból áll, ami azt jelenti, hogy csak négy GPIO csap vezérlését tervezzük, bár bemutatónkban csak két relét fogunk vezérelni. Ellenőrizze a teljes videót a végén.

webiopi (). kész (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, "4. relé"); content.append (gomb);});

A fenti kód akkor fut, amikor a WebIOPi készen áll.

Az alábbiakban elmagyaráztuk a JavaScript kódot:

kész (function (): Ez csak arra utasítja a rendszerünket, hogy hozza létre ezt a függvényt, és futtassa, amikor a webiopi készen áll.

webiopi (). setFunction (23, "ki"); Ez segít megmondani a WebIOPi szolgáltatásnak, hogy állítsa kimenetként a GPIO23-at. Négy gombunk van itt, több is lehet belőle, ha több gombot valósít meg.

var tartalom, gomb; Ez a sor azt mondja a rendszerünknek, hogy hozzon létre egy tartalom nevű változót, és tegye a változót gombra.

tartalom = $ ("# tartalom"); A tartalmi változót továbbra is használni fogjuk a html és a css fájlokban. Tehát, amikor a #contentre hivatkozunk, a WebIOPi keretrendszer mindent létrehoz, ami hozzá tartozik.

gomb = webiopi (). createGPIOButton (17, "1. relé"); A WebIOPi különféle gombokat hozhat létre. A fenti kóddarab segít megmondani a WebIOPi szolgáltatásnak, hogy hozzon létre egy GPIO gombot, amely ebben az esetben a „Relé 1” felirattal vezérli a GPIO tűt. Ugyanez vonatkozik a többiekre is.

content.append (gomb); Csatolja ezt a kódot a html fájlban vagy máshol létrehozott gomb bármely más kódjához. További gombok hozhatók létre, amelyek mindegyike ugyanazokkal a tulajdonságokkal rendelkezik, mint ez a gomb. Ez különösen hasznos a CSS vagy a Script írásakor.

A JS fájlok létrehozása után elmentjük, majd a filezilla segítségével átmásoljuk a webapp / html / scripts fájlba, ha ugyanúgy hoztad létre a fájljaidat, mint én.

Ezzel áttérünk a CSS létrehozására. A kódot teljes egészében letöltheti a Kód részben található linkről.

A CSS-kód:

A CSS segít abban, hogy az IoT Raspberry Pi otthoni automatizálási weboldalunk szép legyen.

Azt akartam, hogy a weboldal úgy nézzen ki, mint az alábbi kép, és ennek érdekében meg kellett írnom a smarthome.css stíluslapot.

Az alábbiakban elmagyaráztuk a CSS kódot:

A CSS szkript túl terjedelmesnek tűnik, hogy ide vegye fel, ezért csak kiválasztom egy részét, és felhasználom őket a lebontáshoz. A teljes CSS-fájlt innen töltheti le. A CSS egyszerű, és csak a CSS kódon keresztül értheti meg. Könnyedén átolvashatja ezt a részt, és azonnal használhatja CSS kódunkat.

A szkript első része a webalkalmazás törzsének és az alább látható stíluslapjának felel meg;

body {háttér-szín: #ffffff; háttérkép: url ('/ img / smart.png'); háttérismétlés: nem ismétlés; háttér-helyzet: közép; háttérméret: borító; betűtípus: félkövér 18px / 25px Arial, sans-serif; szín: Világos szürke; }

Azt akarom hinni, hogy a fenti kód magától értetődő, a háttér színét #ffffff-ként állítjuk be, amely fehér, majd hozzáadunk egy háttérképet, amely az adott mappa helyén található (emlékszel a korábbi mappánk beállítására?), Biztosítjuk, hogy a kép ne ' t ismételje meg úgy, hogy a háttérismétlés tulajdonságot megismétli, majd utasítsa a CSS-t a háttér központosítására. Ezután lépünk a háttérméret, a betűtípus és a szín beállítására.

Miután elkészült a test, megírtuk a css-t, hogy a gombok szépek legyenek.

gomb {kijelző: blokk; pozíció: rokon; margó: 10px; párnázás: 0 10px; text-align: center; szövegdíszítés: nincs; szélesség: 130px; magasság: 40px; betűtípus: félkövér 18px / 25px Arial, sans-serif; fekete szín; szöveg-árnyék: 1px 1px 1px rgba (255,255,255,.22); -webkit-border-radius: 30px; -moz-határ-sugár: 30px; határ sugara: 30 képpont;

Ennek a rövidnek a megismertetése érdekében a kódban minden más dolgot megtettünk annak érdekében, hogy jól nézzen ki. Megváltoztathatja őket, hogy lássa, mi történik, azt hiszem, hogy úgy hívják, hogy próbán és hibán keresztül tanulunk, de a CSS egyik jó tulajdonsága, hogy a dolgok egyszerű angol nyelven vannak kifejezve, ami azt jelenti, hogy nagyon könnyen érthetőek. A gombblokk másik részén kevés a szöveg és a gomb árnyékának árnyéka. Van egy kis átmeneti hatása is, amely segít szépnek és reálisnak kinézni, amikor megnyomják a gombot. Ezeket külön meghatározzuk a webkit, a Firefox, az Opera stb. Számára, csak azért, hogy a weboldal minden platformon optimálisan teljesítsen.

A következő kódblokk az, hogy a WebIOPi szolgáltatás megmondja neki, hogy ez a WebIOPi szolgáltatás bemenete.

i nput {display: blokk; szélesség: 160px; magasság: 45px; }

Az utolsó dolog, amit meg akarunk tenni, hogy valamilyen jelzést adjunk, amikor a gombot megnyomtuk. Tehát a képernyőt nézheti, és a gombok színe tájékoztatja az aktuális állapotról. Ehhez az alábbi kódsor minden gombhoz megvalósult.

# gpio17.LOW {háttérszín: szürke; fekete szín; } # gpio17.HIGH {háttérszín: Piros; szín: Világos szürke; }

A fenti kódsorok egyszerűen megváltoztatják a gomb színét az aktuális állapota alapján. Ha a gomb ki van kapcsolva (LOW), akkor a gombok háttérszíne szürkévé válik, hogy inaktív legyen, és amikor be van kapcsolva (HIGH), a gomb háttérszíne PIROS lesz.

A CSS a táskában lehetővé teszi a smarthome.css fájlként való mentést, majd a filezilla (vagy bármely más használni kívánt SCP szoftver) segítségével áthelyezi a málna pi stílusaink mappájába, és rögzíti az utolsó darabot, a html kódot. Ne felejtse el innen letölteni a teljes CSS-t.

HTML kód:

A html kód mindent összekapcsol, a javascript és a stíluslap.

Nyomógomb; szalonnát kapni

A fejcímkén belül vannak nagyon fontos jellemzők.

A fenti kódsor lehetővé teszi a webalkalmazás mentését egy asztali számítógépre króm vagy mobil szafari segítségével. Ezt a chrome menü segítségével lehet megtenni. Ez lehetővé teszi az alkalmazás könnyű indítását a mobil asztali vagy otthoni használatból.

Az alábbi következő kódsor valamiféle reakciót ad a webalkalmazásra. Lehetővé teszi, hogy elfoglalja minden olyan eszköz képernyőjét, amelyen elindította.

A következő kódsor deklarálja a weboldal címsorában látható címet.

A következő négy kódsor mindegyike azt a funkciót látja el, hogy a html kódot összekapcsolja több erőforrással, amire szüksége van.

A fenti első sor a WebIOPi keretrendszer JavaScript-jét hívja meg, amelyet keményen kódolnak a szerver gyökérzetében. Ezt minden alkalommal meg kell hívni, amikor a WebIOPi-t használni kívánja.

A második sor a html oldalt a jQuery szkriptünkre, a harmadik a stíluslapunk irányába mutat. Végül az utolsó sor segít beállítani egy ikont, amelyet a mobil asztalon használhatunk arra az esetre, ha úgy döntünk, hogy webalkalmazásként vagy a weboldal faviconaként használjuk.

A html kód törzs szakasza csak megszakító címkéket tartalmaz, hogy a gombok megfelelően illeszkedjenek az alábbi sorhoz, és megmondják a html kódnak, hogy jelenítse meg a JavaScript fájlban leírtakat. Az id = „content” emlékeztetnie kell a gombunk tartalmi nyilatkozatára a JavaScript kód alatt.

Ismeri a fúrót, a html kódot index.html néven, és a filezilla segítségével lépjen át a Pi html mappájába. Az összes CSS, JS és HTML fájlt innen töltheti le.

WebIOPi szerver szerkesztések otthoni automatizáláshoz:

Ebben a szakaszban készen állunk a sémák készítésének megkezdésére és a webalkalmazás tesztelésére, de előtte meg kell szerkesztenünk a webiopi szolgáltatás konfigurációs fájlját, hogy a html mappánkból származó adatokat használja a vele együtt kapott konfigurációs fájlok helyett..

A konfiguráció szerkesztéséhez futtassa a következőket root jogosultsággal;

sudo nano / etc / webiopi / config

Keresse meg a konfigurációs fájl http szakaszát, ellenőrizze azt a részt, ahol van valami, #A doc-root segítségével módosíthatja az alapértelmezett HTML és erőforrás fájlok helyét

Kommenteljen bármit alatta a # használatával, majd ha a mappája az enyémhez hasonlóan van beállítva, mutassa a doc-root-ot a projektfájl elérési útjára

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

Mentés és kilépés. Megváltoztathatja a portot 8000-től, arra az esetre, ha egy másik kiszolgáló futna a pi-n az adott port használatával. Ha nem ment, és kilép, ahogy haladunk.

Fontos megjegyezni, hogy a paranccsal megváltoztathatja a WebIOPi szolgáltatás jelszavát;

sudo webiopi-passwd

Ez új felhasználónév és jelszó megadását kéri. Ez teljesen eltávolítható, de a biztonság fontos?

Végül futtassa a WebIOPi szolgáltatást az alábbi parancs kiadásával:

sudo /etc/init.d/webiopi start

A szerver állapotát a következővel lehet ellenőrizni:

sudo /etc/init.d/webiopi állapot

Használatával le lehet állítani a futást;

sudo /etc/init.d/webiopi stop

A WebIOPi indításkor történő futtatásához állítsa be a;

A sudo update-rc.d webiopi alapértelmezett beállításai

Ha vissza akar állítani, és le akarja állítani a futást indításkor, használja a;

sudo update-rc.d webiopi eltávolítás

Áramkör és magyarázat:

Miután elkészült a szoftver telepítésünk, mindannyian készen állunk a webes vezérlésű otthoni készülék projekt sémáinak létrehozására.

Noha nem tudtam kezet vetni a relé modulokra, amelyekkel úgy érzem, hogy a hobbisták számára könnyebb dolgozni. Tehát itt rajzolom le a szokásos önálló 5v relék vázlatát.

Csatlakoztassa az áramkört a fenti frittáló áramkör szerint. Meg kell jegyeznie, hogy a saját reléjének COM, NO (általában nyitva) és NC (általában Bezár) különböző oldalain / pontjain helyezkedhet el. Kérjük, használjon millimétert a teszteléshez. Tudjon meg többet a váltóról itt.

Összekapcsolt komponenseinkkel indítsa el a szervert egy weboldalról, lépjen a Raspberry Pi IP-címére, és jelezze a portot a korábban leírtak szerint, jelentkezzen be felhasználónevével és jelszavával, és látnia kell egy weboldalt, amely pontosan úgy néz ki, mint az alábbi kép.

Mostantól könnyedén , bárhonnan, vezeték nélkül vezérelhet négy váltóáramú otthoni készüléket, csupán a gombokra kattintva. Ez a Mobilephone, a tablet stb. Segítségével működik, és további gombokat és reléket adhat hozzá több eszköz vezérléséhez. Ellenőrizze az alábbi videót.

Ez az, srácok, köszönöm, hogy kitartottál ezért. Ha bármilyen kérdése van, dobja be a megjegyzés mezőbe.