Цифровая электроника для начинающих - страница 30

стр.


3.11 Удаленный мониторинг

С помощью web-сервера можно не только включать и выключать светодиод, но и получать информацию с удаленного объекта. Например, можно узнать температуру в квартире, находясь на каникулах или в отпуске. Как нетрудно догадаться, для этого достаточно вывести нужные нам параметры в HTML, который и отобразится на веб-странице.


К примеру, достаточно добавить такую строку в код формирования HTML:


if (digitalRead(buttonPin) == HIGH) {

client.print("Button state: ON
");

} else {

client.print("Button state: OFF
");

}


При обновлении страницы в браузере мы увидим соответствующий текст. Разумеется, это может быть не только кнопка, но и например, датчик закрывания двери или датчик освещенности (желающие могут перечитать главу 2.6 “Ввод аналоговых величин”).


Рассмотрим пример подробнее. Допустим, у нас есть данные с разных сенсоров (подробнее можно прочитать в главе 2.7-2.10). Чтобы не загромождать тестовый код, представим данные в виде уже готовых переменных, реальный код чтения желающие могут добавить самостоятельно.


float temperature = 22.5;

int humidity = 60;

int pressure = 1010;

bool doorClosed = true;

bool windowClosed = false;


Наша задача - отобразить эти данные на веб-сервере, для чего проще всего воспользоваться HTML-тегом “Table” (таблица).

Пример таблицы в HTML:











Row 1, Column 1Row 1, Column 2
Row 2, Column 1Row 2, Column 2


В браузере это будет выглядеть вот так:

Здесь tr - это table row, строка таблицы, а td - это элемент ячейки. Таким образом, мы можем группировать данные так, как нам удобно. Добавим таблицу в наш сервер. Для экономии места будет приведена только функция loop, остальное не изменилось.


void loop() {

// Возобновление соединения при необходимости

while (WiFi.status() != WL_CONNECTED) {

delay(500);

WiFi.begin(ssid, password);

Serial.print(".");

}


// Данные с датчиков

float temperature = 22.5;

int humidity = 60;

int pressure = 1010;

bool doorClosed = true;

bool windowClosed = false;

// Здесь можно добавить код чтения

// ...


WiFiClient client = server.available();

if (client) {

Serial.println("New Client.");

String currentLine = "";

while (client.connected()) {

if (client.available()) {

char c = client.read();

if (c == '\n') {

if (currentLine.length() == 0) {

client.println("HTTP/1.1 200 OK");

client.println("Content-type:text/html");

client.println();

client.print("");

client.print("ESP32 Server");

client.print("");

client.print("

ESP32 sensors data

");

client.print("

");

client.print("

");

client.print("

");

client.print("

");

client.print("

");

client.print("

");

client.print("

Temperature, C");

client.print(String(temperature)); client.print("

Humidity, percent");

client.print(String(humidity)); client.print("

Pressure, hPa");

client.print(String(pressure)); client.print("

Door closed:");

client.print(doorClosed ? "yes" : "no"); client.print("

Window closed:");

client.print(windowClosed ? "yes" : "no"); client.print("

");

client.print("");

client.print("");

client.println();

break;

} else {

currentLine = "";

}

} else if (c != '\r') {

currentLine += c;

}

}

}

client.stop();

Serial.println("Client Disconnected.");

}

}


Как можно видеть, код довольно прост. Мы сформировали таблицу с нужными нам полями. Для вывода строк yes/no мы использовали конструкцию языка С