How to implement a 2.5D cube menu selector?

How-to
1

2.5D cube menu selector

What MCU/Processor/Board and compiler are you using?

Any board with a GPU affine transformation ability.

What LVGL version are you using?

V8

What do you want to achieve?

2.5D cube menu selector, just like Windows 10 cube desktop. You can rotate the cube, and select the corresponding side to get the application you want.

What have you tried so far?

I have no clue how to implement this in the LVGL framework.

Code to reproduce

None

Screenshot and/or video

cube_desktop-1

2

I know something how to create this fancy cube using GPU API, however, I have no idea how to fit this cube rendering process into the lvgl framework.
Any suggestion will be appreciated.

3

I would like to define a new widget named as cube menu selector.
It could be customized using different 6 images. It could be rotated by swipe events. User could select faces by one touch.

4

On second thought, maybe I don’t need to define a new widget. Is it possible to use lv_canvas to implement this 2.5 menu selector?
Any suggestion will be appreciated.

5

I think you can use 2D transition matrix to calculate where each point should be at.

You can read this wiki and implementation a simple matrix calculator to apply a matrix on an image. And you will transform your images like what you post on this article :

6

I can’t post a wiki link here.
You can search Transformation_matrix on wiki pedia :grin:

7

Thanks for your reply.
However, I do know how to do 2D transition using GPU APIs.
What I don’t know is how to implement this 2D transition in LVGL framework.
I guess I should use canvas widget to implement this, instead of creating a brand new widget.
Is this a doable?

8

I try to add the matrix transformation function to lvgl v9: feat(draw): add global matrix and transparency drawing modes by FASTSHIFT · Pull Request #4883 · lvgl/lvgl · GitHub.
It can achieve real-time 2.5D rendering. Welcome to follow the progress.

9

Has this 2.5D rendering work been finished? I would like to check the draw_2.5D.mp4，but the page reports “Video can’t be played because the file is corrupt". @FASTSHIFT Could you please post the video again?

10

@Scott.Zhu
Demo video:
draw_2.5D

The 2.5D rendering effect here is achieved using the ThorVG rendering backend. LVGL’s software rendering backend does not support it. If you want to implement 2.5D rendering on the device, it is best to have a GPU that supports 2.5D, such as VG-Lite.

11

Yes, I am using vg_lite GPU. I can implement 2.5D easily by using vg_lite GPU API.
However, I don’t know how to implement 2.5D in LVGL framework.
Could you please give me more detail advice?
For example, if I need to make a brand new 2.5D widget, or I just use Canvas widget?
Thanks!