feat(gui): scalable SVG icons for toolbar and preferences on hi-DPI - #487

Really nice work — the pipeline is clean, and the PNG-fallback + skin-precedence design plus the edge-case handling (UTF-8 write for mingw, clang-format off on the generated TU, malformed-SVG → PNG fallback) are all thoughtful. A few things before merge:

1. Reuse our existing locale-safe lowercasing. For the toolbar art-id fold in Add_Skin_Icon, we already handle the Turkish-İ case with an RAII helper — CCtypeAsciiScope (src/CCtypeAsciiScope.h). It's used in MaxMindDBDatabase.cpp to lowercase country codes into flag_<cc> art ids for this same CamuleArtProvider, so let's use it here rather than the hand-rolled loop:

#include "CCtypeAsciiScope.h"
...
CCtypeAsciiScope scope;
const wxString artName = iconName.Lower();

2. Licensing. Thanks for flagging it — the main thing to settle, and it's really just the two non-original icons: Directories (Crystal Project Tux, LGPL 2.1, © Everaldo) and Events (derived from the eMule mascot). Everything else is your own redraw and is fine.

For the LGPL Tux, a docs/THIRDPARTY.md entry alone isn't sufficient: aMule's About dialog already displays copyright notices at runtime, and LGPL 2.1 §6(c) then requires the icon set's copyright to appear among them — so it'd need both a THIRDPARTY.md entry (with the LGPL text, matching our picojson/muleunit entries) and a credit line in the About modal. The eMule-mascot icon is GPL-compatible (we're GPLv2+) but is more a branding/identity call for the team.

Simplest path: since the rest of the set is already your own art, replacing just those two — with original drawings (a generic folder / a generic events glyph) or CC0 / public-domain equivalents — avoids the attribution-in-app requirement entirely. We can go either way; the team should weigh in.

3. Screenshots. Could you attach before/after shots of the new toolbar + Preferences list on a hi-DPI display? The payoff is entirely visual and none of us has eyes on it yet, so it'd let the team review the artwork and agree on direction.

One more minor point I should have included above — in CamuleArtProvider::CreateBitmapBundle's PNG-fallback path, when the requested size differs from the PNG's natural size the 2× rendition is built from the already-rescaled image rather than the original:

image = image.Scale(size, ...);          // natural -> requested size
wxImage image2x = image.Scale(2x, ...);  // 2x of the *rescaled* image

That's a scale-of-a-scale (two lossy resamples). Deriving the 2× from the original instead — natural.Scale(2 * size.w, 2 * size.h, wxIMAGE_QUALITY_HIGH) — keeps it a single resample and reads a bit crisper. It's fallback-only (no-SVG / NanoSVG-less builds) and only bites when the requested size differs from the 32²/16² natural art, so it's minor — but worth tightening while you're in there.

Thanks for the quick turnaround on the review points! On the licensing though — the LGPL About-dialog credit you added is technically correct, but on reflection carrying a permanent in-app copyright notice (+ THIRDPARTY.md entry + license text) for a single icon feels disproportionate.

Since you've already hand-drawn the other 28 icons, the cleaner path is to do the same for the two derived ones:

1. Redraw Directories and Events as your own art (a generic folder / a generic events glyph). Then there's no third-party attribution at all and we can drop the AboutDialog.cpp + THIRDPARTY.md changes. This is our preference — and probably the least effort, since you're already drawing everything else.
2. Otherwise, if you'd rather reuse existing art, pick a CC0 / public-domain icon (no attribution required), or adopt a properly-licensed set wholesale where one documented third-party entry is justified — rather than a one-off LGPL glyph.

Either way keeps the app free of a per-icon copyright notice.

All the review points are addressed — the CCtypeAsciiScope switch, the 2× rendition now derived from the original image, and the two derived icons redrawn as original art with the attribution dropped. Looks good.

I'm building on all platforms to verify, and I'll post screenshots here so the team can weigh in on the artwork. Thanks for the quick iterations!

All the review points are addressed — the CCtypeAsciiScope switch, the 2× rendition now derived from the original image, and the two derived icons redrawn as original art with the attribution dropped. Looks good.

I'm building on all platforms to verify, and I'll post screenshots here so the team can weigh in on the artwork. Thanks for the quick iterations!

I'm adding more icons, as I forgot to rework several icons of the main window.

I'm adding more icons, as I forgot to rework several icons of the main window.

OK, I tested on all platforms MacOS, Windows, Linux and they all render correctly.

Navigation bar:

Preferences panel:

Windows screenshots are taken with Display scaling at 175%.

@ngosang @danim7 @mrjimenez your feedback appreciated before we can merge this.

Btw @Zeyckler, if you're comfortable working with SVG, we could use a hand updating the aMule logo as well.

I put together an SVG logo with SVGGenie AI

It's not perfect, but it could serve as a starting point.

Here's how the icons look in a local build on a hi-DPI display (Windows, 4K @ 225% scaling), where the vector art is the whole point — everything is rasterized by wx at the display's scale instead of upscaling the old 16/32px bitmaps.

Main window — the toolbar glyphs (Disconnect, Networks, Searches, Downloads, Shared files, Messages, Statistics, Preferences, Import, About) plus the status-bar icons (info, users, up/down speed, and the composed eD2k/Kad connection globe):

Preferences — the page-list icons down the left side:

a29e152 takes the outline route: every overlay arrow gets a bolder outline (0.4 → 0.6 units at 16px) and the green/yellow/orange outlines go darker, so the boundary does the work the hue can't — red keeps its color since that one already worked. On top of that the globe's rim is lightened a step, so the darkest edges in the icon now belong to the arrows rather than the border.

Bonus from the same session (fdc2838): the hand-drawn continent blobs got replaced with real coastlines extracted from a proper Earth-globe SVG, recolored to the icon's green.

Green / yellow / red pairs, before → after, dark and light bars:

Same request as always — a check on your dark setup would be great.

@got3nks do you think it would be worthy to use the same globe (colors, shape, etc.) in the "Networks" and "Connection" (in settings)? So the 3 icons could share the globe part.

Not sure, I'd probably keep them different

Thanks for the contrast pass! Honestly, on macOS the connection-status arrows are still a bit hard to read for me. I think the most reliable fix is to make them a bit bigger — and we can give the glyph some extra horizontal space in the status bar to make room.

Great timing — I'd just finished doing exactly that. aba924f enlarges the arrows substantially (I resized them by hand in the SVG editor, then normalized the pair): they now use practically the whole 16×16 box — a 14.8×14.8 isometric footprint with equal 0.3-unit margins, the SW arrow being the exact 180° reflection of the NE one.

Current (what you screenshotted) vs the enlarged version, green/yellow/red pairs on dark and light bars:

If macOS still wants more after this, I'm happy to take you up on the wider status-bar slot idea — with the SVG pipeline the glyph can render at any logical size, so widening the slot is purely a muuli layout tweak.

Here's a side-by-side of the new SVG glyph vs the original PNG (left: SVG, right: original PNG):

The original's arrows are noticeably bolder and larger — I think we should size the SVG arrows up to match. You can see the difference clearly.

Agreed — next to the original the arrows were still too light. 7ed6060 reworks them with substantially bigger chevron heads and shorter bodies (redrawn by hand again), normalized as usual: both arrows identical (the SW one is the exact 180° reflection of the NE one) and the pair balanced to an isometric 14.84×14.84 footprint with equal margins.

Original PNG vs the previous SVG vs the new one, on dark and light bars:

Hopefully this closes the gap on macOS — and the wider-slot option stays on the table if you'd like even more presence.

@Zeyckler I took a pass at making the connection-globe arrows more readable at status-bar size — bolder solid arrows with big heads and a thin outline, a brighter green, offset into two lanes so they pass as an exchange (heads keep a gap), tails reaching the corners.

Consider it a starting point rather than a final design — feel free to refine it, tweak the shape/colours, or take it in a different direction entirely. I pushed it as a branch on my fork so you can pull it in and build on it:

git fetch https://github.com/got3nks/amule.git icons/conn-glyph-for-487
git cherry-pick 0e0cf0580

It's based on your current branch head, so it should apply cleanly. It touches only the eight status_conn_* overlays (base + ed2k/kad states) and their PNG twins, and regenerates icon_data.c via embed_icons.py.

Preview:

@got3nks I don't like that straight arrow 😅 ; it loses the "curve" around the globe. IMHO, my design is more accurate to the original artwork, but as I said, I'm not a graphic designer, so I'm doing my best with AI and manual editing of the SVG in Boxy SVG Editor. Have you tried my last design on your Mac? Maybe it is enough for this first iteration of SVG migration.

Yes I tested it on MacOS and it's still hard to read

Yes I tested it on MacOS and it's still hard to read

Maybe it's a matter of making the arrows brighter more than the shape? I could also dull a little bit the globe to increase the contrast between them.

That would help, but I’d also try to make their body bigger

Done — 27d2432 pushes on all three fronts at once:

• Bigger bodies: the whole arrow is scaled up ~10% (head and body), so the pair now fills a 15.2×15.2 footprint — heads reach the canvas edge, tails pulled toward the centre.
• Brighter arrows: the fill gradients are lifted (more luminous green/yellow/orange/red) while the dark outlines stay for the edge.
• Toned-down globe: the sea, continents and rim are each pulled partway toward a muted blue-green, so the arrows carry the icon instead of competing with it.

Symmetry/isometry preserved as before (SW = exact 180° of NE, equal margins). Before → after, green/yellow/red on dark and light bars:

If the arrows want even more presence, the wider status-bar slot is still on the table — the SVG renders at any logical size, so it's just a muuli layout tweak whenever you want it.

Looks promising. Will build and test it tomorrow, thanks @Zeyckler.

Tested locally on a hi-DPI display (master + this branch) — the toolbar, status, and preferences icons all render crisply at scale, and the connection arrows read much better after the latest tweak. Really nice work, @Zeyckler — this is a great quality-of-life improvement for the GUI, and the embedded-SVG approach via the art provider keeps it dependency-free. Merging now. Thanks for the contribution!

Now that this is merged — if you'd like to keep going, @Zeyckler, here's what's still on the old raster path after this PR, in case you want to extend the SVG coverage:

Just need an SVG twin — the art provider picks these up automatically once a matching .svg lands in src/icons/, no code changes:

• chat (chat tab in the Messages panel), amule (app/window icon)
• sort_up / sort_upx2 / sort_dn / sort_dnx2 (list column sort arrows)
• tray_disconnected / tray_high / tray_low (systray/dock connection state)

Still on the legacy muuli_wdr.cpp inline bitmaps — these need migrating onto CamuleArtProvider the way you did the toolbar:

• Messages panel headers — amuleDlgImages(14) / (15)
• server.met + nodes.dat "update from URL" buttons — amuleDlgImages(30)
• "Reload shared files" button — amuleDlgImages(18)
• per-source client icons in the transfer/upload lists — clientImages
• shared-folder tree and search/category icons — amuleSpecial

No pressure — the toolbar, status bar, and preferences work you already landed is the high-visibility win. Just flagging it in case you'd like to take it further.

Also a heads-up: we're preparing a 3.1.0 release targeted for August, and your SVG work will be part of it. Thanks again for the contribution!

@Zeyckler In Linux dark theme the networks icon(s) in the toolbar looks darker and smaller than the other icons.