Test an accessible OLED menu

Change contrast, text size, sound, and brightness in an ESP32 menu and compare each stored setting with its visible or audible effect.

UX Uma: I want you to test what each preference actually changes and record where the visible result falls short of its label., your practice guide

UX Uma: I want you to test what each preference actually changes and record where the visible result falls short of its label.
Predict the reading, then compare it with the measurement.

Wokwi ESP32

Third party Tool

Tier 1 · Web · No account

Version tested: Compiled and booted by the Wokwi gate (ESP32 Arduino core 3.3.11); captured in the Wokwi web editor on 2026-09-09. Date: 2026-09-09.

Open the ESP32 editor, paste diagram.json, then paste sketch.ino.

Open Wokwi to paste in the files (new tab)

Get the files

Use both prepared files. This is a paste-in setup; saving a project requires a Wokwi account.

diagram.json

2,829 bytes · Circuit connections

Download

{
  "version": 1,
  "author": "IoT Class",
  "editor": "wokwi",
  "parts": [
    {
      "type": "wokwi-esp32-devkit-v1",
      "id": "esp",
      "top": 0,
      "left": 0,
      "attrs": {}
    },
    {
      "type": "wokwi-ssd1306",
      "id": "oled1",
      "top": -100,
      "left": 150,
      "attrs": {
        "i2cAddress": "0x3c"
      }
    },
    {
      "type": "wokwi-pushbutton",
      "id": "btn1",
      "top": 100,
      "left": 200,
      "attrs": {
        "color": "green",
        "label": "UP"
      }
    },
    {
      "type": "wokwi-pushbutton",
      "id": "btn2",
      "top": 140,
      "left": 200,
      "attrs": {
        "color": "blue",
        "label": "DOWN"
      }
    },
    {
      "type": "wokwi-pushbutton",
      "id": "btn3",
      "top": 180,
      "left": 200,
      "attrs": {
        "color": "red",
        "label": "SELECT"
      }
    },
    {
      "type": "wokwi-pushbutton",
      "id": "btn4",
      "top": 220,
      "left": 200,
      "attrs": {
        "color": "yellow",
        "label": "BACK"
      }
    },
    {
      "type": "wokwi-buzzer",
      "id": "bz1",
      "top": 100,
      "left": -80,
      "attrs": {}
    }
  ],
  "connections": [
    [
      "esp:TX0",
      "$serialMonitor:RX",
      "",
      []
    ],
    [
      "esp:RX0",
      "$serialMonitor:TX",
      "",
      []
    ],
    [
      "oled1:GND",
      "esp:GND.1",
      "black",
      [
        "v-20",
        "h-60"
      ]
    ],
    [
      "oled1:VCC",
      "esp:3V3",
      "red",
      [
        "v-30",
        "h-80"
      ]
    ],
    [
      "oled1:SDA",
      "esp:D21",
      "green",
      [
        "v-40",
        "h-100"
      ]
    ],
    [
      "oled1:SCL",
      "esp:D22",
      "blue",
      [
        "v-50",
        "h-120"
      ]
    ],
    [
      "btn1:1.l",
      "esp:D25",
      "green",
      [
        "h-50"
      ]
    ],
    [
      "btn1:2.l",
      "esp:GND.1",
      "black",
      [
        "h-30",
        "v50"
      ]
    ],
    [
      "btn2:1.l",
      "esp:D26",
      "blue",
      [
        "h-60"
      ]
    ],
    [
      "btn2:2.l",
      "esp:GND.1",
      "black",
      [
        "h-40",
        "v30"
      ]
    ],
    [
      "btn3:1.l",
      "esp:D27",
      "red",
      [
        "h-70"
      ]
    ],
    [
      "btn3:2.l",
      "esp:GND.1",
      "black",
      [
        "h-50",
        "v10"
      ]
    ],
    [
      "btn4:1.l",
      "esp:D14",
      "yellow",
      [
        "h-80"
      ]
    ],
    [
      "btn4:2.l",
      "esp:GND.1",
      "black",
      [
        "h-60",
        "v-10"
      ]
    ],
    [
      "bz1:2",
      "esp:D13",
      "orange",
      [
        "h30"
      ]
    ],
    [
      "bz1:1",
      "esp:GND.1",
      "black",
      [
        "h20",
        "v30"
      ]
    ]
  ]
}

