How to make multiple menu on oled display wth esp32 and button

hi all,im still confusing how to make multiple menu on oled display with esp32.the last project ive been make is making multiple menu on arduino uno with button.but when i compile code in esp32,and change pin input (button),the result is different. can u share me the tutorial/progaraming code that i could learn from ? i need make multiple menu program in esp32 with oled like this:
image

and this is my code:


#include <Wire.h>
#include <Adafruit_SSD1306.h>
#include <Adafruit_GFX.h>

Adafruit_SSD1306 lcd(128, 64, &Wire, 4);

#define btnUp   12
#define btnOk   14
#define btnDown 27
#define btnBack 26

bool statusBtnUp   = false;
bool statusBtnOk   = false;
bool statusBtnDown = false;
bool statusBtnBack = false;

bool statusAkhirBtnUp   = false;
bool statusAkhirBtnOk   = false;
bool statusAkhirBtnDown = false;
bool statusAkhirBtnBack = false;

bool UP   = false;
bool _OK   = false;
bool DOWN = false;
bool BACK = false;

int halaman  = 1;
int menuItem = 1;

void setup() {
  Serial.begin(115200);
  lcd.begin(SSD1306_SWITCHCAPVCC, 0x3C);//SSD1306_SWITCHCAPVCC parameter name ,0x3C name adress
  lcd.clearDisplay();//erase data on display

  pinMode(btnUp,   INPUT_PULLUP);
  pinMode(btnOk,   INPUT_PULLUP);
  pinMode(btnDown, INPUT_PULLUP);
  pinMode(btnBack, INPUT_PULLUP);
}

void loop() {
  tampil();

  statusBtnUp   = digitalRead(btnUp);
  statusBtnOk   = digitalRead(btnOk);
  statusBtnDown = digitalRead(btnDown);
  statusBtnBack = digitalRead(btnBack);

  saatUpDitekan();
  saatOkDitekan();
  saatDownDitekan();
  saatBackDitekan();

  //  untuk button up
  if (UP && halaman == 1) {
    UP = false;
    menuItem --;
    if (menuItem < 1)menuItem = 8;
  }
  //untuk button down
  if (DOWN && halaman == 1) {
    DOWN = false;
    menuItem ++;
    if (menuItem > 8)menuItem = 1;
  }

  //  untuk button ok
  if (OK) {
    _OK = false;
    if (halaman == 1 && menuItem == 1) 
    {
      halaman = 2;
    } 
    else if (halaman == 1 && menuItem == 2) 
    {
      halaman = 3;
    } 
    else if (halaman == 1 && menuItem == 3) 
    {
      halaman = 4;
    } 
    else if (halaman == 1 && menuItem == 4) 
    {
      halaman = 5;
    }
    else if (halaman == 1 && menuItem == 5) 
    {
      halaman = 6;
    }
    else if (halaman == 1 && menuItem == 6) 
    {
      halaman = 7;
    }
    else if (halaman == 1 && menuItem == 8) 
    {
      halaman = 9;
    }
  }

  //  untuk button back
  if (BACK) {
    BACK = false;
    if (halaman == 2 || halaman == 3 || halaman == 4 || halaman == 5 || halaman == 6 || halaman == 7 || halaman == 8 || halaman == 9) 
    {
      halaman = 1;
    }
  }

  Serial.println(menuItem);
  delay(100);
}

//--------------------------------------------------------------------------------
void saatUpDitekan() {
  if (statusBtnUp != statusAkhirBtnUp) {
    if (statusBtnUp == 0) {
      UP = true;
    }
    delay(50);
  }
  statusAkhirBtnUp = statusBtnUp;
}

void saatOkDitekan() {
  if (statusBtnOk != statusAkhirBtnOk) {
    if (statusBtnOk == 0) {
      _OK = true;
    }
    delay(50);
  }
  statusAkhirBtnOk = statusBtnOk;
}

void saatDownDitekan() {
  if (statusBtnDown != statusAkhirBtnDown) {
    if (statusBtnDown == 0) {
      DOWN = true;
    }
    delay(50);
  }
  statusAkhirBtnDown = statusBtnDown;
}

