Метеостанция ESP8266, отображающая данные на веб-сайте: 7 шагов

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

Примечание. Части этого руководства могут быть доступны в видеоформате на моем канале YouTube - Tech Tribe

В этом руководстве я покажу, как создать метеостанцию, которая напрямую отправляет данные на ваш веб-сайт. Следовательно, вам понадобится собственный домен (например, msolonko.net). Для начала вот материалы, которые вам понадобятся:

Предметы:

Feather Huzzah (16,95 долларов США)

Кабель Micro USB с данными (1,99 доллара США)

Аккумулятор (25 долларов США): позже я расскажу, какая емкость вам нужна, в течение какого времени без подзарядки, чтобы вы могли выбрать нужную емкость. Это ссылка на ту, которую я использовал. Вы также можете просто подключить его к розетке.

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

Некоторые другие резисторы - обсудим позже

Проволока

Perf Board (5,59 $) - упаковка из 20 шт.

Датчик температуры, давления и влажности BME280 ($ 9,99)

Какая-то коробка; Вы можете напечатать его на 3D-принтере, и я покажу вам свой дизайн.

Веб-хостинг и домен, если вы хотите полностью следовать руководству

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

Кусачки

Паяльник

Шаг 1: код Feather Huzzah

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

Шаг 2. Получение данных от Feather Huzzah

Надеюсь, теперь вы понимаете, как работает код Arduino. Если нет, вернитесь к коду и прочтите мои комментарии (я прокомментировал почти каждую строку). Теперь напишем код, который получает данные. Как и раньше, все это комментируется. Для этого используется язык программирования PHP, о котором вы можете узнать больше здесь.

Наши данные будут храниться в базе данных MySQL, о которой вы можете узнать больше здесь. Данные хранятся в таблицах со строками и столбцами. Прежде чем писать код, мы должны создать структуру нашей таблицы на нашем хостинге cPanel. Я использую хостинг Arvixe, поэтому ваша cPanel может выглядеть иначе. Обратитесь к одному из изображений, чтобы увидеть, как выглядит моя часть. Во-первых, вы хотите создать новую базу данных MySQL, если у вас ее еще нет. Вы можете использовать для этого мастер. Если вам нужна помощь, есть множество онлайн-ресурсов по этому поводу.

После настройки базы данных перейдите в phpMyAdmin и выберите свою базу данных. Создайте таблицу с именем weather_data с 9 столбцами. Проконсультируйтесь с одним из моих изображений выше, чтобы увидеть, каким должен быть каждый столбец (точно скопируйте имя, тип данных и все остальное, если вы хотите использовать мой код). Счетчик будет нашим первичным ключом, а идентификатор поможет нам определить, к какому дню относятся данные (1: сегодня, 2: вчера, 3: все остальное). Поскольку у нас будет много данных, мы будем стирать некоторые из них по мере старения. Вот почему нам нужен столбец id. Остальные столбцы говорят сами за себя. Прямо сейчас ваша таблица в вашей базе данных должна выглядеть точно так же, как моя.

Теперь скачайте прикрепленный код и прочтите его и мои комментарии. Когда закончите, переходите к следующему шагу.

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

В основном так и будет работать код.

1. Собирайте данные каждые 10 минут и отображайте их.

2. По прошествии дня усредняйте каждые 6 значений (для экономии места в БД), чтобы на каждый час приходилась точка данных.

3. По прошествии следующего дня усредните все оставшиеся данные за этот день и сохраните их как одну точку данных.

Таким образом, мы сможем видеть колебания освещенности, температуры и т. Д. В течение нескольких месяцев, не отвлекаясь на дневные колебания температуры, света и т. Д.

Шаг 3. Получение данных из базы данных для отображения

Итак, теперь мы выяснили, как собирать данные о погоде и загружать их в нашу базу данных. Теперь мы должны иметь возможность получить его в удобной для использования форме. Как и раньше, я прикрепил PHP-файл getWeatherData.txt, который вы должны сохранить на своем хосте и изменить расширение имени файла на.php вместо.txt. Весь код прокомментирован. Прочтите его, чтобы понять это, и двигайтесь дальше, как только вы думаете, что получили это. Если у вас есть вопросы, задавайте их ниже.