sketch.ino

15,728 bytes · ESP32 program

Download

/*
 * Accessible IoT Interface Lab
 *
 * Demonstrates core UI/UX accessibility principles:
 * - Multimodal feedback (visual, audio, timing)
 * - High contrast mode for visual impairments
 * - Large text mode for readability
 * - Audio confirmation sounds
 * - Persistent user preferences (NVS)
 * - Debounced button input
 *
 * Compatible with: ESP32 DevKit, Wokwi Simulator
 * Display: SSD1306 OLED 128x64 (I2C)
 */

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

// ========== DISPLAY CONFIGURATION ==========
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
#define OLED_RESET -1
#define SCREEN_ADDRESS 0x3C

Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

// ========== PIN DEFINITIONS ==========
#define BTN_UP 25
#define BTN_DOWN 26
#define BTN_SELECT 27
#define BTN_BACK 14
#define BUZZER_PIN 13
#define LED_PIN 2

// ========== TIMING CONSTANTS ==========
#define DEBOUNCE_DELAY 200
#define MENU_ANIMATION_DELAY 50
#define FEEDBACK_DURATION 100

// ========== AUDIO FEEDBACK FREQUENCIES ==========
#define TONE_NAVIGATE 800    // Navigation beep
#define TONE_SELECT 1200     // Selection confirmation
#define TONE_BACK 400        // Back/cancel tone
#define TONE_ERROR 200       // Error tone
#define TONE_SUCCESS 1600    // Success confirmation
#define TONE_TOGGLE_ON 1000  // Toggle enabled
#define TONE_TOGGLE_OFF 600  // Toggle disabled

// ========== USER PREFERENCES ==========
Preferences preferences;

struct AccessibilitySettings {
  bool highContrast;
  bool largeText;
  bool soundEnabled;
  uint8_t brightness;
} settings;

// ========== MENU SYSTEM ==========
enum MenuState {
  MENU_HOME,
  MENU_MAIN,
  MENU_SETTINGS,
  MENU_ACCESSIBILITY,
  MENU_SYSTEM_INFO
};

MenuState currentMenu = MENU_HOME;
int menuIndex = 0;
int maxMenuItems = 3;

// Menu item labels
const char* mainMenuItems[] = {"Home", "Settings", "System Info"};
const char* accessibilityItems[] = {"High Contrast", "Large Text", "Sound", "Brightness", "Back"};

// ========== DEBOUNCING ==========
unsigned long lastButtonPress = 0;

// ========== FUNCTION DECLARATIONS ==========
void loadSettings();
void saveSettings();
void playTone(int frequency, int duration);
void playNavigateSound();
void playSelectSound();
void playBackSound();
void playToggleSound(bool enabled);
void drawMenu();
void drawHome();
void drawMainMenu();
void drawAccessibilityMenu();
void drawSystemInfo();
void handleNavigation(int direction);
void handleSelect();
void handleBack();
void updateDisplay();
void showFeedback(const char* message, bool success);
void blinkLED(int times);

// ========== SETUP ==========
void setup() {
  Serial.begin(115200);
  Serial.println("\n=== Accessible IoT Interface Lab ===");
  Serial.println("Demonstrating UI/UX accessibility principles");

// Initialize pins
  pinMode(BTN_UP, INPUT_PULLUP);
  pinMode(BTN_DOWN, INPUT_PULLUP);
  pinMode(BTN_SELECT, INPUT_PULLUP);
  pinMode(BTN_BACK, INPUT_PULLUP);
  pinMode(BUZZER_PIN, OUTPUT);
  pinMode(LED_PIN, OUTPUT);

// Initialize display
  Wire.begin(21, 22);
  if (!display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS)) {
    Serial.println("ERROR: SSD1306 allocation failed");
    for (;;); // Halt if display fails
  }

display.clearDisplay();
  display.setTextColor(SSD1306_WHITE);
  display.display();

// Load saved preferences
  loadSettings();

// Apply brightness setting
  display.dim(settings.brightness < 50);

// Welcome feedback
  Serial.println("Settings loaded:");
  Serial.printf("  High Contrast: %s\n", settings.highContrast ? "ON" : "OFF");
  Serial.printf("  Large Text: %s\n", settings.largeText ? "ON" : "OFF");
  Serial.printf("  Sound: %s\n", settings.soundEnabled ? "ON" : "OFF");
  Serial.printf("  Brightness: %d%%\n", settings.brightness);

// Startup sound and visual
  if (settings.soundEnabled) {
    playTone(TONE_SUCCESS, 100);
    delay(50);
    playTone(TONE_SUCCESS + 200, 100);
  }
  blinkLED(2);

// Show home screen
  drawHome();
}

// ========== MAIN LOOP ==========
void loop() {
  // Check for button presses with debouncing
  if (millis() - lastButtonPress > DEBOUNCE_DELAY) {

// UP button
    if (digitalRead(BTN_UP) == LOW) {
      lastButtonPress = millis();
      handleNavigation(-1);
      Serial.println("BTN: UP pressed");
    }

// DOWN button
    else if (digitalRead(BTN_DOWN) == LOW) {
      lastButtonPress = millis();
      handleNavigation(1);
      Serial.println("BTN: DOWN pressed");
    }

// SELECT button
    else if (digitalRead(BTN_SELECT) == LOW) {
      lastButtonPress = millis();
      handleSelect();
      Serial.println("BTN: SELECT pressed");
    }

// BACK button
    else if (digitalRead(BTN_BACK) == LOW) {
      lastButtonPress = millis();
      handleBack();
      Serial.println("BTN: BACK pressed");
    }
  }

delay(10); // Small delay for stability
}

// ========== SETTINGS MANAGEMENT ==========
void loadSettings() {
  preferences.begin("access", false);
  settings.highContrast = preferences.getBool("contrast", false);
  settings.largeText = preferences.getBool("largetext", false);
  settings.soundEnabled = preferences.getBool("sound", true);
  settings.brightness = preferences.getUChar("brightness", 100);
  preferences.end();
}

void saveSettings() {
  preferences.begin("access", false);
  preferences.putBool("contrast", settings.highContrast);
  preferences.putBool("largetext", settings.largeText);
  preferences.putBool("sound", settings.soundEnabled);
  preferences.putUChar("brightness", settings.brightness);
  preferences.end();
  Serial.println("Settings saved to NVS");
}

// ========== AUDIO FEEDBACK ==========
void playTone(int frequency, int duration) {
  if (!settings.soundEnabled) return;
  tone(BUZZER_PIN, frequency, duration);
  delay(duration);
  noTone(BUZZER_PIN);
}

void playNavigateSound() {
  playTone(TONE_NAVIGATE, 30);
}

void playSelectSound() {
  playTone(TONE_SELECT, 50);
  delay(30);
  playTone(TONE_SELECT + 200, 50);
}

void playBackSound() {
  playTone(TONE_BACK, 80);
}

void playToggleSound(bool enabled) {
  if (enabled) {
    playTone(TONE_TOGGLE_ON, 50);
    delay(30);
    playTone(TONE_TOGGLE_ON + 400, 80);
  } else {
    playTone(TONE_TOGGLE_OFF + 200, 50);
    delay(30);
    playTone(TONE_TOGGLE_OFF, 80);
  }
}

void playErrorSound() {
  playTone(TONE_ERROR, 100);
  delay(50);
  playTone(TONE_ERROR, 100);
}

// ========== VISUAL FEEDBACK ==========
void blinkLED(int times) {
  for (int i = 0; i < times; i++) {
    digitalWrite(LED_PIN, HIGH);
    delay(100);
    digitalWrite(LED_PIN, LOW);
    delay(100);
  }
}

void showFeedback(const char* message, bool success) {
  // Visual feedback on display
  display.fillRect(0, 54, 128, 10, settings.highContrast ? SSD1306_WHITE : SSD1306_BLACK);
  display.setTextColor(settings.highContrast ? SSD1306_BLACK : SSD1306_WHITE);
  display.setTextSize(1);
  display.setCursor(4, 55);
  display.print(message);
  display.display();

// Audio feedback
  if (success) {
    playTone(TONE_SUCCESS, 100);
  } else {
    playErrorSound();
  }

// LED feedback
  blinkLED(success ? 1 : 3);

delay(500);
  updateDisplay();
}

// ========== NAVIGATION HANDLING ==========
void handleNavigation(int direction) {
  menuIndex += direction;

// Wrap around menu
  if (menuIndex < 0) menuIndex = maxMenuItems - 1;
  if (menuIndex >= maxMenuItems) menuIndex = 0;

playNavigateSound();
  blinkLED(1);
  updateDisplay();
}

void handleSelect() {
  playSelectSound();
  blinkLED(1);

switch (currentMenu) {
    case MENU_HOME:
      currentMenu = MENU_MAIN;
      menuIndex = 0;
      maxMenuItems = 3;
      break;

case MENU_MAIN:
      switch (menuIndex) {
        case 0: // Home
          currentMenu = MENU_HOME;
          break;
        case 1: // Settings -> Accessibility
          currentMenu = MENU_ACCESSIBILITY;
          menuIndex = 0;
          maxMenuItems = 5;
          break;
        case 2: // System Info
          currentMenu = MENU_SYSTEM_INFO;
          break;
      }
      break;

case MENU_ACCESSIBILITY:
      switch (menuIndex) {
        case 0: // Toggle High Contrast
          settings.highContrast = !settings.highContrast;
          playToggleSound(settings.highContrast);
          saveSettings();
          Serial.printf("High Contrast: %s\n", settings.highContrast ? "ON" : "OFF");
          break;
        case 1: // Toggle Large Text
          settings.largeText = !settings.largeText;
          playToggleSound(settings.largeText);
          saveSettings();
          Serial.printf("Large Text: %s\n", settings.largeText ? "ON" : "OFF");
          break;
        case 2: // Toggle Sound
          settings.soundEnabled = !settings.soundEnabled;
          // Play sound BEFORE disabling
          if (!settings.soundEnabled) {
            tone(BUZZER_PIN, TONE_TOGGLE_OFF + 200, 50);
            delay(30);
            tone(BUZZER_PIN, TONE_TOGGLE_OFF, 80);
            noTone(BUZZER_PIN);
          } else {
            playToggleSound(true);
          }
          saveSettings();
          Serial.printf("Sound: %s\n", settings.soundEnabled ? "ON" : "OFF");
          break;
        case 3: // Adjust Brightness
          settings.brightness += 25;
          if (settings.brightness > 100) settings.brightness = 25;
          display.dim(settings.brightness < 50);
          playTone(800 + (settings.brightness * 8), 50);
          saveSettings();
          Serial.printf("Brightness: %d%%\n", settings.brightness);
          break;
        case 4: // Back
          handleBack();
          return;
      }
      break;

case MENU_SYSTEM_INFO:
      // Return to main menu
      handleBack();
      return;
  }

updateDisplay();
}

void handleBack() {
  playBackSound();
  blinkLED(1);

switch (currentMenu) {
    case MENU_HOME:
      // Already at home, do nothing
      break;
    case MENU_MAIN:
      currentMenu = MENU_HOME;
      break;
    case MENU_ACCESSIBILITY:
    case MENU_SYSTEM_INFO:
      currentMenu = MENU_MAIN;
      menuIndex = 0;
      maxMenuItems = 3;
      break;
  }

updateDisplay();
}

