starred/WiFiManager

Fork 0

mirror of https://github.com/tzapu/WiFiManager.git synced 2026-04-27 09:05:56 +03:00

[GH-ISSUE #1464] Dynamically setting the value of a WiFiManagerParameter #1254

New issue

Open

opened 2026-02-28 01:29:15 +03:00 by kerem · 5 comments

kerem commented

2026-02-28 01:29:15 +03:00

Owner

Originally created by @paopre on GitHub (Aug 1, 2022).
Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/1464

Hello,

not an Issue but a question or (maybe) a request of enhancement.

Given:

WiFiManagerParameter logVal("logger", "", "", 40);

I can dinamycally update it in the loop() function with:

wm.getParameters()[0]->setValue("some text" , 40);

together with a javascript code like:

<script>
function updateVal() {
    document.getElementById("logger").value = i++;
    setTimeout(updateVal, 2000); //update on client side every 2 seconds
}
</script>

However, this doesn't work if the parameter is not an tag. For example:

WiFiManagerParameter logVal("<p>some text</p>");

So: is there a way to dynamically set the value in this case too? It would be very useful for logging on the web page, instead of using the Serial.print() output.

Otherwise, is there an alternative for obtaining the same result?

Thanks!
P

Originally created by @paopre on GitHub (Aug 1, 2022). Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/1464 Hello, not an Issue but a question or (maybe) a request of enhancement. Given: ``` WiFiManagerParameter logVal("logger", "", "", 40); ``` I can dinamycally update it in the loop() function with: ``` wm.getParameters()[0]->setValue("some text" , 40); ``` together with a javascript code like: ``` <script> function updateVal() { document.getElementById("logger").value = i++; setTimeout(updateVal, 2000); //update on client side every 2 seconds } </script> ``` However, this doesn't work if the parameter is not an <input> tag. For example: ``` WiFiManagerParameter logVal("<p>some text</p>"); ``` So: is there a way to dynamically set the value in this case too? It would be very useful for logging on the web page, instead of using the Serial.print() output. Otherwise, is there an alternative for obtaining the same result? Thanks! P

kerem commented

2026-02-28 01:29:15 +03:00

Author

Owner

@tablatronix commented on GitHub (Aug 1, 2022):

Yeah there is a issue here somewhere to generate or allow ids for all params, let me find where I left it off.

have you tried setcustomhtml ? I think thats a thing

@tablatronix commented on GitHub (Aug 1, 2022): Yeah there is a issue here somewhere to generate or allow ids for all params, let me find where I left it off. have you tried setcustomhtml ? I think thats a thing

kerem commented

2026-02-28 01:29:15 +03:00

Author

Owner

@tablatronix commented on GitHub (Aug 1, 2022):

i lied, nm
it is also a char pointer, so string size can be an issue unless you allocate a large enough char reference and use memory safe copys.. hmm

@tablatronix commented on GitHub (Aug 1, 2022): i lied, nm it is also a char pointer, so string size can be an issue unless you allocate a large enough char reference and use memory safe copys.. hmm

kerem commented

2026-02-28 01:29:15 +03:00

Author

Owner

@paopre commented on GitHub (Aug 1, 2022):

i lied, nm it is also a char pointer, so string size can be an issue unless you allocate a large enough char reference and use memory safe copys.. hmm

Yeah there is a issue here somewhere to generate or allow ids for all params, let me find where I left it off.

have you tried setcustomhtml ? I think thats a thing

Yeah, I just created a logger page with setCustomMenuHTML(), and it works perfectly. I think you can close the issue.
I also think that it would be useful to add to the documentation/examples how to log on the web pages, because logging on serial can be a limitation for many reasons.

Here is a working example for doing that, made with a simple circular buffer. It's a modification of the AutoConnectNonBlocking.ino example. It can be useful for people who, like me, were searching for a quick way to implement this feature:

#include <WiFiManager.h> // https://github.com/tzapu/WiFiManager

#define LOG_LINES 5

WiFiManager wm;
char webLogCircularBuf[LOG_LINES][100] = {0};
String webLog = "";
const char *logHTMLTags = R"(
    <html>
        <body>%s</body>
        <script>
            function updateLog() {
                location.reload();
                setTimeout(updateLog, 1000);
            }
           updateLog();
        </script>
    </html>
)";

void addStringToLogger(const char *str) {
    static unsigned currLogLine = 0;
    static int circularCounter;
    strcpy(webLogCircularBuf[currLogLine++], str);
    webLog = "";
    for (unsigned k = 0; k < LOG_LINES; k++) {
        circularCounter = (circularCounter + 1) % LOG_LINES;
        webLog += "<p style='font-size:50px;'>" + String(webLogCircularBuf[circularCounter]) + "</p>";
    }
    circularCounter = (circularCounter + 1) % LOG_LINES;
    if (currLogLine == LOG_LINES)
        currLogLine = 0;
}

void bindServerCallback(){
    wm.server->on("/logger",handleLoggerRoute);
}

void handleLoggerRoute(){
    char buf[400];
    sprintf(buf, logHTMLTags, webLog.c_str());
    wm.server->send(200, "text/html", buf);
}

