Using gestures to change screens

I’ve been using LVGL (v8.3) for awhile now and basic things are working as expected. I also understand how gesture’s work, but I’m having hard time understanding how to implement behavior that I have several ‘screens’ that I can use gestures to move between.

Ie. if I swipe left the screen would scroll left and new screen would appear from right. I know how to capture gesture event so that’s not what I’m asking. I want to know what is preferable way to implement the screen portion that has all the components. I’ve experiment a little bit with ‘scroll’, but I’m not sure if that’s preferred way to implement what I want. I want the content of the whole screen to move not just row of buttons for example.

I tried searching, but it seemed that all posts I found were concentrating on gesture parts not so much how to do the screen portion. So maybe it’s too simple and I’m just missing something.

1 Like

First of all, you should know that when the user deletes a parent object, all its child objects are also deleted, so we need to implement the interface switch, you can call lv_obj_del function, directly delete the base object, and then create a new interface, so that you can achieve the interface switch. Of course, you can also hide the parent object. You can refer to squareLine exported projects, some of which are implemented this way!

This is done on ESP32S3 so nothing gets deleted once they are created. The display actually came with the demo exactly what I was looking for, but unfortunately there is no source code availlable for it.

On further investigating I was thinking that maybe I could create scroll - object and then create grid - objects using the scroll - object as parent. One grid would represent one screen and then I’d create each screen using specific grid - object as parent.

I don’t want to be create/delete objects each time I switch screen.I just want to be able to swipe left/right and change view(maybe my terms are bit off) like for example in smartphone.

I may not understand what you’re talking about, but if you’re not thinking about switching animations, you can actually do it with lv_tileview, which I’ve done with the app desktop before. This is before I do, links to lvgl的UI设计_哔哩哔哩_bilibili

I’m trying to do pretty much the thing in in the start of the view where clock/weather/player widgets transfer to news widget.

Is that done like I describer earlier that you have scroll - object and then grid - objects using that scroll - object as a parent and then those clock/weather/player - object using grid - object as parent? Then scroll - object would take care of the ‘scrolling’ from view to view. Or is there ‘better’ - way to do that? That’s what I’m trying to find out.

Ha, I understand what you mean, but I have no idea at present, I will try to do it when I have time, if there is any result, I will contact you to discuss together!

Thanks! I’ll also experiment myself later.

I got my way working somewhat. I now have two ‘screens’ that I can transfer between.

Couple problems though. For whatever reason I cannot get the grid to align top left corner of the scroll object, There is always some space on the top and left at start. I can move it to top but left always has space.

Other thing is that I can scroll ‘past’ the ends if. more left than left most screen and more right than right most screen.

The latter one might be just configuration issue with flag settings, but I’m not sure what to do with the first problem. Seems that there is always space on top left even if you align top left. Is there way around that?

Or is there better way to do this whole thing? I have 5 buttons on both screen and perf so far is ‘good enough’ for me, but I’m not sure how good it stays once I start putting more stuff there.

In fact, I have found this problem before, using Flex or Grid will be in the top left corner of the free space, I tried to change the position, but nothing!

I discovered lv_tileview and at least on early tests, it seemed to do exactly what I want todo.