Метеорологична станция ESP8266, която показва данни на уебсайт: 7 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:52

Забележка: Части от този урок може да са достъпни във видео формат на моя канал в YouTube - Tech Tribe

В тази инструкция ще покажа как да направите метеорологична станция, която директно изпраща данни до вашия уебсайт. Следователно ще ви е необходим собствен домейн (напр. Msolonko.net). За да започнете, ето материалите, които ще ви трябват:

Елементи:

Перо Хуза ($ 16.95)

Микро USB кабел с данни ($ 1.99)

Батерия ($ 25): По -късно ще обсъдя какъв капацитет ви е необходим за колко време без презареждане, за да можете да изберете капацитета, който искате. Това е линк към този, който използвах. Можете също така просто да го захранвате от контакт.

1 Фоторезистор

Някои други резистори - обсъдени по -късно

Тел

Perf Board ($ 5.59) - опаковка от 20

BME280 сензор за температура, налягане и влажност ($ 9,99)

Някаква кутия; можете да го отпечатате 3D и аз ще ви покажа моя дизайн.

Уебхостинг и домейн, ако искате да следвате изцяло урока

Инструменти:

Резачка за тел

Поялник

Стъпка 1: Код на пера на Хуза

Кодът ще бъде написан в Arduino IDE, който може да бъде изтеглен от тук. Преди да започнем, моля, следвайте инструкциите тук, за да настроите Arduino IDE да работи с вашия Feather Huzzah. Също така, следвайте тези инструкции, за да изтеглите необходимите библиотеки, за да работи BME сензорът. Файлът с кода е прикачен и целият код е коментиран, за да можете да го разберете. След като го погледнете, преминете към следващата стъпка, където ще разгледаме кода, който получава данните от сензора.

Стъпка 2: Получаване на данни от Feather Huzzah

Надяваме се, че вече сте разбрали как работи кодът на Arduino. Ако не, върнете се към кода и прочетете коментарите ми (коментирах почти всеки ред). Сега ще напишем кода, който получава данните. Както преди, всичко се коментира. Езикът за програмиране, който се използва за това, е PHP, за който можете да прочетете повече тук.

Нашите данни ще се съхраняват в база данни MySQL, за която можете да прочетете повече тук. Данните се съхраняват в таблици, които имат редове и колони. Преди да напишем кода, трябва да направим структурата на нашата таблица на нашия хостинг cPanel. Използвам Arvixe хостинг, така че вашият cPanel може да изглежда различно. Вижте едно от изображенията, за да видите как изглежда моята част. Първо, искате да създадете нова база данни MySQL, ако вече нямате такава. Можете да използвате съветника за това. Има много онлайн ресурси за това, ако имате нужда от помощ.

След като настроите база данни, отидете на phpMyAdmin и изберете базата данни. Създайте таблица с име weather_data с 9 колони. Консултирайте се с едно от моите изображения по -горе, за да видите каква трябва да бъде всяка колона (копирайте името, типа данни и всичко останало точно, ако искате да използвате моя код). Броячът ще бъде нашият първичен ключ, а идентификаторът ще ни помогне да идентифицираме в кой ден се отнасят данните (1: днес, 2: вчера, 3: всичко останало). Тъй като ще имаме много данни, ще изтрием част от тях с напредването на възрастта. Ето защо имаме нужда от колоната с идентификатор. Останалите колони са доста разбираеми. В момента вашата таблица във вашата база данни трябва да изглежда точно като моята.

Сега изтеглете прикачения код и прочетете него и моите коментари. Когато приключите, преминете към следващата стъпка.

Забележка: когато изтегляте кода, преименувайте го на esp.php. По някаква причина получих грешка, когато се опитах да кача PHP файл.

По принцип кодът ще работи.

1. Събирайте данни на всеки 10 минути и ги показвайте

2. След като мине на ден, средно на всеки 6 стойности (за да се спести място в БД), така че да има точка за данни за всеки час

3. След като мине друг ден, осреднете всички останали данни за този ден и ги съхранявайте само като една точка от данни

По този начин ще можем да видим колебания в светлината, температурата и т.н. през периода от месеци, без да започнем да се разсейваме от ежедневните колебания в температурата, светлината и т.н.

Стъпка 3: Извличане на данни от базата данни за показване

Така че сега сме разбрали как да събираме метеорологични данни и да ги качваме в нашата база данни. Сега трябва да можем да го извлечем в използваема форма. Както преди, прикачих PHP файл getWeatherData.txt, който трябва да запишете на вашия хост и да промените разширението на името на файла.php вместо.txt. Целият код е коментиран. Прочетете го, за да го разберете и продължете, след като смятате, че сте го разбрали. Ако имате въпроси, не се колебайте да попитате по -долу.

