Meteorologická stanice ESP8266, která zobrazuje data na webu: 7 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:22

Poznámka: Části tohoto tutoriálu mohou být k dispozici ve formátu videa na mém kanálu YouTube - Tech Tribe

V tomto pokynu ukážu, jak vytvořit meteorologickou stanici, která přímo odesílá data na váš web. Proto budete potřebovat vlastní doménu (např. Msolonko.net). Pro začátek zde jsou materiály, které budete potřebovat:

Položky:

Feather Huzzah (16,95 $)

Micro USB kabel s daty (1,99 USD)

Sada baterií (25 USD): Později proberu, jakou kapacitu potřebujete po jakou dobu bez dobíjení, abyste si mohli vybrat požadovanou kapacitu. Toto je odkaz na ten, který jsem použil. Můžete jej také napájet ze zásuvky.

1 fotorezistor

Některé další odpory - diskutovány později

Drát

Perf Board (5,59 $) - balíček po 20

Snímač teploty, tlaku a vlhkosti BME280 (9,99 $)

Nějaký druh krabice; můžete jeden vytisknout 3D a já vám ukážu svůj design.

Webhosting a doména, chcete -li se plně řídit tutoriálem

Nástroje:

Štípačky

Páječka

Krok 1: Kód Feather Huzzah

Kód bude zapsán v Arduino IDE, které lze stáhnout zde. Než začneme, postupujte podle zde uvedených pokynů, abyste mohli nastavit Arduino IDE tak, aby fungovalo s vaší Feather Huzzah. Postupujte také podle těchto pokynů a stáhněte si potřebné knihovny, aby senzor BME fungoval. Soubor kódu je připojen a celý kód je okomentován, abyste mu rozuměli. Jakmile se na to podíváte, přejděte k dalšímu kroku, kde se podíváme na kód, který přijímá data ze senzorů.

Krok 2: Příjem dat z Feather Huzzah

Teď už snad chápete, jak kód Arduino funguje. Pokud ne, vraťte se ke kódu a přečtěte si mé komentáře (komentoval jsem téměř každý řádek). Nyní napíšeme kód, který data přijímá. Stejně jako dříve je vše komentováno. Programovacím jazykem, který se k tomu používá, je PHP, o kterém si můžete více přečíst zde.

Naše data budou uložena v databázi MySQL, o které si můžete přečíst více zde. Data jsou uložena v tabulkách, které mají řádky a sloupce. Než napíšeme kód, měli bychom vytvořit strukturu naší tabulky na našem hostitelském cPanelu. Používám Arvixe Hosting, takže váš cPanel může vypadat jinak. Podívejte se na jeden z obrázků a podívejte se, jak moje část vypadá. Nejprve chcete vytvořit novou databázi MySQL, pokud ji ještě nemáte. K tomu můžete použít průvodce. Pokud potřebujete pomoc, existuje velké množství online zdrojů.

Jakmile máte databázi nastavenou, přejděte na phpMyAdmin a vyberte svou databázi. Vytvořte tabulku s názvem weather_data s 9 sloupci. Podívejte se na jeden z mých obrázků výše, abyste zjistili, jaký by měl být každý sloupec (zkopírujte název, datový typ a vše ostatní, pokud chcete použít můj kód). Counter bude naším primárním klíčem a id nám pomůže identifikovat, v jaký den se data týkají (1: dnes, 2: včera, 3: všechno ostatní). Vzhledem k tomu, že budeme mít spoustu dat, některé z nich budeme vymazávat, jakmile budou starší. Proto potřebujeme sloupec id. Zbytek sloupců je docela samozřejmý. Právě teď by vaše tabulka ve vaší databázi měla vypadat přesně jako ta moje.

Nyní si stáhněte přiložený kód a přečtěte si jej a mé komentáře. Až budete hotovi, přejděte k dalšímu kroku.

Poznámka: při stahování kódu jej přejmenujte na esp.php. Z nějakého důvodu se mi při pokusu o nahrání souboru PHP zobrazila chyba.

V zásadě takto bude fungovat kód.

1. Sbírejte data každých 10 minut a zobrazte je

2. Jakmile projde den, průměrujte každých 6 hodnot (abyste ušetřili místo v DB), aby byl k dispozici datový bod pro každou hodinu

3. Jakmile projde další den, zprůměrujte všechna zbývající data pro daný den a uložte je jako jediný datový bod

Tímto způsobem budeme moci vidět kolísání světla, teploty atd. V průběhu měsíců, aniž bychom byli rušeni denními výkyvy teploty, světla atd.

Krok 3: Načítání dat z databáze do zobrazení

Nyní jsme tedy přišli na to, jak sbírat data o počasí a nahrávat je do naší databáze. Nyní musíme být schopni jej získat v použitelné formě. Stejně jako dříve jsem připojil soubor PHP getWeatherData.txt, který byste měli uložit na hostitele a změnit příponu názvu souboru na.php místo.txt. Veškerý kód je okomentován. Přečtěte si to, abyste to pochopili, a pokračujte, jakmile si myslíte, že to máte. Pokud máte dotazy, klidně se ptejte níže.

