[GH-ISSUE #662] Adding custom header on the main page? #551

Open
opened 2026-02-28 01:25:50 +03:00 by kerem · 15 comments
Owner

Originally created by @vaz83 on GitHub (Jul 16, 2018).
Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/662

Hardware

WiFimanager Branch/Release: Development

Esp8266/Esp32: ESP8266 (nodeMCU module)
Hardware: ESP-12e, esp01, esp25
Core Version: 2.4.0, staging

Description

Hi, on the WebPortal of the WiFiManager, under the buttons, there's a header which tells me if i am connected to an AP and what's the IP address. My question is if can I add a second header (and how) to inform the user about other stuff (MQTT status, etc) ?

Originally created by @vaz83 on GitHub (Jul 16, 2018). Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/662 #### Hardware WiFimanager Branch/Release: Development Esp8266/Esp32: ESP8266 (nodeMCU module) Hardware: ESP-12e, esp01, esp25 Core Version: 2.4.0, staging ### Description Hi, on the WebPortal of the WiFiManager, under the buttons, there's a header which tells me if i am connected to an AP and what's the IP address. My question is if can I add a second header (and how) to inform the user about other stuff (MQTT status, etc) ?
Author
Owner

@tablatronix commented on GitHub (Jul 16, 2018):

I guess I can add a footer for now.

You can add static html in the strings.h but sounds like you want more dynamic content.

<!-- gh-comment-id:405317860 --> @tablatronix commented on GitHub (Jul 16, 2018): I guess I can add a footer for now. You can add static html in the strings.h but sounds like you want more dynamic content.
Author
Owner

@vaz83 commented on GitHub (Jul 16, 2018):

Yes, I wanted to have for example:
MQTT Status: Connected / Disconnected
Last Command Received: 0

<!-- gh-comment-id:405319018 --> @vaz83 commented on GitHub (Jul 16, 2018): Yes, I wanted to have for example: MQTT Status: Connected / Disconnected Last Command Received: 0
Author
Owner

@vaz83 commented on GitHub (Jul 17, 2018):

Will it be available in the future ?

<!-- gh-comment-id:405507798 --> @vaz83 commented on GitHub (Jul 17, 2018): Will it be available in the future ?
Author
Owner

@tablatronix commented on GitHub (Jul 17, 2018):

Yes I am still thinking about it

<!-- gh-comment-id:405618601 --> @tablatronix commented on GitHub (Jul 17, 2018): Yes I am still thinking about it
Author
Owner

@vaz83 commented on GitHub (Jul 20, 2018):

I've changed the cpp, h, and strings file. Already working here :)

<!-- gh-comment-id:406640861 --> @vaz83 commented on GitHub (Jul 20, 2018): I've changed the cpp, h, and strings file. Already working here :)
Author
Owner

@vaz83 commented on GitHub (Jul 20, 2018):

Tablatronix I can help you guys with code as well, if you need of course

<!-- gh-comment-id:406678769 --> @vaz83 commented on GitHub (Jul 20, 2018): Tablatronix I can help you guys with code as well, if you need of course
Author
Owner

@tablatronix commented on GitHub (Jul 20, 2018):

I am trying to determine if I should add just an html_footer or a way to add stuff inside the callout ( thats the information box on the bottom )

<!-- gh-comment-id:406695205 --> @tablatronix commented on GitHub (Jul 20, 2018): I am trying to determine if I should add just an html_footer or a way to add stuff inside the callout ( thats the information box on the bottom )
Author
Owner

@vaz83 commented on GitHub (Jul 20, 2018):

I’ve changed the code on the handle root, to display the information I need. Then made a void that receives the data I want and display on the main menu

<!-- gh-comment-id:406724837 --> @vaz83 commented on GitHub (Jul 20, 2018): I’ve changed the code on the handle root, to display the information I need. Then made a void that receives the data I want and display on the main menu
Author
Owner

@tablatronix commented on GitHub (Jul 20, 2018):

Where did you add it, what was a good location ? at the bottom ? before or after the status

You made a "function" (void) is the return value of that function

<!-- gh-comment-id:406728470 --> @tablatronix commented on GitHub (Jul 20, 2018): Where did you add it, what was a good location ? at the bottom ? before or after the status You made a "function" (void) is the return value of that function
Author
Owner

@vaz83 commented on GitHub (Jul 21, 2018):

image

I am sending you the print screen, i think it's the best option. I have also added changing colors from green to red when device is connected/disconected.
i added a void WiFiManager::setMQTTStatus(bool connected) and a void WiFiManager::showMQTTStatus(bool show) on the cpp file. When I set the showMQTTStatus to true, it reads the flag sent on the setMQTTStatus. To know which ip is the MQTT, i called the getParamOut and read only the parameters that I needed.
I have also made the following modifications:
=> added a back button on the configure wifi page, and the info page
=> Changed the code when I access the webportal, so that the title is the devicename and not the IP

<!-- gh-comment-id:406758354 --> @vaz83 commented on GitHub (Jul 21, 2018): ![image](https://user-images.githubusercontent.com/40854147/43030423-b3f21758-8c87-11e8-8c99-c5c95317afa7.png) I am sending you the print screen, i think it's the best option. I have also added changing colors from green to red when device is connected/disconected. i added a void WiFiManager::setMQTTStatus(bool connected) and a void WiFiManager::showMQTTStatus(bool show) on the cpp file. When I set the showMQTTStatus to true, it reads the flag sent on the setMQTTStatus. To know which ip is the MQTT, i called the getParamOut and read only the parameters that I needed. I have also made the following modifications: => added a back button on the configure wifi page, and the info page => Changed the code when I access the webportal, so that the title is the devicename and not the IP
Author
Owner

@zen85 commented on GitHub (May 16, 2020):

image

I am sending you the print screen, i think it's the best option. I have also added changing colors from green to red when device is connected/disconected.
i added a void WiFiManager::setMQTTStatus(bool connected) and a void WiFiManager::showMQTTStatus(bool show) on the cpp file. When I set the showMQTTStatus to true, it reads the flag sent on the setMQTTStatus. To know which ip is the MQTT, i called the getParamOut and read only the parameters that I needed.
I have also made the following modifications:
=> added a back button on the configure wifi page, and the info page
=> Changed the code when I access the webportal, so that the title is the devicename and not the IP

hmm... very neat. is this somewhere implemented? i can't find it :(

<!-- gh-comment-id:629716191 --> @zen85 commented on GitHub (May 16, 2020): > ![image](https://user-images.githubusercontent.com/40854147/43030423-b3f21758-8c87-11e8-8c99-c5c95317afa7.png) > > I am sending you the print screen, i think it's the best option. I have also added changing colors from green to red when device is connected/disconected. > i added a void WiFiManager::setMQTTStatus(bool connected) and a void WiFiManager::showMQTTStatus(bool show) on the cpp file. When I set the showMQTTStatus to true, it reads the flag sent on the setMQTTStatus. To know which ip is the MQTT, i called the getParamOut and read only the parameters that I needed. > I have also made the following modifications: > => added a back button on the configure wifi page, and the info page > => Changed the code when I access the webportal, so that the title is the devicename and not the IP hmm... very neat. is this somewhere implemented? i can't find it :(
Author
Owner

@tablatronix commented on GitHub (May 16, 2020):

I think a callback for page header and footer is good

<!-- gh-comment-id:629717678 --> @tablatronix commented on GitHub (May 16, 2020): I think a callback for page header and footer is good
Author
Owner

@vaz83 commented on GitHub (May 17, 2020):

image
I am sending you the print screen, i think it's the best option. I have also added changing colors from green to red when device is connected/disconected.
i added a void WiFiManager::setMQTTStatus(bool connected) and a void WiFiManager::showMQTTStatus(bool show) on the cpp file. When I set the showMQTTStatus to true, it reads the flag sent on the setMQTTStatus. To know which ip is the MQTT, i called the getParamOut and read only the parameters that I needed.
I have also made the following modifications:
=> added a back button on the configure wifi page, and the info page
=> Changed the code when I access the webportal, so that the title is the devicename and not the IP

hmm... very neat. is this somewhere implemented? i can't find it :(

I made it... i have added many many options meanwhile.. Also added parameters with combobox for multiple option, radio buttons, and others

<!-- gh-comment-id:629722926 --> @vaz83 commented on GitHub (May 17, 2020): > > ![image](https://user-images.githubusercontent.com/40854147/43030423-b3f21758-8c87-11e8-8c99-c5c95317afa7.png) > > I am sending you the print screen, i think it's the best option. I have also added changing colors from green to red when device is connected/disconected. > > i added a void WiFiManager::setMQTTStatus(bool connected) and a void WiFiManager::showMQTTStatus(bool show) on the cpp file. When I set the showMQTTStatus to true, it reads the flag sent on the setMQTTStatus. To know which ip is the MQTT, i called the getParamOut and read only the parameters that I needed. > > I have also made the following modifications: > > => added a back button on the configure wifi page, and the info page > > => Changed the code when I access the webportal, so that the title is the devicename and not the IP > > hmm... very neat. is this somewhere implemented? i can't find it :( I made it... i have added many many options meanwhile.. Also added parameters with combobox for multiple option, radio buttons, and others
Author
Owner

@tablatronix commented on GitHub (May 17, 2020):

Did you use the param child class to add those features?

<!-- gh-comment-id:629723532 --> @tablatronix commented on GitHub (May 17, 2020): Did you use the param child class to add those features?
Author
Owner

@stzoran1 commented on GitHub (Jan 28, 2023):

You can do it now using following method:
wifiManager.setTitle("YourTitle");

<!-- gh-comment-id:1407389912 --> @stzoran1 commented on GitHub (Jan 28, 2023): You can do it now using following method: `wifiManager.setTitle("YourTitle");`
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/WiFiManager#551
No description provided.