mirror of
https://github.com/tzapu/WiFiManager.git
synced 2026-04-27 17:15:53 +03:00
[GH-ISSUE #842] Adding logo to the WifiManager config portal page... #708
Labels
No labels
📶 WiFi
🕸️ HTTP
Branch
DEV Help Wanted
Discussion
Documentation
ESP32
Example
Good First Issue
Hotfix
In Progress
Incomplete
Needs Feeback
Priority
QA
Question
Task
Upstream/Dependancy
bug
duplicate
enhancement
invalid
pull-request
wontfix
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
starred/WiFiManager#708
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @e-music on GitHub (Mar 5, 2019).
Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/842
Hi,
I want to add a banner logo on top of the config portal of WifiManager. I know how to upload the files to SPIFFS and where to insert HTML tags in the code, however, the image doesn't show up in browser.
I've seen certain examples doing it by serving HTML requests within the code, but not sure how to do the same with WifiManager.
@e-music commented on GitHub (Mar 7, 2019):
I guess in order for this to work out, the file and the HTML page that serves that file both have to be on SPIFFS. The problem is the way WiFiManager handles the HTML and HTTP requests. Not so sure as I'm not a web programmer, but there must be a work around to do it.
Any advice?
@tablatronix commented on GitHub (Mar 7, 2019):
You need an end point that serves the image
@e-music commented on GitHub (Mar 7, 2019):
Thank you. It would be nice if you can elaborate a little bit about it. I’m coming from pure embedded C background and not well founded in IOT and web programming.
@tablatronix commented on GitHub (Mar 7, 2019):
I would give you examples but you didnt fill out the form, you will want to use development branch so you can add event listeners to the webserver, you cannot on stable without modifying the lib code, which is a little easier.
Also you should start with implementing it before trying to integrate into wm
https://github.com/esp8266/Arduino/blob/master/libraries/ESP8266WebServer/examples/FSBrowser/FSBrowser.ino
@e-music commented on GitHub (Mar 7, 2019):
Thank you. Examples would help a lot. But, what “form” are you talking about, I didn’t get it.
@tablatronix commented on GitHub (Mar 7, 2019):
When you opened the issue there was not a form in the field that you removed?
@tablatronix commented on GitHub (Mar 7, 2019):
There is an example on route handling in this example in development
https://github.com/tzapu/WiFiManager/blob/development/examples/DEV/OnDemandConfigPortal/OnDemandConfigPortal.ino
@e-music commented on GitHub (Mar 7, 2019):
Yes, I get it. I will use it for new issues if that helps.
Thank you for the examples.
@e-music commented on GitHub (Mar 8, 2019):
This sketch "OnDemandConfigPortal.ino" didn't compile. It has tons of issues!
@e-music commented on GitHub (Mar 8, 2019):
I've been trying for the past 8 hours but couldn't figure it out. I know that I have to understand how HTTP server works, but for the time being, it would be very helpful if you can provide an example for WM with logo on the config portal page (Captive portal).
@e-music commented on GitHub (Mar 8, 2019):
By the way, what makes things more complicated for me is the way the HTML is served. Why not make the HTML pages in SPIFFS instead of using PROGMEM so one can easily customize the page by applying CSS stylesheets and adding customs images.
@tablatronix commented on GitHub (Mar 8, 2019):
because then users need to upload the filesystem and it adds complexity and bloat, wm is not a web server, so we do not want to head in that direction. Maybe in a future version
@rafalfigura commented on GitHub (Mar 21, 2019):
e-music, have you tried to convert image to base64 and serve that in html?
img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" /
@xtech007 commented on GitHub (Apr 4, 2020):
Hi!
Did any of the above worked?
Where you able to add the logo?
If so can you show us, and where in the code!
@georgevbsantiago commented on GitHub (May 14, 2021):
In the file "strings_en.h" there is a commented PROGMEM with an example of how to insert a logo. It is to generate the representation of the image in base64 (there are free generators on the internet) See below the code snippet: