Reusing widgets in EEZ Studio

[Eskibrew]

I’m using EEZStudio to design a number of pages (screens) for a project. I have a notification widget area (think of it like the notification area in android at the top of the screen) with some icons and a label to display the time etc and I want to use that same widget at the top of each screen.

I’ve created the widget under the “User Widget” in EEZStudio and I can then drag that widget in to each display page. It looks great and works however I’ve found that rather than reuse the same widget in each page, the exported LVGL code creates a separate copy of each of the components within the widget.

For example, upon code export, each page contains an object which contains a copy of all the components in the widget, each with a unique name. If I have a few pages and I want to update the time displayed at the top of the screen I either have to work out which copy of the time label I need to update for a specific page or update all copies of the time label so that it does not matter which page is being displayed. Similarly if I want to change an image of an icon in the notification widget.

Am I misunderstanding how this is supposed to work? What I’d like to happen is that I update one label within the user widget with the current time and that label is shown regardless of which page is displayed since it’s part of the user widget which is at the top of each page.

Environment

MCU/MPU/Board: esp32S3 with 800x480px display using ESP_IDF
LVGL version: 9.4.0
EEZStudio version: 0.24.0

[mvladic]

Each instance of user widget is another copy. You can have, on the same page, two instances of the same widget - so each must be another copy.

For your purpose, if you can't find an easy way to update your notification area user widget then you should maybe use top layer feature. Check this comment from fietser28 as an example how it can be done within EEZ Studio.

[Eskibrew]

Thanks, that makes sense - I'd not considered using more than one copy of a widget on a single page but of course that makes sense and I can see the reasoning for needing separate copies.

[mvladic]

I can give you an example how it can be implemented with the top layer. Tell me do you use or not EEZ Flow in your project?

[Eskibrew]

Thanks, I'm not using EEZ Flow at the moment.

[mvladic]

Here is an example how notification area, that is visible all the time no matter which screen is active, can be implemented:

lvgl_notification_are_in_top_layer.zip

Notification area custom widget is added to the Dummy_NotificationArea screen which purpose is only to contain this custom widget.

I added my custom code in ui.c (here, changes are tagged with "mvladic:") and my_custom_code.c, so check those:

Here is how application looks when fully compiled:

[Eskibrew]

Thanks so much, that's really helpful :-)