Example 06: Todo List
Additional documentation for an example supplied with the GEM library that demonstrates dynamic menu items management, population of GEMCallbackData object associated with menu item, use of GEMAppearance objects to style individual menu pages and custom splash screen.
This example demonstrates creation of GEM-based Todo list. Using controls, provided within the menu, it is possible to populate Todo list with tasks (menu items associated with bool variables), mark them completed, clear completed (or all) Todo items. Amount of available free RAM is displayed for supported boards (please refer to comments in source code). Additionaly, it is possible to change menu pointer style and order of characters in edit mode.
KeyDetector library (version 1.2.0 or later) is used to detect rotary encoder operation.
Note that for Adafruit GFX version of this example it may be required to disable some extra features in config.h (e.g. support for editable floating-point variables) in order to fit in Arduino UNO R3 board or even use board with more available memory.
In this example it will be shown how to:
- use
GEMAppearanceobject to style individual menu pages and change appearance settings at a runtime; - create editable menu item associated with
char[GEM_STR_LEN]variable; - dynamically create (add) and destroy (remove) editable menu item associated with
boolvariable; - add menu item at a specified position;
- traverse menu items;
- populate
GEMCallbackDataobject associated with menu item; - create
byteoption select; - create button with basic action;
- add menu item callback;
- hide and show menu item;
- create submenu;
- set custom splash screen;
- use custom input device to control menu from sketch;
- control menu with rotary encoder.
This example relies on the Test bench configuration with rotary encoder (AltSerialGraphicLCD version, U8g2 version and Adafruit GFX version).
Annotated sketch is supplied with the library and can be found at:
- "examples/AltSerialGraphicLCD/Example-06_Todo-List/Example-06_Todo-List.ino" (AltSerialGraphicLCD version);
- "examples/U8g2/Example-06_Todo-List/Example-06_Todo-List.ino" (U8g2 version);
- "examples/AdafruitGFX/Example-06_Todo-List/Example-06_Todo-List.ino" (Adafruit GFX version).
Simulation of this example (using U8g2 version of GEM) is available on Wokwi. It is possible to interact with the simulation using mouse or keyboard with arrow keys (left and right recommended) and a spacebar (make sure to focus the encoder by clicking on it first).
After compiling and uploading sketch to Arduino, wait while display boots and menu is being initialized and drawn to the screen. Then start rotating knob of the encoder and pressing its button to navigate and interact with the menu.
Navigate through menu pages of the Todo List application. Press "Add+" button on "Todo" page to load "Add Item" submenu, where it is possible to edit "Title" variable to input title of a new Todo item. After entering title, "Add" button will appear, pressing of which will result in adding Todo item (with title entered entered earlier) to the list on "Todo" page. Todo item is presented as a bool variable, which can be set to true by pressing it. It is possible to add as many Todo items as free memory will allow.
At the top level, parent menu page "Main Menu" consists of links to three submenu pages: "List" (which leads to "Todo" page), "Manage" and "Settings".
On "Manage" page amount of free RAM is displayed (for supported boards) and two buttons are present. "Clear completed" button removes completed Todo items from the list. "Clear all" button removes all items regardles of their status.
On "Settings" page it is possible to select appearance of menu pointer ("Row" or "Dash") and change "Chars order" option, which will result in swapping of GEM_KEY_DOWN and GEM_KEY_UP actions when looping through characters in edit mode of char[GEM_STR_LEN] "Title" variable.