Шаг 4: Настройка библиотек и некоторые другие вещи

В этом проекте мы будем использовать одну из фреймворков - AngularJS, которая поможет нам взаимодействовать с базой данных и создавать SPA (одностраничное приложение). Чтобы получить библиотеку, перейдите по этой ссылке и загрузите версию 1.64 или выше. Для этого урока я использовал 1.64, но часто выпускаются новые версии, так что вы можете использовать другую. Найдите ссылку на этой странице, которая заканчивается так: /VERSION/angular.min.js

Скопируйте ссылку и сохраните ее в надежном месте. Мы только что получили ссылку на библиотеку AngularJS. Он понадобится вам на следующем этапе. Теперь на той же странице найдите ссылку, которая выглядит так, и скопируйте ее: /VERSION/angular-route.min.js

Angular-route поможет нам управлять нашим 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 закомментирован, чтобы вы могли понять, что происходит. Код для двух других страниц в основном такой же (другая часть в old.html прокомментирована).

Когда вы закончите с этим шагом, переходите к следующему, который является наиболее сложным шагом программирования.

Шаг 5: Основной HTML-файл

На этом этапе вы создадите / отредактируете / прочтете основной файл HTML, в котором вы все будете отображать. Сохраните прикрепленный файл (который, как всегда, закомментирован) как espdata.html в том же каталоге, что и esp.php. Надеюсь, вы сможете внести в него некоторые изменения и понять, что на самом деле происходит.

Это основная часть вашего кода, поэтому определенно важно понимать, что происходит.

Шаг 6: Проверка проводки на макетной плате

Теперь проверим, что весь код работает с нашим оборудованием. Если вы еще этого не сделали, припаяйте контакты разъема на Feather Huzzah и датчике BME280. К каждому шагу прилагается фото.

1. Поместите перо на макетную плату. Подключите 3 В к шине +, а GND к шине -.

2. Подключите датчик VIN к + рейке и GND к - рейке.

3. Подключите датчик SDA к штырю 4 на перышке. Подключите SCL к контакту 5.

4. Поместите фоторезистор на макетную плату так, чтобы один вывод был соединен с шиной +.

5. Подключите резистор 4,7 кОм к неподключенному выводу фоторезистора. Подключите неподключенный провод 4,7 кОм к резистору 2 кОм. Подключите неподключенный конец резистора 2 кОм к шине - (GND).

6. Подключите соединение резистора 4,7 кОм и 2 кОм к выводу ADC (аналоговый вывод). Мы только что сделали делитель напряжения, который делит максимальное напряжение, считываемое выводом, с 3,3 В до менее 1 В. Вы можете поиграть со своей собственной комбинацией, если хотите, но имейте в виду, что напряжение, подаваемое на аналоговый вывод, должно быть меньше 1 В.

7. Наконец, соедините штифт RST (сброса) на перо с контактом 16 на перо (оранжевый провод на фото). Эта конфигурация позволяет Feather Huzzah переходить в режим глубокого сна для экономии энергии.

Готово! Загрузите код в свой перышко, и, надеюсь, вы увидите обновление своей веб-страницы (только страницу day.html). Если нет, попробуйте использовать последовательный монитор для устранения неполадок или задайте вопрос в комментариях ниже.

Шаг 7: Постоянный проект (необязательно)

Если все работает, при желании можно сделать этот проект более постоянным. Я не буду показывать это здесь, но вы можете припаять все компоненты к монтажной плате, а затем поместить их в контейнер. Я приложу файлы IPT для 3D-контейнера, который я использовал ниже, и несколько фотографий, чтобы вы начали. Контейнер предназначен для вдохновения, потому что вы, вероятно, захотите сделать его более индивидуальным с другим дизайном и текстом. Получайте удовольствие от настройки! Удачи!