// ========== DISPLAY RENDERING ==========
void updateDisplay() {
  switch (currentMenu) {
    case MENU_HOME:
      drawHome();
      break;
    case MENU_MAIN:
      drawMainMenu();
      break;
    case MENU_ACCESSIBILITY:
      drawAccessibilityMenu();
      break;
    case MENU_SYSTEM_INFO:
      drawSystemInfo();
      break;
  }
}

void drawHome() {
  display.clearDisplay();

// Background for high contrast mode
  if (settings.highContrast) {
    display.fillScreen(SSD1306_WHITE);
    display.setTextColor(SSD1306_BLACK);
  } else {
    display.setTextColor(SSD1306_WHITE);
  }

// Title
  display.setTextSize(settings.largeText ? 2 : 1);
  display.setCursor(settings.largeText ? 10 : 25, 4);
  display.print("IoT Device");

// Status indicator with icon
  display.setTextSize(1);
  display.setCursor(4, settings.largeText ? 28 : 20);
  display.print("Status: ");
  display.print("ONLINE");

// Draw status indicator circle
  int circleX = settings.largeText ? 100 : 75;
  int circleY = settings.largeText ? 32 : 23;
  if (settings.highContrast) {
    display.fillCircle(circleX, circleY, 4, SSD1306_BLACK);
  } else {
    display.fillCircle(circleX, circleY, 4, SSD1306_WHITE);
  }

// Show active accessibility features
  display.setCursor(4, settings.largeText ? 44 : 36);
  if (settings.highContrast || settings.largeText) {
    display.print("A11y: ");
    if (settings.highContrast) display.print("HC ");
    if (settings.largeText) display.print("LT ");
  }

// Navigation hint
  display.setCursor(4, 54);
  display.setTextSize(1);
  display.print("[SELECT] Open Menu");

display.display();
}

void drawMainMenu() {
  display.clearDisplay();

if (settings.highContrast) {
    display.fillScreen(SSD1306_WHITE);
    display.setTextColor(SSD1306_BLACK);
  } else {
    display.setTextColor(SSD1306_WHITE);
  }

// Title
  display.setTextSize(settings.largeText ? 2 : 1);
  display.setCursor(settings.largeText ? 20 : 40, 2);
  display.print("MENU");

// Draw menu items
  display.setTextSize(settings.largeText ? 2 : 1);
  int yStart = settings.largeText ? 22 : 18;
  int ySpacing = settings.largeText ? 14 : 12;

for (int i = 0; i < 3; i++) {
    int y = yStart + (i * ySpacing);

// Highlight selected item
    if (i == menuIndex) {
      if (settings.highContrast) {
        display.fillRect(0, y - 2, 128, ySpacing, SSD1306_BLACK);
        display.setTextColor(SSD1306_WHITE);
      } else {
        display.fillRect(0, y - 2, 128, ySpacing, SSD1306_WHITE);
        display.setTextColor(SSD1306_BLACK);
      }
      display.setCursor(4, y);
      display.print("> ");
    } else {
      display.setTextColor(settings.highContrast ? SSD1306_BLACK : SSD1306_WHITE);
      display.setCursor(4, y);
      display.print("  ");
    }
    display.print(mainMenuItems[i]);
  }

// Navigation hints
  display.setTextSize(1);
  display.setTextColor(settings.highContrast ? SSD1306_BLACK : SSD1306_WHITE);
  display.setCursor(4, 54);
  display.print("[UP/DN] Nav [SEL] OK");

display.display();
}

