diff --git a/src/main.cpp b/src/main.cpp index 0fa7c06..92f866c 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -1,126 +1,224 @@ #include -/* Rui Santos & Sara Santos - Random Nerd Tutorials - THIS EXAMPLE WAS TESTED WITH THE FOLLOWING HARDWARE: - 1) ESP32-2432S028R 2.8 inch 240×320 also known as the Cheap Yellow Display (CYD): https://makeradvisor.com/tools/cyd-cheap-yellow-display-esp32-2432s028r/ - SET UP INSTRUCTIONS: https://RandomNerdTutorials.com/cyd/ - 2) REGULAR ESP32 Dev Board + 2.8 inch 240x320 TFT Display: https://makeradvisor.com/tools/2-8-inch-ili9341-tft-240x320/ and https://makeradvisor.com/tools/esp32-dev-board-wi-fi-bluetooth/ - SET UP INSTRUCTIONS: https://RandomNerdTutorials.com/esp32-tft/ - Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files. - The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -*/ +/* + An example analogue meter using a ILI9341 TFT LCD screen -#include -#include // Hardware-specific library + Needs Font 2 (also Font 4 if using large scale label) -/* Install the "TFT_eSPI" library by Bodmer to interface with the TFT Display - https://github.com/Bodmer/TFT_eSPI - *** IMPORTANT: User_Setup.h available on the internet will probably NOT work with the examples available at Random Nerd Tutorials *** - *** YOU MUST USE THE User_Setup.h FILE PROVIDED IN THE LINK BELOW IN ORDER TO USE THE EXAMPLES FROM RANDOM NERD TUTORIALS *** - FULL INSTRUCTIONS AVAILABLE ON HOW CONFIGURE THE LIBRARY: https://RandomNerdTutorials.com/cyd/ or https://RandomNerdTutorials.com/esp32-tft/ */ -//#include - + Make sure all the display driver and pin connections are correct by + editing the User_Setup.h file in the TFT_eSPI library folder. -// Install the "XPT2046_Touchscreen" library by Paul Stoffregen to use the Touchscreen - https://github.com/PaulStoffregen/XPT2046_Touchscreen -// Note: this library doesn't require further configuration -#include - - -TFT_eSPI tft = TFT_eSPI(); - -// Touchscreen pins -#define XPT2046_IRQ 36 // T_IRQ -#define XPT2046_MOSI 32 // T_DIN -#define XPT2046_MISO 39 // T_OUT -#define XPT2046_CLK 25 // T_CLK -#define XPT2046_CS 33 // T_CS - -SPIClass touchscreenSPI = SPIClass(VSPI); -XPT2046_Touchscreen touchscreen(XPT2046_CS, XPT2046_IRQ); - -#define SCREEN_WIDTH 320 -#define SCREEN_HEIGHT 240 -#define FONT_SIZE 2 - -// Touchscreen coordinates: (x, y) and pressure (z) -int x, y, z; - -// Print Touchscreen info about X, Y and Pressure (Z) on the Serial Monitor -void printTouchToSerial(int touchX, int touchY, int touchZ) { - Serial.print("X = "); - Serial.print(touchX); - Serial.print(" | Y = "); - Serial.print(touchY); - Serial.print(" | Pressure = "); - Serial.print(touchZ); - Serial.println(); -} - -// Print Touchscreen info about X, Y and Pressure (Z) on the TFT Display -void printTouchToDisplay(int touchX, int touchY, int touchZ) { - // Clear TFT screen - tft.fillScreen(TFT_GREEN); - tft.setTextColor(TFT_RED, TFT_WHITE); - - int centerX = SCREEN_WIDTH / 2; - int textY = 80; + ######################################################################### + ###### DON'T FORGET TO UPDATE THE User_Setup.h FILE IN THE LIBRARY ###### + ######################################################################### - String tempText = "X = " + String(touchX); - tft.drawCentreString(tempText, centerX, textY, FONT_SIZE); +Updated by Bodmer for variable meter size + */ - textY += 20; - tempText = "Y = " + String(touchY); - tft.drawCentreString(tempText, centerX, textY, FONT_SIZE); +// Define meter size as 1 for tft.rotation(0) or 1.3333 for tft.rotation(1) +#define M_SIZE 1.3333 - textY += 20; - tempText = "Pressure = " + String(touchZ); - tft.drawCentreString(tempText, centerX, textY, FONT_SIZE); -} +#include // Hardware-specific library +#include -void setup() { - Serial.begin(115200); +TFT_eSPI tft = TFT_eSPI(); // Invoke custom library - // Start the SPI for the touchscreen and init the touchscreen - touchscreenSPI.begin(XPT2046_CLK, XPT2046_MISO, XPT2046_MOSI, XPT2046_CS); - touchscreen.begin(); - // Set the Touchscreen rotation in landscape mode - // Note: in some displays, the touchscreen might be upside down, so you might need to set the rotation to 3: touchscreen.setRotation(3); - touchscreen.setRotation(1); +#define TFT_GREY 0x5AEB - // Start the tft display +float ltx = 0; // Saved x coord of bottom of needle +uint16_t osx = M_SIZE*120, osy = M_SIZE*120; // Saved x & y coords +uint32_t updateTime = 0; // time for next update + +int old_analog = -999; // Value last displayed + +int value[6] = {0, 0, 0, 0, 0, 0}; +int old_value[6] = { -1, -1, -1, -1, -1, -1}; +int d = 0; + +void analogMeter(); +void plotNeedle(int value, byte ms_delay); + +void setup(void) { tft.init(); - // Set the TFT display rotation in landscape mode tft.setRotation(1); + Serial.begin(57600); // For debug + tft.fillScreen(TFT_BLACK); + tft.drawString("Raumfeuchtigkeit", 1, 210, 4); + //delay(9000); - // Clear the screen before writing to it - tft.fillScreen(TFT_WHITE); - tft.setTextColor(TFT_BLACK, TFT_WHITE); - - // Set X and Y coordinates for center of display - int centerX = SCREEN_WIDTH / 2; - int centerY = SCREEN_HEIGHT / 2; + analogMeter(); // Draw analogue meter - tft.drawCentreString("Hello, world!", centerX, 30, FONT_SIZE); - tft.drawCentreString("Touch screen to test", centerX, centerY, FONT_SIZE); - delay(5000); + updateTime = millis(); // Next update time } + void loop() { - // Checks if Touchscreen was touched, and prints X, Y and Pressure (Z) info on the TFT display and Serial Monitor - if (touchscreen.tirqTouched() && touchscreen.touched()) { - // Get Touchscreen points - TS_Point p = touchscreen.getPoint(); - // Calibrate Touchscreen points with map function to the correct width and height - x = map(p.x, 200, 3700, 1, SCREEN_WIDTH); - y = map(p.y, 240, 3800, 1, SCREEN_HEIGHT); - z = p.z; - - printTouchToSerial(x, y, z); - printTouchToDisplay(x, y, z); - - delay(100); + if (updateTime <= millis()) { + updateTime = millis() + 35; // Update meter every 35 milliseconds + + // Create a Sine wave for testing + d += 4; if (d >= 360) d = 0; + value[0] = 50 + 50 * sin((d + 0) * 0.0174532925); + + plotNeedle(value[0], 0); // It takes between 2 and 12ms to replot the needle with zero delay } } + +// ######################################################################### +// Draw the analogue meter on the screen +// ######################################################################### +void analogMeter() +{ + + // Meter outline + tft.fillRect(0, 0, M_SIZE*239, M_SIZE*126, TFT_GREY); + tft.fillRect(5, 3, M_SIZE*230, M_SIZE*119, TFT_WHITE); + + tft.setTextColor(TFT_BLACK); // Text colour + + // Draw ticks every 5 degrees from -50 to +50 degrees (100 deg. FSD swing) + for (int i = -50; i < 51; i += 5) { + // Long scale tick length + int tl = 15; + + // Coordinates of tick to draw + float sx = cos((i - 90) * 0.0174532925); + float sy = sin((i - 90) * 0.0174532925); + uint16_t x0 = sx * (M_SIZE*100 + tl) + M_SIZE*120; + uint16_t y0 = sy * (M_SIZE*100 + tl) + M_SIZE*140; + uint16_t x1 = sx * M_SIZE*100 + M_SIZE*120; + uint16_t y1 = sy * M_SIZE*100 + M_SIZE*140; + + // Coordinates of next tick for zone fill + float sx2 = cos((i + 5 - 90) * 0.0174532925); + float sy2 = sin((i + 5 - 90) * 0.0174532925); + int x2 = sx2 * (M_SIZE*100 + tl) + M_SIZE*120; + int y2 = sy2 * (M_SIZE*100 + tl) + M_SIZE*140; + int x3 = sx2 * M_SIZE*100 + M_SIZE*120; + int y3 = sy2 * M_SIZE*100 + M_SIZE*140; + + // Yellow zone limits + //if (i >= -50 && i < 0) { + // tft.fillTriangle(x0, y0, x1, y1, x2, y2, TFT_YELLOW); + // tft.fillTriangle(x1, y1, x2, y2, x3, y3, TFT_YELLOW); + //} + + // Green zone limits + if (i >= 0 && i < 25) { + tft.fillTriangle(x0, y0, x1, y1, x2, y2, TFT_GREEN); + tft.fillTriangle(x1, y1, x2, y2, x3, y3, TFT_GREEN); + } + + // Orange zone limits + if (i >= 25 && i < 50) { + tft.fillTriangle(x0, y0, x1, y1, x2, y2, TFT_ORANGE); + tft.fillTriangle(x1, y1, x2, y2, x3, y3, TFT_ORANGE); + } + + // Short scale tick length + if (i % 25 != 0) tl = 8; + + // Recalculate coords incase tick lenght changed + x0 = sx * (M_SIZE*100 + tl) + M_SIZE*120; + y0 = sy * (M_SIZE*100 + tl) + M_SIZE*140; + x1 = sx * M_SIZE*100 + M_SIZE*120; + y1 = sy * M_SIZE*100 + M_SIZE*140; + + // Draw tick + tft.drawLine(x0, y0, x1, y1, TFT_BLACK); + + // Check if labels should be drawn, with position tweaks + if (i % 25 == 0) { + // Calculate label positions + x0 = sx * (M_SIZE*100 + tl + 10) + M_SIZE*120; + y0 = sy * (M_SIZE*100 + tl + 10) + M_SIZE*140; + switch (i / 25) { + case -2: tft.drawCentreString("0", x0, y0 - 12, 2); break; + case -1: tft.drawCentreString("25", x0, y0 - 9, 2); break; + case 0: tft.drawCentreString("50", x0, y0 - 7, 2); break; + case 1: tft.drawCentreString("75", x0, y0 - 9, 2); break; + case 2: tft.drawCentreString("100", x0, y0 - 12, 2); break; + } + } + + // Now draw the arc of the scale + sx = cos((i + 5 - 90) * 0.0174532925); + sy = sin((i + 5 - 90) * 0.0174532925); + x0 = sx * M_SIZE*100 + M_SIZE*120; + y0 = sy * M_SIZE*100 + M_SIZE*140; + // Draw scale arc, don't draw the last part + if (i < 50) tft.drawLine(x0, y0, x1, y1, TFT_BLACK); + } + + tft.drawString("%", M_SIZE*(5 + 230 - 40), M_SIZE*(119 - 20), 2); // Units at bottom right + tft.drawCentreString("%", M_SIZE*120, M_SIZE*70, 4); // Comment out to avoid font 4 + tft.drawRect(5, 3, M_SIZE*230, M_SIZE*119, TFT_BLACK); // Draw bezel line + + plotNeedle(0, 0); // Put meter needle at 0 +} + +// ######################################################################### +// Update needle position +// This function is blocking while needle moves, time depends on ms_delay +// 10ms minimises needle flicker if text is drawn within needle sweep area +// Smaller values OK if text not in sweep area, zero for instant movement but +// does not look realistic... (note: 100 increments for full scale deflection) +// ######################################################################### +void plotNeedle(int value, byte ms_delay) +{ + tft.setTextColor(TFT_BLACK, TFT_WHITE); + char buf[8]; dtostrf(value, 4, 0, buf); + tft.drawRightString(buf, M_SIZE*40, M_SIZE*(119 - 20), 2); + + if (value < -10) value = -10; // Limit value to emulate needle end stops + if (value > 110) value = 110; + + // Move the needle until new value reached + while (!(value == old_analog)) { + if (old_analog < value) old_analog++; + else old_analog--; + + if (ms_delay == 0) old_analog = value; // Update immediately if delay is 0 + + float sdeg = map(old_analog, -10, 110, -150, -30); // Map value to angle + // Calculate tip of needle coords + float sx = cos(sdeg * 0.0174532925); + float sy = sin(sdeg * 0.0174532925); + + // Calculate x delta of needle start (does not start at pivot point) + float tx = tan((sdeg + 90) * 0.0174532925); + + // Erase old needle image + tft.drawLine(M_SIZE*(120 + 20 * ltx - 1), M_SIZE*(140 - 20), osx - 1, osy, TFT_WHITE); + tft.drawLine(M_SIZE*(120 + 20 * ltx), M_SIZE*(140 - 20), osx, osy, TFT_WHITE); + tft.drawLine(M_SIZE*(120 + 20 * ltx + 1), M_SIZE*(140 - 20), osx + 1, osy, TFT_WHITE); + + // Re-plot text under needle + tft.setTextColor(TFT_BLACK); + tft.drawCentreString("%", M_SIZE*120, M_SIZE*70, 4); // // Comment out to avoid font 4 + + // Store new needle end coords for next erase + ltx = tx; + osx = M_SIZE*(sx * 98 + 120); + osy = M_SIZE*(sy * 98 + 140); + + // Draw the needle in the new postion, magenta makes needle a bit bolder + // draws 3 lines to thicken needle + tft.drawLine(M_SIZE*(120 + 20 * ltx - 1), M_SIZE*(140 - 20), osx - 1, osy, TFT_RED); + tft.drawLine(M_SIZE*(120 + 20 * ltx), M_SIZE*(140 - 20), osx, osy, TFT_MAGENTA); + tft.drawLine(M_SIZE*(120 + 20 * ltx + 1), M_SIZE*(140 - 20), osx + 1, osy, TFT_RED); + + // Slow needle down slightly as it approaches new postion + if (abs(old_analog - value) < 10) ms_delay += ms_delay / 5; + + // Wait before next update + delay(ms_delay); + } +} + + +