Looking for a way of handling LVGL "forms"

ESPHome
1

I have the following LVGL "form":

image
image950×536 47.5 KB

Basically, a "form" container with nested containers consisting of (label, textarea).

Each textarea is tied to a restorable global; in other words, preferences that I want to save and restore.

My question: how can I implement saving these preferences in the most flexible way?

I can use on_ready on each textarea so when it is changed I update the preference from there directly. However, I'd rather queue up changes and save them only when the "Save" button is pressed (also because some preference changes require a reboot and I don't want to reboot for each individual change).

I'd also rather not depend on a hardcoded the list of textarea id's in an on_press on the Save button.

So right now, I'm using the following method: the Save button on_press calls a lambda that finds all textareas in the form container, then sets their state to LV_STATE_USER_1, and each textarea uses an on_state_change handler to check if this state gets set. If so, it will save the preference and set another global to signal if a reboot is required.

It works, and it's flexible, but a bit convoluted.

Ideally, I want to emit an event (or set a state/flag) on the "form" container that gets passed down all of its children, and listen for it on each textarea in an on_... handler, but I haven't found a way of doing so.

Any ideas?

2

That is probably the simplest approach though.

1 Like
3

Fair enough :grinning_face_with_smiling_eyes:

4

In the end I implemented a fairly clean (IMO) solution with a custom component that I'd been using for this project already, which implements something similar to Node.js' EventEmitter, where UI/LVGL elements emit events when they are changed, a "preferences handler" listens for those events and, in turn, emits events based on whether there are changed pending (for instance to enable a Save button), and an additional C++ class that does all the admin.

That way, I don't need to keep lists of form elements in different places and I can easily add/remove/rename elements and globals and not worry about forgetting to update them somewhere else.