void saatBackDitekan() {
  if (statusBtnBack != statusAkhirBtnBack) {
    if (statusBtnBack == 0) {
      BACK = true;
    }
    delay(50);
  }
  statusAkhirBtnBack = statusBtnBack;
}
//----------------------------------------------------------------------------
//semua yang tampil di lcd ada di fungsi ini
void tampil() 
{
  if (halaman == 1) 
  {
    lcd.clearDisplay();
    lcd.setTextSize(1);
    lcd.setTextColor(WHITE);
    lcd.setCursor(30, 0);
    lcd.print("E-BIKE ");

    if (menuItem == 1) 
    {
      lcd.setCursor(5, 17);
      lcd.setTextColor(WHITE);
      lcd.print("> kecepatan sepeda");
    } 
    else 
    {
      lcd.setCursor(5, 17);
      lcd.setTextColor(WHITE);
      lcd.print("  kecepatan sepeda");
    }

    if (menuItem == 2) 
    {
      lcd.setCursor(5, 27);
      lcd.setTextColor(WHITE);
      lcd.print("> nilai RPM");
    } 
    else 
    {
      lcd.setCursor(5, 27);
      lcd.setTextColor(WHITE);
      lcd.print("  nilai RPM");
    }

    if (menuItem == 3)
    {
      lcd.setCursor(5, 37);
      lcd.setTextColor(WHITE);
      lcd.print("> nilai PWM");
    } 
    else 
    {
      lcd.setCursor(5, 37);
      lcd.setTextColor(WHITE);
      lcd.print("  menuItem 3");
    }

    if (menuItem == 4) 
    {
      lcd.setCursor(5, 47);
      lcd.setTextColor(WHITE);
      lcd.print("> menuItem 4");
    } 
    else 
    {
      lcd.setCursor(5, 47);
      lcd.setTextColor(WHITE);
      lcd.print("  menuItem 4");
    }
    if (menuItem == 5) 
    {
      lcd.setCursor(5, 47);
      lcd.setTextColor(WHITE);
      lcd.print("> menuItem 5");
    } 
    else 
    {
      lcd.setCursor(5, 47);
      lcd.setTextColor(WHITE);
      lcd.print("  menuItem 5");
    }
    if (menuItem == 6) 
    {
      lcd.setCursor(5, 47);
      lcd.setTextColor(WHITE);
      lcd.print("> menuItem 6");
    } 
    else 
    {
      lcd.setCursor(5, 47);
      lcd.setTextColor(WHITE);
      lcd.print("  menuItem 6");
    }
    if (menuItem == 7) 
    {
      lcd.setCursor(5, 47);
      lcd.setTextColor(WHITE);
      lcd.print("> menuItem 7");
    } 
    else 
    {
      lcd.setCursor(5, 47);
      lcd.setTextColor(WHITE);
      lcd.print("  menuItem 7");
    }
    if (menuItem == 8) 
    {
      lcd.setCursor(5, 47);
      lcd.setTextColor(WHITE);
      lcd.print("> menuItem 8");
    } 
    else 
    {
      lcd.setCursor(5, 47);
      lcd.setTextColor(WHITE);
      lcd.print("  menuItem 8");
    }
    if (menuItem == 9) 
    {
      lcd.setCursor(5, 47);
      lcd.setTextColor(WHITE);
      lcd.print("> menuItem 9");
    } 
    else 
    {
      lcd.setCursor(5, 47);
      lcd.setTextColor(WHITE);
      lcd.print("  menuItem 9");
    }

  } 
  else if (halaman == 2) 
  {
    lcd.clearDisplay();
    lcd.setTextSize(2);
    lcd.setTextColor(WHITE);
    lcd.setCursor(25, 25);
    lcd.print("nilai sensor gps module");
  } else if (halaman == 3) {
    lcd.clearDisplay();
    lcd.setTextSize(2);
    lcd.setTextColor(WHITE);
    lcd.setCursor(10, 15);
    lcd.print("try reading sensor");
    lcd.setCursor(30, 35);
    lcd.print("nilai sensor dht22");
  } else if (halaman == 4) {
    lcd.clearDisplay();
    lcd.setTextSize(2);
    lcd.setTextColor(WHITE);
    lcd.setCursor(25, 25);
    lcd.print("nilai sensor bme 280");
  } else if (halaman == 5) {
    lcd.clearDisplay();
    lcd.setTextSize(2);
    lcd.setTextColor(WHITE);
    lcd.setCursor(25, 25);
    lcd.print("hal 5");
  }

  lcd.display();
}

this program could doing well in arduino uno but when i try in esp32 this could not doing well.

thanks, i try searching each tutorial on internet,but many of that pragramed with platform io.and i use arduino ide.

best regards

azhar

Post your code and use code tags when you do

What is the result?

work on that part of your code that changed the menu that is displayed.

we could all help a lot more if you posted your code.

and, if you do decide to, please, please, read how to post code.

ive been edited my question.please help me.im very confuse....

ive been edited my question.please help me.im very confuse....

