Skip to content

Circular menu in arduino

To create a multilevel circular menu is not an easy thing .

In order to do it decently you need object oriented knowledge (classes) and some basic knowledge of pointers.
An additional "new type" (typedef) knowledge should be useful too.

If you do not know of what we are talking about do not panic.
We will cover all this stuff on later articles... remember we are doing hardware and software here.

In this article we already made for you a class (two of them... but anyway...) to accomplish this complicated step.
You only have to learn how to use this class and not try to understand how it is made.

This is the great thing about classes you can simply use them without knowing what is happening internally.
The first thing is to understand what we already have said.
In order to navigate a multilevel circular menu you need three buttons the down the right and the enter.

This brings us to design a generic menu element like the picture below :

As we can see an generic element should have a title and three pointers. If you don't know about pointers at this point consider them like three different hyperlinks of a specific web page. So you have a page with a title and three different "links".
One pointer points to the father element (the element to the upper layer). One to the down element and one to the right element.
What happens if a generic element does not has a down element ?
Well you decide ! In our case points to the top element of the same level in order to guarantee the circularity.
What happens if an element does not have any father? (It is the father of all the elements ... the so called root.)
Well points itself !
And what happens when does not have a right element ? In our example we decided to point itself like before.
If you make these decisions you have one risk.
If you go to the "righter" element you can never revisit it's father so you have to make the so called "up one level" links in every level except the first one.

I really understand that all this stuff can look very strange at first impact but now you will see in practice whar are we talking about and you will understand it easily.

Step 1
Design into a text editor your multi level menu like the format below (call it for example menu.txt).
Notice that at each sub level, except the first one, you have to add the voice "up one dir" in order to keep the menu navigable.
This voice should have an id too (it is a cell option of our menu).

Menu 1 [0]                                         (f:0,d:1,r:0)
Menu 2 [1]                                         (f:1,d:6,r:2)
	Menu 2>Smenu 1  [2]                            (f:1,d:3,r:2)
	Menu 2>Smenu 2  [3]                            (f:1,d:4,r:3)
	Menu 2>Smenu 3  [4]                            (f:1,d:5,r:4)
	Menu 2>up one dir [5]                          (f:1,d:2,r:5)
Menu 3 [6]                                         (f:6,d:14,r:7)
	Menu 3>Smenu 1 [7]                             (f:6,d:8,r:7)
	Menu 3>Smenu 2 [8]                             (f:6,d:12,r:9)
		Menu 3>Smenu 2>SSmenu 1 [9]                (f:8,d:10,r:9)
		Menu 3>Smenu 2>SSmenu 2 [10]               (f:8,d:11,r:10)
		Menu 3>Smenu 2>up one dir [11]             (f:8,d:9,r:11)
	Menu 3>Smenu 3 [12]                            (f:6,d:13,r:12)
	Menu 3>up one dir [13]                         (f:6,d:7,r:13)
Menu 4 [14]                                        (f:14,d:0,r:15)
	Menu 4>Smenu 1 [15]                            (f:14,d:21,r:16)
		Menu 4>Smenu 1>SSmenu 1 [16]               (f:15,d:20,r:17)
			Menu 4>Smenu 1>SSmenu 1>SSSmenu 1 [17] (f:16,d:18,r:17)
			Menu 4>Smenu 1>SSmenu 1>SSSmenu 2 [18] (f:16,d:19,r:18)
			Menu 4>Smenu 1>SSmenu 1>up one dir [19](f:16,d:17,r:19)
		Menu 4>Smenu 1>up one dir [20]             (f:15,d:16,r:20)
	Menu 4>Smenu 2 [21]                            (f:14,d:22,r:21)
	Menu 4>Smenu 3 [22]                            (f:14,d:23,r:22)
	Menu 4>Smenu 4 [23]                            (f:14,d:24,r:23)
	Menu 4>Smenu 5 [24]                            (f:14,d:25,r:24)
	Menu 4>up one dir [25]                         (f:14,d:15,r:25)


Now enumerate all your elements starting from 0
In this example we have 26 elements (0-25).
Notice the indentation for "designing" the leveling of your menu.
Now the f,d,r stand for father, down, right id element.

Let's see how we can fill them in this example.
The element 0 (menu 1) does not have any father so links itself (f:0)
has a down element with id 1 (menu 2)
does not have any right element so links itself (r:0)

Another example :
The element 1 (menu 2) does not have any father (element in upper layer) so calls itseld (f:1)
does have a down link at id 6 (menu 3 has id 6) (d:6)
does have a right link with id 2 (r:2)

Yet another example :
The element 19 has a father at 16, has a down element at 17 (go to the top of the same level since it is the last choice of the sub menu) and since it is at the right edge the right pointer is 19 (point at the same element)

Notice that the right edge elements have a right pointer at them-selfs and
the bottom elements have a down pointer at the top element of the same level.

You should do this to all your menu elements.
Maybe it is time consuming but once you done it you are ready to go.

In the next page we will proceed at the step 2.