Add icon library support(e.g. Font Awesome), Change font size independently, Character bitmap file improvement suggestion

What do you want to achieve?

  1. Use emoji and Font Awesome icon in the text label
  2. Change the font size freely, without loading / creating new font
  3. Only compile alphabet/numbers and used “character/icon” to final bitmap

Mention some use cases:

  1. Can be used for buttons, menu, status bar, UI, etc…
  2. Everywhere that has text
  3. Lightweight devices? Save a lot of storage spaces

Do you see alternative options and workaround to achieve it?

  1. Tried to import the Font Awesome 6.0 Pro TTF file, not working
    1.1. Processing icon images one by one, working
    but this method is unresponsive, has no flexibility, and is quite complex to modify

  2. Can’t find a way to do it

  3. Tried to manually create a TTF file with only the “character” the project needs

----------Remarks----------
×1
Inputting the Unicode code U+XXXX or \uXXXX to the text field, showing nothing or text instead of the icon
Console showing “character’s bitmap not found”
Probably bitmap compile range/symbols config problem?
(range=0x0000-0xFFFF, symbols=nothing)

×1.1
For the image icon method
If the display resolution or the object color/size changes, image recreation is required since the aspect ratio, DPI, or color is not matching, this is very time-consuming if there are many icons and devices with different themes or hardware configurations

×2
font is font, and size is size, please consider splitting it into two input fields in IDE

×2.1
it’s a bad idea to convert every font character and every font size to the bitmap file, it consumes a lot of spaces

×3
Using FontForge to separate icons, save spaces
But complex and time-consuming

Just found out that Font Awesome is working
But it just won’t show up in the text input field
The only way to use the icons is to copy the glyph online and paste it

1 Like

All these are good points.

To solve this we can use the the same font that you have selected for the widget in the Text input field of SquareLine too. That is, if you select an Arial font, the text in the Text field will be written with Arial as well. In case of FontAwesome, it’s FontAwesome. So if you copy past it a symbol there, it will be shown correctly.

Basically it’d make the font manager not required, right? You can select a font on the widget, and set a size for it there. On export SLS collects to used fonts and sizes and exports what is used. Did you mean something like this?

At first look, we can add an “Auto-pick characters” checkbox to the Font manager. If it’s enabled, the Range and Symbols fields are inactive, the SLS will search the used characters on export. It’s a little bit more complicated than it looks, but seems doable.

The situation I am facing right now is that I had to use multiple fonts and multiple font sizes from 10px to something like 60px or more
To do this, I had to convert them one by one
Steps:

  1. Import the font
  2. Change the font name
  3. Change the font size
  4. Convert font TTF to bitmap by font manager (lv_font_conv-win.exe)
  5. Use the converted font in UI

Sounds easy right?
But when there are 10 fonts with 26 different sizes each
(10 fonts * 26 sizes(10px to 60px even number only))
I had to do the conversion 260 times
And it creates 780 files in the asset folder (bin,C,fcfg file (each project))
which is very painful to manage if you have 10 projects and each 780 converted font file

What I want is simple
-----font manager-----

  1. Font conversion size selected in a range instead of one size
    (As shown in the example image
  2. Add an odd or even only option to reduce the total file number
    (Because the size selected in a range may create a lot of files)
  3. Save the converted font in a shared folder instead of each project folder
    (Example: C\SquareLine Studio\fonts\ (FontAwesome(font name)) \ (FontAwesome_20(name+size))
  4. Only show created font name, not sizes in the “CREATED FONTS” menu
    (If showing all 260 font variants in the menu, it will be super long and hard to manage)

-----inspector-----

  1. Add a separated font size input dropdown/field as all the other program does
  2. Sort the font by A-Z not the font conversion order (by time)

-----UI example image-----

Sorry for the late reply.

I think size range is not flexible enough but we can make it possible to set a comma separated list of sizes in the converter. Fonts created this way would be shown as one entry in the font manager.

It’d be also possible. Let’s say you select “MySpecialFont” and from an other dropdown you can also select the size (e.g. 12, 14, 16). But is you type 18 as size SLS can ask “There is no 25 px high variant for this font yet. Shall we create it now?”

I think it wouldn’t work well as it’s not sure “MySpecialFont” has the same range and symbols across projects.

What do you think?