helios/m5stack-tab5-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Variation 1: larger fonts and flicker-free slider

Browse Source
This commit is contained in:
helios
2026-08-01 18:48:05 +00:00
parent 12619a8609
commit 2dba8e401d
1 changed files with 50 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main.cpp
+50 -29
View File
@@ -9,6 +9,8 @@ constexpr uint16_t CARD = 0x2145;
constexpr uint16_t BORDER = 0x39E7;
constexpr uint16_t MUTED = 0xAD55;
constexpr uint16_t ACCENT = 0x4D7F;
constexpr int32_t SLIDER_CANVAS_Y = 630;
constexpr int32_t SLIDER_CANVAS_H = 90;
struct Rect {
int32_t x, y, w, h;
@@ -40,26 +42,30 @@ uint32_t lastInfoUpdate = 0;
uint8_t brightness = 160;
int32_t lastTouchX = -1;
int32_t lastTouchY = -1;
M5Canvas sliderCanvas(&M5.Display);
void centered(const char* text, const Rect& area, uint16_t color,
float size = 1.0f) {
void centered(const char* text, const Rect& area, uint16_t color) {
M5.Display.setFont(&fonts::FreeSansBold18pt7b);
M5.Display.setTextDatum(middle_center);
M5.Display.setTextColor(color);
M5.Display.setTextSize(size);
M5.Display.setTextSize(1);
M5.Display.drawString(text, area.x + area.w / 2, area.y + area.h / 2);
}
void drawHeader() {
M5.Display.fillRect(0, 0, M5.Display.width(), 82, CARD);
M5.Display.fillRect(0, 80, M5.Display.width(), 2, ACCENT);
M5.Display.setFont(&fonts::FreeSansBold24pt7b);
M5.Display.setTextDatum(middle_left);
M5.Display.setTextColor(TFT_WHITE);
M5.Display.setTextSize(1.8f);
M5.Display.setTextSize(1);
M5.Display.drawString("M5Stack Tab5", 28, 40);
M5.Display.setFont(&fonts::FreeSans12pt7b);
M5.Display.setTextDatum(middle_right);
M5.Display.setTextColor(MUTED);
M5.Display.setTextSize(1.0f);
M5.Display.drawString("TOUCH DASHBOARD", M5.Display.width() - 28, 40);
M5.Display.setTextSize(1);
M5.Display.drawString("TOUCH DASHBOARD / VARIATION 1",
M5.Display.width() - 28, 40);
}
void drawColorPanel() {
@@ -67,14 +73,19 @@ void drawColorPanel() {
colorPanel.h, 22, panelColor);
M5.Display.drawRoundRect(colorPanel.x, colorPanel.y, colorPanel.w,
colorPanel.h, 22, TFT_WHITE);
centered("DISPLAY + TOUCH READY",
{colorPanel.x, colorPanel.y + 78, colorPanel.w, 150}, TFT_WHITE,
2.0f);
M5.Display.setFont(&fonts::FreeSansBold24pt7b);
M5.Display.setTextDatum(middle_center);
M5.Display.setTextColor(TFT_WHITE);
M5.Display.setTextSize(1);
M5.Display.drawString("DISPLAY + TOUCH READY",
colorPanel.x + colorPanel.w / 2,
colorPanel.y + 150);
char text[48];
snprintf(text, sizeof(text), "Button presses: %lu",
static_cast<unsigned long>(pressCount));
centered(text, {colorPanel.x, colorPanel.y + 220, colorPanel.w, 52},
TFT_WHITE, 1.1f);
M5.Display.setFont(&fonts::FreeSans18pt7b);
M5.Display.drawString(text, colorPanel.x + colorPanel.w / 2,
colorPanel.y + 250);
}
void drawButton(const Button& button, bool pressed = false) {
@@ -84,39 +95,45 @@ void drawButton(const Button& button, bool pressed = false) {
button.area.h, 18, fill);
M5.Display.drawRoundRect(button.area.x, button.area.y, button.area.w,
button.area.h, 18, TFT_WHITE);
centered(button.label, button.area, text, 1.35f);
centered(button.label, button.area, text);
}
void drawSlider() {
M5.Display.fillRect(0, 630, M5.Display.width(), 90, BG);
M5.Display.setTextDatum(middle_left);
M5.Display.setTextColor(MUTED, BG);
M5.Display.setTextSize(0.9f);
M5.Display.drawString("BRIGHTNESS", 28, slider.y + slider.h / 2);
M5.Display.fillRoundRect(slider.x, slider.y, slider.w, slider.h,
slider.h / 2, BORDER);
const int32_t localY = slider.y - SLIDER_CANVAS_Y;
sliderCanvas.fillSprite(BG);
sliderCanvas.setFont(&fonts::FreeSans12pt7b);
sliderCanvas.setTextDatum(middle_left);
sliderCanvas.setTextColor(MUTED, BG);
sliderCanvas.setTextSize(1);
sliderCanvas.drawString("BRIGHTNESS", 28, localY + slider.h / 2);
sliderCanvas.fillRoundRect(slider.x, localY, slider.w, slider.h,
slider.h / 2, BORDER);
int32_t filled = map(brightness, 20, 255, 0, slider.w);
if (filled > 0) {
M5.Display.fillRoundRect(slider.x, slider.y, filled, slider.h,
slider.h / 2, ACCENT);
sliderCanvas.fillRoundRect(slider.x, localY, filled, slider.h,
slider.h / 2, ACCENT);
}
int32_t knobX = slider.x + constrain(filled, 0, slider.w);
M5.Display.fillCircle(knobX, slider.y + slider.h / 2, 18, TFT_WHITE);
M5.Display.drawCircle(knobX, slider.y + slider.h / 2, 18, BORDER);
sliderCanvas.fillCircle(knobX, localY + slider.h / 2, 20, TFT_WHITE);
sliderCanvas.drawCircle(knobX, localY + slider.h / 2, 20, BORDER);
char value[8];
snprintf(value, sizeof(value), "%u", brightness);
M5.Display.setTextDatum(middle_right);
M5.Display.setTextColor(TFT_WHITE, BG);
M5.Display.drawString(value, M5.Display.width() - 28,
slider.y + slider.h / 2);
sliderCanvas.setFont(&fonts::FreeSansBold12pt7b);
sliderCanvas.setTextDatum(middle_right);
sliderCanvas.setTextColor(TFT_WHITE, BG);
sliderCanvas.drawString(value, M5.Display.width() - 28,
localY + slider.h / 2);
sliderCanvas.pushSprite(0, SLIDER_CANVAS_Y);
}
void infoLine(int32_t y, const char* label, const char* value) {
M5.Display.fillRect(infoPanel.x + 18, y, infoPanel.w - 36, 38, CARD);
M5.Display.setTextSize(0.95f);
M5.Display.setFont(&fonts::FreeSans12pt7b);
M5.Display.setTextSize(1);
M5.Display.setTextDatum(middle_left);
M5.Display.setTextColor(MUTED, CARD);
M5.Display.drawString(label, infoPanel.x + 24, y + 19);
M5.Display.setFont(&fonts::FreeSansBold12pt7b);
M5.Display.setTextDatum(middle_right);
M5.Display.setTextColor(TFT_WHITE, CARD);
M5.Display.drawString(value, infoPanel.x + infoPanel.w - 24, y + 19);
@@ -166,9 +183,10 @@ void drawInfoPanel() {
infoPanel.h, 22, CARD);
M5.Display.drawRoundRect(infoPanel.x, infoPanel.y, infoPanel.w,
infoPanel.h, 22, BORDER);
M5.Display.setFont(&fonts::FreeSansBold18pt7b);
M5.Display.setTextDatum(top_left);
M5.Display.setTextColor(TFT_WHITE);
M5.Display.setTextSize(1.25f);
M5.Display.setTextSize(1);
M5.Display.drawString("LIVE DEVICE INFO", infoPanel.x + 24,
infoPanel.y + 22);
M5.Display.drawFastHLine(infoPanel.x + 24, infoPanel.y + 64,
@@ -220,6 +238,9 @@ void setup() {
M5.Display.setRotation(1);
M5.Display.setColorDepth(16);
M5.Display.setBrightness(brightness);
sliderCanvas.setColorDepth(16);
sliderCanvas.setPsram(true);
sliderCanvas.createSprite(M5.Display.width(), SLIDER_CANVAS_H);
drawScreen();
Serial.println("M5Stack Tab5 Touch Dashboard ready");
}