chore(color): helper script to generate PNG icons from SVG source

[JimB40]

Summary of changes:

• adds shell script to generate generate PNG files from SVG
• rsvg-convert (part of the librsvg package) has to be installed
• creates slighly smaller sized PNG than current version

Usage: png-radio-fw.sh [ --check | --update | --build | --help]

Modes:
--check Verify that PNGs exist for all SVGs in 320x240, 480x272, 800x480.
Prints to console missing files.

--update Scan SVGs under img-src and produce CSV of PNG dimensions for 320x240, 480x272, 800x480
Output: /Users/jimb40/GitHub/JimB40/edgetx/tools/png_radio_fw_list.csv
Missing PNGs are printed to console.

--build Read /Users/jimb40/GitHub/JimB40/edgetx/tools/png_radio_fw_list.csv and generate PNGs in /Users/jimb40/GitHub/JimB40/edgetx/tools/../radio/src/bitmaps
- Target directories DIR are taken from CSV header (cols 2-4)
- Output PNGs placed in DIR folders (e.g., 320x240, 480x272, 800x480)
- Files starting with 'mask_' rendered with background color (white). Others remain transparent.

[pfeerick]

Have you actually tried running this yet? As you've not committed the changes to the PNG files, which should be done at the same time as the PR, especially so the effect on the firmware can be seen. This is also somewhat of a duplicate of what Phil did in #6762 and what I started to work on on Monday here https://github.com/EdgeTX/edgetx/tree/pfeerick/alternate-convert-script. I planned on trying out resvg as Pillow/cairosvg wasn't suitable (doesn't play well with complex SVG files), inkscape is a heavy dependency for one "small" task, and ImageMagick uses librsvg anyway...

[JimB40]

1. Already tested in my dev-env MacOS with librsvg installed
   Works properly but would be good if you can test on Linux

2. I asked Phil to share current scripts to check how its done.
   New script

• creates CSV based on what is inside img-src (SVG)
• uses CSV to keep PNG resolution data so adding new resolution is just add column and run PNG generation
• checks in any of PNG is missing comparing to img-src

Generaly I'm cleaning up UI 3.0 PNGs and SVG->PNG conversion

1. Moving all icons to Figma as it generates better and less complex SVG (70% done)
   The goal is to make SVG simple so tools like rsvg can deal properly with source file.
   Example (left Figma, right Inkscape)

2. Cleaned in Figma Icon vectors. Current ones are complex and manyy times they include lots of hidden/unused layers. (70% done)

3. Cleanup folder structure & file naming.
   Over the time quite a "mess" is created.

• Files are scattered over randomly named folders. ie mask_shutdown is in img-src/default_theme/ while mask_shutdown_circleX are in img-src/
• Files names are random making script complex. ie masks should start with mask_ while other with bmp_
  This can affect other PRs so definetly change has to be quick & syncronized

Intended worflow

1. To generate proper PNG for all resolutions you just run script in tools
2. To add new resolution you add column in CSV ensuring file names and placement are the same.
3. To change PNG resolution again you change CSV and rerun script
   Generally to make proper PNGs you care about SVG (img-src) folder and CSV file in tools

If you started work on same topic let's sync it.

[philmoz]

@pfeerick solution is preferred as it only keeps one set of icons sizes (for 480x272). Generating other sizes is done by applying a scaling factor making it easier to alter the scale or create new ones.

[JimB40]

1. I'm not fan of scaling factor because tih low res like 320x240 it may produce errors due to roundings, and with res like 320x240 or lower 1 pixel matters. But we will check in final result.
2. Separating files data(path/name & dimension of 480x272) to CSV is better option.

• adding new gfx will be putting SVG file in img-src, adding file name and dimensions for 480x272, running script
• no chance to screw script logic.
• script can also use CSV to validate if all PNG are generated.
• png location is stored once so no way that PNG dirs and filenames names are different form SVG dir.

@pfeerick can I contribute your branch?

[philmoz]

1. I'm not fan of scaling factor because tih low res like 320x240 it may produce errors due to roundings, and with res like 320x240 or lower 1 pixel matters. But we will check in final result.

Scaling factor ensures every icon is always the right size, manually having to enter every size is error prone and more work.

[pfeerick]

Ok then, so if you are both happy with that, I'll close #6762, close this PR, open a PR for what I have presently, and we can make any changes necessary there. Presently it does not require any CSV file, and adding a new resolution is trivial as it would just need another scaling factor added (one line change), and then it can generate just that resolution or regenerate all. But let's continue the discussion in a new PR if this is how you want to proceed.

[JimB40]

Scaling factor ensures every icon is always the right size, manually having to enter every size is error prone and more work.

No problem with that, as I wrote let's go with scaling.

[pfeerick]

@pfeerick can I contribute your branch?

Of course! ;) I'm sure it can be optimised further, still, and doesn't do any cleanup or other checks yet, so that can still be added. Also probably need to lock the version of rsvg used so always using a consistent version...

Feel free to give me a todo / wishlist in #6772, and we'll see where it leads.