diff --git a/README.md b/README.md index 2af35c1..e665055 100644 --- a/README.md +++ b/README.md @@ -9,8 +9,6 @@ WiFiManager gives ESP8266 and ESP32 firmware a polished, self-hosted Wi-Fi setup | ![Branded WiFiManager portal overview on an ESP32.](docs/assets/portal-esp32-branded-overview.png) | ![WiFiManager network picker and custom MQTT broker field on an ESP8266.](docs/assets/portal-esp8266-custom-wifi.png) | | Give each product its own title, identity, icon, and color theme without copying portal HTML. | Show live nearby networks and collect application values, such as an MQTT broker, in the same setup flow. | -These are unmodified browser captures of [Branded Portal](examples/BrandedPortal/) and [Custom Portal Content](examples/CustomPortalContent/) running on the supported boards. The portal is served by the device itself; no cloud UI or companion app is involved. - ## Start with a working portal ```cpp @@ -39,20 +37,18 @@ const char kTitle[] PROGMEM = "Set up Temperature Monitor"; const char kBrand[] PROGMEM = "Example Devices"; const char kAccent[] PROGMEM = "#347a45"; -const WiFiManagerPortalConfig kPortalUI = { - WiFiManagerPortalText::progmem(kTitle), - WiFiManagerPortalText::progmem(kBrand), - {}, {}, {}, - { - {}, {}, {}, {}, {}, - WiFiManagerPortalText::progmem(kAccent), - {}, {}, {}, {}, {}, - 10, 0, - }, -}; - void setup() { - wifi.setPortalConfig(kPortalUI); // before the portal starts + WiFiManagerPortalConfig portalUI; + + // Leave fields unset to keep WiFiManager's built-in portal values. + portalUI.title = WiFiManagerPortalText::progmem(kTitle); + portalUI.identityText = WiFiManagerPortalText::progmem(kBrand); + + // Theme values customise the built-in styles; they do not replace the portal. + portalUI.theme.accent = WiFiManagerPortalText::progmem(kAccent); + portalUI.theme.cornerRadiusPx = 10; + + wifi.setPortalConfig(portalUI); // Apply before the portal starts. wifi.autoConnect("Device Setup"); } diff --git a/docs/GETTING_STARTED.md b/docs/GETTING_STARTED.md index 3631095..d1e905f 100644 --- a/docs/GETTING_STARTED.md +++ b/docs/GETTING_STARTED.md @@ -11,17 +11,16 @@ WiFiManager wifi; void setup() { Serial.begin(115200); wifi.setConfigPortalTimeout(180); - if (!wifi.autoConnect("Example Setup", "change-me")) { - ESP.restart(); - } + wifi.autoConnect("Example Setup", "change-me"); } void loop() { + wifi.process(); // Keeps the portal responsive when setup is needed. // Normal work begins after autoConnect succeeds. } ``` -`autoConnect()` first tries stored station credentials. If that cannot connect, it starts the AP and portal with the supplied name and password. Use a Wi-Fi-valid AP password. +`autoConnect()` first tries stored station credentials. If that cannot connect, it starts the AP and portal with the supplied name and password, then returns `false`; call `process()` from `loop()` so that portal can run. Use a Wi-Fi-valid AP password. ## PlatformIO dependency diff --git a/docs/PORTAL_UI.md b/docs/PORTAL_UI.md index e5d8c38..a370564 100644 --- a/docs/PORTAL_UI.md +++ b/docs/PORTAL_UI.md @@ -23,31 +23,30 @@ const char kSurface[] PROGMEM = "#ffffff"; const char kAccent[] PROGMEM = "#347a45"; const char kAccentText[] PROGMEM = "#ffffff"; -const WiFiManagerPortalConfig kPortalUI = { - WiFiManagerPortalText::progmem(kTitle), - WiFiManagerPortalText::progmem(kIdentity), - WiFiManagerPortalText::progmem(kTagline), - WiFiManagerPortalAsset::svgFromProgmem(kLogo), - WiFiManagerPortalText::progmem(kLogoAlt), - { - WiFiManagerPortalText::progmem(kPage), - WiFiManagerPortalText::progmem(kSurface), - {}, {}, {}, - WiFiManagerPortalText::progmem(kAccent), - {}, - WiFiManagerPortalText::progmem(kAccentText), - {}, {}, {}, - 10, 6, - }, -}; +WiFiManagerPortalConfig kPortalUI; } void setup() { - wifi.setPortalConfig(kPortalUI); + // Set only the identity values this product needs. + kPortalUI.title = WiFiManagerPortalText::progmem(kTitle); + kPortalUI.identityText = WiFiManagerPortalText::progmem(kIdentity); + kPortalUI.tagline = WiFiManagerPortalText::progmem(kTagline); + kPortalUI.logo = WiFiManagerPortalAsset::svgFromProgmem(kLogo); + kPortalUI.logoAltText = WiFiManagerPortalText::progmem(kLogoAlt); + + // Unset theme values retain the built-in style. + kPortalUI.theme.pageBackground = WiFiManagerPortalText::progmem(kPage); + kPortalUI.theme.surface = WiFiManagerPortalText::progmem(kSurface); + kPortalUI.theme.accent = WiFiManagerPortalText::progmem(kAccent); + kPortalUI.theme.accentText = WiFiManagerPortalText::progmem(kAccentText); + kPortalUI.theme.cornerRadiusPx = 10; + kPortalUI.theme.smallCornerRadiusPx = 6; + + wifi.setPortalConfig(kPortalUI); // Configure before the portal starts. wifi.autoConnect("Temperature Monitor"); } -void loop() {} +void loop() { wifi.process(); } ``` The complete buildable example is [BrandedPortal](../examples/BrandedPortal/BrandedPortal.ino). The compile fixture exercises this API on ESP8266 and ESP32. diff --git a/examples/BasicPortal/BasicPortal.ino b/examples/BasicPortal/BasicPortal.ino index e5608d2..90350ff 100644 --- a/examples/BasicPortal/BasicPortal.ino +++ b/examples/BasicPortal/BasicPortal.ino @@ -7,9 +7,11 @@ void setup() { Serial.begin(115200); portal.setConfigPortalTimeout(180); - portal.autoConnect("WiFiManager Basic", "example-pass"); - - Serial.println("Connected. Run your normal application here."); + if (portal.autoConnect("WiFiManager Basic", "example-pass")) { + Serial.println("Connected. Run your normal application here."); + } else { + Serial.println("Setup portal started at http://192.168.4.1/"); + } } void loop() { portal.process(); } diff --git a/examples/BrandedPortal/BrandedPortal.ino b/examples/BrandedPortal/BrandedPortal.ino index b9f2df3..072db0d 100644 --- a/examples/BrandedPortal/BrandedPortal.ino +++ b/examples/BrandedPortal/BrandedPortal.ino @@ -15,29 +15,28 @@ const char kText[] PROGMEM = "#1c251e"; const char kAccent[] PROGMEM = "#347a45"; const char kAccentText[] PROGMEM = "#ffffff"; -const WiFiManagerPortalConfig kPortalUI = { - WiFiManagerPortalText::progmem(kPortalTitle), - WiFiManagerPortalText::progmem(kPortalIdentity), - WiFiManagerPortalText::progmem(kPortalTagline), - WiFiManagerPortalAsset::svgFromProgmem(kExampleLogo), - WiFiManagerPortalText::progmem(kPortalLogoAlt), - { - WiFiManagerPortalText::progmem(kPage), - WiFiManagerPortalText::progmem(kSurface), - WiFiManagerPortalText::progmem(kText), - {}, {}, - WiFiManagerPortalText::progmem(kAccent), - {}, - WiFiManagerPortalText::progmem(kAccentText), - {}, {}, {}, - 10, 6, - }, -}; +WiFiManagerPortalConfig kPortalUI; } void setup() { Serial.begin(115200); + // Brand the built-in portal; unassigned fields retain their default values. + kPortalUI.title = WiFiManagerPortalText::progmem(kPortalTitle); + kPortalUI.identityText = WiFiManagerPortalText::progmem(kPortalIdentity); + kPortalUI.tagline = WiFiManagerPortalText::progmem(kPortalTagline); + kPortalUI.logo = WiFiManagerPortalAsset::svgFromProgmem(kExampleLogo); + kPortalUI.logoAltText = WiFiManagerPortalText::progmem(kPortalLogoAlt); + + // Override only the theme tokens that define this product's appearance. + kPortalUI.theme.pageBackground = WiFiManagerPortalText::progmem(kPage); + kPortalUI.theme.surface = WiFiManagerPortalText::progmem(kSurface); + kPortalUI.theme.text = WiFiManagerPortalText::progmem(kText); + kPortalUI.theme.accent = WiFiManagerPortalText::progmem(kAccent); + kPortalUI.theme.accentText = WiFiManagerPortalText::progmem(kAccentText); + kPortalUI.theme.cornerRadiusPx = 10; + kPortalUI.theme.smallCornerRadiusPx = 6; + if (!wifi.setPortalConfig(kPortalUI)) { Serial.println("Portal UI configuration was rejected"); }