Row 1, Column 2 |
Row 2, Column 1 |
Row 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("
Temperature, C | "); client.print(String(temperature)); client.print(" |
"); client.print("
Humidity, percent | "); client.print(String(humidity)); client.print(" |
"); client.print("
Pressure, hPa | "); client.print(String(pressure)); client.print(" |
"); client.print("
Door closed: | "); client.print(doorClosed ? "yes" : "no"); client.print(" |
"); client.print("
Window closed: | "); client.print(windowClosed ? "yes" : "no"); client.print(" |
"); client.print("
");
client.print("");
client.print("");
client.println();
break;
} else {
currentLine = "";
}
} else if (c != '\r') {
currentLine += c;
}
}
}
client.stop();
Serial.println("Client Disconnected.");