[GH-ISSUE #888] Addon: JSON message callback to change innerHTML realtime by id's #751

New issue

Open

opened 2026-02-28 01:26:53 +03:00 by kerem · 1 comment

kerem commented

2026-02-28 01:26:53 +03:00

Owner

Originally created by @dontsovcmc on GitHub (May 19, 2019).
Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/888

Look at my crazy addition.
I can request sensors while ConfigPortal is running and change innerHTML of labels.

I add my callback to WiFiManager.cpp:

void WiFiManager::handleWaterius() {
  String message;
  if (_wateriuscallback != NULL) {
    _wateriuscallback(message);
  }
  server->sendHeader("Content-Length", String(message.length()));
  server->send ( 200, "application/json", message );
}

link

server->on(String(F("/states")).c_str(), std::bind(&WiFiManager::handleWaterius, this));

link

void WiFiManager::setWateriusCallback(void (*func)(String &)) {
  _wateriuscallback = func;
}

WiFiManager.h:
void (*_wateriuscallback)(String &) = NULL;

I add this javascript to WebServer page:

const char WATERIUS_CALLBACK[] PROGMEM = "<script>\
    let timerId = setTimeout(function run() {\
        const xhr = new XMLHttpRequest();\
        xhr.open('GET', '/states');\
        xhr.send();\
        xhr.onreadystatechange = function (e) {\
            if(xhr.readyState === 4 && xhr.status === 200) {\
                var data = JSON.parse(xhr.responseText);\
                Object.keys(data).forEach(function(key) {\
                    document.getElementById(key).innerHTML = data[key];\
                })\
            };\
        };\
        timerId = setTimeout(run, 1000);\
    }, 1000);\
</script>";

Now i can create a function
void update_data(String &message)
and linked it by WiFiManager object in my code:

WiFiManager wm;
....
wm.setWateriusCallback(&update_data);
....

And do some rock!

void update_data(String &message)
{ 
// get data from sensors and etc
    String state0("\"\""), state1("\"some_text\"");

    message = "{\"state0\": " + state0
                + ", \"state1\": " + state1 
                + " }";
}

The 'state0' is an 'id' of the label, that I want to change.

I use it to check wire connection: If signal received, I write 'connected' on the webpage to user =).

Originally created by @dontsovcmc on GitHub (May 19, 2019). Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/888 Look at my crazy addition. I can request sensors while ConfigPortal is running and change innerHTML of labels. I add [my callback ](https://github.com/dontsovcmc/WiFiManager/blob/waterius_release_082/WiFiManager.cpp#L739)to WiFiManager.cpp: ``` void WiFiManager::handleWaterius() { String message; if (_wateriuscallback != NULL) { _wateriuscallback(message); } server->sendHeader("Content-Length", String(message.length())); server->send ( 200, "application/json", message ); } ``` [link](https://github.com/dontsovcmc/WiFiManager/blob/waterius_release_082/WiFiManager.cpp#L153) ``` server->on(String(F("/states")).c_str(), std::bind(&WiFiManager::handleWaterius, this)); ``` [link](https://github.com/dontsovcmc/WiFiManager/blob/waterius_release_082/WiFiManager.cpp#L795) ``` void WiFiManager::setWateriusCallback(void (*func)(String &)) { _wateriuscallback = func; } ``` WiFiManager.h: `void (*_wateriuscallback)(String &) = NULL;` I add this javascript to WebServer page: ``` const char WATERIUS_CALLBACK[] PROGMEM = "<script>\ let timerId = setTimeout(function run() {\ const xhr = new XMLHttpRequest();\ xhr.open('GET', '/states');\ xhr.send();\ xhr.onreadystatechange = function (e) {\ if(xhr.readyState === 4 && xhr.status === 200) {\ var data = JSON.parse(xhr.responseText);\ Object.keys(data).forEach(function(key) {\ document.getElementById(key).innerHTML = data[key];\ })\ };\ };\ timerId = setTimeout(run, 1000);\ }, 1000);\ </script>"; ``` Now i can create a function `void update_data(String &message)` and [linked it by WiFiManager](https://github.com/dontsovcmc/waterius/blob/master/ESP8266/src/setup_ap.cpp#L91) object in my code: ``` WiFiManager wm; .... wm.setWateriusCallback(&update_data); .... ``` And do some rock! ``` void update_data(String &message) { // get data from sensors and etc String state0("\"\""), state1("\"some_text\""); message = "{\"state0\": " + state0 + ", \"state1\": " + state1 + " }"; } ``` The 'state0' is an 'id' of the label, that I want to change. I use it to check wire connection: If signal received, I write 'connected' on the webpage to user =).

kerem commented

2026-02-28 01:26:54 +03:00

Author

Owner

@tablatronix commented on GitHub (May 19, 2019):

hmm you can do this in development with no code, see dev example for adding custom route endppoints

@tablatronix commented on GitHub (May 19, 2019): hmm you can do this in development with no code, see dev example for adding custom route endppoints