starred/WiFiManager

Fork 0

mirror of https://github.com/tzapu/WiFiManager.git synced 2026-04-27 09:05:56 +03:00

[GH-ISSUE #111] signal strength meter icons #85

New issue

Closed

opened 2026-02-28 01:23:20 +03:00 by kerem · 8 comments

kerem commented

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

Owner

Originally created by @tablatronix on GitHub (Feb 26, 2016).
Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/111

I was throwing this together for myself and will probably commit to my fork and do a PR, thoughts ?

it is fairly small, slightly larger than the lock icon alone and the markup is also small, only a few classes on elements.

But i do not know what is acceptable, could easily be changed to font svg icons or remove transparency to increase, decrease size, resolutions, as far as retina goes, I have no idea what the minimum size for icons should be, these might look terrible, i have not tested yet.

(current lock icon is 214 bytes, so this adds net total of 619 bytes to mem)

Originally created by @tablatronix on GitHub (Feb 26, 2016). Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/111 I was throwing this together for myself and will probably commit to my fork and do a PR, thoughts ? it is fairly small, slightly larger than the lock icon alone and the markup is also small, only a few classes on elements. But i do not know what is acceptable, could easily be changed to font svg icons or remove transparency to increase, decrease size, resolutions, as far as retina goes, I have no idea what the minimum size for icons should be, these might look terrible, i have not tested yet. (current lock icon is 214 bytes, so this adds net total of 619 bytes to mem) ![127 0 0 1srcwifi_sprite_-_google_chrome_2016-02-26_12-48-47](https://cloud.githubusercontent.com/assets/807787/13362286/09b21460-dc89-11e5-99df-e3bfdd9e1896.png)

kerem

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

closed this issue
added the
enhancement
label

kerem commented

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

Author

Owner

@tzapu commented on GitHub (Feb 27, 2016):

these looks awesome, really nice work
for retina, they need to be about double the size they are set at, so 20px for a 10px shown image.
about 14px seems to work ok in relation to the current font size

really excited for this, looks really nice 👍

@tzapu commented on GitHub (Feb 27, 2016): these looks awesome, really nice work for retina, they need to be about double the size they are set at, so 20px for a 10px shown image. about 14px seems to work ok in relation to the current font size really excited for this, looks really nice :+1:

kerem commented

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

Author

Owner

@tablatronix commented on GitHub (Mar 25, 2016):

ok so I have a final version coming.

I few things I found.

base64 encoding does not support @2x image scaling.
And I cannot just use large images and scale down for non retina, because then it is blurry, blegh

So I had to include 16px sprites, and a 32px sprite for 192ppi display using a @media selector, which I then half scale, so the sprite coords do not have to be duplicated. It works, much crisper icons on IOS safari and chrome, I have not the hardware to test on android to see if it gets blurry or not

If you don't want the extra progmem space, you can easily comment the hi res out, no big deal.

All in all all entire style string is ~1.4k, with negligible markup added to the html.

I also added accessibility title and aria-labels to the icon container since they are background images and not very screen reader compliant by default. This also allows hover text of the quality nicely for more detail.

icons can be left or right aligned with respect to the SSID link, left or right classes on the parent div.
There is also an invert class for that to invert the icons to white.

@tablatronix commented on GitHub (Mar 25, 2016): ok so I have a final version coming. I few things I found. base64 encoding does not support @2x image scaling. And I cannot just use large images and scale down for non retina, because then it is blurry, blegh So I had to include 16px sprites, and a 32px sprite for 192ppi display using a @media selector, which I then half scale, so the sprite coords do not have to be duplicated. It works, much crisper icons on IOS safari and chrome, I have not the hardware to test on android to see if it gets blurry or not If you don't want the extra progmem space, you can easily comment the hi res out, no big deal. All in all all entire style string is ~1.4k, with negligible markup added to the html. I also added accessibility title and aria-labels to the icon container since they are background images and not very screen reader compliant by default. This also allows hover text of the quality nicely for more detail. icons can be left or right aligned with respect to the SSID link, `left` or `right` classes on the parent div. There is also an `invert` class for that to invert the icons to white. ![img_6197](https://cloud.githubusercontent.com/assets/807787/14051988/c8eca022-f294-11e5-9bf7-ee83efbd4fad.PNG) ![config_esp_-_google_chrome_2016-03-25_14-27-17](https://cloud.githubusercontent.com/assets/807787/14052117/c555212c-f295-11e5-868d-c2bf7cceb499.png)

kerem commented

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

Author

Owner

@tablatronix commented on GitHub (Jun 4, 2016):

any chance to test?

@tablatronix commented on GitHub (Jun 4, 2016): any chance to test?

kerem commented

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

Author

Owner

@tzapu commented on GitHub (Jun 5, 2016):

hi mate, sorry for taking so long, had and still have a few long and busy weeks.
i hope to make more progress next week

@tzapu commented on GitHub (Jun 5, 2016): hi mate, sorry for taking so long, had and still have a few long and busy weeks. i hope to make more progress next week

kerem commented

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

Author

Owner

@tablatronix commented on GitHub (Feb 8, 2017):

any chance in hell of merging this?
want me to pr to development?

@tablatronix commented on GitHub (Feb 8, 2017): any chance in hell of merging this? want me to pr to development?

kerem commented

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

Author

Owner

@tzapu commented on GitHub (Feb 9, 2017):

hi, sure, if you could pr it to dev it would be perfect as some things have changed
cheers

@tzapu commented on GitHub (Feb 9, 2017): hi, sure, if you could pr it to dev it would be perfect as some things have changed cheers

kerem commented

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

Author

Owner

@tablatronix commented on GitHub (Feb 10, 2017):

Do you have tagged issues or a milestone of the changes or plans for dev or a single issue even?

@tablatronix commented on GitHub (Feb 10, 2017): Do you have tagged issues or a milestone of the changes or plans for dev or a single issue even?

kerem commented

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

Author

Owner

@tablatronix commented on GitHub (Aug 28, 2017):

add template options for icon, RSSI, pecentage, might want icons + RSSI db togather, or percentage by itself. etc.

@tablatronix commented on GitHub (Aug 28, 2017): - [x] add template options for icon, RSSI, pecentage, might want icons + RSSI db togather, or percentage by itself. etc.