Krok 4: Nastavení knihoven a některé další věci

Pro tento projekt je jedním z rámců, které budeme používat, AngularJS, který nám pomůže komunikovat s databází a vybudovat SPA (Single Page Application). Chcete -li získat knihovnu, přejděte na tento odkaz a stáhněte si verzi 1.64 nebo vyšší. Pro tento tutoriál jsem použil 1.64, ale často se uvolňují nové verze, takže můžete použít jinou. Najděte na této stránce odkaz, který končí takto: /VERSION/angular.min.js

Zkopírujte odkaz a uložte jej na bezpečné místo. Právě jsme dostali odkaz na knihovnu AngularJS. Budete to potřebovat pro další krok. Nyní na stejné stránce najděte odkaz, který vypadá takto, a zkopírujte jej také: /VERSION/angular-route.min.js

Úhlová trasa nám pomůže spravovat naše SPA a zvládnout přepínání zobrazení na stránce.

Chceme být schopni pěkně zobrazit grafy našich dat. K tomu použijeme knihovnu s názvem ChartJS. Jděte sem, vyberte nejnovější verzi a uložte odkaz, který končí takto: VERSION/Chart.bundle.min.js

Nakonec použijeme knihovnu k rozložení stránek s názvem Bootstrap. Přejděte na tento odkaz na Rychlý start a nechte to zatím otevřené. Jakmile začneme psát klientský kód, budete moci nahradit mé staré odkazy novější verzí.

Nyní bychom měli nastavit různá zobrazení pro naši aplikaci. V adresáři na vašem hostiteli, kde máte předchozí dva soubory (esp.php a getWeatherData.php), vytvořte novou složku s názvem weather_views. Sem vložíme všechny naše stránky, z nichž každá bude odpovídat ID z naší databáze (1, 2 nebo 3).

Ve složce vytvořte 3 soubory (day.html, old.html a včera.html). Stáhněte si přiložený kód a vložte jej do těchto souborů. Kód pro DAY. HTML je okomentován, abyste porozuměli, co se děje. Kód pro další 2 stránky je v zásadě stejný (jiná část v souboru old.html je komentována).

Jakmile budete s tímto krokem hotovi, přejděte k dalšímu, což je nejtěžší programovací krok.

Krok 5: Hlavní soubor HTML

V tomto kroku vytvoříte/upravíte/přečtete hlavní soubor HTML, kde vše zobrazíte. Přiložený soubor (který je jako vždy komentován) uložte jako espdata.html do stejného adresáře jako esp.php. Doufám, že na tom můžete udělat nějaké změny a pochopit, co se ve skutečnosti děje.

Toto je hlavní část vašeho kódu, takže je rozhodně důležité pochopit, co se děje.

Krok 6: Test zapojení na prkénku

Nyní otestujeme, zda veškerý kód funguje s naším hardwarem. Pokud jste to ještě neudělali, pájejte kolíkové lišty na Feather Huzzah a senzoru BME280. Ke každému kroku je přiložena fotografie.

1. Na prkénko položte peří. Připojte 3V na kolejnici + a GND na - lištu.

2. Připojte senzor VIN na + lištu a GND na - lištu.

3. Připojte senzor SDA ke kolíku 4 na peří. Připojte SCL ke kolíku 5.

4. Umístěte fotorezistor na prkénko tak, aby jeden přívod směřoval na kolejnici +.

5. Připojte 4,7k odpor k nepřipojenému vodiči fotorezistoru. Připojte nepřipojený kabel 4,7k k rezistoru 2k. Připojte nezapojený konec rezistoru 2k k liště (GND).

6. Připojte spoj rezistoru 4,7k a 2k ke kolíku ADC (analogový pin). Právě jsme vytvořili dělič napětí, který dělí maximální napětí odečtené pinem z 3,3 V na méně než 1 V. Pokud chcete, můžete si hrát s vlastní kombinací, ale mějte na paměti, že napětí dané analogovému pinu musí být menší než 1V.

7. Nakonec připojte kolík RST (reset) na peří ke kolíku 16 na peří (oranžový vodič na fotografii). Tato konfigurace umožňuje Feather Huzzah přejít do režimu hlubokého spánku, aby šetřila energii.

Nyní jste hotovi! Nahrajte kód do své peří huzzah a doufejme, že uvidíte aktualizaci své webové stránky (pouze stránka day.html). Pokud ne, zkuste použít řešení problémů se sériovým monitorem nebo se zeptejte v níže uvedených komentářích.

Krok 7: Trvalý projekt (volitelně)

Za předpokladu, že vše funguje, pokud chcete, můžete tento projekt udělat trvalejším. Tady to nebudu ukazovat, ale můžete všechny komponenty připájet na desku perf a poté je uzavřít do kontejneru. Níže připojím soubory IPT pro 3D kontejner, který jsem použil, a několik fotografií, abyste mohli začít. Kontejner je určen pro inspiraci, protože pravděpodobně budete chtít, aby byl osobnější s jiným designem a textem. Bavte se s přizpůsobením! Hodně štěstí!