void setup() {
    WiFi.mode(WIFI_STA); // explicitly set mode, esp defaults to STA+AP    
    // put your setup code here, to run once:
    Serial.begin(115200);

    //reset settings - wipe credentials for testing
    //wm.resetSettings();

    wm.setWebServerCallback(bindServerCallback);
    // set custom html menu content , inside menu item "custom", see setMenu()
    const char* menuhtml = "<form action='/logger' method='get'><button>Log</button></form><br/>\n";
    wm.setCustomMenuHTML(menuhtml);

    std::vector<const char *> menu = {"wifi","info", "custom", "exit", "sep","update"};
    wm.setMenu(menu);

    wm.setConfigPortalBlocking(false);
    wm.setConfigPortalTimeout(60);
    //automatically connect using saved credentials if they exist
    //If connection fails it starts an access point with the specified name
    if(wm.autoConnect("AutoConnectAP")){
        Serial.println("connected...yeey :)");
    }
    else {
        Serial.println("Configportal running");
    }
}

void loop() {
    static int q = 0;
    static int dummyNumber = 0;
    
    wm.process();

    if (millis() - q > 1000) {
        q = millis();
        addStringToLogger(String(dummyNumber++).c_str());
    }
}

@paopre commented on GitHub (Aug 1, 2022): > i lied, nm it is also a char pointer, so string size can be an issue unless you allocate a large enough char reference and use memory safe copys.. hmm > i lied, nm it is also a char pointer, so string size can be an issue unless you allocate a large enough char reference and use memory safe copys.. hmm > Yeah there is a issue here somewhere to generate or allow ids for all params, let me find where I left it off. > > have you tried setcustomhtml ? I think thats a thing Yeah, I just created a logger page with setCustomMenuHTML(), and it works perfectly. I think you can close the issue. I also think that it would be useful to add to the documentation/examples how to log on the web pages, because logging on serial can be a limitation for many reasons. Here is a working example for doing that, made with a simple circular buffer. It's a modification of the AutoConnectNonBlocking.ino example. It can be useful for people who, like me, were searching for a quick way to implement this feature: ``` #include <WiFiManager.h> // https://github.com/tzapu/WiFiManager #define LOG_LINES 5 WiFiManager wm; char webLogCircularBuf[LOG_LINES][100] = {0}; String webLog = ""; const char *logHTMLTags = R"( <html> <body>%s</body> <script> function updateLog() { location.reload(); setTimeout(updateLog, 1000); } updateLog(); </script> </html> )"; void addStringToLogger(const char *str) { static unsigned currLogLine = 0; static int circularCounter; strcpy(webLogCircularBuf[currLogLine++], str); webLog = ""; for (unsigned k = 0; k < LOG_LINES; k++) { circularCounter = (circularCounter + 1) % LOG_LINES; webLog += "<p style='font-size:50px;'>" + String(webLogCircularBuf[circularCounter]) + "</p>"; } circularCounter = (circularCounter + 1) % LOG_LINES; if (currLogLine == LOG_LINES) currLogLine = 0; } void bindServerCallback(){ wm.server->on("/logger",handleLoggerRoute); } void handleLoggerRoute(){ char buf[400]; sprintf(buf, logHTMLTags, webLog.c_str()); wm.server->send(200, "text/html", buf); } void setup() { WiFi.mode(WIFI_STA); // explicitly set mode, esp defaults to STA+AP // put your setup code here, to run once: Serial.begin(115200); //reset settings - wipe credentials for testing //wm.resetSettings(); wm.setWebServerCallback(bindServerCallback); // set custom html menu content , inside menu item "custom", see setMenu() const char* menuhtml = "<form action='/logger' method='get'><button>Log</button></form><br/>\n"; wm.setCustomMenuHTML(menuhtml); std::vector<const char *> menu = {"wifi","info", "custom", "exit", "sep","update"}; wm.setMenu(menu); wm.setConfigPortalBlocking(false); wm.setConfigPortalTimeout(60); //automatically connect using saved credentials if they exist //If connection fails it starts an access point with the specified name if(wm.autoConnect("AutoConnectAP")){ Serial.println("connected...yeey :)"); } else { Serial.println("Configportal running"); } } void loop() { static int q = 0; static int dummyNumber = 0; wm.process(); if (millis() - q > 1000) { q = millis(); addStringToLogger(String(dummyNumber++).c_str()); } } ```

kerem commented

2026-02-28 01:29:15 +03:00

Author

Owner

@tablatronix commented on GitHub (Aug 2, 2022):

Ah ok yeah no need to use params good idea, I use netlog for most of my esp devices and log to a server syslog, this might make a cool example

@tablatronix commented on GitHub (Aug 2, 2022): Ah ok yeah no need to use params good idea, I use netlog for most of my esp devices and log to a server syslog, this might make a cool example

kerem commented

2026-02-28 01:29:15 +03:00

Author

Owner

@paopre commented on GitHub (Aug 2, 2022):

Ah ok yeah no need to use params good idea, I use netlog for most of my esp devices and log to a server syslog, this might make a cool example

After testing It, I suggest You to consider to add It as a replacement of AutoConnectNonBlocking.ino. You can see that only few Lines of AutoConnectNonBlocking.ino are modified and It provides means for web logging without using external tools.

@paopre commented on GitHub (Aug 2, 2022): > Ah ok yeah no need to use params good idea, I use netlog for most of my esp devices and log to a server syslog, this might make a cool example After testing It, I suggest You to consider to add It as a replacement of AutoConnectNonBlocking.ino. You can see that only few Lines of AutoConnectNonBlocking.ino are modified and It provides means for web logging without using external tools.