"ползунок" в асинхронном режиме

[SergNed]

ESP32:Примеры/Создание веб-сервера на базе ESP32 при помощи файлов из файловой системы (SPIFFS)
-по этому примеру хочу прикрутить работу ползунка с извлечением его данных в асинхронном режиме на esp32.

Но следующие объявление в setupe не работает и не принимает запрос

server.on("/?value=", HTTP_GET, [](AsyncWebServerRequest *request)

{

pos1 = header.indexOf('=');

pos2 = header.indexOf('&');

valueString = header.substring(pos1+1, pos2);

// Задаем скорость мотора:

if (valueString != "0") {

dutyCycle = map(valueString.toInt(), 25, 100, 200, 255); }

});

 

[dzanis]

// на веб страничке надо так отправлять
//  значение ползунка в переменной val
//var xmlhttp  new XMLHttpRequest();
//xmlhttp.open('GET', 'dutyCycle?value='+val,true);
//xmlhttp.send();
// uri должен быть просто "/dutyCycle"
server.on("/dutyCycle", HTTP_GET, [](AsyncWebServerRequest *request)
{
valueString = request->getParam("value")->value();// получить значение из параметра value
// Задаем скорость мотора:
if (valueString != "0") {
dutyCycle = map(valueString.toInt(), 25, 100, 200, 255); }
request->send(200); // ответ что запрос принят
});

 

[SergNed]

Спасибо,буду пробовать.Нашел более сложный, похожий пример на

ESP32/ESP8266 Web Server: Control Outputs with Timer | Random Nerd Tutorials

Build a Web Server to control the ESP32 or ESP8266 NodeMCU outputs with a pulse using Arduino IDE. The pulse width can be adjusted using a slider on the web server page.

randomnerdtutorials.com

 

[dzanis]

Пожалуйста.Просто надо брать уже готовое и добавлять к нему свой код.Да по ссылке аналогично но весь пример целиком,копируйте и пользуйтесь.

 

[SergNed]

мои реалии пока всё таки не работают:
server.on("/dutyCycle", HTTP_GET, [](AsyncWebServerRequest *request)
{
valueString = request->getParam("value")->value();// получить значение из параметра value
// Задаем скорость мотора:
if (valueString != "0") {
dutyCycle = map(valueString.toInt(), 25, 100, 200, 255); }
request->send(200); // ответ что запрос принят
});

//на веб страничке

<input type="range" min="0" max="100" step="25" id="motorSlider" onchange="motorSpeed(this.value)" value="" + valueString + ""/> <script> function motorSpeed(val) {
var xmlhttp new XMLHttpRequest();
xmlhttp.open('GET', 'dutyCycle?value='+val,true);
xmlhttp.send(); } </script>

 

[dzanis]

Ну тут без всего скетча не понятно.Поставьте вывод в сериал и смотрите где именно не работает.

server.on("/dutyCycle", HTTP_GET, [](AsyncWebServerRequest *request)
{
valueString = request->getParam("value")->value();// получить значение из параметра value
Serial.println(valueString);
// Задаем скорость мотора:
if (valueString != "0") {
dutyCycle = map(valueString.toInt(), 25, 100, 200, 255); }
Serial.printf("dutyCycle:  %d\n", dutyCycle);
request->send(200); // ответ что запрос принят
});

И какой-то странный маппинг dutyCycle = map(valueString.toInt(), 25, 100, 200, 255);
Логично было-бы map(valueString.toInt(), 0, 100, 0, 255); это конечно если разрешение шима 255
Как настроены ledcSetup,ledcAttachPin ?
В общем без всего кода тут трудно помочь.

 

[SergNed]

заработало в таком виде:
<script> function motorSpeed(val) {
var xhr =new XMLHttpRequest();
xhr.open('GET', "/dutyCycle?value="+val,true);
xhr.send();
} </script>

поначалу автоматически копируя код не было знака "=" в var xhr =new XMLHttpRequest();

 

[SergNed]

ещё вопрос: в коде объявляю кнопку и далее
она обрабатывается в функции change1 с аргументом.
Где здесь ошибка?

<p><a><button onclick="change1("747")"><div id="747">%747%</div></button></a>


<script>
function change1(val) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(val).innerHTML=this.responseText;
}
};
xhttp.open("GET", "/val", true);
xhttp.send();
}
</script>

 

[SergNed]

ещё вопрос: в коде объявляю кнопку и далее
она обрабатывается в функции change1 с аргументом.
Где здесь ошибка?

<p><a><button onclick="change1("747")"><div id="747">%747%</div></button></a>


<script>
function change1(val) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(val).innerHTML=this.responseText;
}
};
xhttp.open("GET", "/val", true);
xhttp.send();
}
</script>

нашёл:
xhttp.open("GET", "/"+val, true); правильно так

 

[dzanis]

нашёл:

Я сначала тестирую в браузере страничку,отлаживаю чтоб не было ошибок и потом уже добавляю прошивку.Кстати как ты вставляешь веб код в прошивку?

 

[SergNed]

не всё можно отладить в браузере .
с помощью (SPIFFS) хотя мне кажется это не очень удобно.Удобнее путём создании константы-странички html

 

[yurik72]

Посмотрите пример.

ESPHap/examples/EspHapAdvancedDimmableLed at master · Yurik72/ESPHap

ESP32/ESP8266 Arduino library for native Apple Homekit Accessory Protocol (HAP) - Yurik72/ESPHap

github.com

Там и как вставить статическую страничку и как посылать запросы. в данном случае идея та же - ползунок , регулирование яркости