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:

#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!