【花雕学编程】Arduino动手做（249）--GC9A01菜单导航的列表
【花雕学编程】Arduino动手做（249）--GC9A01菜单导航的列表
【花雕学编程】Arduino动手做（249）--GC9A01菜单导航的列表
【花雕学编程】Arduino动手做（249）--GC9A01菜单导航的列表
【Arduino】189种传感器模块系列实验（资料代码+仿真编程+图形编程）实验二百四十九：1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
项目之九十二：GC9A01园屏之带图标的菜单导航选项列表
实验开源代码
/*
【Arduino】189种传感器模块系列实验（资料代码+仿真编程+图形编程）
实验二百四十九：1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
项目之九十二：GC9A01园屏之带图标的菜单导航选项列表
*/
// GC9A01---------- ESP32
// RST ------------ NC（复位引脚，此处未连接）
// CS ------------- D4（片选引脚，连接到ESP32的D4引脚）
// DC ------------- D2（数据/命令选择引脚，连接到ESP32的D2引脚）
// SDA ------------ D23 (green)（主数据输出引脚，连接到ESP32的D23引脚，绿色线）
// SCL ------------ D18 (yellow)（时钟信号引脚，连接到ESP32的D18引脚，黄色线）
// GND ------------ GND（接地引脚，连接到ESP32的接地端）
// VCC -------------3V3（电源引脚，连接到ESP32的3.3V电源）
#include "SPI.h"
#include "Adafruit_GFX.h"
#include "Adafruit_GC9A01A.h"
#define TFT_CS 4
#define TFT_DC 2
#define TFT_RST -1
Adafruit_GC9A01A tft = Adafruit_GC9A01A(TFT_CS, TFT_DC, TFT_RST);
#define SCREEN_WIDTH 240
#define SCREEN_HEIGHT 240
#define MENU_ITEMS 4// **菜单项数量**
#define MENU_WIDTH 180// **菜单宽度**
#define MENU_HEIGHT 30// **菜单高度**
#define MENU_X 30// **菜单起始 X 位置**
#define MENU_Y 60// **菜单起始 Y 位置**
#define ICON_SIZE 20// **图标大小**
int selectedItem = 0;// **当前选中的菜单项**
void drawMenuItem(int index, const char* text, uint16_t color) {
int yPos = MENU_Y + index * (MENU_HEIGHT + 10);
// **绘制菜单背景**
tft.fillRect(MENU_X, yPos, MENU_WIDTH, MENU_HEIGHT, color);
// **绘制图标**
tft.fillCircle(MENU_X + ICON_SIZE, yPos + MENU_HEIGHT / 2, ICON_SIZE / 2, tft.color565(255, 255, 0));
// **显示文本**
tft.setTextColor(tft.color565(255, 255, 255));
tft.setTextSize(2);
tft.setCursor(MENU_X + ICON_SIZE * 2 + 10, yPos + 10);
tft.print(text);
}
void setup() {
Serial.begin(115200);
tft.begin();
tft.setRotation(2);
}
void loop() {
tft.fillScreen(tft.color565(0, 0, 0));
// **绘制菜单选项**
drawMenuItem(0, "选项 1", selectedItem == 0 ? tft.color565(0, 255, 0) : tft.color565(50, 50, 50));
drawMenuItem(1, "选项 2", selectedItem == 1 ? tft.color565(0, 255, 0) : tft.color565(50, 50, 50));
drawMenuItem(2, "选项 3", selectedItem == 2 ? tft.color565(0, 255, 0) : tft.color565(50, 50, 50));
drawMenuItem(3, "选项 4", selectedItem == 3 ? tft.color565(0, 255, 0) : tft.color565(50, 50, 50));
// **模拟选项切换**
selectedItem = (selectedItem + 1) % MENU_ITEMS;
delay(1000);
}
【花雕学编程】Arduino动手做（249）--GC9A01菜单导航的列表
这段代码的核心功能是 菜单导航界面，它在屏幕上显示 多个选项，并为每个选项 附带图标，同时让选中的选项 高亮显示，形成动态导航效果。代码结构
1️⃣ 初始化屏幕
• 使用 Adafruit_GC9A01A 控制 TFT 显示屏，设定黑色背景。
2️⃣ 绘制菜单选项
• fillRect() 创建 菜单矩形背景，显示在屏幕上。
• fillCircle() 生成 黄色图标，提高视觉清晰度。
• print() 方法显示 对应选项的文字，增强信息可读性。
3️⃣ 选项高亮
• selectedItem 变量控制 当前选中的菜单项。
• 选中的选项以 绿色背景显示，未选中的选项以 深色背景显示，形成对比效果。
4️⃣ 模拟选项切换
• selectedItem = (selectedItem + 1) % MENU_ITEMS; 让选项 每秒自动切换，模拟导航动画。
• delay(1000); 控制切换节奏，使动画流畅。
最终效果
屏幕上显示多个菜单选项，每个选项都有图标
菜单项自动循环切换，模拟导航功能
黑色背景 + 绿色高亮选项 + 白色文字，提高可视化效果
【花雕学编程】Arduino动手做（249）--GC9A01菜单导航的列表
实验场景图动态图【花雕学编程】Arduino动手做（249）--GC9A01菜单导航的列表
页:
[1]