Creating a simple menu

Hi, im farly new at this, still learning.
I want to create a simple menu with several options displayed and let the user choose from those options and at the end display the chosen options.
So the diagram would be something like this:
Menu:
Submenu1:
Option1.1,
Option1.2,
Option1.3,
…etc
Submenu2:
Option2.1,
Option2.2,
…etc
Submenu3:
…And so on.

And at the end display the chosen options by the user.
The options would be in most cases numbers(int and float), in some cases letters with numbers.

I understand the concepts of booleans, integers, floats and characters but can seem to put them on practice. The oder thing that i simply cant figure it out is how to display the chosen options.
I would appreciate any help. Im stuck jejeje:persevere:
Thank you!!

2 Likes

You will have to store your current sub menu and Menu positions.
As for selecting through the menu

ard.pollButtons();
if (ard.pressed(LEFT_BUTTON)){}

You may also have to store if you are in a sub menu or not

This link demonstrates an extensible menu system > https://github.com/Pharap/EquipmentMenuSystem

However, it is advanced and many not help you learn.

1 Like

You might find this a bit difficult if you don’t know much about C++.
The minimum you need to know is how to draw your menu, how if statements work and how arrays work.
It would be even better if you knew about functions, arrays, enum classes (or regular enums) and switches.


When trying to solve a programming problem there are a few key aspects to focus on:

  • Structure
  • Data/Variables
  • Behaviour

Think about how a menu is structured.
A menu is essentially a list where one of the items in the list is highlighted (or selected).
Having multiple menus might be a bit trickier because that requires a way of expressing the hierarchy.

You then need to identify what you think your variables might be and what type they should be.
For example, you need to know which item has been selected, so you’ll most likely want to have your options numbered and identify the selected option by its number (i.e. you’ll want a variable uint8_t selectedIndex).

Then you need to be thinking about behaviour, like how the selected index should be increased or decreased when a button is pressed and how the selected index must stay within a valid range. You also need to think how you’re going to indicate which item is selected (e.g. with an arrow before it, by indenting it et cetera).


If you’re truly stuck or desperately need some code, here’s a commented example of a simple menu.

But please don’t just copy and paste it and forget about it - please try to understand how it’s working, even if that means playing around with it and breaking things.
(Make sure to back up your code when it’s working in case you do break it.)

#include <Arduboy2.h>

Arduboy2 arduboy;

// Options
const char option0[] PROGMEM = "First Option";
const char option1[] PROGMEM = "Second Option";
const char option2[] PROGMEM = "Third Option";

// Put options into an array
const char * const options[] PROGMEM =
{
	option0,
	option1,
	option2,
};

// Calculates the size of the array.
// Don't worry too much about how this works.
const uint8_t optionCount = sizeof(options) / sizeof(options[0]);

// Index of last option.
// One less than the number of options because it's zero-based.
const uint8_t maxIndex = optionCount - 1;

// Don't worry about what this does unless you're prepared for a long explanation.
// It requires explaining things about the type system, reinterpret_cast,
// pointers and progmem.
const __FlashStringHelper * FlashString(const char * string)
{
	return reinterpret_cast<const __FlashStringHelper *>(string);
}

// The variable for storing the index of currently selected item.
uint8_t selectedIndex;

void setup(void)
{
	arduboy.begin();
}

void loop(void)
{
	// Don't run until the next frame is ready
	if(!arduboy.nextFrame())
		return;
	
	// Update buttons so 'justPressed' works
	arduboy.pollButtons();
	
	if(arduboy.justPressed(UP_BUTTON))
	{
		// If selected index is more than zero, decrease it by 1.
		// This has the effect of stopping selectedIndex from
		// being less than 0.
		if(selectedIndex > 0)
			--selectedIndex;
	}
	
	if(arduboy.justPressed(DOWN_BUTTON))
	{
		// If selected index is less than maxIndex, decrease it by 1.
		// This has the effect of stopping selectedIndex from
		// being more than maxIndex.
		if(selectedIndex < maxIndex)
			++selectedIndex;
	}
	
	if(arduboy.justPressed(A_BUTTON))
	{
		// Handle what happens when the option is confirmed
	}
	
	// Clear screen buffer
	arduboy.clear();
	
	// Set cursor position
	arduboy.setCursor(0, 0);
	
	// Loop through all options
	for(uint8_t i = 0; i < optionCount; ++i)
	{
		// If the current option is the selected option;
		if(i == selectedIndex)
		{
			// Draw an arrow
			arduboy.print(F("> "));
		}
		else
		{
			// Otherwise just indent
			arduboy.print(F("  "));
		}
	
		// Print the string in the array
		// This is quite complicated if you don't know about
		// pointers and casting.
		arduboy.println(FlashString(pgm_read_word(&options[i])));
	}
	
	// Update screen with buffer contents
	arduboy.display();
}
1 Like

Thank you very much guys. Definitely im not desperate. Will start with something more basic and make my way up. Thank you for the code though, i will study it and research.
@filmote indeed that code is way off my league jejejejeje
Thank you again
Btw Happy New Year

2 Likes

Mine too! I can see how @pharap has done it but I don’t think I could have written it !

1 Like

One day it might not be.
After all, a few years ago it would have been out of my league (which is funny because I’m the one who wrote it :P).

The sample I gave beneath my earlier comment is actually quite similar in principle, it’s just a more basic/more specific version that uses less advanced features and is a bit less flexible.