Moin Guys, it's complicated to create a ESP32 MP3 Player

Projects Programming
1

First, I dont know if it's the right topic wor that thread!

And Second, hera are the details about the project:

I am creating a ESP32-MP3-Player, that has a SSD1306(but in U8g and U8g2 i must use SH1106 to get it to display anything right) 128x64px OLED screen for the "GUI" of the thing.

The GUI-menu is based on a Flipper Zero Menu - Thanks to Upir for that great idea for this menu - and has a bunch of same-themed Submenus. There is by the way the main problem, I don't know how to code these submenus(and the audio sh*t).

So, if your wondering "What the Frick does he wan't from us!?", here is the answer: Teaching me how i could do this. Or Help me with that.

Here are the Hardware-things:

Microcontrller: ESP32 from the Freenove ESP32 Basic Starter kit(Wrover-E module, with Integrated Micro-SD-Card Slot)
Screen: AZ-Delivery SSD1306(but probably SH1106) 128x64px OLED screen, I²C
Things to Use the GUI: By The Way 9 Buttons, Up, Down, Left, Right, Play/pause, Back, Vol+, Vol-, Standby.
DAC: PCM1502A DAC

Some libs i perfer for that: U8g(2)lib for GUI, SD_MMC(recomended to use for the integrated slot by freenove) for sd card interrupt, some lib for playing the MP3-files(additional MP3 and OGG files), a BT lib for play the music on speakers. By the way, could MonoUI be good for that? and how i use and install it?

If you think there is missing something in here, feel free to say it!

2

A lot is missing. When you have the code somewhat working show us the code as well as the wiring. See the pinned post https://forum.arduino.cc/t/how-to-get-the-best-out-of-this-forum/1111649
in the meantime spend a LOT of time googling and reading.

3

Ok heres the code how its right now:

#include <Wire.h>
#include <U8g2lib.h>

U8G2_SH1106_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0);

const unsigned char Comin_Soon [] PROGMEM = {
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0xf0, 0x00, 0x00, 0x60, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0x18, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x09, 0xf2, 0xee, 0x67, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x06, 0x03, 0x33, 0x73, 0x66, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x06, 0x03, 0x1b, 0x33, 0x64, 0x60, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x06, 0x03, 0x1a, 0x33, 0x64, 0x60, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0b, 0x1a, 0x33, 0x64, 0x60, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0x1b, 0x32, 0x33, 0x64, 0x60, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0xf1, 0xf2, 0x33, 0x64, 0x60, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3e, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x77, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x73, 0x3e, 0x3e, 0x7e, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x78, 0x77, 0x76, 0x7e, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x1f, 0x63, 0x67, 0x66, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x07, 0x63, 0x63, 0x66, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x63, 0x63, 0x67, 0x66, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x01, 0xb3, 0x77, 0x77, 0x76, 0x66, 0x6c, 0xc0, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x01, 0xb3, 0x3e, 0x3e, 0x3e, 0x66, 0x6c, 0xc0, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
};

const uint8_t BluetoothIcon[] PROGMEM = {
  0x00, 0x01, 0x00, 0x03, 0x00, 0x05, 0x00, 0x09, 0x10, 0x19, 0x20, 0x09, 0x40, 0x05, 0x80, 0x03, 
  0x80, 0x03, 0x40, 0x05, 0x20, 0x09, 0x10, 0x19, 0x00, 0x09, 0x00, 0x05, 0x00, 0x03, 0x00, 0x01
};

const uint8_t MusicIcon[] PROGMEM = {
  0x00, 0xe0, 0x00, 0xbc, 0x80, 0x87, 0xf0, 0xe0, 0x18, 0xbc, 0x88, 0x87, 0xe8, 0x80, 0x38, 0x80, 
  0x08, 0x80, 0x08, 0x80, 0x08, 0xe0, 0x08, 0xf0, 0x08, 0x60, 0x0e, 0x00, 0x0f, 0x00, 0x06, 0x00
};

const uint8_t FolderIcon[] PROGMEM = {
  0x00, 0x00, 0x00, 0x00, 0x1e, 0x00, 0x21, 0x00, 0xc1, 0x0f, 0x01, 0x10, 0x01, 0x10, 0x01, 0x10, 
  0xe1, 0xff, 0x11, 0x80, 0x09, 0x40, 0x05, 0x20, 0x03, 0x10, 0xff, 0x0f, 0x00, 0x00, 0x00, 0x00 
};

const uint8_t SettingsIcon[] PROGMEM = {
  0x80, 0x01, 0x88, 0x11, 0xdc, 0x3b, 0xfe, 0x7f, 0xfc, 0x3f, 0xf8, 0x1f, 0x7c, 0x3e, 0x3f, 0xfc, 
  0x3f, 0xfc, 0x7c, 0x3e, 0xf8, 0x1f, 0xfc, 0x3f, 0xfe, 0x7f, 0xdc, 0x3b, 0x88, 0x11, 0x80, 0x01
};

const uint8_t ItemSelectedBar[] PROGMEM = {
  0xf8, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x03, 
  0x04, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x04, 
  0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0c, 
  0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0c, 
  0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0c, 
  0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0c, 
  0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0c, 
  0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0c, 
  0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0c, 
  0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0c, 
  0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0c, 
  0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0c, 
  0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0c, 
  0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0c, 
  0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0c, 
  0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0c, 
  0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0c, 
  0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0c, 
  0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0c, 
  0xfc, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x07, 
  0xf8, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x03
};