this program could doing well in arduino uno,but it doesnt work in esp32 while ive changed pin for button (input). i even try making different code and test it in arduino uno,and also try in esp32.but it doesnt work..meanwhile ive change arduino pin digital number with esp32 digital pin number. i use arduino IDE (FYI)

I have for a week to create a similar program. and I'm tired. Please help me. :persevere: :confounded: :confounded: :confounded:

and this is my seond code.

//ARDUINO HOCAM UI(USER INTERFACE) - MENU OLUSTURMA
#include <OLED_I2C.h>
extern uint8_t SmallFont[];
int i  = 10;
int m = 207;
int page = 1;
int x = 0; 
int y = 0;
int son = 0; 
int son2 = 0; 
int son3 = 0;
int diger = 1; 
int diger2 = 1; 
int diger3 = 1;
volatile boolean inv = false;
volatile boolean tus = false; 
volatile boolean tus3 = false;
volatile boolean inv2 = false;

OLED  myOLED(SDA, SCL, 8);
void setup() {


  // put your setup code here, to run once:
  myOLED.begin(); 
  myOLED.clrScr();

  pinMode(2, INPUT);
  myOLED.setFont(SmallFont);

}

void loop() {

  int z = digitalRead(12);
  int y = digitalRead(14);
  int x = digitalRead(27);




  geri();
  if (page == 1) {

    myOLED.clrScr();
    myOLED.invertText(true);
    myOLED.print("ANA MENU", CENTER, 0);
    myOLED.invertText(false);
    myOLED.print("INVERT MODE:", 10, 10);
    myOLED.print("PARLAKLIK", 10, 25);
    myOLED.print("MENU 3", 10, 40);
    if (inv2 == true && page == 1)
      myOLED.print("ON", 85, 10);
    if (inv2 == false && page == 1)
      myOLED.print("OFF", 85, 10);
    myOLED.print(">", 0, i); myOLED.update();
    yon();
  }

  secim();

  if (page == 2)

  {
    myOLED.clrScr();
    myOLED.invertText(true);
    myOLED.print("ALT MENU", CENTER, 0);
    myOLED.invertText(false);
    myOLED.print("altMENU 1", 10, 10);
    myOLED.print("altMENU 2", 10, 25);
    myOLED.print("altMENU 3", 10, 40);

    myOLED.print(">", 0, i); myOLED.update();
    yon();
  }

  invertFunc();

  if (i == 25 && page == 1 && y == 1 )
  {
    page = 3;
  }

  if (page == 3 )
  {
    myOLED.clrScr();
    myOLED.print("PARLAKLIK:", 0, i);
    myOLED.printNumI(m, 60, 25);
    myOLED.update();
    if (y == 1 && page == 3)
      parlaklikAyar();
  }

  myOLED.setBrightness(m);


}




void parlaklikAyar()
{
  int y = digitalRead(3);
  if (y == 0)
    diger3 = 0;
  if (y == 1 && diger3 == 0)
  {
    son3 = 1;
    tus3 = true;

  }
  if (son3 == 1 && tus3 == true)
  { diger3 = 1;
    myOLED.clrScr();
    myOLED.update();
    m = m + 20;
    tus3 = false; son3 = 0;

    if (m > 255)
    {
      m = 0;
    }
  }
}
void invertFunc()
{
  int y = digitalRead(3);
  if (i == 10 && page == 1 && y == 1 && son2 == 0)
  {
    son2 = 1;
    if (inv2 == false)
    { inv2 = true;
    }
    else if (inv2 == true) {
      inv2 = false;
    }

  }
  else if (i == 10 && page == 1 && y == 0 && son2 == 1)
    son2 = 0;
  if (inv2 == true)
    myOLED.invert(true);
  if (inv2 == false)
    myOLED.invert(false);




}
void geri()
{ int z = digitalRead(4);
  if (z == 1)
  { i = 10;

    page = page - 1;
    if (page < 1)
      page = 1;

  }
}
void secim()
{

  int y = digitalRead(3);
  if (y == 1 && i != 10 && i != 25)
  {
    page = 2;
    i = 10;
  }


}
void yon()
{ int x = digitalRead(2);
  if (x == 0)
    diger = 0;
  if (x == 1 && diger == 0)
  {
    son = 1;
    tus = true;

  }
  if (son == 1 && tus == true)
  { diger = 1;
    myOLED.clrScr();
    myOLED.update();
    i = i + 15;
    tus = false; son = 0;

    if (i > 40)
    {
      i = 10;
    }
  }

}



