- Požadované komponenty:
- Příprava Raspberry Pi:
- Vyzkoušejte instalaci WebIOPi:
- Vytvoření webové aplikace pro domácí automatizaci Raspberry Pi:
- Úpravy serveru WebIOPi pro domácí automatizaci:
- Schéma zapojení a vysvětlení:
Ahoj kluci, vítejte v dnešním tutoriálu, jednou z dobrých věcí na Raspberry Pi je skvělá schopnost a jednoduchost, s níž vám dává příležitost připojit zařízení k internetu, zejména pro projekty související s domácí automatizací. Dnes prozkoumáme možnost ovládání střídavých spotřebičů kliknutím na tlačítka na webové stránce pomocí internetu. Pomocí tohoto domácího automatizačního systému založeného na IoT můžete ovládat své domácí spotřebiče odkudkoli na světě. Tento webový server lze spustit z jakéhokoli zařízení, které může spouštět aplikace HTML, jako je chytrý telefon, tablet, počítač atd.
Požadované komponenty:
U tohoto projektu budou požadavky spadat do dvou kategorií, Hardware a Software:
I. Hardwarové požadavky:
- Raspberry Pi 3 (jakákoli jiná verze bude hezká)
- Paměťová karta 8 nebo 16 GB se spuštěnou Raspbian Jessie
- 5v relé
- 2n222 tranzistory
- Diody
- Propojovací dráty
- Bloky připojení
- LED k testování.
- Kontrolka střídavého proudu k testování
- Nepájivé pole a propojovací kabely
- Rezistor 220 nebo 100 ohmů
II. Softwarové požadavky:
Kromě operačního systému Raspbian Jessie běžícího na malinovém pi budeme také používat ke kopírování souborů z počítače do malinového pi, zejména souborů webových aplikací, práci WebIOPi frame, Poznámkový blok ++ běžící na vašem PC a filezila.
Pro tento projekt domácí automatizace také nemusíte kódovat v Pythonu, WebIOPi udělá veškerou práci.
Příprava Raspberry Pi:
Je to pro mě nějaký zvyk a myslím si, že je to dobrý, první věc, kterou udělám pokaždé, když chci Raspberry Pi použít, je aktualizace PI. U tohoto projektu bude tato část zahrnovat postupy aktualizace Pi a instalaci rámce WebIOPi, který nám pomůže zvládnout komunikaci z webové stránky na malinovou pí. Pravděpodobně bych měl říci, že to lze také dokázat snadněji pomocí pythonové baňky, ale jedna ze zajímavých věcí o kutilství je, když se podíváte pod kapotu a ztěžujete práci. Tam přichází veškerá radost z kutilství.
Chcete-li aktualizovat Raspberry Pi pod příkazy a poté restartovat RPi;
sudo apt-get update sudo apt-get upgrade sudo restart
Po dokončení je další věcí instalace rámce webIOPi.
Ujistěte se, že jste v domovském adresáři pomocí;
cd ~
Použijte wget k získání souboru z jejich stránky sourceforge;
wget
Po dokončení stahování soubor rozbalte a přejděte do adresáře;
tar xvzf WebIOPi-0.7.1.tar.gz cd WebIOPi-0.7.1 /
V tomto okamžiku před spuštěním instalace musíme nainstalovat opravu, protože tato verze WebIOPi nefunguje s malinovou pi 3, kterou používám, a nemohl jsem najít verzi WebIOPi, která pracuje výslovně s Pi 3.
Níže uvedené příkazy se používají k instalaci opravy v adresáři WebIOPi, spusťte;
wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch patch -p1 -i webiopi-pi2bplus.patch
Poté můžeme spustit instalaci instalace pro WebIOPi pomocí;
sudo./setup.sh
Pokud se během instalace zobrazí výzva k instalaci jakýchkoli závislostí, říkejte ano. Po dokončení restartujte pi;
sudo restart
Vyzkoušejte instalaci WebIOPi:
Než se vrátíme ke schématům a kódům, při opětovném zapnutí Raspberry Pi budeme muset otestovat naši instalaci WebIOPi, abychom se ujistili, že vše funguje dobře, jak chcete.
Spusťte příkaz;
sudo webiopi -d -c / etc / webiopi / config
Po vydání výše uvedeného příkazu na pí namiřte webový prohlížeč vašeho počítače připojeného k malinové pí na http: // raspberrypi. mshome.net:8000 nebo http; // thepi'sIPaddress: 8000. Systém vás vyzve k zadání uživatelského jména a hesla.
Uživatelské jméno je webiopi Heslo je malinové
Toto přihlášení lze v případě potřeby později odstranit, ale i váš domácí automatizační systém si zaslouží určitou úroveň zabezpečení, aby zabránil komukoli, kdo má ve vaší domácnosti zařízení ovládající IP a zařízení IOT.
Po přihlášení se rozhlédněte a poté klikněte na odkaz záhlaví GPIO.
Pro tento test budeme připojovat LED k GPIO 17, takže pokračujte a nastavte GPIO 17 jako výstup.
Když je to hotové, připojte led k malinové pí, jak je znázorněno na níže uvedených schématech.
Po připojení se vraťte na webovou stránku a kliknutím na tlačítko PIN 11 zapněte nebo vypněte LED. Tímto způsobem můžeme ovládat Raspberry Pi GPIO pomocí WebIOPi.
Po testu, pokud vše fungovalo tak, jak je popsáno, můžeme se vrátit zpět k terminálu a zastavit program pomocí CTRL + C. Pokud máte s tímto nastavením nějaký problém, pak mě udeřte přes sekci komentářů.
Více informací o Webiopi najdete na jeho Wiki stránce (http://webiopi.trouch.com/INSTALL.html)
Po dokončení testu jsme připraveni zahájit hlavní projekt.
Vytvoření webové aplikace pro domácí automatizaci Raspberry Pi:
Zde budeme upravovat výchozí konfiguraci služby WebIOPi a přidáme vlastní kód, který bude spuštěn při volání. První věcí, kterou uděláme, je instalace filezilla nebo jiného softwaru pro kopírování FTP / SCP do našeho počítače. Souhlasíte se mnou, že kódování na pí přes terminál je docela stresující, takže filezilla nebo jakýkoli jiný software SCP bude v této fázi užitečný. Než začneme psát kódy skriptů html, css a java pro tuto automatizovanou webovou aplikaci IoT Home a přesuneme je do Raspberry Pi, pojďme vytvořit složku projektu, kde budou všechny naše webové soubory.
Ujistěte se, že jste v domovském adresáři pomocí, pak vytvořte složku, přejděte do vytvořené složky a vytvořte html složku v adresáři:
cd ~ mkdir webapp cd webapp mkdir html
Vytvořte složku pro skripty, CSS a obrázky uvnitř html složky
mkdir html / css mkdir html / img mkdir html / skripty
S našimi vytvořenými soubory pojďme přejít na psaní kódů na našem PC a poté přejít na Pi přes filezilla.
Kód JavaScript:
První část kódu, kterou napíšeme, je kód javascript. Je to jednoduchý skript pro komunikaci se službou WebIOPi.
Je důležité si uvědomit, že pro tento projekt bude naše webová aplikace sestávat ze čtyř tlačítek, což znamená, že plánujeme ovládat pouze čtyři piny GPIO, i když v naší ukázce budeme ovládat pouze dvě relé. Na konci zkontrolujte 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čítko);});
Výše uvedený kód se spustí, když je WebIOPi připraven.
Níže jsme vysvětlili kód JavaScript:
webiopi (). ready (function (): Toto pouze nařídí náš systém, aby vytvořil tuto funkci a spustil ji, když je webiopi připraven.
webiopi (). setFunction (23, „out“); To nám pomáhá říci službě WebIOPi, aby nastavila GPIO23 jako výstup. Máme zde čtyři tlačítka, můžete je mít více, pokud implementujete více tlačítek.
var obsah, tlačítko; Tento řádek říká našemu systému, aby vytvořil proměnnou s názvem obsah a učinil z této proměnné tlačítko.
content = $ ("# content"); Proměnná obsahu se bude i nadále používat v našich html a css. Když tedy odkazujeme na #content, rámec WebIOPi vytvoří vše, co je s ním spojeno.
button = webiopi (). createGPIOButton (17, "Relé 1"); WebIOPi může vytvářet různé druhy tlačítek. Část kódu výše nám pomáhá říci službě WebIOPi, aby vytvořila tlačítko GPIO, které v tomto případě ovládá pin GPIO 17 označené „Relay 1“. Totéž platí pro ostatní.
content.append (tlačítko); Připojte tento kód k jakémukoli jinému kódu tlačítka vytvořeného v souboru html nebo jinde. Lze vytvořit více tlačítek a všechny budou mít stejné vlastnosti tohoto tlačítka. To je užitečné zejména při psaní CSS nebo Script.
Po vytvoření souborů JS jej uložíme a poté zkopírujeme pomocí filezilla do webapp / html / skriptů, pokud jste soubory vytvořili stejným způsobem jako já.
Po dokončení jsme se přesunuli k vytvoření CSS. Celý kód si můžete stáhnout z odkazu uvedeného v části Kód na konci.
Kód CSS:
CSS nám pomáhá, aby naše webová stránka domácí automatizace IoT Raspberry Pi vypadala hezky.
Chtěl jsem, aby web vypadal jako na obrázku níže, a proto jsem k tomu musel napsat šablonu stylů smarthome.css .
Níže jsme vysvětlili kód CSS:
Skript CSS se cítí příliš objemný, než aby ho sem mohl zahrnout, takže si jen vyberu jeho část a použiji je pro rozdělení. Celý soubor CSS si můžete stáhnout zde. CSS je snadné a můžete mu porozumět pouhým procházením kódu CSS. Tuto část můžete snadno seskočit a ihned použít náš kód CSS.
První část skriptu představuje šablonu stylů pro tělo webové aplikace a je zobrazena níže;
body {barva pozadí: #ffffff; background-image: url ('/ img / smart.png'); background-repeat: no-repeat; pozice na pozadí: střed; velikost pozadí: obal; písmo: tučné 18px / 25px Arial, bezpatkové; barva: LightGray; }
Chci věřit, že výše uvedený kód je samozřejmý, nastavili jsme barvu pozadí jako #ffffff, což je bílá, pak přidáme obrázek pozadí umístěný v tomto umístění složky (pamatujete si naše dřívější nastavení složky?), Zajistíme, aby obrázek nevypadal t opakujte nastavením vlastnosti background-repeat na no-repeat, poté instruujte CSS, aby centralizoval pozadí. Poté přesuneme nastavení velikosti pozadí, písma a barvy.
Když bylo tělo hotové, napsali jsme css pro tlačítka, aby vypadala hezky.
tlačítko {display: block; pozice: relativní; okraj: 10px; polstrování: 0 10px; zarovnání textu: na střed; textová výzdoba: žádná; šířka: 130px; výška: 40px; písmo: tučné 18px / 25px Arial, bezpatkové; Černá barva; textový stín: 1px 1px 1px rgba (255,255,255,.22); -webkit-border-radius: 30px; -moz-border-radius: 30px; poloměr ohraničení: 30px;
Abychom to stručně popsali, byla provedena i každá další věc v kódu, aby vypadal dobře. Můžete je změnit, abyste viděli, co se stane, myslím, že se to nazývá učení pomocí pokusů a omylů, ale jedna dobrá věc, o CSS, je to, že věci jsou vyjádřeny v jednoduché angličtině, což znamená, že jsou docela snadno pochopitelné. Druhá část bloku tlačítek má několik doplňků pro stínování textu na tlačítku a stínu tlačítka. Má také mírný přechodový efekt, který po stisknutí tlačítka pomáhá vypadat hezky a realisticky. Ty jsou definovány samostatně pro webkit, firefox, operu atd., Jen aby zajistily optimální fungování webové stránky na všech platformách.
Dalším blokem kódu je služba WebIOPi, aby jí řekla, že se jedná o vstup do služby WebIOPi.
i nput {display: block; šířka: 160px; výška: 45px; }
Poslední věcí, kterou chceme udělat, je dát nějakou indikaci, když bylo stisknuto tlačítko. Můžete se tak trochu podívat na obrazovku a barva tlačítek vám dá vědět aktuální stav. K tomu byl implementován řádek kódu níže pro každé jednotlivé tlačítko.
# gpio17.LOW {barva pozadí: šedá; Černá barva; } # gpio17.HIGH {barva pozadí: červená; barva: LightGray; }
Řádky kódů výše jednoduše mění barvu tlačítka na základě jeho aktuálního stavu. Když je tlačítko vypnuto (NÍZKÉ), barva pozadí tlačítek bude šedá, aby se zobrazilo neaktivní, a když je jeho barva zapnutá (VYSOKÁ), barva pozadí tlačítka bude ČERVENÁ.
CSS v tašce, umožňuje uložit jako smarthome.css, poté jej přesunout přes filezilla (nebo jakýkoli jiný software SCP, který chcete použít) do složky stylů na naší malinové pi a opravit poslední kousek, html kód. Nezapomeňte si odtud stáhnout plné CSS.
HTML kód:
HTML kód spojí vše dohromady, javascript a šablonu stylů.
Stiskněte tlačítko; přijímat slaninu
Uvnitř hlavové značky existují některé velmi důležité funkce.
Řádek kódu výše umožňuje uložení webové aplikace na mobilní plochu pomocí chromu nebo mobilního safari. To lze provést pomocí nabídky Chrome. Díky tomu se aplikace snadno spustí z mobilního počítače nebo domácnosti.
Následující řádek kódu níže poskytuje webové aplikaci určitou odezvu. Umožňuje obsadit obrazovku jakéhokoli zařízení, na kterém byla spuštěna.
Další řádek kódu deklaruje nadpis zobrazený v záhlaví webové stránky.
Další čtyři řádky kódů plní funkci propojení html kódu s několika prostředky, které potřebuje, aby fungovalo podle potřeby.
První řádek výše výzev hlavním WebIOPi framework JavaScript, který je pevně v kořenovém adresáři serveru. Toto je třeba volat pokaždé, když má být WebIOPi použit.
Druhý řádek upozorňuje na html stránku našeho jQuery skript, třetí body ve směru naší stylů. Poslední řádek pomáhá nastavit ikonu, která se má použít na mobilní ploše pro případ, že bychom se rozhodli ji použít jako webovou aplikaci nebo jako favicon pro webovou stránku.
Část těla html kódu obsahuje pouze značky přerušení, aby se zajistilo, že tlačítka jsou správně zarovnána s níže uvedeným řádkem, který říká našemu html kódu, aby zobrazoval, co je napsáno v souboru JavaScript. Id =“content“ by měl připomínat prohlášení obsahu pro naše tlačítko dřívější pod kódem JavaScript.
Cvičení, html kód znáte jako index.html a přes filezilla se přesunete do html složky na Pi. Zde si můžete stáhnout všechny soubory CSS, JS a HTML.
Úpravy serveru WebIOPi pro domácí automatizaci:
V této fázi jsme připraveni začít vytvářet naše schémata a otestovat naši webovou aplikaci, ale do té doby musíme upravit konfigurační soubor služby webiopi, aby ukázal namísto konfiguračních souborů, které byly dodány, použít data z naší složky html.
Chcete-li upravit konfiguraci, spusťte s oprávněním root následující:
sudo nano / etc / webiopi / config
Podívejte se na sekci http v konfiguračním souboru, zkontrolujte v části, kde máte něco jako, # Použijte doc-root ke změně výchozího umístění HTML a zdrojových souborů
Komentujte cokoli pod ním pomocí #, pak pokud je vaše složka nastavena jako moje, nasměrujte svůj doc-root na cestu k souboru projektu
doc-root = / home / pi / webapp / html
Uložit a odejít. Můžete také změnit port z 8000, pokud máte na tomto serveru spuštěný jiný server využívající tento port. Pokud ne, uložte a ukončete, jak pokračujeme.
Je důležité si uvědomit, že heslo služby WebIOPi můžete změnit pomocí příkazu;
sudo webiopi-passwd
Zobrazí výzvu k zadání nového uživatelského jména a hesla. To lze také úplně odstranit, ale bezpečnost je důležitá, že?
Nakonec spusťte službu WebIOPi zadáním následujícího příkazu:
sudo /etc/init.d/webiopi start
Stav serveru lze zkontrolovat pomocí;
sudo /etc/init.d/webiopi status
Může být zastaven spuštěním pomocí;
sudo /etc/init.d/webiopi stop
Chcete-li nastavit WebIOPi tak, aby běžel při spuštění, použijte;
sudo update-rc.d výchozí hodnoty webiopi
Chcete-li couvnout a zastavit jeho běh při bootování, použijte;
sudo update-rc.d webiopi odstranit
Schéma zapojení a vysvětlení:
Po dokončení nastavení našeho softwaru jsme všichni připraveni začít vytvářet schémata pro tento webově řízený projekt domácího spotřebiče.
I když jsem nemohl položit ruce na reléové moduly, s nimiž se podle mě snadněji pracuje pro fandy. Takže zde kreslím schémata pro obyčejná samostatná samostatná 5V relé.
Připojte svůj obvod, jak je znázorněno na fritovacím okruhu výše. Měli byste si uvědomit, že COM, NO (normálně otevřený) a NC (normálně zavřený) vašeho vlastního relé mohou být umístěny na různých stranách / bodech. Vyzkoušejte to prosím milimetrem. Další informace o relé najdete zde.
Po připojení našich komponent spusťte svůj server z webové stránky, přejděte na IP vaší Raspberry Pi a uveďte port, jak je popsáno výše, přihlaste se pomocí svého uživatelského jména a hesla a měla by se zobrazit webová stránka, která vypadá přesně jako obrázek níže.
Nyní můžete snadno ovládat čtyři AC domácí spotřebiče odkudkoli bezdrátově, pouhým kliknutím na tlačítka. To bude fungovat z mobilního telefonu, tabletu atd. A můžete přidat další tlačítka a relé pro ovládání více zařízení. Podívejte se na celé video níže.
To je, lidi, děkuji za to, že jste se drželi. Máte-li jakékoli dotazy, vložte je do pole pro komentář.