starred/WiFiManager

Fork 0

mirror of https://github.com/tzapu/WiFiManager.git synced 2026-04-27 00:55:52 +03:00

[GH-ISSUE #1390] Show separate web page after connection #1191

New issue

Closed

opened 2026-02-28 01:28:55 +03:00 by kerem · 4 comments

kerem commented

2026-02-28 01:28:55 +03:00

Owner

Originally created by @SkHCrusher on GitHub (Apr 11, 2022).
Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/1390

Basic Infos

Hardware

WiFimanager Branch/Release: Master
Esp8266/Esp32: Esp8266
Hardware: Esp8266MOD 12F

Description

I think this library is really great. I only have one problem and I can't get any further here.
In my example code I want to change the LED values for "ledColorIdle" and "ledColorHit" via a web interface at runtime (e.g. with 2 x 4 input boxes and a save button).

I just can't manage to use the library to display another webpage for these settings at runtime.

Connecting to an existing WLAN works without problems and as desired.

I'm probably just missing an approach here.
Thanks for your help

Settings in IDE

Module: NodeMcu

Additional libraries:

Adafruit_NeoPixel
IRremote

Sketch


#include <Arduino.h>

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

// IR
#define DECODE_SAMSUNG
#include <IRremote.hpp>
#define IR_RECEIVE_PIN D2

// LED
#include <Adafruit_NeoPixel.h>
#define LED_PIN     D4
#define LED_COUNT  12
#define BRIGHTNESS 255 // Set BRIGHTNESS to about 1/5 (max = 255)
Adafruit_NeoPixel strip(LED_COUNT, LED_PIN, NEO_GRBW + NEO_KHZ800);

// Color Settings
int ledColorWifiWait[4] = {100, 100, 0, 0};
int ledColorIdle[4] = {255, 0, 255, 0};
int ledColorHit[4] = {50, 0, 0, 0};

// General
bool targetHit = false;

void setup() {
  // Wifi - 1
  WiFi.mode(WIFI_STA);
  
  Serial.begin(115200);
  Serial.println(F("Starting APP"));
  
  // LED
  strip.begin();
  strip.show();
  strip.setBrightness(BRIGHTNESS);
  strip.fill(strip.Color(ledColorWifiWait[0], ledColorWifiWait[1], ledColorWifiWait[2], ledColorWifiWait[3]));
  strip.show();

  // Wifi - 2
  wm.resetSettings();
  bool res;
  res = wm.autoConnect("AutoConnectAP","password");
  if(!res) {
      Serial.println("Failed to connect");
      strip.fill(strip.Color(255, 0, 0, 0));
      strip.show();
      ESP.restart();
  } 
    
  // IR
  IrReceiver.begin(IR_RECEIVE_PIN, ENABLE_LED_FEEDBACK);

  // General
  targetHit = false;
}

void loop() {
  if (IrReceiver.decode()) {
    if (IrReceiver.decodedIRData.address == 0x707) {
      if (IrReceiver.decodedIRData.command == 0x7) {
        targetHit = true;
      }
    }
    IrReceiver.resume();
  }

  if (IrReceiver.isIdle()) {
    if (targetHit) {
      strip.fill(strip.Color(ledColorHit[0], ledColorHit[1], ledColorHit[2], ledColorHit[3]));
      strip.show();
      targetHit = false;
      delay(1000);
      IrReceiver.resume();
    } else {
      strip.fill(strip.Color(ledColorIdle[0], ledColorIdle[1], ledColorIdle[2], ledColorIdle[3]));
      strip.show();
    }
  }
}

Originally created by @SkHCrusher on GitHub (Apr 11, 2022). Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/1390 ### Basic Infos #### Hardware WiFimanager Branch/Release: Master Esp8266/Esp32: Esp8266 Hardware: Esp8266MOD 12F ### Description I think this library is really great. I only have one problem and I can't get any further here. In my example code I want to change the LED values for "ledColorIdle" and "ledColorHit" via a web interface at runtime (e.g. with 2 x 4 input boxes and a save button). I just can't manage to use the library to display another webpage for these settings at runtime. Connecting to an existing WLAN works without problems and as desired. I'm probably just missing an approach here. Thanks for your help ### Settings in IDE Module: NodeMcu Additional libraries: - Adafruit_NeoPixel - IRremote ### Sketch ```cpp #include <Arduino.h> // Wifi #include <WiFiManager.h> // https://github.com/tzapu/WiFiManager WiFiManager wm; // IR #define DECODE_SAMSUNG #include <IRremote.hpp> #define IR_RECEIVE_PIN D2 // LED #include <Adafruit_NeoPixel.h> #define LED_PIN D4 #define LED_COUNT 12 #define BRIGHTNESS 255 // Set BRIGHTNESS to about 1/5 (max = 255) Adafruit_NeoPixel strip(LED_COUNT, LED_PIN, NEO_GRBW + NEO_KHZ800); // Color Settings int ledColorWifiWait[4] = {100, 100, 0, 0}; int ledColorIdle[4] = {255, 0, 255, 0}; int ledColorHit[4] = {50, 0, 0, 0}; // General bool targetHit = false; void setup() { // Wifi - 1 WiFi.mode(WIFI_STA); Serial.begin(115200); Serial.println(F("Starting APP")); // LED strip.begin(); strip.show(); strip.setBrightness(BRIGHTNESS); strip.fill(strip.Color(ledColorWifiWait[0], ledColorWifiWait[1], ledColorWifiWait[2], ledColorWifiWait[3])); strip.show(); // Wifi - 2 wm.resetSettings(); bool res; res = wm.autoConnect("AutoConnectAP","password"); if(!res) { Serial.println("Failed to connect"); strip.fill(strip.Color(255, 0, 0, 0)); strip.show(); ESP.restart(); } // IR IrReceiver.begin(IR_RECEIVE_PIN, ENABLE_LED_FEEDBACK); // General targetHit = false; } void loop() { if (IrReceiver.decode()) { if (IrReceiver.decodedIRData.address == 0x707) { if (IrReceiver.decodedIRData.command == 0x7) { targetHit = true; } } IrReceiver.resume(); } if (IrReceiver.isIdle()) { if (targetHit) { strip.fill(strip.Color(ledColorHit[0], ledColorHit[1], ledColorHit[2], ledColorHit[3])); strip.show(); targetHit = false; delay(1000); IrReceiver.resume(); } else { strip.fill(strip.Color(ledColorIdle[0], ledColorIdle[1], ledColorIdle[2], ledColorIdle[3])); strip.show(); } } } ```

kerem

2026-02-28 01:28:55 +03:00

closed this issue
added the
Question
label

kerem commented

2026-02-28 01:28:56 +03:00

Author

Owner

@tablatronix commented on GitHub (Apr 11, 2022):

Look at the SUPER example for how to add custom webpages

@tablatronix commented on GitHub (Apr 11, 2022): Look at the SUPER example for how to add custom webpages

kerem commented

2026-02-28 01:28:56 +03:00

Author

Owner

@SkHCrusher commented on GitHub (Apr 11, 2022):

I had already looked at the example, but understood not much, because this is so full packed.

I have now tried a lot and I think I created an example, which contains everything important.
Maybe this also helps other people.

What was not clear to me:

What code is necessary to create your own variables.
CP in the super example stands for "config portal".
The portal does not run parallel to the loop
To run the loop I need e.g. a button to get back to the menu.
How do I get the content of the variable

I have created an example, in which you can set the speed of the LED blinking via the config portal.

/**
 * Simple example with additional custom menu item
 * and additional custom configuration page
 */
// Only for atoi function
#include <stdlib.h>

// WifiManager
#include <WiFiManager.h> // https://github.com/tzapu/WiFiManager
WiFiManager wm;
int cpTimeout = 90; // Timeout for the configuration portal
WiFiManagerParameter custom_led_delay("led_delay", "LED delay", "", 10);

// WifiManager configuration portal button
#define BTN_CP_START D5
int buttonState = 0;

// Init for LED blink
#define LED_PIN LED_BUILTIN
int currentLedState = LOW;
unsigned long previousMillis = 0;

void setup() {
  Serial.begin(115200); 
  delay(1000);

  // Set configuration portal PIN
  pinMode(BTN_CP_START, INPUT);

  // Set LED pin
  pinMode(LED_PIN, OUTPUT);

  // Custom configuration
  wm.addParameter(&custom_led_delay);

  // Set the default value for the custom field
  custom_led_delay.setValue("1000",4);

  // Custom menu
  // Added param for custom configuration
  // Added exit to start loop after configuration
  std::vector<const char *> menu = {"wifi","info","param","close","sep","update","exit"}; // Added param to the menu
  wm.setMenu(menu); // custom menu, pass vector

  // Auto Connect
  if(!wm.autoConnect("WM_AutoConnectAP","12345678")) {
    Serial.println("failed to connect and hit timeout");
  }
}

void loop() {
  // Code for Config Menu
  buttonState = digitalRead(BTN_CP_START);

  if (buttonState == HIGH) {
    Serial.println("Config portal ENABLED");
    wm.setConfigPortalTimeout(cpTimeout);
    wm.startConfigPortal("WM_ConnectAP","12345678");
  }

  // LED blink code
  ledLoop();
}

void ledLoop() {
  unsigned long currentMillis = millis();
  unsigned int ledDelay = atoi(custom_led_delay.getValue());
  
  if (currentMillis - previousMillis >= ledDelay) {
    Serial.println(ledDelay);
    previousMillis = currentMillis;
    
    if (currentLedState == LOW) {
      currentLedState = HIGH;
    } else {
      currentLedState = LOW;
    }
    digitalWrite(LED_PIN, currentLedState);
  }
}

@SkHCrusher commented on GitHub (Apr 11, 2022): I had already looked at the example, but understood not much, because this is so full packed. I have now tried a lot and I think I created an example, which contains everything important. Maybe this also helps other people. What was not clear to me: - What code is necessary to create your own variables. - CP in the super example stands for "config portal". - The portal does not run parallel to the loop - To run the loop I need e.g. a button to get back to the menu. - How do I get the content of the variable I have created an example, in which you can set the speed of the LED blinking via the config portal. ```cpp /** * Simple example with additional custom menu item * and additional custom configuration page */ // Only for atoi function #include <stdlib.h> // WifiManager #include <WiFiManager.h> // https://github.com/tzapu/WiFiManager WiFiManager wm; int cpTimeout = 90; // Timeout for the configuration portal WiFiManagerParameter custom_led_delay("led_delay", "LED delay", "", 10); // WifiManager configuration portal button #define BTN_CP_START D5 int buttonState = 0; // Init for LED blink #define LED_PIN LED_BUILTIN int currentLedState = LOW; unsigned long previousMillis = 0; void setup() { Serial.begin(115200); delay(1000); // Set configuration portal PIN pinMode(BTN_CP_START, INPUT); // Set LED pin pinMode(LED_PIN, OUTPUT); // Custom configuration wm.addParameter(&custom_led_delay); // Set the default value for the custom field custom_led_delay.setValue("1000",4); // Custom menu // Added param for custom configuration // Added exit to start loop after configuration std::vector<const char *> menu = {"wifi","info","param","close","sep","update","exit"}; // Added param to the menu wm.setMenu(menu); // custom menu, pass vector // Auto Connect if(!wm.autoConnect("WM_AutoConnectAP","12345678")) { Serial.println("failed to connect and hit timeout"); } } void loop() { // Code for Config Menu buttonState = digitalRead(BTN_CP_START); if (buttonState == HIGH) { Serial.println("Config portal ENABLED"); wm.setConfigPortalTimeout(cpTimeout); wm.startConfigPortal("WM_ConnectAP","12345678"); } // LED blink code ledLoop(); } void ledLoop() { unsigned long currentMillis = millis(); unsigned int ledDelay = atoi(custom_led_delay.getValue()); if (currentMillis - previousMillis >= ledDelay) { Serial.println(ledDelay); previousMillis = currentMillis; if (currentLedState == LOW) { currentLedState = HIGH; } else { currentLedState = LOW; } digitalWrite(LED_PIN, currentLedState); } } ```

kerem commented

2026-02-28 01:28:56 +03:00

Author

Owner

@tablatronix commented on GitHub (Apr 11, 2022):

Not sure but you are asking several things at once,

a custom webpage
custom parameters that are saved to filesystem

custom parameters have their own examples and instructions in the readme

@tablatronix commented on GitHub (Apr 11, 2022): Not sure but you are asking several things at once, * a custom webpage * custom parameters that are saved to filesystem custom parameters have their own examples and instructions in the readme

kerem commented

2026-02-28 01:28:56 +03:00

Author

Owner

@SkHCrusher commented on GitHub (Apr 12, 2022):

All good :-) I may have also explained it unhappily.

I just thought I was trying to help, which would have brought me forward.
The documentation was also not helpful to me on this point. That's why I had just worked out this example :-)

But maybe I am alone with this problem :-)

Thanks for your quick answers!

@SkHCrusher commented on GitHub (Apr 12, 2022): All good :-) I may have also explained it unhappily. I just thought I was trying to help, which would have brought me forward. The documentation was also not helpful to me on this point. That's why I had just worked out this example :-) But maybe I am alone with this problem :-) Thanks for your quick answers!