114 lines
4.7 KiB
Markdown
114 lines
4.7 KiB
Markdown
# 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 <TFT_eSPI.h>
|
||
#include <math.h>
|
||
|
||
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.
|
||
|
||
|
||
Hi,
|
||
I’ve made an open-source graphics editor designed to help create visuals for TFT_eSPI, U8g2, AdafruitGFX, and ESPHome.
|
||
|
||
Pick the GUI library or platform you're using, choose your display size, and start building with visual tools — draw shapes, add text, and more. As you work, a code window below will auto-generate the source code you can copy into your project to reproduce the design.
|
||
|
||
You can import your own images and convert them into data arrays. There's also a built-in icon library to help you get started quickly.
|
||
|
||
It’s open source and community-supported: https://github.com/sbrin/lopaka
|
||
The cloud version is live at https://lopaka.app
|
||
|
||
There’s even a gallery of editable screens and UI designs created by others, so you don’t have to start from scratch.
|
||
|
||
I'd love to hear your thoughts:
|
||
– What do you think of the idea?
|
||
– What features do you wish it had?
|
||
|
||
Your feedback is the best motivation to keep building! |