void drawAccessibilityMenu() {
  display.clearDisplay();

if (settings.highContrast) {
    display.fillScreen(SSD1306_WHITE);
    display.setTextColor(SSD1306_BLACK);
  } else {
    display.setTextColor(SSD1306_WHITE);
  }

// Title
  display.setTextSize(1);
  display.setCursor(20, 2);
  display.print("ACCESSIBILITY");

// Draw menu items with current values
  int yStart = 14;
  int ySpacing = 10;

for (int i = 0; i < 5; i++) {
    int y = yStart + (i * ySpacing);

// Highlight selected item
    if (i == menuIndex) {
      if (settings.highContrast) {
        display.fillRect(0, y - 1, 128, ySpacing, SSD1306_BLACK);
        display.setTextColor(SSD1306_WHITE);
      } else {
        display.fillRect(0, y - 1, 128, ySpacing, SSD1306_WHITE);
        display.setTextColor(SSD1306_BLACK);
      }
    } else {
      display.setTextColor(settings.highContrast ? SSD1306_BLACK : SSD1306_WHITE);
    }

display.setCursor(4, y);
    if (i == menuIndex) display.print(">");
    display.setCursor(12, y);
    display.print(accessibilityItems[i]);

// Show current values
    display.setCursor(90, y);
    switch (i) {
      case 0: display.print(settings.highContrast ? "[ON]" : "[OFF]"); break;
      case 1: display.print(settings.largeText ? "[ON]" : "[OFF]"); break;
      case 2: display.print(settings.soundEnabled ? "[ON]" : "[OFF]"); break;
      case 3:
        display.print("[");
        display.print(settings.brightness);
        display.print("%]");
        break;
      case 4: display.print(""); break;
    }
  }

// Navigation hints
  display.setTextColor(settings.highContrast ? SSD1306_BLACK : SSD1306_WHITE);
  display.setCursor(4, 54);
  display.print("[SEL] Toggle [BACK]");

display.display();
}

void drawSystemInfo() {
  display.clearDisplay();

if (settings.highContrast) {
    display.fillScreen(SSD1306_WHITE);
    display.setTextColor(SSD1306_BLACK);
  } else {
    display.setTextColor(SSD1306_WHITE);
  }

// Title
  display.setTextSize(1);
  display.setCursor(25, 2);
  display.print("SYSTEM INFO");

// System information
  display.setCursor(4, 16);
  display.print("Device: ESP32");

display.setCursor(4, 26);
  display.print("Uptime: ");
  display.print(millis() / 1000);
  display.print("s");

display.setCursor(4, 36);
  display.print("Free Heap: ");
  display.print(ESP.getFreeHeap() / 1024);
  display.print("KB");

display.setCursor(4, 46);
  display.print("Display: 128x64 OLED");

// Navigation hint
  display.setCursor(4, 54);
  display.print("[BACK] Return");

display.display();
}

Use the launch button above to open the ESP32 editor in Wokwi.
Select the editor’s diagram.json tab and replace all its text with the supplied diagram.json.
Select the sketch.ino tab, replace all its text with the supplied sketch.ino, then click Start Simulation.

Steps

Screens captured against Wokwi ESP32 Compiled and booted by the Wokwi gate (ESP32 Arduino core 3.3.11); captured in the Wokwi web editor on 2026-09-09 on 2026-09-09; the tool may have moved on — the text steps are the contract.

