"Тренируюсь на кошках" и хочу выводить в домашней сети разные значения на web страничку в динамике. Использую esp32 . Данные берутся с аналогового пина и формируется web сервером на страничке которая загружена в память шилда. Однако при обновлении поля мой "дизайн" Код (C++): #include <WiFi.h> // загружаем Wi-Fi библиотеку #include "ESPAsyncWebServer.h" #include "SPIFFS.h" // Заменить вашими учетными данными от сети const char* ssid = "********"; // Имя сети const char* password = "********"; // Пароль сети // WEB-сервер переменные AsyncWebServer server(80); //String temper_string; //Переменная для хранения температуры // Температурный модуль #define B 3800 // B-коэффициент #define SERIAL_R 10000 // сопротивление последовательного резистора, 10 кОм #define THERMISTOR_R 9000 // номинальное сопротивления термистора, 10 кОм #define NOMINAL_T 25 // номинальная температура (при которой TR = 10 кОм) const byte tempPin = 35; void setup() { Serial.begin(115200); //смонтируем файловую систему SPIFFS if(!SPIFFS.begin()){ Serial.println("Произошла ошибка при подключении файловой системы SPIFFS"); return; } // Подключаемся к сети wi-fi используя данные WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Пдключились к сети WiFi.."); } Serial.println(WiFi.localIP()); // Посылает браузеру страницу index.html server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(SPIFFS, "/index.html", String(), false, processor); }); //index.html имеет в заголовке ссылку на файл стилей // он запрашивает у сервера файл находящийся по адресу URL для файла «style.css»: server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(SPIFFS, "/style.css", "text/css"); }); // URL для файла температуры: server.on("/webpage", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(SPIFFS, "/index.html",String(), false, processor); }); server.begin(); //Температурный модуль pinMode( tempPin, INPUT ); } void loop(){ } // Температурный блок // нужно изменить в дальнейшем тип данных со строки на число. String get_temperetur() { int t = analogRead( tempPin ); float tr = 4095.0 / t - 1; // Разрешение АЦП ESP32 4095 tr = SERIAL_R / tr; float steinhart; steinhart = tr / THERMISTOR_R; // (R/Ro) steinhart = log(steinhart); // ln(R/Ro) steinhart /= B; // 1/B * ln(R/Ro) steinhart += 1.0 / (NOMINAL_T + 273.15); // + (1/To) steinhart = 1.0 / steinhart; // Invert steinhart -= 273.15; return (String(steinhart, 1)); } // Функция заполнения переменной %temperatur% в index.html на текущее значение температуры // в качестве аргумента функции processor передается указатель на строку в памяти String processor(const String& var){ /* проверяем, содержит ли текст HTML какие-либо заполнители %temperatur% . Если есть значение , то присваиваем их иначе возвращаем пустую строку.*/ if(var == "temperatur"){ String temperaturValue = get_temperetur(); Serial.println(temperaturValue); return temperaturValue; } return String(); } задваивается. Нужна помощь. В какую сторону копать, в код скейтча или в сторону html HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Контроль генератора</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Следующая строка запрещает запросы к favicon. В нашем случае у нас нет favicon. Favicon — это миниатюрная картинка веб-сайта, которая отображается рядом с заголовком на вкладке веб-браузера. Если мы не добавим эту строку, ESP будет получать запрос на favicon каждый раз, когда мы обращаемся к веб-серверу: --> <link rel="icon" href="data:,"> <!-- Тег <link> говорит HTML-файлу, что мы будем использовать внешний файл для оформления того, --> <!-- как будет выглядеть веб-страница. Атрибут «rel» указывает на то, что этим внешним файлом будет таблица стилей. --> <link rel="stylesheet" type="text/css" href="style.css"> <!-- Скрипт выполняет постоянную перезакгрузку элемента "webpage" на странице --> <script> setInterval(loadDoc,2000); function loadDoc() { <!-- вся информация здесь https://ru.wikipedia.org/wiki/XMLHttpRequest --> var xhttp = new XMLHttpRequest(); // 1. Создаём новый объект XMLHttpRequest xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("webpage").innerHTML =this.responseText}; } <!-- open(method, URL, async, userName, password) Определяет метод, URL и другие опциональные параметры запроса; --> <!-- параметр async определяет, происходит ли работа в асинхронном режиме. --> <!-- Последние два параметра необязательны. --> xhttp.open("GET","webpage", true); <!-- send(content) Отправляет запрос на сервер. --> xhttp.send(); } </script> </head> <body lang="ru-RU" dir="ltr"> <h1>Генератор плюс</h1> <p>Температура генератора: <strong id="webpage"> %temperatur% </strong></p> <div align="right"> <div> <label class="checkbox-google">Автозапуск генератора <input type="checkbox"> <span class="checkbox-google-switch"></span> </label> </div> <div> <label class="checkbox-google">Сообщать о пропаже напряжения <input type="checkbox" checked> <span class="checkbox-google-switch"></span> </label> </div> <div> <label class="checkbox-google"> Не включать генератор c....по <input type="checkbox"> <span class="checkbox-google-switch"></span> </label> <div align="center"> <label class="checkbox-google"> c <input id="start" type="time"> по <input id="end" type="time"> </label> </div> </div> </div> </body> </html> Код (CSS): html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center; } h1{ color: #0F3376; padding: 2vh; } p{ font-size: 1.5rem; } div { width: 270px; height: 30px; margin:0 auto;/* выравнивание по центру */ /* border: 1px solid red; добавляет границу*/ } .checkbox-google { display: inline-block; height: 28px; line-height: 28px; margin-right: 10px; position: relative; vertical-align: middle; font-size: 14px; user-select: none; } .checkbox-google .checkbox-google-switch { display: inline-block; width: 36px; height: 14px; border-radius: 20px; position: relative; top: 6px; vertical-align: top; background: #9f9f9f; transition: .2s; } .checkbox-google .checkbox-google-switch:before { content: ''; display: inline-block; width: 20px; height: 20px; position: absolute; top: -3px; left: -1px; background: #fff; border-radius: 50%; box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12); transition: .15s; } .checkbox-google input[type=checkbox] { display: block; width: 0; height: 0; position: absolute; z-index: -1; opacity: 0; } .checkbox-google input[type=checkbox]:checked + .checkbox-google-switch { background: #9f9f9f; } .checkbox-google input[type=checkbox]:checked + .checkbox-google-switch:before { background: #ffb700; transform:translateX(18px); }
Спасибо. Проблема решена request->send(200, "text/html", get_temperetur()); Заменил на данный код и все заработало. Так же изменил первоначальную загрузку html на Код (C++): // Посылает браузеру страницу index.html server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ // request->send(SPIFFS, "/index.html", String(), false, processor); request->send(SPIFFS, "/index.html", "text/html"); }); и выкинул функцию обработки заглушки, да саму заглушку удалил.
Окончательный код Код (C++): #include <WiFi.h> // загружаем Wi-Fi библиотеку #include "ESPAsyncWebServer.h" #include "SPIFFS.h" // Заменить вашими учетными данными от сети const char* ssid = "-------"; // Имя сети const char* password = "--------"; // Пароль сети // WEB-сервер переменные AsyncWebServer server(80); //String temper_string; //Переменная для хранения температуры // Температурный модуль #define B 3800 // B-коэффициент #define SERIAL_R 10000 // сопротивление последовательного резистора, 10 кОм #define THERMISTOR_R 9000 // номинальное сопротивления термистора, 10 кОм #define NOMINAL_T 25 // номинальная температура (при которой TR = 10 кОм) const byte tempPin = 35; void setup() { Serial.begin(115200); //смонтируем файловую систему SPIFFS if(!SPIFFS.begin()){ Serial.println("Произошла ошибка при подключении файловой системы SPIFFS"); return; } // Подключаемся к сети wi-fi используя данные WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Пдключились к сети WiFi.."); } Serial.println(WiFi.localIP()); // Посылает браузеру страницу index.html server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(SPIFFS, "/index.html", "text/html"); }); //index.html имеет в заголовке ссылку на файл стилей // он запрашивает у сервера файл находящийся по адресу URL для файла «style.css»: server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(SPIFFS, "/style.css", "text/css"); }); // URL для файла температуры: server.on("/webpage", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(200, "text/html", get_temperetur()); }); server.begin(); //Температурный модуль pinMode( tempPin, INPUT ); } void loop(){ } // Температурный блок // нужно изменить в дальнейшем тип данных со строки на число. String get_temperetur() { int t = analogRead( tempPin ); float tr = 4095.0 / t - 1; // Разрешение АЦП ESP32 4095 tr = SERIAL_R / tr; float steinhart; steinhart = tr / THERMISTOR_R; // (R/Ro) steinhart = log(steinhart); // ln(R/Ro) steinhart /= B; // 1/B * ln(R/Ro) steinhart += 1.0 / (NOMINAL_T + 273.15); // + (1/To) steinhart = 1.0 / steinhart; // Invert steinhart -= 273.15; return (String(steinhart, 1)); }