const uint8_t Scrollbar[] PROGMEM = {
  0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 
  0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 
  0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 
  0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x00
};

const unsigned char* bitmap_icons[4] = {
	MusicIcon,
	FolderIcon,
	BluetoothIcon,
	SettingsIcon
};

const int NUM_ITEMS = 4;
const int MAX_ITEM_LENGTH = 12;

char menu_items [NUM_ITEMS] [MAX_ITEM_LENGTH] = {
  "Music",
  "Folder",
  "Bluetooth",
  "Settings"
};

#define BUTTON_UP_PIN 5
#define BUTTON_SELECT_PIN 19
#define BUTTON_DOWN_PIN 13

int button_up_clicked = 0;
int button_select_clicked = 0;
int button_down_clicked = 0;

int item_selected = 0;

int item_sel_previous;
int item_sel_next;

int current_screen = 0;

void setup() {
  u8g2.setColorIndex(1);
  u8g2.begin();
  u8g2.setBitmapMode(1);


  pinMode(BUTTON_UP_PIN, INPUT_PULLUP);
  pinMode(BUTTON_SELECT_PIN, INPUT_PULLUP);
  pinMode(BUTTON_DOWN_PIN, INPUT_PULLUP);
}

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); // comin Soon cause submenus are the fck difficult
	  }
	
  u8g2.sendBuffer();

}

by the way i dont often use comments in codes, sorry

4

As far as your query re how to install a library, it's the same as how you installed the U8g2lib. Are you getting some sort of error in the serial monitor? If so show that in code tags as well.
What exactly is the problem?

5

I don't know how to continue it. Adding the submenus that they working to every point and the BT connection logic, also the music play logic and to play it on BT speakers.

6

A picture is worth a thousand words, so a video might be worth 1,000 x 1,000 words.

This guy on YouTube (@upir_upir) does many good videos on OLED (all displays). He talks fast so you will need to turn on closed caption and use the pause button often. He likes using U8g2. He uses Arduino, so the memory is less, the clock speed is slower and the voltage is 5v, not 3v3.. but you might get some useful information out of his use of the library.

Lesson 1: Spelling?
Untitled
... The letter "g"

7

To the Spelling: I shortened it, Coming to Comin, just for fun.

The video: https://youtu.be/HVHVkKt-ldc?si=NMs2pcLXiYT8Tbej

1 Like
8

oops... I just read that you know upir already... sry.

You already have the coding for a submenu by showing "coming soon"... I suggest writing a "flow chart" to show how you use your buttons to navigate all the menus. Show this flowchart.

9

What I do is look at the library sample sketches. I guarantee you there will be samples for playing the music.
As far as the sub-menus, while I have no experience with the library involved, my guess is that a sub-menu will not be substantially different from a menu, just a different parent.

10

I don't really know much how to programming in C. Do you know if Upir has an account here on Arduino Forum? If he has, could you please @ him?

11

We are not your personal coders or errand boys. If you need to learn to program in C, take a few years and do so then try the project again.

12

He does. I helped him with using Wokwi for his parking sensor maybe three years ago if you want to sift through 10k of my posts.

A "flowchart" is your idea as a bunch of bubbles with connecting lines. Beginning with the start screen bubble, have three lines out for buttons, then connect each button to another bubble to signify what happens when that button is pressed. That way your idea can be seen in full and maybe adjusted. Drawing your idea helps you understand your idea more, too.

The code writing part will be clumsy at first, but you will find that a program can grow with little additions, rather than zero-to-finish code in one sitting.

13

can i just use a screenshot of a wokwi version of the real thing?(didnt know how i write it so its a little weird, sorry!) by the way i am not thaaat good in english, so whats an "flowchart"?

14

ONLY IF you put numbers on all the pins. The wiring diagram will show where everything is connected. Your code must match your wiring diagram. If one is wrong, consider them both wrong.

The flowchart tells the story of the program, leaving specifics inside the program.

The exercises of a flowchart and wiring diagram help you see the project as more than wires and words. Same for us on "this" side of the internet.

flowchart
flowchart1500×1454 138 KB

1 Like
15

done with the flowchart! if its not how you wanted how it should be, its my first flowchart

flowchart ESP32-MP3-Player
flowchart ESP32-MP3-Player2019×1210 259 KB

16

Add the buttons used to navigate the menu.

1 Like
17

ok, here you are:

image
image302×279 6.37 KB

the on/off Switch is not included

18

You have some magic going on in your flowchart. Your first decision is "music or manage" and you have "yes/no" as the choice. Your flowchart should reflect what you will do in the code.

For example, Your first screen will show "music/manage" and you will need two buttons, "move" and "select". If you press "move" the choice changes between the choices. When you press "select", you will store the selection and the level (music/manage) so when you press the "back" button, you can return). Your flowchart shows "music" as either a yes or a no...

"Left, Right, Pause?" You need to draw when these are used.

19

ok, i think i dont really get it right. could i give you a "tree-explanation" of the menu (i call it tree-explanation cause it explains the menu in form of a File-Tree like thing)? that is easier for me!

20

Sounds good.

1 Like