Extending/updating the available widgets

Most of the widgets that are prepackaged with LVGL are fantastic. Others are a bit lacking. This is because of time. I am sure the ones that need updating need to be updated because they were made when LVGL was still in it’s infancy and LVGL didn’t have the mechanics to make the widgets have a nicer “curb appeal”.

I wanted to use some of those widgets but decided they needed a facelift. through the power of Python and subclassing I am able to update/extend or even make a new widget.

While I have made or updated widgets for my own purposes I decided that I would repackage them so they could be used in other peoples projects. I had to remove any hard coded aspects of them like sizes and extend them to handle changes a user other then myself would make.

The first one I am working on is a notebook of sorts. The notebook has pages and the pages are tabbed. where the tabs are displayed can be changed. Currently if a display is set to landscape and the width is 480 pixels wide 5 tabs can be added and seen on the display. I will be adding the ability to add more than that and be able to scroll through the tabs.

The user can name and rename the tabs,. They can also change the positioning of the tabs. They are able to collect the page associated with the tab and use that has the parent for any widgets they want to place on that tab. I will be adding a mechanism so if the size of the page gets changed it changes the size of all the pages in the notebook. After all a book usually doesn’t have different size pages…

The design of this widget is to be off screen except for the tabs and the screen can be swiped to reveal the page contents of the selected tab. The tabs can be changed so long as the tabs are able to be seen.

I have tried to minimize the amount of space and memory this widget would consume. The tab is an image and that image data is embedded into the widget script so no additional files other than the single script would be needed to add the functionality. The image data is in PNG format so LVGL would need to be compiled with the PNG decoder option turned on. This can be done by editing the lvgl.conf header file and setting LV_USE_PNG to 1 or by adding LV_CFLAGS="-DLV_USE_PNG=1" to the make command when compiling lv_micropython.

This widget does not use the original tab type widget that is included in LVGL. This is a new widget so nothing else is needed other then the PNG decoder.

The script is roughly 23k in size so if you have an issue with space you need to keep this in mind.

This is a work in progress but it gives you the basic idea.

https://sim.lvgl.io/v9.0/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/98ced0114cf169eb86bd23ae3fa46d1fc39acecd/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/98ced0114cf169eb86bd23ae3fa46d1fc39acecd/examples/event/lv_example_event_4.py&script_direct=b5544ade70181ec0521a6496209b944365866c6b

I have set up a repository on GitHub that will have all of these kinds of scripts I write. I feel they are going to be useful to some people to spice up their GUI’s. I will add the link to the repository in a few days. I have this widget and another that I am going to iron the kinks out of first.