What do you want to achieve?
I am trying to make a gear indicator “carousel” for a cluster display.
The selected “gear” is in the centre and as the gear changes, the element will scroll into the centre focus, the other elements/gears “fade away”
I want to know in a flex layout if there is possible to determine the focus/snapped item?
and if there is therefore some index that can be used to set display state/animate the elements to the left right to either transform, add opacity, change style as you scroll.
What have you tried so far?
I created a scrollable panel, with a text element for each indicated gear.
It scrolls manually ok in play mode - i cannot determine if its possible to specify the “focus” element in the scrolling panel like this, and if its possible to have the “unfocused” elements adopt a different state.
I believe I could use user states to set the difference (opacity, padding etc) - although I cannot figure out how to get transform working and remain centered in the element (transforms to upper left corner - no alignment options available?
Screenshot or video
You can see my desired outcome here in the centre, with manually set padding and blend variables:
Default = element 64x64
User 1 = Normal Text, Width increase 100
User 2 = Blend opacity 100
User 3 = Blend opacity 20
User 4 = Blend opacity 0
Ideally some where for the panel element there is an index against each visible item which I can set state, when I scroll, there is a some transition between states. I would think this is possible, but I am not sure.
Below this is just a reference concept image from my artwork (photoshop).
Others
- SquareLine Studio version: 1.5.4 LVGL 9.2.x
- Operating system: Windows Editor
- Target hardware: Embedded Linux