Bike computer build help- using smooth arc

Other Hardware Displays
3

HI, it looks like a fun project.
I'd like to help you solve some of the problems.

First, here's an image that reproduces your code. (Font settings and surrounding circle graphics have been omitted.)

picture0
picture0822×793 55.9 KB

Indeed, part of the text TOTAL MILES is hidden.

Problem 1.

Unfortunately, I have not yet been able to find the cause of the out-of-range.

However, the following two lines are not necessary as they are not the cause of the problem.

if (a < 60) a = 60;
if (a > 300) a = 300;

I'll attach a picture so hopefully someone can solve it.

picture1
picture1837×787 59 KB

Problem 2.

In this case, it's good to use a sprite to display miles.

TFT_eSprite sprite_miles(&tft); // Create sprite for miles text

If you specify the foreground and background colors as the font colors, the old characters will be erased with the background color and the new characters will be drawn. So in setup() :

sprite_miles.setTextColor(TFT_WHITE, TFT_BLACK);
sprite_miles.setTextSize(2);
sprite_miles.setTextFont(4);

Problem 3.

I don't know how to get the height of the font, but you can find the width of the drawn text like this:

int width = tft.drawFloat(distance, 1, x, y + 65);

When I printed the width to the serial monitor, it was 126. I roughly estimated the height to be 50 and put a red box around the mileage numbers:

picture2
picture21049×985 107 KB

Based on this, draw the text in sprite_miles and transfer it to tft. At this time, you can specify the background color as the transparent color.
(You can replace 126 / 2 and 50 / 2 with appropriate symbols.)

sprite_miles.drawFloat(distance, 1, 0, 0);
sprite_miles.pushSprite(x - (126 / 2), y + 65 - (50 / 2), TFT_BLACK);

At last, my code and image look like this:

// 11-29-24 Bike computer interface with smooth arc instead of sprite with no erase.
#include "outer_ring_test_gradiant_pink_blue_glow3.h"
#include <TFT_eSPI.h>

uint16_t x = 120;  // Position of centre of arc, round screen is 240 x 240 with corners chopped off.
uint16_t y = 120;

uint16_t fg_color = TFT_CYAN;  // Foreground and background colour used for smoothing (anti-aliasing)
uint16_t bg_color = TFT_BLACK;

uint8_t radius = 100;                       // Outer arc radius
uint8_t thickness = 15;                     // Thickness or arc
uint8_t inner_radius = radius - thickness;  // Calculate inner radius (can be 0 for circle segment)

const unsigned long refresh_rate = 1000;  //interval to update speed/screen (millis)
unsigned long previousTime = 0;           //longs are needed because millis can get big fast
float speed;
static int16_t old_end_angle = 60;  //start old_end_angle for program.

TFT_eSPI tft = TFT_eSPI();  // Create object "tft"
#include "NotoSansBold72.h"
#define AA_FONT_LARGE NotoSansBold72

TFT_eSprite sprite_miles(&tft); // Create sprite for miles text

long a;

//SETUP *********************************************************************************************************
void setup(void) {
  Serial.begin(115200);
  tft.init();
  tft.setRotation(0);  //Rotate display to appropriate angle. 0 degrees is at 6 o'clock position
  tft.fillScreen(TFT_BLACK);
  //tft.pushImage(0, 0, 240, 240, outer_ring_test_gradiant_pink_blue_glow3);
  tft.setTextDatum(MC_DATUM);
  tft.drawString("MPH", x, y + 35, 2);
  tft.drawString("TOTAL MILES", x, y + 90, 2);

  // move the following two lines in loop() to setup()
  tft.setTextSize(2);
  tft.setTextFont(4);

  // Create a sprite for the mileage display
#define MILE_TEXT_WIDTH   126
#define MILE_TEXT_HEIGHT  50
  sprite_miles.createSprite(MILE_TEXT_WIDTH, MILE_TEXT_HEIGHT);
  sprite_miles.setTextColor(TFT_WHITE, TFT_BLACK);
  sprite_miles.setTextSize(2);
  sprite_miles.setTextFont(4);
}
//MAIN LOOP********************************************************************************************************
void loop() {
  unsigned long currentTime = millis();
  if (currentTime - previousTime >= refresh_rate) {
    a = random(60, 301);
    speed = 27.7;

    uint16_t start_angle = 60;  // Start angle must be in range 0 to 360. Arcs are drawn clockwise from start_angle to end_angle
    uint16_t end_angle = a;     // End angle must be in range 0 to 360

    while (end_angle != old_end_angle) {
      tft.drawSmoothArc(x, y, radius, inner_radius, start_angle, end_angle, fg_color, bg_color);

      if (end_angle < old_end_angle) {
        tft.drawSmoothArc(x, y, radius, inner_radius, end_angle, old_end_angle, TFT_BLACK, bg_color);
      }

      float distance = 400.3;
      sprite_miles.drawFloat(distance, 1, 0, 0);
      sprite_miles.pushSprite(x - (MILE_TEXT_WIDTH / 2), y + 65 - (MILE_TEXT_HEIGHT / 2), TFT_BLACK);

      tft.loadFont(AA_FONT_LARGE);
      tft.drawFloat(speed, 1, x, y);  //x and y are the upper left corner of the speed text, apparently

      old_end_angle = end_angle;
    }

    previousTime = currentTime;
  }
}

picture3
picture31370×1237 124 KB

Problem 4.

Unfortunately, I don't know of any command dictionary sites. I enjoy programming by reading code and experimenting with how to use it.

If anyone knows, I'd like to know too.

Hope this help.