Addition of lv_menu Widget for Easier Menu Creation

[christine]

Hello Squareline Studio Team,

I’m writing as a dedicated user of Squareline Studio, which has been an invaluable tool for designing and developing UIs for embedded devices. I would like to propose a feature request that I believe could greatly enhance the usability and efficiency of the platform.

What do you want to achieve?

I would like to request the addition of the lv_menu widget from LVGL to the list of available widgets in Squareline Studio. The lv_menu widget is a crucial element in designing embedded UIs, especially for creating multi-level menus. It simplifies the process of handling page traversal and creating organized settings panels, which are common requirements in real-world embedded systems.

This Complex Menu example in LVGL documentation is quite good.

Do you see alternative options and workaround to achieve it?

Currently, users like me are resorting to using multiple panels and toggling their HIDDEN flags to mimic the functionality of the lv_menu widget. However, this approach is time-consuming, error-prone, and does not provide the same level of efficiency and elegance that the lv_menu widget would offer. By integrating the lv_menu widget directly into Squareline Studio, users could save substantial development time and create more intuitive and feature-rich UIs.

Mention some use cases

Here are some use cases that highlight the importance of the lv_menu widget and how it could benefit Squareline Studio users:

1. Settings Menus: In embedded systems, settings panels are fundamental for users to configure device properties. With the lv_menu widget, designers and developers could easily create nested menus for organizing various settings, enhancing user experience.

2. Complex Navigation: UIs in embedded devices often require navigating through different pages and options. The lv_menu widget’s automatic page traversal would simplify this process, reducing the need for manual coding and panel manipulation.

3. Consistency and Reusability: The lv_menu widget encourages consistent UI design by providing a standardized approach to creating menus. It would also promote reusability of UI components across different projects.

4. User-Friendly Interfaces: For non-technical users interacting with embedded devices, intuitive menu navigation is essential. The lv_menu widget’s structure ensures a user-friendly experience, making it easier for end-users to access and modify settings.

5. Time-Efficient Development: Incorporating the lv_menu widget into Squareline Studio would streamline the development process, allowing designers and developers to allocate more time to fine-tuning other aspects of their projects.

I truly believe that the addition of the lv_menu widget to Squareline Studio’s repertoire would be a game-changer for both individuals and professionals developing UIs for embedded devices. It would align perfectly with the platform’s mission to help users design beautiful UIs quickly and easily.

Thank you for considering my feature request. I am excited to see how Squareline Studio continues to evolve and contribute to the advancement of embedded UI design.

Best regards,
Hays Chan

[christine]

This has been discussed before. This is quite a common request due to the nature of having a settings menu in many touch screen products.

Where is the Menu widget in SquareLine Studio 1.2.0 trial version?

@Aishwarya I’m sorry for the late reply. Somehow I haven’t noticed this topic. Some widgets are still really missing from SLS because they require special handling. We are adding these gradually. Speaking about the menu widget, I consider it a quite special and complex one (i.e. not too generic) and I think it’d be hard to use in UIs. Ideally it should be possible to easily create such a widget in SLS from scartch using layouts, events and components. @chrisplex928 If you would l…

The complex menu example apperance could be something that can be the standard menu. For the addition of submenu, tab view widget currently available in SLS has done quite a good job. lv_menu could be similar to lv_tabview.

[LeoChris2023]

Agree!

I also need this kind of Complex Menu. I posted before about this kind of menu design.

Event Priority / Sequence

Something like this: | /\ | ---- Up arrow button | A | | B | | C | | \/ | ----- Down arrow button With this kind of widget, the number of menu items will not be limited by the screen, and each menu button can be designed either via icon or text. Meanwhile it supports “Infinite” mode, which means if you press “Up arrow button”, the menu will display “D”, “A”, “B”…

[kisvegabor]

It seems really there is a great need for this widget. I’ll talk about it tomorrow with the SLS team.

[LeoChris2023]

Thx, plz also consider adding “Infinite Navigation” (like widget “Roller” Inifnite Mode) feature to complex menu. “Tabview” is good, but the limitations are:

• Only support Text as identifer
• The number of menu items is limited by the screen size.

[kisvegabor]

@LeoChris2023

Only support Text as identifer

It will be improved in LVGL v9. The buttons will be real lv_btns where you can add any content.

@LeoChris2023

The number of menu items is limited by the screen size.

Would you like to make the header scrollable?

[LeoChris2023]

I suggest adding different modes for user to choose.

• Scrollable
  Good for touchscreen, not friendly for keypad input.

• Infinite mode
  In this mode, user can add buttons along with menu items for easier navigation. Like this:
  

  

If you press “Up Arrow” button, menu items will move up by one step, but if you press “Down Arrow” button, menu items will move down by one step, and the last menu item will become the top item. Just like the “Infinite Mode” of widget “Roller”.

Looking forward to SLS V9!