- Vaaditut komponentit:
- Vadelma Pi: n valmistelu:
- Testaa WebIOPi-asennus:
- Verkkosovelluksen rakentaminen Raspberry Pi -automaatioon:
- WebIOPi-palvelimen muokkaukset kotiautomaatioon:
- Piirikaavio ja selitys:
Hei kaverit, tervetuloa tämän päivän opetusohjelmaan, yksi Raspberry Pi: n hyvistä asioista on se suuri kyky ja helppous, jolla se antaa sinulle mahdollisuuden liittää laitteita Internetiin erityisesti kotiautomaatioon liittyviin projekteihin. Tänään aiomme tutkia mahdollisuutta hallita verkkolaitteita napsauttamalla verkkosivun painikkeita Internetin kautta. Tämän IoT-pohjaisen kodin automaatiojärjestelmän avulla voit hallita kodinkoneitasi mistä päin maailmaa tahansa. Tätä verkkopalvelinta voidaan käyttää millä tahansa laitteella, joka voi käyttää HTML-sovelluksia, kuten älypuhelimella, tabletilla, tietokoneella jne.
Vaaditut komponentit:
Tämän projektin vaatimukset jaetaan kahteen luokkaan, laitteisto ja ohjelmisto:
Laitteistovaatimukset:
- Raspberry Pi 3 (kaikki muut versiot ovat mukavia)
- Muistikortti 8 tai 16 Gt, jossa Raspbian Jessie
- 5v releet
- 2n222 transistorit
- Diodit
- Neulalangat
- Liitäntälohkot
- LEDit testattavaksi.
- AC-lamppu testattavaksi
- Leipälauta- ja hyppyjohdot
- 220 tai 100 ohmin vastus
II. Ohjelmistovaatimukset:
Vadelma-pi: ssä toimivan Raspbian Jessie -käyttöjärjestelmän lisäksi käytämme myös WebIOPi-kehystyötä, tietokoneellasi käynnissä olevaa notepad ++ -ohjelmaa ja filezilaa tiedostojen kopioimiseen tietokoneesta vadelma-pi-laitteeseen, etenkin web-sovellustiedostot.
Lisäksi sinun ei tarvitse koodata Pythonissa tälle kotiautomaatioprojektille, WebIOPi tekee kaiken työn.
Vadelma Pi: n valmistelu:
Se on minulle jonkinlainen tapa ja mielestäni se on hyvä, ensimmäinen asia, jonka teen joka kerta, kun haluan käyttää Raspberry Pi: tä, on päivittää PI. Tätä projektia varten tämä osa käsittää Pi-päivitysprosessit ja WebIOPi-kehyksen asentamisen, mikä auttaa meitä käsittelemään viestintää verkkosivulta vadelma-pi: lle. Minun pitäisi todennäköisesti sanoa, että tämä voidaan tehdä myös kiistatta helpommalla tavalla käyttämällä python Flask -kehystyötä, mutta yksi mielenkiintoinen asia DIY: ssä on, kun katsot hupun alle ja teet vaikean työn. Siellä tulee koko DIY-ilo.
Voit päivittää Raspberry Pi alla komentoja ja käynnistä vähittäishintaindeksin;
sudo apt-get päivitys sudo apt-get päivitys sudo uudelleenkäynnistys
Kun tämä on tehty, seuraava asia on, että asennamme webIOPi-kehyksen.
Varmista, että olet kotihakemistossa käyttämällä;
cd ~
Käytä wget-sovellusta saadaksesi tiedoston heidän sourceforge-sivulta;
wget
Kun lataus on valmis, pura tiedosto ja siirry hakemistoon;
tar xvzf WebIOPi-0.7.1.tar.gz cd WebIOPi-0.7.1 /
Tässä vaiheessa ennen asennuksen suorittamista meidän on asennettava korjaustiedosto, koska tämä WebIOPi-versio ei toimi käyttämäni vadelma pi 3: n kanssa, enkä löytänyt nimenomaisesti Pi 3: n kanssa yhteensopivaa WebIOPi-versiota..
Alla olevia komentoja käytetään korjaustiedoston asentamiseen ollessaan edelleen WebIOPi-hakemistossa, suorita;
wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch patch -p1 -i webiopi-pi2bplus.patch
Sitten voimme suorittaa WebIOPin asennusasennuksen käyttämällä;
sudo./setup.sh
Jatka kyllä, jos sinua pyydetään asentamaan riippuvuudet asennuksen aikana. Kun olet valmis, käynnistä pi uudelleen uudelleen;
sudo uudelleenkäynnistä
Testaa WebIOPi-asennus:
Ennen kuin siirrymme kaavioon ja koodeihin, Kun Raspberry Pi on jälleen päällä, meidän on testattava WebIOPi-asennuksemme varmistaaksemme, että kaikki toimii oikein halutulla tavalla.
Suorita komento;
sudo webiopi -d -c / etc / webiopi / config
Kun olet antanut yllä olevan komennon pi: llä, osoita vadelma pi : hen liitetyn tietokoneesi verkkoselain osoitteeseen http: // raspberrypi. mshome.net:8000 tai http; // thepin IP-osoite: 8000. Järjestelmä pyytää sinua antamaan käyttäjänimen ja salasanan.
Käyttäjätunnus on webiopi Salasana on vadelma
Tämä sisäänkirjautuminen voidaan poistaa myöhemmin haluttaessa, mutta jopa kotiautomaatiojärjestelmä ansaitsee jonkin verran ylimääräistä tietoturvaa estääkseen kenenkään, jolla on kotiisi IP-ohjauslaitteita ja IOT-laitteita.
Sisäänkirjautumisen jälkeen katso ympärillesi ja napsauta sitten GPIO-otsikkolinkkiä.
Tätä testiä varten yhdistämme LEDin GPIO 17: een, joten jatka ja aseta GPIO 17 lähdöksi.
Kun tämä on tehty, kytke johto vadelma-piiisi alla olevien kaavioiden mukaisesti.
Kun yhteys on muodostettu, palaa takaisin verkkosivulle ja napsauta nasta 11 -painiketta kytkeäksesi LED: n päälle tai pois päältä. Tällä tavalla voimme hallita Raspberry Pi GPIO: ta WebIOPin avulla.
Testin jälkeen, jos kaikki toimi kuvatulla tavalla, voimme palata päätelaitteeseen ja pysäyttää ohjelman näppäimillä CTRL + C.Jos sinulla on ongelmia tämän asennuksen kanssa, osuta minua kommenttiosion kautta.
Lisätietoja Webiopista löytyy sen Wiki-sivulta (http://webiopi.trouch.com/INSTALL.html)
Kun testi on valmis, asetamme sitten aloittaa pääprojektin.
Verkkosovelluksen rakentaminen Raspberry Pi -automaatioon:
Tässä muokataan WebIOPi-palvelun oletusasetuksia ja lisätään oma koodi, joka suoritetaan soitettaessa. Ensimmäinen asia, jonka teemme, on saada filezilla tai jokin muu FTP / SCP-kopiointiohjelmisto asennettuna tietokoneellemme. Olet kanssani samaa mieltä siitä, että pi: n koodaaminen päätelaitteen kautta on melko stressaavaa, joten filezilla tai mikä tahansa muu SCP-ohjelmisto on kätevä tässä vaiheessa. Ennen kuin aloitamme html-, css- ja java-komentosarjakoodien kirjoittamisen tälle IoT Home -automaatio -verkkosovellukselle ja siirrämme ne Raspberry Pi -ohjelmaan, voimme luoda projektikansion, johon kaikki verkkotiedostomme ovat.
Varmista, että olet kotihakemistossa käyttämällä, luo sitten kansio, siirry luotuun kansioon ja luo html-kansio hakemistoon:
cd ~ mkdir webapp cd webapp mkdir html
Luo kansio skriptejä, CSS: ää ja kuvia varten HTML-kansioon
mkdir html / css mkdir html / img mkdir html / skriptit
Luomiemme tiedostojen avulla voimme siirtyä kirjoittamaan koodit tietokoneellemme ja siirtyä sitten Pi: ään filezillan kautta.
JavaScript-koodi:
Ensimmäinen kirjoitettava koodi on javascript. Sen yksinkertainen komentosarja kommunikoida WebIOPi-palvelun kanssa.
On tärkeää huomata, että tätä projektia varten verkkosovelluksemme koostuu neljästä painikkeesta, mikä tarkoittaa, että aiomme hallita vain neljää GPIO-nastaa, vaikka ohjaamme vain kahta releitä esittelyssä. Tarkista koko video lopussa.
webiopi (). valmis (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, "Relay 4"); content.append (painike);});
Yllä oleva koodi suoritetaan, kun WebIOPi on valmis.
Alla on selitetty JavaScript-koodi:
valmis (function (): Tämä vain kehottaa järjestelmäämme luomaan tämän toiminnon ja suorittamaan sen, kun webiopi on valmis.
webiopi (). setFunction (23, "ulos"); Tämä auttaa meitä kertomaan WebIOPi-palvelulle asettamaan GPIO23: n lähdöksi. Meillä on täällä neljä painiketta, sinulla voi olla enemmän sitä, jos otat käyttöön enemmän painikkeita.
var sisältö, painike; Tämä rivi kehottaa järjestelmäämme luomaan muuttujan nimeltä sisältö ja muuttamaan muuttujan painikkeeksi.
sisältö = $ ("# sisältö"); Sisältömuuttujaa käytetään edelleen html- ja css-tiedostoissamme. Joten kun viitataan # sisältöön, WebIOPi-kehys luo kaiken siihen liittyvän.
painike = webiopi (). createGPIOButton (17, "Rele 1"); WebIOPi voi luoda erilaisia painikkeita. Yllä oleva koodinpätkä auttaa meitä kertomaan WebIOPi-palvelulle luomaan GPIO-painikkeen, joka ohjaa GPIO-nastaa tässä tapauksessa 17 nimeltään "Relay 1". Sama pätee muihin.
content.append (painike); Liitä tämä koodi mihin tahansa muuhun HTML-tiedostossa tai muualla luodun painikkeen koodiin. Lisää painikkeita voidaan luoda, ja niillä kaikilla on samat ominaisuudet kuin tällä painikkeella. Tämä on erityisen hyödyllistä kirjoitettaessa CSS: ää tai komentosarjaa.
Kun olet luonut JS-tiedostot, tallennamme sen ja kopioimme sen sitten filezillan avulla webapp / html / skripteihin, jos loit tiedostosi samalla tavalla kuin minä.
Tämän jälkeen siirrymme CSS: n luomiseen. Voit ladata koodin kokonaan Koodi-osan lopussa olevasta linkistä.
CSS-koodi:
CSS auttaa meitä tekemään IoT Raspberry Pi -automaatio-verkkosivustostamme kauniin.
Halusin verkkosivun näyttävän alla olevalta kuvalta ja piti siis kirjoittaa smarthome.css- tyylitaulukko sen saavuttamiseksi.
Alla on selitetty CSS-koodi:
CSS-komentosarja tuntuu liian isolta sisällyttää tähän, joten valitsen vain osan siitä ja käytän niitä erittelyyn. Voit ladata koko CSS-tiedoston täältä. CSS on helppoa ja voit ymmärtää sen vain käymällä läpi CSS-koodin. Voit helposti lukea tämän osan ja käyttää CSS-koodia heti.
Komentosarjan ensimmäinen osa edustaa verkkosovelluksen rungon ja sen alla olevan tyylitaulukkoa.
body {tausta-väri: #ffffff; taustakuva: url ('/ img / smart.png'); tausta-toisto: ei-toista; taustan sijainti: keskellä; taustakoko: kansi; fontti: lihavoitu 18px / 25px Arial, sans-serif; väri: vaaleanharmaa; }
Haluan uskoa, että yllä oleva koodi on itsestään selvä, asetamme taustaväriksi #ffffff, joka on valkoinen, ja sitten lisätään taustakuva, joka sijaitsee kyseisessä kansiossa (muistatko aikaisemman kansion asetukset?), Varmistamme, että kuva ei t toista asettamalla tausta-toisto-ominaisuudeksi ei-toistoa ja kehottaa sitten CSS: ää keskittämään tausta. Sitten siirrymme asettamaan taustakoon, fontin ja värin.
Kun runko oli tehty, kirjoitimme painikkeiden css: n näyttämään kauniilta.
painike {display: block; asema: suhteellinen; marginaali: 10px; pehmuste: 0 10px; tekstin tasaus: keskellä; tekstikoristelu: ei mitään; leveys: 130px; korkeus: 40px; fontti: lihavoitu 18px / 25px Arial, sans-serif; väri musta; teksti-varjo: 1px 1px 1px rgba (255,255,255,.22); -webkit-raja-säde: 30px; -moz-raja-säde: 30px; reunan säde: 30 kuvapistettä;
Tämän lyhenteen pitämiseksi kaikki muutkin koodin asiat tehtiin, jotta se näyttää hyvältä. Voit muuttaa niitä nähdäksesi, mitä tapahtuu, mielestäni sitä kutsutaan oppimiseksi kokeilemalla ja erehdyksellä, mutta yksi hyvä asia CSS: ssä on se, että ne ilmaistaan selkeällä englannilla, mikä tarkoittaa, että ne on melko helppo ymmärtää. Painikelohkon toisessa osassa on muutama lisäosa painikkeen ja painikkeen varjoihin. Sillä on myös pieni siirtymävaikutus, jonka avulla se näyttää hyvältä ja realistiselta, kun painiketta painetaan. Nämä määritetään erikseen webkitille, Firefoxille, oopperalle jne., Vain jotta varmistetaan, että verkkosivu toimii optimaalisesti kaikilla alustoilla.
Seuraava koodilohko on WebIOPi-palvelun kertova, että tämä on syöte WebIOPi-palveluun.
i nput {näyttö: lohko; leveys: 160px; korkeus: 45px; }
Viimeinen asia, jonka haluamme tehdä, on antaa jonkinlainen ilmoitus, kun painiketta on painettu. Joten voit tavallaan katsoa näyttöä ja painikkeiden värejä ilmoittamaan nykyisen tilan. Tätä varten alla oleva koodirivi otettiin käyttöön jokaiselle painikkeelle.
# gpio17.LOW {taustaväri: Harmaa; väri musta; } # gpio17.HIGH {taustaväri: Punainen; väri: vaaleanharmaa; }
Yllä olevat koodirivit vain muuttavat painikkeen väriä sen nykyisen tilan perusteella. Kun painike on pois päältä (LOW), painikkeiden taustaväri muuttuu harmaaksi osoittamaan, että se ei ole aktiivinen, ja kun päällä (HIGH), painikkeen taustaväri muuttuu PUNAISEKSI.
CSS pussissa, antaa tallennuksen smarthome.css: ksi, siirrä se sitten filezillan (tai minkä tahansa muun haluamasi SCP-ohjelmiston) kautta vadelma pi -mallimme tyylikansioon ja korjaa viimeinen kappale, html-koodi. Muista ladata täydellinen CSS täältä.
HTML-koodi:
HTML-koodi vetää kaiken yhteen, javascriptin ja tyylisivun.
Paina nappia; vastaan pekonia
Sisällä pään tunnisteen olemassa joitakin erittäin tärkeitä ominaisuuksia.
Yllä olevan koodirivin avulla verkkosovellus voidaan tallentaa mobiilipöytätietokoneelle, joka käyttää kromia tai mobiilisafaria. Tämä voidaan tehdä kromivalikosta. Tämä antaa sovellukselle helpon laukaisutuntuman mobiilipöydältä tai kotona.
Seuraava alla oleva koodirivi antaa jonkinlaisen reagoivuuden verkkosovellukseen. Sen avulla se voi viedä minkä tahansa laitteen näytön, jolla se käynnistettiin.
Seuraava koodirivi ilmoittaa otsikon, joka näkyy verkkosivun otsikkorivillä.
Seuraavat neljä koodiriviä suorittavat kukin tehtävän linkittää html-koodi useisiin resursseihin, joita se tarvitsee toimiakseen halutulla tavalla.
Ensimmäinen yllä oleva rivi kutsuu WebIOPi-kehyksen pääkoodia JavaScriptiin, joka on koodattu palvelimen juuressa. Tämä on soitettava joka kerta, kun WebIOPia tullaan käyttämään.
Toinen rivi osoittaa html sivun meidän jQuery käsikirjoituksen, kolmas pisteet sen suuntaan meidän tyylisivun. Viimeinen rivi auttaa asettamaan kuvakkeen käytettäväksi mobiilipöydässä, jos päätämme käyttää sitä verkkosovelluksena tai verkkosivun suosikkikuvakkeena.
HTML-koodin runko-osa sisältää vain taittotagit varmistaakseen, että painikkeet ovat oikeassa linjassa alla olevan rivin kanssa. Id =”content” pitäisi muistuttaa sisällön ilmoitus painikkeenluomistoiminnon aiemmin alle JavaScript-koodin.
Tiedät poran, html-koodin index.html ja siirryt Pi: n html-kansioon filezillan kautta. Voit ladata kaikki CSS-, JS- ja HTML-tiedostot täältä.
WebIOPi-palvelimen muokkaukset kotiautomaatioon:
Tässä vaiheessa olemme valmiita aloittamaan kaavojemme luomisen ja testaamaan verkkosovellustamme, mutta ennen sitä meidän on muokattava webiopi- palvelun määritystiedostoa, jotta sen tulisi käyttää html- kansiomme tietoja sen mukana tulleiden määritystiedostojen sijaan.
Voit muokata määritystä suorittamalla seuraavat pääkäyttäjän oikeudet;
sudo nano / etc / webiopi / config
Etsi konfigurointitiedoston http-osio, tarkista osiosta, jossa sinulla on jotain, #Use doc-root to change default HTML and resource files location
Kommentoi mitä tahansa sen alapuolella käyttämällä # ja sitten, jos kansio on asetettu kuten minun, osoita doc-root projektitiedoston polulle
doc-root = / home / pi / webapp / html
Tallenna ja poistu. Voit myös muuttaa porttia 8000: sta, jos piillä on toinen palvelin, joka käyttää tätä porttia. Jos ei, tallenna ja lopeta, kun siirrymme eteenpäin.
On tärkeää huomata, että voit vaihtaa WebIOPi-palvelun salasanan komennolla;
sudo webiopi-passwd
Se pyytää sinua antamaan uuden käyttäjänimen ja salasanan. Tämä voidaan myös poistaa kokonaan, mutta turvallisuus on tärkeää, eikö?
Suorita lopuksi WebIOPi-palvelu antamalla alla oleva komento:
sudo /etc/init.d/webiopi start
Palvelimen tila voidaan tarkistaa käyttämällä;
sudo /etc/init.d/webiopi-tila
Se voidaan estää käyttämästä;
sudo /etc/init.d/webiopi lopettaa
Määritä WebIOPi toimimaan käynnistyksen yhteydessä käyttämällä;
sudo update-rc.d webiopi -asetukset
Jos haluat peruuttaa sen ja estää sen suorittamisen käynnistyksen yhteydessä, käytä;
sudo update-rc.d webiopi poista
Piirikaavio ja selitys:
Kun ohjelmisto on määritetty valmiiksi, olemme kaikki valmiita aloittamaan kaavojen luomisen tälle verkko-ohjatulle kodinkoneprojektille.
Vaikka en voinut laittaa käteni relemoduuleihin, joiden kanssa mielestäni on helpompaa työskennellä harrastajille. Joten piirrän tässä kaaviot tavallisille erillisille 5V-releille.
Liitä piirisi yllä olevan fritzing-piirin mukaisesti. Huomaa, että oman releesi COM, NO (normaalisti auki) ja NC (normaalisti kiinni) voivat sijaita eri puolilla / pisteissä. Testaa se millimetrillä. Lisätietoja releestä täältä.
Kun komponenttimme on kytketty, käynnistä palvelimesi verkkosivulta, siirry Raspberry Pi: n IP-osoitteeseen ja ilmoita portti edellä kuvatulla tavalla, kirjaudu sisään käyttäjätunnuksella ja salasanalla, ja sinun pitäisi nähdä verkkosivu, joka näyttää täsmälleen samalta kuin alla oleva kuva.
Nyt voit helposti hallita neljää verkkolaitetta langattomasti napsauttamalla painikkeita. Tämä toimii matkapuhelimesta, tablet-laitteesta jne., Ja voit lisätä uusia painikkeita ja releitä hallitaksesi enemmän laitteita. Tarkista koko video alla.
It's It kaverit, kiitos, että pidit kiinni tästä. Jos sinulla on kysyttävää, pudota ne kommenttikenttään.