Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

How to refresh (repaint) custom param element on setValue() #1738

Open
jpeterse opened this issue May 15, 2024 · 2 comments
Open

How to refresh (repaint) custom param element on setValue() #1738

jpeterse opened this issue May 15, 2024 · 2 comments

Comments

@jpeterse
Copy link

jpeterse commented May 15, 2024

I'm working on an project, where I would like to give users feedback when entering custom parameters in the config panel.
I have it sending value updates to a param element using setValue(). But it doesn't look like the element is refreshed on the page until the entire page is refreshed. E.g. like in issue 1464 about logging.
I would like for users not to loose their data input, in order to refresh that one field that the code is updating.

Is there a way, that the field can be redrawn/refreshed when setValue() is called?

(BTW, I'm aware setValue() is server side, and I need to update the field client side. Question is, how I can do that.)

Generic Esp8266
Core Version: 2.0.17
Sample code;

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

WiFiManager wm;

int LRTReading = 0;

class IntParameter : public WiFiManagerParameter {
public:
    IntParameter(const char *id, const char *placeholder, long value, const uint8_t length = 10) : WiFiManagerParameter("") {
      init(id, placeholder, String(value).c_str(), length, "", WFM_LABEL_BEFORE);
    }

    long getValue() {
      return String(WiFiManagerParameter::getValue()).toInt();
    }

    void setValue( int value ) {
      WiFiManagerParameter::setValue( String(value).c_str(), 10 );
      
    }
};

IntParameter param_int( "int", "param_int",  LRTReading );

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.addParameter( &param_int );
    wm.setConfigPortalBlocking(false);

    //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("Config portal running");
    }
}


uint32_t t;
uint16_t i;
uint16_t delay_val = 1000;

void loop() {
  t = millis();
  i = ( t / delay_val );
  // put your main code here, to run repeatedly:
  Serial.println( i );
  param_int.setValue( i );
  while ( millis() < t + delay_val )
    wm.process();
}
@tablatronix
Copy link
Collaborator

Are you wanting to do it via ajax? Not sure I understand, you will need to add some xhr js to the page

@jpeterse
Copy link
Author

I assume it would have to be done with ajax. But that's only my assumption.

I have not been able to find examples of how I can use that abilities provided within WiFiManager, to update a field on the configuration page dynamically. Users will have to click the refresh button to reload the configuration page to see the updated value.

WiFiManager starts it own web server, when the configuration page is being displayed. I know I can inject java script in the header, and on custom parameters as well. But I don't know if I have access to inject the js code needed to listen for XHR requests.

I was looking to use WiFiManager to do this, because it's a one time configuration, just like setting up the network is.
But Is it possible, or is a fools errand to attempt to use custom parameters for this? ;-)

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants