• Уважаемые посетители сайта esp8266.ru!
    Мы отказались от размещения рекламы на страницах форума для большего комфорта пользователей.
    Вы можете оказать посильную поддержку администрации форума. Данные средства пойдут на оплату услуг облачных провайдеров для сайта esp8266.ru
  • Система автоматизации с открытым исходным кодом на базе esp8266/esp32 микроконтроллеров и приложения IoT Manager. Наша группа в Telegram

Отображение статуса батареи на веб-странице

mike-h

New member
Искал примеры для мониторинга питающей батарейки моей платы ESP8266 Wemos D1 mini pro. Обязательное условие - использование библиотеки AsyncWebServer, т.к. она используется для управления моим дроном. Написал сам, привожу пример кода. Внимание, делитель в коде необходимо пересчитать в зависимости номиналов резисторов делителя и номинального напряжения батареи.

C++:
#include <ArduinoJson.h>
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>

const int analog_PIN = A0; //ESP8266 Analog Pin ADC0 A0

int val = 0;

String power_val;

IPAddress IP;
StaticJsonDocument<200> doc;
AsyncWebServer server(80);
AsyncWebSocket ws("/ws");

const char *ssid = "MYSSID";
const char *password = "MYPASSWORD";

const char indexhtml[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 user-scalable=no">
    <title>Hover Boat</title>
    <style>
        html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        body {
            margin: 0;
            padding: 0;
            height: 96%;
            background-color: rgba(65, 105, 225, 0);
        }
        meter {
             width: 100%;
             height: 1em;
        }
    </style>
</head>
<body>
<meter id="battery" value = "19" max = "102" low = "20" high = "80" optimum = "90">10 из 100</meter> <br>
</body>
<script>
setInterval(function() {
        getData();
        }, 500);   
    function getData() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("battery").value =
            this.responseText;
            }
        };
        xhttp.open("GET", "/bat", true);
        xhttp.send();
    }
</script>
</html>
)rawliteral";

void setup() {
    Serial.begin(115200);
    IPAddress ip(192, 168, 4, 1);
    IPAddress gateway(192, 168, 4, 1);
    IPAddress subnet(255, 255, 255, 0);

    WiFi.mode(WIFI_AP);
    WiFi.softAPConfig(ip, gateway, subnet);
    WiFi.softAP(ssid, password, 13, false, 1);
    IP = WiFi.softAPIP();
    server.addHandler(&ws);
    
    server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
        request->send(200, "text/html", indexhtml);
    });
    server.on("/bat", HTTP_GET, [](AsyncWebServerRequest *request){
        request->send(200, "text/plain", power_data().c_str());
    });
    server.onNotFound([](AsyncWebServerRequest *request) {
        request->send(404, "text/plain", "Not found");
    });

    server.begin();
    Serial.println("HTTP server started");
}

String power_data() {
    val = analogRead(A0);
    power_val = String(val/10);
    return String(power_val);
}

void loop() {
}
 

Ildarmustafin86

Active member
У вас каждые 0.5 секунд будет get запрос? Автор этой библиотеки использует %PLACEHOLDER%. Думаю вам лучше копать в эту сторону. Например
 

mike-h

New member
Да, в данном коде сделал период для запроса - 0,5сек, чтобы снять живое видео для товарища. В реале надо увеличить до секунд 5-15.
Что касается Вашего примера "processor" его тоже пробовал, благо туча примеров есть на этом форуме, ничего получилось, он ломает у меня всю страницу.
 
Сверху Снизу