# Introduction This is the source files folder for the EasyDccMouse. EasyDccMouse is a system to remote control DCC scale locomotive, it is based on a ESP32 with tft display, touch screen, encoder and battery. EasyDccMouse sends actions to a DCC centrale station. ``` +------------------------------------------------------+ | [O] [⇄] [ID] [⚡] | <-- Header with 4 icons: | ON Dir DCC Power | [O] Status (ON/OFF) | | [⇄] Direction (Forward/Reverse) | [================== Train ===================] | [ID] DCC id | | [⚡] Power/Connection | |██████████████████████████████████████████| | <-- Model picture (190x40 px) | | | ___ | | .-' '-. | | .' '. | | / \ | | | /\ /\ | | <-- Speedometer (arc + needle) | | / \ / \ | | | | / \_/ \ | | | |/ \| | | '---------------' | | | | | | | | | | Needle | | | | [F1] [F2] [F3] [F4] [F5] [F6] [F7] [F8] | <-- Function pad (row 1) | [F9] [F10][F11][F12][F13][F14][F15][F16] | <-- Function pad (row 2) +------------------------------------------------------+ ``` # Implementation ## How to draw speedometer with arc and needle on my TFT display? To draw an arc-style speedometer with a moving needle on your TFT display (e.g., ILI9341), you can use the TFT_eSPI library. Here’s a step-by-step example: 1. **Draw the arc:** - Use `drawArc()` or draw multiple short lines to approximate an arc. - Example: Draw an arc from 135° to 45° (like a semicircle at the bottom). 2. **Draw the needle:** - Calculate the angle for the needle based on the speed value. - Use `drawLine()` from the center of the arc to the edge at the calculated angle. 3. **Display the speed value:** - Use `setCursor()` and `print()` to show the numeric speed. **Example code:** ```cpp #include #include TFT_eSPI tft = TFT_eSPI(); void drawSpeedometer(int speed) { int cx = 120, cy = 120, r = 80; // Center and radius int minAngle = 135, maxAngle = 45; // Degrees int minSpeed = 0, maxSpeed = 100; // Draw arc (approximate with lines) for (int a = minAngle; a >= maxAngle; a -= 3) { float rad = a * 3.14159 / 180.0; int x1 = cx + (r - 10) * cos(rad); int y1 = cy + (r - 10) * sin(rad); int x2 = cx + r * cos(rad); int y2 = cy + r * sin(rad); tft.drawLine(x1, y1, x2, y2, TFT_WHITE); } // Draw needle float angle = minAngle - (float)(speed - minSpeed) / (maxSpeed - minSpeed) * (minAngle - maxAngle); float rad = angle * 3.14159 / 180.0; int nx = cx + (r - 20) * cos(rad); int ny = cy + (r - 20) * sin(rad); tft.drawLine(cx, cy, nx, ny, TFT_RED); // Draw speed value tft.setCursor(cx - 20, cy + 30); tft.setTextColor(TFT_WHITE, TFT_BLACK); tft.setTextSize(2); tft.printf("%d", speed); } ``` **Tips:** - Clear the previous needle before drawing a new one for smooth animation. - Adjust `cx`, `cy`, and `r` for your display size. - You can enhance the arc with tick marks and labels for a more realistic look.