Image Color Format and Symbols

[Jeremiah]

What do you want to achieve?

I would like to select the color format for Image and Imgbutton. Currently SLS uses True Color with Alpha. which requires a lot of flash memory for storage. I see no way to change this. Also, for lower priority, it would be nice to support BMP format images.

Secondly, is SLS going to support LVGL’s built in symbols, such as LV_SYMBOL_PLAY?

Do you see alternative options and workaround to achieve it?

The current work around seems to using LVGL’s Image Converter and modifying SLS C files. This would be impracticable when using many image assets.

Mention some use cases

I am creating a replacement for an off the shelf touchscreen. This product uses over 400 assets (images) for the entire UI and fits in 4MB. I put just two of these 480x272 assets in SLS and the C array size of each ends up being 2.4MB… I plan to reduce the number of assets following LVGL UI, but I still need a number of my original images.

[SquareLine_Support]

@Jeremiah

I would like to select the color format for Image and Imgbutton. Currently SLS uses True Color with Alpha. which requires a lot of flash memory for storage.

Yes, it’s on the roadmap. It should be set on the image asset itself and not on the image widget.

@Jeremiah

it would be nice to support BMP format images

It’d be possible to enable the use of BMP images in SquareLine. We will try it out.

@Jeremiah

Secondly, is SLS going to support LVGL’s built in symbols, such as LV_SYMBOL_PLAY?

We are thinking about something like resolving Play \PLAY to "Play" LV_SYMBOL_PLAY. It seems like a simple improvement.

[dronecz]

@SquareLine_Support

We are thinking about something like resolving Play \PLAY to "Play" LV_SYMBOL_PLAY. It seems like a simple improvement.

Would not make more sense to make widget “Symbols” and have those which are built-in the LVGL and user could select some from this list in “Inspector” tab?

[kisvegabor]

@dronecz

Would not make more sense to make widget “Symbols” and have those which are built-in the LVGL and user could select some from this list in “Inspector” tab?

This way the user could use images too. I think the advantage of symbols is that you can use them in one label with some text. E.g. "▶ Play".

[Jeremiah]

@SquareLine_Support

Yes, it’s on the roadmap. It should be set on the image asset itself and not on the image widget.

Do you have an ETA when this feature will be implemented?

[kisvegabor]

Right now we are working on higher priority features.

Probably it will still take a few months to get it implemented.

[Jeremiah]

I see in recent updates that you changed the color format from LV_IMG_CF_TRUE_COLOR_ALPHA to LV_IMG_CF_TRUE_COLOR.

Given your other priorities, could you make an interim solution where we could globally choose the color format?

This would fit nicely in the Project Settings for now. Thanks for adding the export of all image assets BTW.

Based on someone else’s comment, I figured out last night that you can copy the Glyph from fontawesome.com into the Text field of a label and it will work. The text field in your UI displays nothing but it is there. The keyboard backspace will delete it.

Might be nice if you could display something to represent it for now. Not a big deal as I am glad there is a workaround.

[kisvegabor]

@Jeremiah

I see in recent updates that you changed the color format from LV_IMG_CF_TRUE_COLOR_ALPHA to LV_IMG_CF_TRUE_COLOR.

Given your other priorities, could you make an interim solution where we could globally choose the color format?

This would fit nicely in the Project Settings for now. Thanks for adding the export of all image assets BTW.

Now SLS slects the color format automatically. If there is at least one pixel with alpha < 255 it will use LV_IMG_CF_TRUE_COLOR_ALPHA else LV_IMG_CF_TRUE_COLOR. Doesn’t it work properly?

[Jeremiah]

Ok, that makes sense. I just didn’t understand how it worked. Thanks

[JojoS]

is there already some magic to include symbols in text?

[Jeremiah]

No, you just copy the glyph and paste it into the text box like I showed above. You won’t see the symbols in the text box, but you will see them on the screen.

LVGL does include some symbols. Otherwise you need to generate the font (Font Manager) with the symbols you want under the range. You paste the unicode values.

I used this cheatsheet: Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome

[kisvegabor]

Really there is no solution yet to use LV_SYMBOL_*s and the workaround Jeremiah mentioned can be used.

[sjkreuze]

Wondering if this feature has gotten support yet. I don’t see it in the changelog. I’m looking to export images in the LV_IMG_CF_INDEXED_8BIT format.

I’m assuming SLS is using Online image converter - BMP, JPG or PNG to C array or binary | LVGL in the background?

[Hermit]

You’re right, the conversion built into SquareLine Studio produces the same results. I’ll check how this goes and refresh the request as necessary (LV_SYMBOL and indexed color usage/export support in SquareLine Studio.)

[Richard]

Another closely related idea: auto-minimum-pixel-size-encoding-mode

A large part of my firmware is also pixels that pass through SLS, and many could be losslessly compressed to LV_IMG_CF_INDEXED_8BIT, many to 4BIT, and even a few to 2BIT. If SLS allowed choosing formats, a virtual-format like AUTO_SMALLEST could first convert to the display format, then try re-encoding with possible formats that can represent the image in display format, and choose the smallest.