Building a UI with different Menus and Submenus on Arduino

Hi everyone,

I am working on a Arduino project where the board needs to take different inputs from the user, that are provided thru external buttons of an additional board.

The issue that I have is that I actually don’t know how to code a user interface with different levels of menus and submenus. The idea that I came upon uses while instructions, but I’m not sure it is the most efficient, and I cannot find a thread that discusses that, even if I think this should be a quite common problem.

I will try to explain this with an example. Let’s imagine that I want to build a custom timer and stopwatch. First, I need to choose between the two modes (timer or stopwatch). Then, for the timer, I need the user to select hours, minutes and seconds. For the stopwatch no other action is needed (apart from starting it). I’m doing this using only four buttons (+,-,confirm,back). How can I build a piece of code that let me chose the mode and set this three parameters?

The approach I followed uses nested while cycles (set to true) to wait the button to be pressed. When one of the buttons is pressed, an if statement detects that, leading into another while-true loop, that waits for the following selection to be made and confirmed (for instance, if + is pressed I add one hour/minute/second, if - is pressed i subtract one hour, if confirm is pressed i proceed to the following step).

This hierarchy full of nested while cycles is what looks quite strange and inconvenient to me. It was ok initially, but now that the code has became bigger and bigger (1000+ lines) it is becoming messy, and also producing a lot of bugs.

To sum up, the basic question behind this post is: Is there a way to design a menu-like structure (like the settings of old Nokia phones, for instance) using simple Arduino coding? If so, how?

I would prefer not to post the real code because it’s a mess, but I could do it if needed. I still hope you understood the problem and I’m open to any kind of suggestion.

Thank you very much for your help.
Have a nice day.

Luca

You could use a state machine, at least to remember which top level menu has been selected. Although if you are only going to have 2 top level menus (timer, stopwatch), you would only need a bool to tell you which menu you are in. Nested While(true) loops doesn't sound like a good method

1 Like

I've seen this referenced a few times but have not used it myself: GEM (Good Enough Menu) Library

1 Like

And there are more to choose from in the IDE 2 library manager:

1 Like

before considering "how" to do it, first decide on "what" to do. what do the buttons do, when?

presumably there are 2 buttons:Left and Right

pressing the R button might start/stop the timer. pressing the L button brings up a menu, hitting it again advances to the next item

if the item is reset, hitting the R button can reset the timer.

the L button can advance to another menu item. hitting the R button select the change the time menu item. the R button can advance a digit, wrapping from 9 to 0. the L button advances to the next digit. the L button on the last digit exits that mode.

a menu can be a list of menu items. a menu item optionally include text to display and a reference to another menu or sub-function that handles the action represented by the menu item. the menu item needs a flag indicating which, a menu-item or sub-function.

Thank you everyone for the answers. The right keyword, “LCD Menu”, is what I was missing. This opened a lot of possible answers. Looking forward to try them all.

Best
Luca

have a look at using an LCD and a QEI rotary encoder
clockwise and anticlockwise rotation scrolls up/down menu and press selects the menu item
have a look at encoder library

1 Like

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.