Description
I’m facing problems with converting / preparing image that I can use as icon for LV objects
What MCU/Processor/Board and compiler are you using?
Trying on PC simulator, preparing image in PaintNET, LVGL 5.3
What do you want to achieve?
Color inverting for custom icons, as it done for build-in icons (see lv_icon_invert picture)
What have you tried so far?
As I understand, I need add some alpha channel. Right now its is tranparent at corners only:
Now corners of square indeed covers with black when list item is selected.
But how it should looks like if I need some inverting?
Code to reproduce
Nothing special, just list with some buttons:
LV_IMG_DECLARE(meas_icon);
...
lv_obj_t * menu = lv_list_create(lv_scr_act(), NULL);
lv_obj_set_size(menu, 157, 98);
lv_obj_t * list_btn = lv_list_add(menu, &meas_icon, "Humidity", NULL);
list_btn = lv_list_add(menu, SYMBOL_DRIVE, "Drive", NULL);
...
Screenshot and/or video
Sorry for bad quality of inverted icon, but I guess it shows what I want to achieve
LEFT - what I have how
RIGHT - what I want to get
I don’t understand what the problem is. The image is inverted in the screenshot.
If the screenshot is supposed to show the desired behavior (and not what is actually happening), then I think what is happening is that LittlevGL can’t invert images when they are used as icons in the list.
I would suggest using a font instead. For example, you could use this icon from FontAwesome.
I don’t understand what the problem is. The image is inverted in the screenshot.
I have updated post, at the left side is what LVGL gives me now, at right is what I want to get (Humidity icon inverted whent selected)
If the screenshot is supposed to show the desired behavior (and not what is actually happening), then I think what is happening is that LittlevGL can’t invert images when they are used as icons in the list.
Probaly problem is how I’m preparing image. Not sure that I’m making this in correct way. MAybe something special with alpha channels need to be done?
I would suggest using a font instead. For example, you could use this icon from FontAwesome.
Good resource, but I showed raindrop icon just as example of one icon that needed. What if I need some really customized image? Is it doable for lists?
I’m not sure that LittlevGL can invert images in lists right now. I think it only works for fonts.
(cc @kisvegabor)
You can recolor images, which means mixing another color to the image.
In your case, you can mimic a font with an image if you choose e.g. “Alpha only 16 shades”. This way the image will have transparent parts and the visible pixels can be recolored.
The recolor is controlled by style.image.color and style.image.intense.
1 Like
Sorry to disturb you, Could you tell me how to invert color of the selected text?
I believe the roller inverts the selected color automatically. Can you provide more details on what the problem is (code sample, etc.)?
Sorry, I ignored you that you were using roller, Now I know how to invert color of selected text, just by setting bg_color text_color and bg_opa style.
Hi, I want to recolor this img(it’s color format is alpha only 16 shades), and I’m using LVGL V7.0
but the image can’t be recolored. plz help to take a look thanks.
Please provide the image as well.
[quote=“embeddedt, post:2, topic:570, full:true”]
Je ne comprends pas quel est le problème. L’image est inversée dans la capture d’écran.
Si la capture d’écran est censée montrer le comportement souhaité (et non ce qui se passe réellement), je pense que ce qui se passe, c’est que LittlevGL ne peut pas inverser les images lorsqu’elles sont utilisées comme icônes dans la liste.
Je suggérerais d’utiliser une police à la place. Par exemple, vous pouvez utiliser paris cdg car service[/quote]
I have a question about reverse capture
