[GH-ISSUE #45] DropDown select for WLAN links

kerem commented

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

Owner

Originally created by @ghost on GitHub (Jan 4, 2016).
Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/45

It would be netter to use a select instead of links for WLAN selection.

Originally created by @ghost on GitHub (Jan 4, 2016). Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/45 It would be netter to use a select instead of links for WLAN selection.

kerem closed this issue

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

kerem commented

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

Author

Owner

@rpseng commented on GitHub (Jan 7, 2016):

Hi, I also believe an html 'select' would be better.

I can implement that and then send a pull request. My idea was:

If the user click on the 'scan' version, then a 'select' with the available options will be displayed
If the user click on the 'no scan' version, the an input for the ssid is shown

Additionally, a small javascript will hide/show the password input whenever the selected network is encrypted or not.

Some feedback should be nice before coding.

All the best.

@rpseng commented on GitHub (Jan 7, 2016): Hi, I also believe an html 'select' would be better. I can implement that and then send a pull request. My idea was: - If the user click on the 'scan' version, then a 'select' with the available options will be displayed - If the user click on the 'no scan' version, the an input for the ssid is shown Additionally, a small javascript will hide/show the password input whenever the selected network is encrypted or not. Some feedback should be nice before coding. All the best.

kerem commented

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

Author

Owner

@tzapu commented on GitHub (Jan 7, 2016):

guys, sorry but i don't favour the dropdowns idea very much...
they would be adding one extra step, be hard to style to show signal quality or encrypted status and so on. they would also look and behave differently in different browsers and/or devices.
i ve always had trouble with dropdowns, not to mention making them look and behave consistently

i think the no scan version already does that. I did not actually test connecting to an unencrypted network, there s a bug that doesn t show me other unecrypted esps, if not all unencrypted networks.

if connecting to an unencrypted network something small to show hide pass field might be interesting
thank you

@tzapu commented on GitHub (Jan 7, 2016): guys, sorry but i don't favour the dropdowns idea very much... they would be adding one extra step, be hard to style to show signal quality or encrypted status and so on. they would also look and behave differently in different browsers and/or devices. i ve always had trouble with dropdowns, not to mention making them look and behave consistently i think the no scan version already does that. I did not actually test connecting to an unencrypted network, there s a bug that doesn t show me other unecrypted esps, if not all unencrypted networks. if connecting to an unencrypted network something small to show hide pass field might be interesting thank you

kerem commented

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

Author

Owner

@rpseng commented on GitHub (Jan 7, 2016):

What about 'radio' buttons then?

@rpseng commented on GitHub (Jan 7, 2016): What about 'radio' buttons then?

kerem commented

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

Author

Owner

@tzapu commented on GitHub (Jan 8, 2016):

radio buttons would be more appropriate, but you'd still add more code for the same end result. (or maybe not if you remove the a elements...)
you could omit the input field, but then you'd have the password field possibly far away from the network selected, or you would have to add a bit of additional javascript to show/hide the password field in the appropriate place.

are you sure the end result is worth the increase in both code and complexity for this?
never had a problem myself with clicking the link and getting it pre populated in the needed field and then just entering the password

i am not against any changes, just wondering how you see the changes benefiting the users

@tzapu commented on GitHub (Jan 8, 2016): radio buttons would be more appropriate, but you'd still add more code for the same end result. (or maybe not if you remove the a elements...) you could omit the input field, but then you'd have the password field possibly far away from the network selected, or you would have to add a bit of additional javascript to show/hide the password field in the appropriate place. are you sure the end result is worth the increase in both code and complexity for this? never had a problem myself with clicking the link and getting it pre populated in the needed field and then just entering the password i am not against any changes, just wondering how you see the changes benefiting the users

kerem commented

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

Author

Owner

@tzapu commented on GitHub (Jan 8, 2016):

p.s. if you attach a bit of html on how you see the changes i can have a play with it
here s what i used for testing/extracting the html

<!DOCTYPE html><html lang=\"en\"><head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"/><title>{v}</title>
    <style>div,input{padding:5px;font-size:1em;} input{width:95%;} body{text-align: center;} button{border:0;border-radius:0.3rem;background-color:#1fa3ec;color:#fff;line-height:2.4rem;font-size:1.2rem;width:100%;}</style>
    <script>function c(l){document.getElementById('s').value=l.innerText||l.textContent;document.getElementById('p').focus();}</script>
</head><body><div style="text-align: left; display: inline-block;">
    <div><a href='#' onclick='c(this)'>{v}</a> {r}% {i}</div>
    <div><a href='#' onclick='c(this)'>{v}</a> 100%     <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAKCAMAAAC+Ge+yAAAACVBMVEUAAAC7u7v///9etNz6AAAAI0lEQVQI133GsQ3AMAAEoXv2H9qNJacKFbEaWTQJ+uQB/nMdEaYAXeJkZ9AAAAAASUVORK5CYII='/></div>
    <div><a href='#' onclick='c(this)'>Vila17</a> 95%   <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAADFBMVEUAAAAAtgD///8AAADV1YIHAAAAA3RSTlMAAAD6dsTeAAAAHUlEQVR4AWMAAmYgYGBkArHAAMoEYnQmMxSQywQAKvMA3+mlSFAAAAAASUVORK5CYII='/></div>
    <div><a href='#'>LilRidingHoodz</a> 100%            <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAABlBMVEUAAAD///+l2Z/dAAAAIklEQVR4AWNgZGRkAAIQBURQDEZAgM5kgAJGEAQDwkxkbQAOhgBBk64+mQAAAABJRU5ErkJggg=='/></div>
    <div><a href='#'>Marcelica</a> 100%                 <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAACVBMVEUAAAC7u7v///9etNz6AAAAJ0lEQVR4AY3GsREAIBSDUD77D63x4tlKw0MdmD0ijTO9f6SFnv7YXB4qAIVn0xoMAAAAAElFTkSuQmCC'/></div>
    <div><a href='#'>PMica</a> 110%                     <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADl82K3AAAAEXRSTlMAABUbPD94e7G3vcDD5PD5/Mw7MxAAAABQSURBVHgBrck5FoAgEATRBmQBZen7X1acN6KJmRX+gsHMp1qTx8wIBErhBj96dC72sSkc8hC4KzTaCyybAgmJ/IDCVRHgKwVov8KTQOYqw5weJgaXesJX/wAAAABJRU5ErkJggg=='/></div>
    <br/>
    <form method='get' action='wifisave'><input id='s' name='s' length=32 placeholder='SSID'><br/><input id='p' name='p' length=64 placeholder='password'><br/><button type='submit'>save</button></form>
    <br/>
    <form action=\"/wifi\" method=\"get\"><button>Configure WiFi</button></form><br/>
    <form action=\"/0wifi\" method=\"get\"><button>Configure WiFi (No Scan)</button></form>
    </div>
</body></html>

i wonder if i can add this html template to the repo as well, without it interfering with the arduino lib load process

@tzapu commented on GitHub (Jan 8, 2016): p.s. if you attach a bit of html on how you see the changes i can have a play with it here s what i used for testing/extracting the html ``` <!DOCTYPE html><html lang=\"en\"><head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"/><title>{v}</title> <style>div,input{padding:5px;font-size:1em;} input{width:95%;} body{text-align: center;} button{border:0;border-radius:0.3rem;background-color:#1fa3ec;color:#fff;line-height:2.4rem;font-size:1.2rem;width:100%;}</style> <script>function c(l){document.getElementById('s').value=l.innerText||l.textContent;document.getElementById('p').focus();}</script> </head><body><div style="text-align: left; display: inline-block;"> <div><a href='#' onclick='c(this)'>{v}</a> {r}% {i}</div> <div><a href='#' onclick='c(this)'>{v}</a> 100% <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAKCAMAAAC+Ge+yAAAACVBMVEUAAAC7u7v///9etNz6AAAAI0lEQVQI133GsQ3AMAAEoXv2H9qNJacKFbEaWTQJ+uQB/nMdEaYAXeJkZ9AAAAAASUVORK5CYII='/></div> <div><a href='#' onclick='c(this)'>Vila17</a> 95% <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAADFBMVEUAAAAAtgD///8AAADV1YIHAAAAA3RSTlMAAAD6dsTeAAAAHUlEQVR4AWMAAmYgYGBkArHAAMoEYnQmMxSQywQAKvMA3+mlSFAAAAAASUVORK5CYII='/></div> <div><a href='#'>LilRidingHoodz</a> 100% <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAABlBMVEUAAAD///+l2Z/dAAAAIklEQVR4AWNgZGRkAAIQBURQDEZAgM5kgAJGEAQDwkxkbQAOhgBBk64+mQAAAABJRU5ErkJggg=='/></div> <div><a href='#'>Marcelica</a> 100% <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAACVBMVEUAAAC7u7v///9etNz6AAAAJ0lEQVR4AY3GsREAIBSDUD77D63x4tlKw0MdmD0ijTO9f6SFnv7YXB4qAIVn0xoMAAAAAElFTkSuQmCC'/></div> <div><a href='#'>PMica</a> 110% <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADl82K3AAAAEXRSTlMAABUbPD94e7G3vcDD5PD5/Mw7MxAAAABQSURBVHgBrck5FoAgEATRBmQBZen7X1acN6KJmRX+gsHMp1qTx8wIBErhBj96dC72sSkc8hC4KzTaCyybAgmJ/IDCVRHgKwVov8KTQOYqw5weJgaXesJX/wAAAABJRU5ErkJggg=='/></div> <br/> <form method='get' action='wifisave'><input id='s' name='s' length=32 placeholder='SSID'><br/><input id='p' name='p' length=64 placeholder='password'><br/><button type='submit'>save</button></form> <br/> <form action=\"/wifi\" method=\"get\"><button>Configure WiFi</button></form><br/> <form action=\"/0wifi\" method=\"get\"><button>Configure WiFi (No Scan)</button></form> </div> </body></html> ``` i wonder if i can add this html template to the repo as well, without it interfering with the arduino lib load process

kerem commented

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

Author

Owner

@ghost commented on GitHub (Jan 8, 2016):

With a little CSS you can make a custom dropdown with a-tags. I can scribble something if you like. I think the UI would get a little smaller. In my case for example i have a terrible long list of networks.

@ghost commented on GitHub (Jan 8, 2016): With a little CSS you can make a custom dropdown with a-tags. I can scribble something if you like. I think the UI would get a little smaller. In my case for example i have a terrible long list of networks.

kerem commented

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

Author

Owner

@tzapu commented on GitHub (Jan 8, 2016):

i d be interested to see it, for sure, but if it s css only, i d rather give you the option of setting the css from the main sketch, and then you could taylor it however you would see fit

@tzapu commented on GitHub (Jan 8, 2016): i d be interested to see it, for sure, but if it s css only, i d rather give you the option of setting the css from the main sketch, and then you could taylor it however you would see fit

kerem commented

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

Author

Owner

@tzapu commented on GitHub (Jan 8, 2016):

i ve added the above html to the dev branch

@tzapu commented on GitHub (Jan 8, 2016): i ve added the above html to the dev branch

kerem commented

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

Author

Owner

@ghost commented on GitHub (Jan 14, 2016):

Here is my version with a simple select instead of inputs...

WiFiManager.template.html.zip

@ghost commented on GitHub (Jan 14, 2016): Here is my version with a simple select instead of inputs... [WiFiManager.template.html.zip](https://github.com/tzapu/WiFiManager/files/90333/WiFiManager.template.html.zip)

kerem commented

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

Author

Owner

@tzapu commented on GitHub (Jan 14, 2016):

hi, please don't take my reluctance to move to this as ill intended, but the css alone for the dropdown is adding ~1kB to the library. That's something like 7% of the whole lib, disproportionately big.
icon doesn t seem to work in firefox i think, did not try it on mobile yet, it's also fixed width and makes long network names drop on 2 lines.

the alignment of the signal and lock icon makes it look very clean and nice though

maybe we should decide on a html structure we re happy with, and give you the ability to add your own css. Add the dropdown css in documentation as well, then anyone can decide in their specific case of the memory usage is worth the nicer aspect

@tzapu commented on GitHub (Jan 14, 2016): hi, please don't take my reluctance to move to this as ill intended, but the css alone for the dropdown is adding ~1kB to the library. That's something like 7% of the whole lib, disproportionately big. icon doesn t seem to work in firefox i think, did not try it on mobile yet, it's also fixed width and makes long network names drop on 2 lines. the alignment of the signal and lock icon makes it look very clean and nice though maybe we should decide on a html structure we re happy with, and give you the ability to add your own css. Add the dropdown css in documentation as well, then anyone can decide in their specific case of the memory usage is worth the nicer aspect

Rows
Columns

[GH-ISSUE #45] DropDown select for WLAN links #34