ESP32 Menu in C++

/ ESP32 / C++ / Arduino IDE

Getting started with the ESP32

A few months ago, I got an ESP32 and decided to use it as an opportunity to learn C++. I already enjoy programming, but learning a language in the context of a real device gives me a new way to put that interest into practice.

I use the Arduino IDE to write my C++ code for the ESP32. Getting the tools set up and working through the project has given me a practical starting point for exploring C++ and developing software for a microcontroller.

Building my own menu

One of the first things I made was a menu that I programmed myself in C++. Rather than only following examples, I wanted to build something of my own and see what I could create with the ESP32. Writing the menu gave me a concrete project to work on while learning the language.

I am proud that I have already gone from getting the board to writing a small project for it. The menu is an early step in my ESP32 journey, and I am looking forward to continuing to learn C++ and finding out what else I can build.

$ open ./esp32-menu.ino

The code & live demo

esp32-menu.ino C++

#include <Adafruit_GFX.h>
#include <Adafruit_ST7789.h>

// --- DISPLAY PINS ---
#define TFT_MOSI 45
#define TFT_SCLK 40
#define TFT_CS   42
#define TFT_DC   41
#define TFT_RST  39
#define TFT_BL   48

// Give Pins to the Library
Adafruit_ST7789 tft = Adafruit_ST7789(&SPI, TFT_CS, TFT_DC, TFT_RST);

const int buttonPin = 0;

const int elements = 3; // How Many Elements are in the Array
const String mainModus[elements] = {"Wifi", "Bluethooth", "Emulator"};
int selectedIndex = 0;

int y;
int x;
String title;
void setup() {
  Serial.begin(115200);
  pinMode(buttonPin, INPUT_PULLUP);

  // --- DISPLAY START ---
  pinMode(TFT_BL, OUTPUT);
  digitalWrite(TFT_BL, HIGH);

  // Force the ESP32 to use the defined Pins
  SPI.begin(TFT_SCLK, -1, TFT_MOSI, TFT_CS);

  tft.init(172, 320);
  tft.setRotation(2);

  // Black Background
  tft.fillScreen(ST77XX_BLACK);

  // Draw Title
  tft.setTextColor(ST77XX_GREEN);
  tft.setTextSize(2);

  title = "ESP 32 Menu";
  int16_t x1, y1;
  uint16_t w, h;

  // calculate the width and height of the Text in Pixels
  tft.getTextBounds(title, 0, 0, &x1, &y1, &w, &h);

  x = (tft.width() - w) / 2;
  y = 10;

  tft.setCursor(x, y);
  tft.println(title);

  tft.drawLine(0, 30, tft.width(), 30, ST77XX_GREEN);

  drawMenu();
}

void loop() {
  if(digitalRead(buttonPin) == LOW) {
    selectedIndex++;

    if(selectedIndex >= elements) {
      selectedIndex = 0;
    }

    drawMenu();
    delay(200);
  }
}

void drawMenu() {
  tft.fillScreen(ST77XX_BLACK);

  tft.setTextColor(ST77XX_GREEN);
  tft.setTextSize(2);
  tft.setCursor(x, 10); // Nutze hier direkt 10, nicht die globale Variable y
  tft.println(title);
  tft.drawLine(0, 30, tft.width(), 30, ST77XX_GREEN);

  int currentY = 30; // Startwert der Linie
  for (int i = 0; i < elements; i++) {
    currentY += 30; // Erster Wert ist 60

    if(i == selectedIndex) {
      // Box zeichnen (x-30 ist ok, currentY-5 ist der vertikale Start)
      tft.fillRect(x - 30, currentY - 2, 200, 25, ST77XX_RED);
      tft.setTextColor(ST77XX_WHITE, ST77XX_RED);
    } else {
      tft.setTextColor(ST77XX_GREEN, ST77XX_BLACK);
    }

    tft.setCursor(x, currentY);
    tft.println(mainModus[i]);
  }
}

Interactive simulation

ESP32 menu

BROWSER DEMO

A visual simulation of the menu logic. It does not run on or connect to a physical ESP32.

ESP 32 Menu

Press RUN to start the menu.

After starting, click “Press GPIO 0” or use the space bar to cycle through the options.

< Back to all projects