Example 05: Encoder

Additional documentation for an example supplied with the GEM library that demonstrates usage of rotary encoder as an input source to navigate and interact with the menu.

• About
• Highlights
• Schematic and Breadboard
• Sketch
• Simulator
• Run

About

This example extends Example 01: basic to use rotary encoder with built-in push-button as an input device. Demonstrates creation of simple one page menu with one editable menu item associated with int variable, one with bool variable, and a button, pressing of which will result in int variable value printed to Serial monitor if bool variable is set to true.

Second menu page with option select is added to better demonstrate operation of the menu with rotary encoder and use of invertKeysDuringEdit() method.

KeyDetector library (version 1.2.0 or later) is used to detect rotary encoder operation.

Highlights

In this example it will be shown how to:

• create editable menu item associated with int variable;
• create editable menu item associated with bool variable;
• create button with basic action;
• add menu item callback;
• create submenu;
• use custom input device to control menu from sketch.

Schematic and Breadboard

This example relies on the Test bench configuration with rotary encoder (AltSerialGraphicLCD version, U8g2 version and Adafruit GFX version).

Sketch

Annotated sketch is supplied with the library and can be found at:

• "examples/AltSerialGraphicLCD/Example-05_Encoder/Example-05_Encoder.ino" (AltSerialGraphicLCD version);
• "examples/U8g2/Example-05_Encoder/Example-05_Encoder.ino" (U8g2 version);
• "examples/AdafruitGFX/Example-05_Encoder/Example-05_Encoder.ino" (Adafruit GFX version).

Simulator

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).

Run

After compiling and uploading sketch to Arduino, wait while OLED screen 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.

Pressing "Ok" button will trigger edit mode of the "Number" variable, or change state of "Enable print" option, or invoke action associated with "Print" menu button (depending on which menu item is currently selected). If "Enable print" option is checked, then pressing "Print" button will result in number variable printed to the Serial Monitor.

Changing option "Chars order" on Settings menu page will result in swapping of GEM_KEY_DOWN and GEM_KEY_UP actions when looping through characters in edit mode of number (or char[17]) variable.