Interactive Menu - u8glib

Projects Programming
1

Hello ,
I have a question (sorry if it's easy but I'm learning).
For several days I have been trying to create my own menu based on the u8glib library.
Hardware: Arduino Mega + Ramps + Full Graphic controler.
I want to transform a sample menu code that looks like this:

#include "U8glib.h"

U8GLIB_ST7920_128X64_1X u8g(23, 17, 16);

#define KEY_NONE 0
#define KEY_PREV 1
#define KEY_NEXT 2
#define KEY_SELECT 3
#define KEY_BACK 4

// DOGS102 shield configuration values
//uint8_t uiKeyPrev = 2;
//uint8_t uiKeyNext = 4;
//uint8_t uiKeySelect = 5;
//uint8_t uiKeyBack = 3;

// DOGM128-Shield   configuration values
// DOGXL60-Shield configuration values
uint8_t uiKeyPrev = 33; // potentiometer / Encoder
uint8_t uiKeyNext = 31; // potentiometer / Encoder
uint8_t uiKeySelect = 35; // Encoder / potentiometr button 
uint8_t uiKeyBack = 41;

uint8_t uiKeyCodeFirst = KEY_NONE;
uint8_t uiKeyCodeSecond = KEY_NONE;
uint8_t uiKeyCode = KEY_NONE;


void uiSetup(void) {
  // configure input keys 
  
  pinMode(uiKeyPrev, INPUT_PULLUP);           // set pin to input with pullup
  pinMode(uiKeyNext, INPUT_PULLUP);           // set pin to input with pullup
  pinMode(uiKeySelect, INPUT_PULLUP);           // set pin to input with pullup
  pinMode(uiKeyBack, INPUT_PULLUP);           // set pin to input with pullup
}

void uiStep(void) {
  uiKeyCodeSecond = uiKeyCodeFirst;
  if ( digitalRead(uiKeyPrev) == LOW )
    uiKeyCodeFirst = KEY_PREV;
  else if ( digitalRead(uiKeyNext) == LOW )
    uiKeyCodeFirst = KEY_NEXT;
  else if ( digitalRead(uiKeySelect) == LOW )
    uiKeyCodeFirst = KEY_SELECT;
  else if ( digitalRead(uiKeyBack) == LOW )
    uiKeyCodeFirst = KEY_BACK;
  else 
    uiKeyCodeFirst = KEY_NONE;
  
  if ( uiKeyCodeSecond == uiKeyCodeFirst )
    uiKeyCode = uiKeyCodeFirst;
  else
    uiKeyCode = KEY_NONE;
}


#define MENU_ITEMS 4
const char *menu_strings[MENU_ITEMS] = { ("BOX A:" "%d" "cm"), ("BOX B:" "%d" "cm"), ("BOX C:" "%d" "cm"), ("BOX D:" "%d" "cm") };

uint8_t menu_current = 0;
uint8_t menu_redraw_required = 0;
uint8_t last_key_code = KEY_NONE;


void drawMenu(void) {
  uint8_t i, h;
  u8g_uint_t w, d;

  u8g.setFont(u8g_font_6x13);
  u8g.setFontRefHeightText();
  u8g.setFontPosTop();
  
  h = u8g.getFontAscent()-u8g.getFontDescent();
  w = u8g.getWidth();
  for( i = 0; i < MENU_ITEMS; i++ ) {
    d = (w-u8g.getStrWidth(menu_strings[i]))/2;
    u8g.setDefaultForegroundColor();
    if ( i == menu_current ) {
      u8g.drawBox(0, i*h+1, w, h);
      u8g.setDefaultBackgroundColor();
    }
    u8g.drawStr(d, i*h, menu_strings[i]);
  }
}

void updateMenu(void) {
  if ( uiKeyCode != KEY_NONE && last_key_code == uiKeyCode ) {
    return;
  }
  last_key_code = uiKeyCode;
  
  switch ( uiKeyCode ) {
    case KEY_NEXT:
      menu_current++;
      if ( menu_current >= MENU_ITEMS )
        menu_current = 0;
      menu_redraw_required = 1;
      break;
    case KEY_PREV:
      if ( menu_current == 0 )
        menu_current = MENU_ITEMS;
      menu_current--;
      menu_redraw_required = 1;
      break;
  }
}


void setup() {
  // rotate screen, if required
  // u8g.setRot180();
  
  uiSetup();                                // setup key detection and debounce algorithm
  menu_redraw_required = 1;     // force initial redraw
}

void loop() {  

  uiStep();                                     // check for key press
    
  if (  menu_redraw_required != 0 ) {
    u8g.firstPage();
    do  {
      drawMenu();
    } while( u8g.nextPage() );
    menu_redraw_required = 0;
  }

  updateMenu();                            // update menu bar
  
}

To the code that allows you to change the% d parameter.

In other words:
I want the program to work like this:

  1. The display shows: Box A: xx cm, Box B: yy cm, ...
  2. The potentiometer changing the position of the menu bar.
  3. When I go to, for example, Box B: and approve by pressing the (PIN 35) button and then change the position of the potentiometer, I will increase and decrease the "yy" value.
    Another confirmation by pressing the (PIN 35) button to return to the main menu and the option to switch to e.g. box A.
    I was looking for an example of such a code on the internet but I found nothing ..
    So I will be grateful for an example, a piece of code, help on this topic, so that I can lean on something and learn further.
1 Like