diff --git a/README.md b/README.md new file mode 100644 index 0000000..81a9f24 --- /dev/null +++ b/README.md @@ -0,0 +1,95 @@ +# 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. \ No newline at end of file