Стъпка 4: Настройка на библиотеки и някои други неща

За този проект една от рамките, които ще използваме, е AngularJS, която ще ни помогне да комуникираме с базата данни и да изградим SPA (Single Page Application). За да получите библиотеката, отидете на тази връзка и изтеглете версия 1.64 или по -нова. За този урок използвах 1.64, но често се пускат нови версии, така че можете да използвате различна. Намерете връзка на тази страница, която завършва така: /VERSION/angular.min.js

Копирайте връзката и я запазете на безопасно място. Току -що получихме връзка към библиотеката AngularJS. Ще ви е необходим за следващата стъпка. Сега, на същата страница намерете връзка, която изглежда така и я копирайте също: /VERSION/angular-route.min.js

Ъгловият маршрут ще ни помогне да управляваме нашия SPA и да се справим с превключването на изгледи на страницата.

Искаме да можем да показваме добре графики на нашите данни. За това ще използваме библиотека, наречена ChartJS. Отидете тук, изберете последната версия и запазете връзка, която завършва така: VERSION/Chart.bundle.min.js

И накрая, ще използваме библиотека за оформление на страниците, наречени Bootstrap. Отидете на тази връзка за Бърз старт и оставете това отворено засега. След като започнем да пишем клиентския код, ще можете да замените старите ми връзки с по -новата версия.

Сега трябва да настроим различните изгледи за нашето приложение. В директорията на вашия хост, където имате предишните два файла (esp.php и getWeatherData.php), създайте нова папка с име weather_views. Тук ще поставим всички наши страници, всяка от които ще съответства на идентификатор от нашата база данни (1, 2 или 3).

В папката създайте 3 файла (day.html, old.html и вчера.html). Изтеглете прикачения код и го поставете в тези файлове. Кодът за DAY. HTML се коментира, за да можете да разберете какво се случва. Кодът за другите 2 страници е по същество един и същ (коментира се различна част в old.html).

След като приключите с тази стъпка, преминете към следващата, която е най -трудната стъпка за програмиране.

Стъпка 5: Основен HTML файл

В тази стъпка ще направите/редактирате/прочетете основния HTML файл, където ще покажете всичко. Запазете прикачения файл (който както винаги се коментира) като espdata.html в същата директория като esp.php. Надявам се, че можете да направите някои промени в него и да разберете какво всъщност се случва.

Това е по -голямата част от кода ви, така че определено е важно да разберете какво се случва.

Стъпка 6: Тест за окабеляване на платка

Сега ще тестваме дали целият код работи с нашия хардуер. Ако все още не сте, запоявайте щифтовете на заглавната част на Feather Huzzah и сензора BME280. За всяка стъпка е приложена снимка.

1. Поставете перо върху дъската. Свържете 3V към + релсата и GND към - шината.

2. Свържете VIN на сензора към + шина и GND към - шина.

3. Свържете сензора SDA към щифт 4 на пера. Свържете SCL към пин 5.

4. Поставете фоторезистора върху макета с един проводник към + релсата.

5. Свържете 4.7k резистор към несвързания проводник на фоторезистора. Свържете несвързания проводник на 4.7k към 2k резистор. Свържете несвързания край на 2k резистора към - шината (GND).

6. Свържете съединението на резистора 4.7k и 2k към щифт ADC (аналогов извод). Току -що направихме делител на напрежение, който разделя максималното напрежение, прочетено от щифта от 3.3V на по -малко от 1V. Можете да играете със собствената си комбинация, ако искате, но имайте предвид, че напрежението, дадено на аналоговия щифт, трябва да бъде по -малко от 1V.

7. Накрая, свържете щифта RST (нулиране) на перото към щифт 16 на перото (оранжев проводник на снимката). Тази конфигурация позволява на Feather Huzzah да влезе в режим на дълбок сън, за да пести енергия.

Сега сте готови! Качете кода на вашата перна хуза и се надявам да видите актуализацията на уеб страницата си (само страницата day.html). Ако не, опитайте да използвате серийния монитор за отстраняване на неизправности или попитайте в коментарите по -долу.

Стъпка 7: Постоянен проект (по избор)

Ако приемем, че всичко работи, ако желаете, можете да направите този проект по -постоянен. Няма да показвам това тук, но можете да запоите всички компоненти на перф дъска и след това да ги затворите в контейнер. Ще прикача IPT файловете за 3D контейнера, които използвах по -долу, и няколко снимки, за да започнете. Контейнерът е предназначен за вдъхновение, защото вероятно ще искате да го направите по -личен с различен дизайн и текст. Забавлявайте се с персонализирането! Късмет!