[Suggestion] [art mock-up] Map: Make map icons smaller by removing padding and using smaller fonts. #183

New Issue

2026-10-27T15:42:42+01:00

adam commented

2026-10-27 15:42:42 +01:00

Currently, the icons on the map showing MeshCore nodes are 18x11 pixels big.

This includes two pixels "blank" space left and three pixels "blank" space right of the text.

By using a 3x5 font -- which is enough to display all hex characters -- and having only 1 pixel padding, the size of the icons could be reduced to 11x9 pixels; if the outer border also is removed (just having the background 1 pixel bigger than the writing) 9x7 pixel.
(And you could additionally omit the corner pixels of the map icon, saving a little more space and making it looking a bit more pretty (rounded).)

Saving space could make a better overview in dense areas.

Currently, the icons on the map showing MeshCore nodes are 18x11 pixels big. This includes two pixels "blank" space left and three pixels "blank" space right of the text. By using a 3x5 font -- which is enough to display all hex characters -- and having only 1 pixel padding, the size of the icons could be reduced to 11x9 pixels; if the outer border also is removed (just having the background 1 pixel bigger than the writing) 9x7 pixel. *(And you could additionally omit the corner pixels of the map icon, saving a little more space and making it looking a bit more pretty (rounded).)* Saving space could make a better overview in dense areas.

adam commented

2026-10-27 15:42:42 +01:00

Here are examples I just drafted:

Node badge without border — I would prefer this:

Node badge with border:

3x5 font (if needed, I can create more characters):

Regards!

Here are examples I just drafted: Node badge without border — I would prefer this: <img width="23" height="19" alt="Image" src="https://github.com/user-attachments/assets/b00685d5-2f72-4ced-a98b-f5a74d08f784" /> Node badge with border: <img width="23" height="19" alt="Image" src="https://github.com/user-attachments/assets/f13b15f8-e9a0-4d74-a8b0-8fa07a000fa7" /> 3x5 font (if needed, I can create more characters): <img width="77" height="11" alt="Image" src="https://github.com/user-attachments/assets/f9307274-1067-48cd-8a1c-4b458211df8d" /> Regards!

adam commented

2026-10-27 15:42:43 +01:00

As now with firmware 0.9.12 multibyte hashes are displayed on the map saving space is even more important, so switching to 3x5 font and make every spacing only 1 pixel wide and omit borders (or even double borders as I see on 0.9.12 in light colour scheme).

As now with firmware 0.9.12 multibyte hashes are displayed on the map saving space is even more important, so switching to 3x5 font and make every spacing only 1 pixel wide and omit borders (or even double borders as I see on 0.9.12 in light colour scheme).

adam commented

2026-10-27 15:42:44 +01:00

In case you are interested in this, would it help if I give you a 3x5 bitmap font?

In case you are interested in this, would it help if I give you a 3x5 bitmap font?

adam commented

2026-10-27 15:42:44 +01:00

implemented in v0.9.15

Compact map badges (#183): Mgmt → Map → Badge Size: Compact (device and WebUI) — tiny 3×5 font and 1 px padding; hop border and type colour stay.

## implemented in v0.9.15 **Compact map badges (#183):** Mgmt → Map → **Badge Size: Compact** (device and WebUI) — tiny 3×5 font and 1 px padding; hop border and type colour stay.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: adam/meshcore#183