Need help with drawing clock

[xkrsakj]

Hi, I'm trying to recreate the swiss railway style clock using your library, but can't quite get it working.

So I'm drawing the face sprite once at the start and then I redraw the hand sprite every frame. I know I can just rotate the whole sprite using pushRotated, but I want everything to be antialiased and as far as I know and tried it can't be done this way. Also I have a weird problem that either the black background is overlapping the face or the hand sprite isn't being redrawn correctly and is leaving trails.

Here's my code:

#include <SPI.h>

#include <TFT_eSPI.h>
#include <cmath>

TFT_eSPI tft = TFT_eSPI();
TFT_eSprite face = TFT_eSprite(&tft);
TFT_eSprite hand = TFT_eSprite(&tft);

float handAngle = 0.0f;

// This function returns new coords of point rotated around other point by some angle
float* rotate(float origin[2], float point[2], float angle) {
  angle = radians(angle);

  float* arr = new float[2];

  arr[0] = origin[0] + cos(angle) * (point[0] - origin[0]) - sin(angle) * (point[1] - origin[1]);
  arr[1] = origin[1] + sin(angle) * (point[0] - origin[0]) + cos(angle) * (point[1] - origin[1]);

  return arr;
}

// This function just returns the center of line created by these two points
float* getOrigin(float point1[2], float point2[2]) {
  float* arr = new float[2];

  arr[0] = (point1[0]+point2[0])/2;
  arr[1] = (point1[1]+point2[1])/2;

  return arr;
}

// This function draws the clock face
void drawClockFace() {
  float point1[2] = {120, -10};
  float point2[2] = {120, 250};

  for (int i = 0; i < 30; i++) {
    float* origin = getOrigin(point1, point2);
    float* start = rotate(origin, point1, i*6);
    float* end = rotate(origin, point2, i*6);

    face.drawWideLine(start[0], start[1], end[0], end[1], 2.5f, TFT_WHITE);
  }

  face.drawSpot(120, 120, 110, TFT_BLACK);

  for (int i = 0; i < 6; i++) {
    float* origin = getOrigin(point1, point2);
    float* start = rotate(origin, point1, i*30);
    float* end = rotate(origin, point2, i*30);

    face.drawWideLine(start[0], start[1], end[0], end[1], 10.0f, TFT_WHITE);
  }

  face.drawSpot(120, 120, 90, TFT_BLACK);

  face.pushSprite(0, 0);
}

void setup(void) {
  Serial.begin(115200);

  tft.init();

  tft.fillScreen(TFT_BLACK);

  face.createSprite(240, 240);
  hand.createSprite(180, 180);

  drawClockFace();
}

void loop() {
  hand.fillSprite(TFT_BLACK);

  handAngle++;

  float origin[2] = {90, 90};
  float point[2] = {90, 170};

  float* newEnd = rotate(origin, point, handAngle);

  hand.drawWideLine(origin[0], origin[1], newEnd[0], newEnd[1], 2.5f, TFT_RED);
  hand.drawSpot(newEnd[0], newEnd[1], 10, TFT_RED);

  delete[] newEnd;

  hand.pushSprite(30, 30);
}

So I'm wondering what is the best and most lightweight way to solve this so that the hand is antialiased?

Btw I'm using the GC9A01 display with 240x240 resolution if it helps.

Every answer would be appreciated, thanks a lot.

[Bodmer]

Have you looked at this example:

https://github.com/Bodmer/TFT_eSPI/tree/master/examples/Smooth%20Graphics/Anti-aliased_Clock

[xkrsakj]

I've looked at it, but it doesn't help me much. In that example only one sprite is used for the face and hands, but this is a huge performance problem when I try to draw more complicated face using full 240x240 resolution as everything needs to be redrawn over and over again.