¶ Урок 16: Создание простого меню и навигации с джойстиком на Arduino Uno и OLED SSD1306
В этом уроке мы разберём, как построить базовое меню для Arduino Uno с выводом на OLED дисплей SSD1306 (128×64, I2C) и управлением через джойстик HW-504.
Меню позволит новичкам понять основные конструкции: циклы, условия, массивы, функции.
¶ 🎯 Цель урока
- Научиться выводить пункты меню на OLED дисплей.
- Освоить перемещение по меню с помощью джойстика.
- Научиться реагировать на выбор пункта (кнопка джойстика).
- Понять базовые конструкции: if-else, switch-case, for, массивы.
¶ 🔧 Необходимые компоненты
- Arduino Uno — 1 шт.
- OLED SSD1306 0.96" (I2C) — 1 шт.
- Джойстик HW-504 — 1 шт.
- Соединительные провода Dupont.
¶ ⚡ Подключение
¶ OLED SSD1306 (I2C):
VCC → 5VGND → GNDSDA → A4SCL → A5
¶ Джойстик HW-504:
VRx → A0VRy → A1SW → D2+5V → 5VGND → GND
¶ 📚 Библиотеки
Перед загрузкой скетча убедитесь, что установлены библиотеки:
- Adafruit SSD1306
- Adafruit GFX
¶ 🖥️ Код меню с комментариями
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
// ----- Настройки дисплея -----
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
#define OLED_ADDR 0x3C
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);
// ----- Джойстик -----
#define JOY_X A0
#define JOY_Y A1
#define JOY_SW 2
int joyX, joyY;
bool joyBtn;
// ----- Меню -----
const char* menuItems[] = {"Start", "Settings", "Info", "Exit"};
int menuSize = sizeof(menuItems) / sizeof(menuItems[0]);
int selected = 0; // текущий выбор
// ----- Зона нечувствительности джойстика -----
const int DEADZONE = 200;
// ----- Время антидребезга -----
unsigned long lastMove = 0;
const int debounceDelay = 200;
void setup() {
pinMode(JOY_SW, INPUT_PULLUP);
// Запуск дисплея
if (!display.begin(SSD1306_SWITCHCAPVCC, OLED_ADDR)) {
for (;;); // остановка, если дисплей не найден
}
display.clearDisplay();
display.display();
}
void loop() {
// Чтение джойстика
joyX = analogRead(JOY_X);
joyY = analogRead(JOY_Y);
joyBtn = !digitalRead(JOY_SW); // кнопка нажата = true
// ---- Навигация по Y ----
if (millis() - lastMove > debounceDelay) {
if (joyY < 512 - DEADZONE) { // вверх
selected--;
if (selected < 0) selected = menuSize - 1;
lastMove = millis();
}
if (joyY > 512 + DEADZONE) { // вниз
selected++;
if (selected >= menuSize) selected = 0;
lastMove = millis();
}
}
// ---- Обработка выбора ----
if (joyBtn) {
showAction(selected);
}
// ---- Отрисовка меню ----
drawMenu();
}
// === Функция отрисовки меню ===
void drawMenu() {
display.clearDisplay();
display.setTextSize(1);
display.setTextColor(SSD1306_WHITE);
for (int i = 0; i < menuSize; i++) {
if (i == selected) {
display.fillRect(0, i * 12, 128, 12, SSD1306_WHITE); // выделение
display.setTextColor(SSD1306_BLACK);
} else {
display.setTextColor(SSD1306_WHITE);
}
display.setCursor(5, i * 12 + 2);
display.print(menuItems[i]);
}
display.display();
}
// === Действие при выборе пункта ===
void showAction(int index) {
display.clearDisplay();
display.setTextSize(2);
display.setTextColor(SSD1306_WHITE);
display.setCursor(10, 20);
switch (index) {
case 0:
display.print("START!");
break;
case 1:
display.print("SETTINGS");
break;
case 2:
display.print("INFO");
break;
case 3:
display.print("EXIT");
break;
}
display.display();
delay(1000); // пауза для отображения
}
¶ 🔍 Пояснения к коду
- Массив
menuItems[]хранит список пунктов меню. - selected — индекс текущего выбранного пункта.
- if-else применяется для проверки направления джойстика.
- switch-case используется для действий при выборе пункта.
- for проходит по всем пунктам меню для их отрисовки.
- Зона DEADZONE нужна, чтобы избежать ложных срабатываний.
¶ 📌 Дополнительные задания
- Добавьте подменю в пункте Настройки (например: «Яркость», «Контраст»).
- Сделайте горизонтальную навигацию (используя ось X).
- Реализуйте сохранение последнего выбранного пункта после перезагрузки Arduino (подсказка: библиотека EEPROM).
- Добавьте иконки вместо текста в меню (для продвинутого уровня).