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 BORDER = 0x39E7;
constexpr uint16_t MUTED = 0xAD55; constexpr uint16_t MUTED = 0xAD55;
constexpr uint16_t ACCENT = 0x4D7F; constexpr uint16_t ACCENT = 0x4D7F;
constexpr int32_t SLIDER_CANVAS_Y = 630;
constexpr int32_t SLIDER_CANVAS_H = 90;
struct Rect { struct Rect {
int32_t x, y, w, h; int32_t x, y, w, h;
@@ -40,26 +42,30 @@ uint32_t lastInfoUpdate = 0;
uint8_t brightness = 160; uint8_t brightness = 160;
int32_t lastTouchX = -1; int32_t lastTouchX = -1;
int32_t lastTouchY = -1; int32_t lastTouchY = -1;
M5Canvas sliderCanvas(&M5.Display);
void centered(const char* text, const Rect& area, uint16_t color, void centered(const char* text, const Rect& area, uint16_t color) {
float size = 1.0f) { M5.Display.setFont(&fonts::FreeSansBold18pt7b);
M5.Display.setTextDatum(middle_center); M5.Display.setTextDatum(middle_center);
M5.Display.setTextColor(color); 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); M5.Display.drawString(text, area.x + area.w / 2, area.y + area.h / 2);
} }
void drawHeader() { void drawHeader() {
M5.Display.fillRect(0, 0, M5.Display.width(), 82, CARD); M5.Display.fillRect(0, 0, M5.Display.width(), 82, CARD);
M5.Display.fillRect(0, 80, M5.Display.width(), 2, ACCENT); M5.Display.fillRect(0, 80, M5.Display.width(), 2, ACCENT);
M5.Display.setFont(&fonts::FreeSansBold24pt7b);
M5.Display.setTextDatum(middle_left); M5.Display.setTextDatum(middle_left);
M5.Display.setTextColor(TFT_WHITE); M5.Display.setTextColor(TFT_WHITE);
M5.Display.setTextSize(1.8f); M5.Display.setTextSize(1);
M5.Display.drawString("M5Stack Tab5", 28, 40); M5.Display.drawString("M5Stack Tab5", 28, 40);
M5.Display.setFont(&fonts::FreeSans12pt7b);
M5.Display.setTextDatum(middle_right); M5.Display.setTextDatum(middle_right);
M5.Display.setTextColor(MUTED); M5.Display.setTextColor(MUTED);
M5.Display.setTextSize(1.0f); M5.Display.setTextSize(1);
M5.Display.drawString("TOUCH DASHBOARD", M5.Display.width() - 28, 40); M5.Display.drawString("TOUCH DASHBOARD / VARIATION 1",
M5.Display.width() - 28, 40);
} }
void drawColorPanel() { void drawColorPanel() {
@@ -67,14 +73,19 @@ void drawColorPanel() {
colorPanel.h, 22, panelColor); colorPanel.h, 22, panelColor);
M5.Display.drawRoundRect(colorPanel.x, colorPanel.y, colorPanel.w, M5.Display.drawRoundRect(colorPanel.x, colorPanel.y, colorPanel.w,
colorPanel.h, 22, TFT_WHITE); colorPanel.h, 22, TFT_WHITE);
centered("DISPLAY + TOUCH READY", M5.Display.setFont(&fonts::FreeSansBold24pt7b);
{colorPanel.x, colorPanel.y + 78, colorPanel.w, 150}, TFT_WHITE, M5.Display.setTextDatum(middle_center);
2.0f); 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]; char text[48];
snprintf(text, sizeof(text), "Button presses: %lu", snprintf(text, sizeof(text), "Button presses: %lu",
static_cast<unsigned long>(pressCount)); static_cast<unsigned long>(pressCount));
centered(text, {colorPanel.x, colorPanel.y + 220, colorPanel.w, 52}, M5.Display.setFont(&fonts::FreeSans18pt7b);
TFT_WHITE, 1.1f); M5.Display.drawString(text, colorPanel.x + colorPanel.w / 2,
colorPanel.y + 250);
} }
void drawButton(const Button& button, bool pressed = false) { 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); button.area.h, 18, fill);
M5.Display.drawRoundRect(button.area.x, button.area.y, button.area.w, M5.Display.drawRoundRect(button.area.x, button.area.y, button.area.w,
button.area.h, 18, TFT_WHITE); button.area.h, 18, TFT_WHITE);
centered(button.label, button.area, text, 1.35f); centered(button.label, button.area, text);
} }
void drawSlider() { void drawSlider() {
M5.Display.fillRect(0, 630, M5.Display.width(), 90, BG); const int32_t localY = slider.y - SLIDER_CANVAS_Y;
M5.Display.setTextDatum(middle_left); sliderCanvas.fillSprite(BG);
M5.Display.setTextColor(MUTED, BG); sliderCanvas.setFont(&fonts::FreeSans12pt7b);
M5.Display.setTextSize(0.9f); sliderCanvas.setTextDatum(middle_left);
M5.Display.drawString("BRIGHTNESS", 28, slider.y + slider.h / 2); sliderCanvas.setTextColor(MUTED, BG);
M5.Display.fillRoundRect(slider.x, slider.y, slider.w, slider.h, sliderCanvas.setTextSize(1);
slider.h / 2, BORDER); 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); int32_t filled = map(brightness, 20, 255, 0, slider.w);
if (filled > 0) { if (filled > 0) {
M5.Display.fillRoundRect(slider.x, slider.y, filled, slider.h, sliderCanvas.fillRoundRect(slider.x, localY, filled, slider.h,
slider.h / 2, ACCENT); slider.h / 2, ACCENT);
} }
int32_t knobX = slider.x + constrain(filled, 0, slider.w); int32_t knobX = slider.x + constrain(filled, 0, slider.w);
M5.Display.fillCircle(knobX, slider.y + slider.h / 2, 18, TFT_WHITE); sliderCanvas.fillCircle(knobX, localY + slider.h / 2, 20, TFT_WHITE);
M5.Display.drawCircle(knobX, slider.y + slider.h / 2, 18, BORDER); sliderCanvas.drawCircle(knobX, localY + slider.h / 2, 20, BORDER);
char value[8]; char value[8];
snprintf(value, sizeof(value), "%u", brightness); snprintf(value, sizeof(value), "%u", brightness);
M5.Display.setTextDatum(middle_right); sliderCanvas.setFont(&fonts::FreeSansBold12pt7b);
M5.Display.setTextColor(TFT_WHITE, BG); sliderCanvas.setTextDatum(middle_right);
M5.Display.drawString(value, M5.Display.width() - 28, sliderCanvas.setTextColor(TFT_WHITE, BG);
slider.y + slider.h / 2); 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) { 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.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.setTextDatum(middle_left);
M5.Display.setTextColor(MUTED, CARD); M5.Display.setTextColor(MUTED, CARD);
M5.Display.drawString(label, infoPanel.x + 24, y + 19); M5.Display.drawString(label, infoPanel.x + 24, y + 19);
M5.Display.setFont(&fonts::FreeSansBold12pt7b);
M5.Display.setTextDatum(middle_right); M5.Display.setTextDatum(middle_right);
M5.Display.setTextColor(TFT_WHITE, CARD); M5.Display.setTextColor(TFT_WHITE, CARD);
M5.Display.drawString(value, infoPanel.x + infoPanel.w - 24, y + 19); M5.Display.drawString(value, infoPanel.x + infoPanel.w - 24, y + 19);
@@ -166,9 +183,10 @@ void drawInfoPanel() {
infoPanel.h, 22, CARD); infoPanel.h, 22, CARD);
M5.Display.drawRoundRect(infoPanel.x, infoPanel.y, infoPanel.w, M5.Display.drawRoundRect(infoPanel.x, infoPanel.y, infoPanel.w,
infoPanel.h, 22, BORDER); infoPanel.h, 22, BORDER);
M5.Display.setFont(&fonts::FreeSansBold18pt7b);
M5.Display.setTextDatum(top_left); M5.Display.setTextDatum(top_left);
M5.Display.setTextColor(TFT_WHITE); M5.Display.setTextColor(TFT_WHITE);
M5.Display.setTextSize(1.25f); M5.Display.setTextSize(1);
M5.Display.drawString("LIVE DEVICE INFO", infoPanel.x + 24, M5.Display.drawString("LIVE DEVICE INFO", infoPanel.x + 24,
infoPanel.y + 22); infoPanel.y + 22);
M5.Display.drawFastHLine(infoPanel.x + 24, infoPanel.y + 64, M5.Display.drawFastHLine(infoPanel.x + 24, infoPanel.y + 64,
@@ -220,6 +238,9 @@ void setup() {
M5.Display.setRotation(1); M5.Display.setRotation(1);
M5.Display.setColorDepth(16); M5.Display.setColorDepth(16);
M5.Display.setBrightness(brightness); M5.Display.setBrightness(brightness);
sliderCanvas.setColorDepth(16);
sliderCanvas.setPsram(true);
sliderCanvas.createSprite(M5.Display.width(), SLIDER_CANVAS_H);
drawScreen(); drawScreen();
Serial.println("M5Stack Tab5 Touch Dashboard ready"); Serial.println("M5Stack Tab5 Touch Dashboard ready");
} }