Метеостанция в браузере: BME280 и живой график на странице

Страница целиком лежит в прошивке: раз в пять секунд она забирает /data в JSON и перерисовывает график температуры и влажности обычным SVG, без перезагрузки и внешних библиотек. Откройте её кнопкой «Веб-интерфейс» над схемой; погоду меняйте в свойствах датчика.

Что на схеме

Плата ESP32 DevKit v1, к ней подключены:

• Датчик BME280: давление, влажность, температура (I2C) — bme1

Задействованы выводы платы: 3V3, GND, D21, D22. Всего соединений на схеме: 4.

Библиотеки

Пример собирается с библиотеками:

• WiFi
• WebServer
• Adafruit BME280 Library
• Adafruit Unified Sensor
• Adafruit BusIO

Они уже установлены на сервере сборки — отмечать их в проекте вручную не нужно, список приезжает вместе с примером.

Как это устроено в коде

Основное, чем пользуется скетч:

• WebServer — веб-сервер прямо на плате: страницы и обработчики адресов
• Adafruit_BME280 — чтение температуры, влажности и давления
• map() — пересчёт диапазона: сырые отсчёты в понятные единицы
• Serial.begin() — открывает монитор порта на заданной скорости
• Serial.println() — печатает строку в монитор порта
• delay() — пауза, на время которой ядро занято ожиданием
• WiFi.begin() — подключается к точке доступа виртуального Wi-Fi
• Serial.printf() — печатает в монитор порта с форматированием
• millis() — миллисекунды с запуска: на них строят работу без остановки

В скетче 95 строк; свои функции: sample(), sendSeries(), handleData(); подключено заголовков: 4. Сам скетч открыт на соседней вкладке — его можно менять и запускать заново.

Что попробовать изменить

• Поменяйте период в константе и посмотрите на анализаторе, как меняется картина на выводе.
• Проверьте, что делает скетч, когда сеть недоступна: обрыв связи — обычное состояние, а не исключение.
• Добавьте свои Serial.println() в интересных местах — монитор порта здесь и есть отладчик.
• Перенесите деталь на другой вывод — на схеме и в коде — и убедитесь, что пример работает так же.

Смотрите также

• WiFi: поиск сетей — Список точек доступа с уровнем сигнала и типом защиты. Проверка того, что радио работает.
• WiFi: подключение с переподключением — Соединение может пропасть в любой момент. Проверка состояния в loop() — не роскошь.
• HTTP-запрос — Клиент, код ответа и тело. Ответ читается целиком в строку — для больших страниц так делать не надо.
• Веб-сервер: управление выводом — Страница с двумя кнопками и обработчики маршрутов. Кнопка «Веб-интерфейс» над схемой открывает её в отдельном окне — как…
• Веб-сервер: JSON с показаниями — Машиночитаемый ответ вместо страницы. Откройте «Веб-интерфейс» и наберите /data — отсюда данные забирает что угодно, от…
• Своя точка доступа — Без роутера: прибор сам раздаёт сеть и отвечает по адресу 192.168.4.1. Так делают первичную настройку.

← Все примеры галереи