Для создания метеостанции с веб-сервером на ESP32 с использованием датчиков HTU21 и BMP180, вам потребуется скомбинировать код для считывания данных с датчиков, код для создания веб-сервера и код для отображения данных на веб-странице. Вот общий шаговый план:
Подключите датчики HTU21 и BMP180 к ESP32 и убедитесь, что они работают корректно. Обычно для подключения используются пины I2C (SDA и SCL).
Установите необходимые библиотеки для работы с датчиками HTU21 и BMP180. В MicroPython они могут иметь разные названия, поэтому убедитесь, что вы используете правильные и совместимые библиотеки для вашего окружения.
Установите библиотеки для подключения к wifi точке или установите библиотеку wifi менеджера.
Напишите код для считывания данных с датчиков HTU21 и BMP180. Вот пример кода:
import machine
import time
import htu21
import bmp180
i2c = machine.I2C(scl=machine.Pin(22), sda=machine.Pin(21))
htu = htu21.HTU21(i2c)
bmp = bmp180.BMP180(i2c)
def считать_данные():
temperature = htu.temperature()
humidity = htu.humidity()
pressure = bmp.pressure()
return temperature, humidity, pressureНапишите код для создания веб-сервера на ESP32. Вам потребуется библиотека uasyncio для асинхронной обработки запросов:
import uasyncio as asyncio
import ujson
from machine import Pin
from uhttpd import HTTPServer
led = Pin(2, Pin.OUT)
async def index_handler(request):
temperature, humidity, pressure = считать_данные()
data = {'temperature': temperature, 'humidity': humidity, 'pressure': pressure}
return HTTPResponse(ujson.dumps(data))
def run_server():
loop = asyncio.get_event_loop()
server = HTTPServer([
("/", index_handler),
])
loop.create_task(server.run())
loop.run_forever()
run_server()В этом примере веб-сервер будет отвечать на запросы по корневому URL и возвращать данные о температуре, влажности и давлении в формате JSON. Загрузите код на ESP32 и запустите его. Убедитесь, что ESP32 подключен к сети Wi-Fi и имеет доступ к интернету. Откройте браузер и введите IP-адрес ESP32. Вы должны увидеть веб-страницу с данными о температуре, влажности и давлении.
Чтобы обновлять данные на веб-странице в режиме реального времени, вы можете использовать JavaScript и AJAX. Вот пример кода для обновления данных на веб-странице без перезагрузки страницы:
<html>
<head>
<script>
function updateData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
document.getElementById("temperature").innerHTML = data.temperature;
document.getElementById("humidity").innerHTML = data.humidity;
document.getElementById("pressure").innerHTML = data.pressure;
}
};
xhttp.open("GET", "/", true);
xhttp.send();
}
setInterval(updateData, 5000); // Обновлять данные каждые 5 секунд
</script>
</head>
<body onload="updateData()">
<h1>Метеостанция</h1>
<p>Температура: <span id="temperature"></span> C</p>
<p>Влажность: <span id="humidity"></span>%</p>
<p>Давление: <span id="pressure"></span> гПа</p>
</body>
</html>В этом примере мы используем JavaScript и AJAX для отправки асинхронного запроса на сервер каждые 5 секунд и обновления данных на веб-странице без перезагрузки. Создайте HTML-файл с приведенным выше кодом и сохраните его в файле с расширением .html. Добавьте файл с HTML-кодом на ESP32. Например, вы можете использовать модуль ufilesystem для сохранения файлов на ESP32.
В веб-сервере ESP32 добавьте обработчик для отдачи HTML-файла:
async def html_handler(request):
return HTTPResponse('index.html', content_type='text/html')
def run_server():
loop = asyncio.get_event_loop()
server = HTTPServer([
("/", index_handler),
("/index.html", html_handler),
])
loop.create_task(server.run())
loop.run_forever()
run_server()В этом примере мы добавляем обработчик для URL “/index.html”, который будет отдавать HTML-файл с веб-страницей. Загрузите обновленный код на ESP32 и запустите его.
Теперь, когда вы откроете веб-страницу на ESP32, вы увидите данные о температуре, влажности и давлении, которые будут автоматически обновляться каждые 5 секунд без перезагрузки страницы.
Добавьте в код обработку запросов на веб-сервере для получения данных с датчиков и отправки их в формате JSON.
async def data_handler(request):
temperature, humidity, pressure = считать_данные()
data = {'temperature': temperature, 'humidity': humidity, 'pressure': pressure}
return HTTPResponse(ujson.dumps(data), content_type='application/json')
def run_server():
loop = asyncio.get_event_loop()
server = HTTPServer([
("/", index_handler),
("/index.html", html_handler),
("/data", data_handler),
])
loop.create_task(server.run())
loop.run_forever()
run_server()В этом примере мы добавляем обработчик для URL “/data”, который будет отдавать данные о температуре, влажности и давлении в формате JSON. В HTML-коде веб-страницы добавьте обновленный код JavaScript для получения данных с сервера и отображения их на странице:
<html>
<head>
<script>
function updateData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
document.getElementById("temperature").innerHTML = data.temperature;
document.getElementById("humidity").innerHTML = data.humidity;
document.getElementById("pressure").innerHTML = data.pressure;
}
};
xhttp.open("GET", "/data", true);
xhttp.send();
}
setInterval(updateData, 5000); // Обновлять данные каждые 5 секунд
</script>
</head>
<body onload="updateData()">
<h1>Метеостанция</h1>
<p>Температура: <span id="temperature"></span> C</p>
<p>Влажность: <span id="humidity"></span>%</p>
<p>Давление: <span id="pressure"></span> гПа</p>
</body>
</html>Загрузите обновленный код на ESP32 и запустите его.
Теперь, когда вы откроете веб-страницу на ESP32, данные о температуре, влажности и давлении будут автоматически обновляться каждые 5 секунд, используя AJAX запросы к серверу ESP32.
Обратите внимание, что в этом примере используется простой веб-сервер на основе библиотеки uhttpd. Если вы хотите более сложный веб-сервер или другую функциональность, вам может потребоваться использовать другие библиотеки или фреймворки для MicroPython.