Step 1
Do
Paste the diagram and sketch into Wokwi ESP32. Install Adafruit GFX Library and Adafruit SSD1306. Inspect the OLED and button wiring.
You will see
Input: inspect the running Wokwi OLED and four button paths. The OLED uses I2C address 0x3C on GPIO 21/22. The four active-low controls use GPIO 25/26/27/14; buzzer uses GPIO 13. The OLED home screen and startup settings are visible together.
Why it matters
The buttons, display, and buzzer form the feedback paths. Their named pins match the supplied sketch and diagram. Serial Monitor begins with High Contrast OFF and Large Text OFF. This is a simulator wiring check, not a physical usability test.
Step 2
Do
In Wokwi Serial Monitor, read the startup settings, then press the SELECT button in the Simulation panel.
You will see
Input: start at 115200 baud and press SELECT after the home screen appears. Observed in Serial Monitor: "BTN: SELECT pressed". Observed on the real OLED: MENU with Home, Settings, and System Info. Expected: SELECT opens the main menu with Home highlighted.
Why it matters
The Wokwi OLED and serial event were captured in the same run. The startup settings remained High Contrast OFF and Large Text OFF. The menu exposes Settings for the next action. This is the simulator display, not a physical accessibility test.
Step 3
Do
In the Simulation panel, press DOWN to Settings, SELECT to open it, then SELECT to toggle High Contrast.
You will see
Input: press DOWN, SELECT, and SELECT with each button released between taps. Observed: "High Contrast: ON" and "Settings saved to NVS". Observed on the real OLED: ACCESSIBILITY with High Contrast [ON]. Expected: the contrast setting changes from OFF to ON.
Why it matters
The Serial Monitor confirms the toggle action. The OLED shows the selected setting in reversed light and dark areas. The setting was persisted in simulated NVS. Readability still needs a human check on the actual display.
Step 4
Do
Tap DOWN to Large Text and SELECT, then use BACK to inspect the main menu.
You will see
Input: press DOWN, SELECT, then BACK on the real Wokwi buttons. Serial Monitor: "Large Text: ON" followed by "BTN: BACK pressed". OLED: MENU shows enlarged Home, Settings, and System Info entries. Observed issue: the bottom entry crowds the navigation hint.
Why it matters
The serial line confirms the preference changed in this run. The OLED confirms BACK returned to the larger main menu. The crowded bottom entry is visible in the new capture. The preference therefore needs layout review on each screen.
Step 5
Do
In the Simulation panel, navigate to Sound in the Accessibility menu, toggle it OFF, and inspect Serial Monitor.
You will see
Input: navigate to Sound and press SELECT. Observed: "Settings saved to NVS" followed by "Sound: OFF". Expected: the sound setting changes from ON to OFF. The marked serial line matches the real Wokwi screenshot.
Why it matters
The output confirms the setting was stored. This run produced the disabled-sound confirmation. The later menu position was not independently verified. A serial setting does not measure acoustic output.
Step 6
Do
On the OLED menu, select Brightness repeatedly and compare the printed values with the display.
You will see
Input: press SELECT four times on Brightness in the OLED menu. Serial Monitor: "Brightness: 25%", then "Brightness: 50%". Serial Monitor: "Brightness: 75%", then "Brightness: 100%". OLED: Brightness ends at [100%] in the real Wokwi capture.
Why it matters
Each press saved a new percentage in this run. The final OLED label agrees with the final serial line. The displayed percentages describe settings, not measured luminance. A visual check is needed before treating four labels as four distinct light levels.
Step 7
Do
On the OLED menu, restore High Contrast OFF, Large Text OFF, Sound ON, and Brightness 100%; return to the home screen.
You will see
Input: select High Contrast OFF, Large Text OFF, and Sound ON; press BACK twice. Serial Monitor: "High Contrast: OFF" and "Large Text: OFF". Serial Monitor: "Sound: ON" followed by two "BTN: BACK pressed" lines. OLED: the home screen again shows IoT Device and Status: ONLINE in small text.
Why it matters
The capture shows the returned home screen after restoring the settings. Brightness remained at 100% from the previous step. The serial lines confirm the three other restored values. This run does not establish whether NVS survives a new browser project.

Chapter checks

These questions refer to the chapter’s examples. Use the return links to review their answers.

You're designing a dashboard for a factory floor monitoring system. The operator needs to see: (1) machine status (running/stopped/error), (2) production count, (3) temperature readings, and (4) 7-day production trends. Where should you place the machine status indicator?
Return to the chapter’s knowledge check
A smart building dashboard monitors HVAC systems. Temperature thresholds are set to: Normal (18-24 C), Warning (15-18 or 24-28 C), Critical (<15 or >28 C). During testing, operators complain about 'alert fatigue' - too many warnings. Analysis shows 85% of warnings occur briefly during HVAC startup. What's the BEST solution?
Return to the chapter’s knowledge check

Return to Interface Design: Dashboards · Browse Labs

Wokwi ESP32

Get the files

diagram.json

sketch.ino

Steps

1 Step 1

2 Step 2

3 Step 3

4 Step 4

5 Step 5

6 Step 6

7 Step 7

Chapter checks

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7