Physical Button Controlled GUI Design

How to
1

What do you want to achieve?

Use physical button to select, control GUI widgets.

What have you tried so far?

Use gesture behavior to simulate button click.

Screenshot or video

None.

Others

  • **SquareLine Studio version: 1.3
  • **Operating system: Windows 10
  • **Target hardware: STM32F4xx

Suggestions

SquareLine Studio is clearly the best GUI design tool for Touch Screen, but it may not be friendly enough for applications using physical buttons to control GUI.

  • How to select multiple widgets in sequence within a single screen? If it is possible, how to define the order of these selectable widgets?

  • If it is not possible to do this in Squareline Studio 1.30, will there be any plan to implement this feature? Many low-cost applications use physical button to interact with users instead of an expensive Touch Screen.

2

All this you can do in code. Read lvgl docu for indev

3

I know, I just wish SquareLine Studio can simplify this kind of applications.

Maybe adding ChatGPT in the future to further simplify the GUI design process.

4

Then dont mark HOWTO ticket

5

All this you can do is to ask the forum manager to re-categorize this post.

6

I actually think this raises the issue of TabIndex, both in lvgl widgets, and using squareline studio. TabIndex for those unaware defines the index of an item for use when tabbing BACKWARDS and forewards through widgets.
This does not work as expected in squareline studio (try tabbing through properties then using shift+tab a few times to go back). Separately (but what the op hinted at) there is no obvious feature surfaced from lvgl for supporting widget ordering when cycling through them using a button / action.

1 Like
7

Leo,

I’ve been using physical buttons to control screens and widgets in Squareline as I also don’t have any touch screens. Could you describe exactly what you’re trying to control/achieve? I might be able to help out.

Lucas

1 Like
8

Dear Lucas,

Thank you very much for your response. I am wondering how you attach button actions to GUI widgets relevant operations within Squareline Studio.

For instance, here’s a simple UI with several buttons, in Squareline Studio, and there are three physical buttons (left, right, enter) to select (or focus) these button widgets and only when button widget is selected, can you press enter. How to realize this?

Appreciate your assistance!

9

Yeah, that sucks, I’ve to do that using extra code.

10

Are you programmer or lego player?
In Squareline you can create screen onload event and set call func.
In file ui_events then write into func

lv_group_add_obj(g1, ui_Slider1);
lv_group_add_obj(g1, ui_Slider2); //any controllable object
...

And your physical buttons start working if indev is assigned into group g1 and …

Then on unload screen event you remove from g1 usw.

1 Like
11

That’s not what I am asking for, dude! I already did that in the way you described.

Looks like currently Squareline Studio doesn’t provide “lv_indev” functionalities.

Hopefully, popular kinds of input devices can be added into the Squareline Studio without extra coding, so that you can demonstrate, test the touchless UI with keyboard.

12

Better is say curently SQS dont provide any hw backend functions.
SQS is GUI frontend creator, and for universum i mean this dont change.
But yes maybe as for example TouchGFX an button abstraction will be added.
In TouchGFX i can add event key and it for example in simulator work with PC keyboard. If assign key ‘a’ i can press ‘a’ … But real hw layer isnt generated.

1 Like
13

OK. Gothca. Another painful stuff is adding a bunch of widgets to a group in order to navigate each widget, even if you already put all these widgets within a panel, however, a panel is just a simple object thus it cannot be navigated…LOL…

14

I’m not 100% sure what you’re trying to achieve but it sounds like your talking about manipulating flags which is normally done in SQS by ‘pressing’ the widget or button. It is a lot more work, but you could assign physical buttons to control the boolean state of the various flags associated with the widgets. Maybe?

15

Yes. Not only “Pressing”, but also navigate, select. I now know that it is currently unavailable in SQS, it can only be achieved by coding…
I asked this question coz I was not sure whether SQS can do this, and the GUI for my application is very complicated, multiple screens, widgets…very painful…