here you are:
It is for you.
Looks understandable as a navigation map.
yup, and do you understand now how the menu should look like? which menupoint has what things ih his submenu and all that.
It looks like there are four main menu choices.
Looking at main menu choice 1...
Choice 1 has two choices
Choice 1a has magic
Choice 1b has two choices
Choice 1b1 has magic and two choices
Choice 1b1a has one choice
Choice 1b1a1 has magic and magic
Choice 1b2 has magic
Main menu choices 2 through 4 look more involved. Work on one level for each main menu choice before going deeper in the tree.
You will need to create a seven button array. Each button will need to be "counted" while other buttons will need to be ignored.
Next is the OLED. Here's a short-cut; You have a 21 character by 8 line screen. This is what the 21x8 looks like:
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
#define TEXT_1_WIDTH 21
#define TEXT_1_HEIGHT 8
#define OLED_RESET -1
#define SCREEN_ADDRESS 0x3C
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);
void setup() {
Serial.begin(115200);
display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS);
display.clearDisplay(); // clear OLED buffer
display.display(); // show cleared buffer
oledText();
delay(1000);
oledBox();
}
void loop() {
for (int i = 0; i < buttons; i++) {
readButton(i);
}
}
void oledBox() {
display.drawRect(0, 0, SCREEN_WIDTH - 1, SCREEN_HEIGHT - 1, 1);
display.display();
}
void oledText() {
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0, 0);
for (int j = 0; j < TEXT_1_HEIGHT; j++) {
for (int i = 0; i < TEXT_1_WIDTH; i++) {
display.print("X");
}
display.println();
}
display.display();
}
problem: in product description was said its a SSD1306, in reality its a SH1106.
That is not a problem. My example was with the 1306.
oh, than im sorry, i was a little Confused. but how i do the logic part of my code to work for the submenus?
Keep track of the submenu (1 through 4d2), which button was pressed and what happens when (button) and (submenu) are combined.
Could you possibly tell me in the form of code? I don't quite understand that.
To remember, heres the code part with the logic i meant:
void loop() {
if (current_screen == 0) {
if ((digitalRead(BUTTON_UP_PIN) == LOW) && (button_up_clicked == 0)) {
item_selected = item_selected -1;
button_up_clicked = 1;
if (item_selected < 0) {
item_selected = NUM_ITEMS-1;
}
}
else if ((digitalRead(BUTTON_DOWN_PIN) == LOW) && (button_down_clicked == 0)) {
item_selected = item_selected + 1;
button_down_clicked = 1;
if (item_selected >= NUM_ITEMS) {
item_selected = 0;
}
}
if ((digitalRead(BUTTON_UP_PIN) == HIGH) && (button_up_clicked == 1)) {
button_up_clicked = 0;
}
if ((digitalRead(BUTTON_DOWN_PIN) == HIGH) && (button_down_clicked == 1)) {
button_down_clicked = 0;
}
}
if ((digitalRead(BUTTON_SELECT_PIN) == LOW) && (button_select_clicked == 0)) {
button_select_clicked = 1;
if (current_screen == 0) {current_screen = 1;}
else {current_screen = 0;}
}
if ((digitalRead(BUTTON_SELECT_PIN) == HIGH) && (button_select_clicked == 1)) { // unclick
button_select_clicked = 0;
}
item_sel_previous = item_selected - 1;
if (item_sel_previous < 0) {item_sel_previous = NUM_ITEMS - 1;} // previous item would be below first = make it the last
item_sel_next = item_selected + 1;
if (item_sel_next >= NUM_ITEMS) {item_sel_next = 0;} // next item would be after last = make it the first
u8g2.clearBuffer();
if (current_screen == 0) {
u8g2.clearBuffer();
u8g2.drawXBMP(4, 2, 16, 16, bitmap_icons[item_sel_previous]); // First Item Icon
u8g2.drawXBMP(4, 46, 16, 16, bitmap_icons[item_sel_next]); // Last Item Icon
u8g2.drawXBMP(0, 22, 128, 21, ItemSelectedBar);
u8g2.setFont(u8g2_font_crox3h_tr);
u8g2.drawStr(26, 17, menu_items[item_sel_previous]); // First Item Label, must be after ItemSelectedBar to not be covered
u8g2.setFont(u8g2_font_crox3hb_tr);
u8g2.drawStr(26, 38, menu_items[item_selected]); // Second Item Label, must be after ItemSelectedBar to not be covered
u8g2.setFont(u8g2_font_crox3h_tr);
u8g2.drawStr(26, 61, menu_items[item_sel_next]); // Last Item Label, must be after ItemSelectedBar to not be covered
u8g2.drawXBMP(125, 0, 3, 64, Scrollbar); // Scrollbar Bitmap, must be after ItemSelectedBar to not be covered
u8g2.drawXBMP(4, 24, 16, 16, bitmap_icons[item_selected]); // Second Item Icon, must be after ItemSelectedBar to not be covered
u8g2.drawBox(125, 64/NUM_ITEMS * item_selected, 3, 64/NUM_ITEMS);
}
else if (current_screen == 1) {
u8g2.drawXBMP( 0, 0, 128, 64, Comin_Soon);
}
u8g2.sendBuffer();
}
or do you just mean it like this part?
if ((digitalRead(BUTTON_UP_PIN) == LOW) && (button_up_clicked == 0)) {
item_selected = item_selected -1;
button_up_clicked = 1;
if (item_selected < 0) {
item_selected = NUM_ITEMS-1;
}
}
else if ((digitalRead(BUTTON_DOWN_PIN) == LOW) && (button_down_clicked == 0)) {
item_selected = item_selected + 1;
button_down_clicked = 1;
if (item_selected >= NUM_ITEMS) {
item_selected = 0;
}
}
btw my problem is how to use the same logic also for the submenus, and display the submenus also. cpp is not my main lang, i was learning python from the beginning on, and cpp was a little bit learning from ChatGPT and YouTube
Does your code work?
jep it works.
Excellent.
I have a new Idea how the menuthing could work, its out of a bunch of classes:
Here are the classes:
char Menus [5] = {
char MenuMain [3] [12] = {
"Music",
"Bluetooth",
"Settings"
};
char MenuMusic [2] [12] = {
"Play",
"Playlist"
};
char MenuBT [2] [12] = {
"Search",
"Connected"
};
char MenuSettings [3] [12] = {
"Brightness",
"OLED OFF",
"Sysinfo"
};
char SubMenus [NUM_ITEMS] [12] = {
char MenuPlay [1] [12] = {
// the variable for the PlayInterface
};
char MenuPlaylist [2] [12] = {
"Manage",
"Play"
};
char MenuSearch [NUM_ITEMS] [12] = {
"Search", // The Search Button
// The devices found
};
char MenuConnected [NUM_ITEMS] [12] = {
// The Devices connected before
};
char MenuBright [10] [12] = {
"10%",
"20%",
"30%",
"40%",
"50%",
"60%",
"70%",
"80%",
"90%",
"100%"
};
char MenuOLEDoff [4] [12] = {
"30sec",
"1min",
"2min",
"5min"
};
char MenuSysinfo [3] [12] = {
"Sys Version",
"Storage info",
"Playtime"
};
};
};
It’s a totally new idea on how I could program the ESP32, and probably the best option, in my opinion!
The logic behind how the menus change is a bit challenging for me to implement, so I would ask for
your help with that. We could also discuss it in a direct message, as it might just be us two talking about this.
By the way, im working on a logo-something for the ESP32 MP3-Player, that could be on the back of
the case, and i have no idea what it should look like. could we work together on that? and cause you help me so much, i also would write a thank you on the README.md from the Github repo!
I think btw that i missunderstood this, i thought you mean the already existing part(did you mean that?).