ive been edited my question. and the result is when i test program using arduino uno,it could doing well,but when i upload program to esp32 it could not doing well.,i also changed each digital pin in my program are suitable with esp32 pinout and the result it appear the menu,but when i press the button the menu couldnt moving.

code:

//ARDUINO HOCAM UI(USER INTERFACE) - MENU OLUSTURMA
#include <OLED_I2C.h>
extern uint8_t SmallFont[];
int i  = 10;
int m = 207;
int page = 1;
int x = 0; 
int y = 0;
int son = 0; 
int son2 = 0; 
int son3 = 0;
int diger = 1; 
int diger2 = 1; 
int diger3 = 1;
volatile boolean inv = false;
volatile boolean tus = false; 
volatile boolean tus3 = false;
volatile boolean inv2 = false;

OLED  myOLED(SDA, SCL, 8);
void setup() {


  // put your setup code here, to run once:
  myOLED.begin(); 
  myOLED.clrScr();

  pinMode(2, INPUT);
  myOLED.setFont(SmallFont);

}

void loop() {

  int z = digitalRead(12);
  int y = digitalRead(14);
  int x = digitalRead(27);




  geri();
  if (page == 1) {

    myOLED.clrScr();
    myOLED.invertText(true);
    myOLED.print("ANA MENU", CENTER, 0);
    myOLED.invertText(false);
    myOLED.print("INVERT MODE:", 10, 10);
    myOLED.print("PARLAKLIK", 10, 25);
    myOLED.print("MENU 3", 10, 40);
    if (inv2 == true && page == 1)
      myOLED.print("ON", 85, 10);
    if (inv2 == false && page == 1)
      myOLED.print("OFF", 85, 10);
    myOLED.print(">", 0, i); myOLED.update();
    yon();
  }

  secim();

  if (page == 2)

  {
    myOLED.clrScr();
    myOLED.invertText(true);
    myOLED.print("ALT MENU", CENTER, 0);
    myOLED.invertText(false);
    myOLED.print("altMENU 1", 10, 10);
    myOLED.print("altMENU 2", 10, 25);
    myOLED.print("altMENU 3", 10, 40);

    myOLED.print(">", 0, i); myOLED.update();
    yon();
  }

  invertFunc();

  if (i == 25 && page == 1 && y == 1 )
  {
    page = 3;
  }

  if (page == 3 )
  {
    myOLED.clrScr();
    myOLED.print("PARLAKLIK:", 0, i);
    myOLED.printNumI(m, 60, 25);
    myOLED.update();
    if (y == 1 && page == 3)
      parlaklikAyar();
  }

  myOLED.setBrightness(m);


}




void parlaklikAyar()
{
  int y = digitalRead(3);
  if (y == 0)
    diger3 = 0;
  if (y == 1 && diger3 == 0)
  {
    son3 = 1;
    tus3 = true;

  }
  if (son3 == 1 && tus3 == true)
  { diger3 = 1;
    myOLED.clrScr();
    myOLED.update();
    m = m + 20;
    tus3 = false; son3 = 0;

    if (m > 255)
    {
      m = 0;
    }
  }
}
void invertFunc()
{
  int y = digitalRead(3);
  if (i == 10 && page == 1 && y == 1 && son2 == 0)
  {
    son2 = 1;
    if (inv2 == false)
    { inv2 = true;
    }
    else if (inv2 == true) {
      inv2 = false;
    }

  }
  else if (i == 10 && page == 1 && y == 0 && son2 == 1)
    son2 = 0;
  if (inv2 == true)
    myOLED.invert(true);
  if (inv2 == false)
    myOLED.invert(false);




}
void geri()
{ int z = digitalRead(4);
  if (z == 1)
  { i = 10;

    page = page - 1;
    if (page < 1)
      page = 1;

  }
}
void secim()
{

  int y = digitalRead(3);
  if (y == 1 && i != 10 && i != 25)
  {
    page = 2;
    i = 10;
  }


}
void yon()
{ int x = digitalRead(2);
  if (x == 0)
    diger = 0;
  if (x == 1 && diger == 0)
  {
    son = 1;
    tus = true;

  }
  if (son == 1 && tus == true)
  { diger = 1;
    myOLED.clrScr();
    myOLED.update();
    i = i + 15;
    tus = false; son = 0;

    if (i > 40)
    {
      i = 10;
    }
  }

}



you replacing the value with 0
make Z a global and then use it as you needed it. calling different pins in different places only causes errors.

or, name the pin
const int axisZ = 12 ; // pin 12 is axixZ

then in loop()

Z = digitalRead(axisZ) ;

you need to change ever place you call the pin.

ok its work thanks!