i’m currently puzzeling around with the TFT_eSPI lib.

my target is a compass which rotates the north east south west position related to the measurements of a 9DOF sensor which the shows relative position of other devices of which i get the gps positions. the transmission of data and calculations work fine but displaying it is challenging to me.

in first place i create some sprites:
puffer should be the overall puffer which contains all other sprites
rose is the compass display containing the north east south west symbols

on the rose sprite i then want to plot the arrows which have there own angles relative to north so when i plot the rose rotated they should the real direction because north rotates regarding to the sensor measurements. i tried a lot and this is the current state:

the display is a 240 x 240 pixel round display so center is at 120 x 120 and the edges are cut off

#define ROSE_HEIGHT 240
#define ROSE_WIDTH 240

// array size is 57600
static const uint16_t Rose[] PROGMEM  = {
// here are the values for the 240 x 240 pixels of the rose bmp
};

// Width and height of sprite
#define WIDTH  240
#define HEIGHT 240

#include <TFT_eSPI.h>

TFT_eSPI    tft = TFT_eSPI();         // Declare object "tft"
TFT_eSprite puffer = TFT_eSprite(&tft);  // Declare Sprite object "spr" with pointer to "tft" object
TFT_eSprite rose = TFT_eSprite(&tft);  // Declare Sprite object "spr" with pointer to "tft" object

void createPuffer()

  puffer.setColorDepth(8);
  puffer.createSprite(240, 240);
  puffer.fillSprite(TFT_DARKGREY);
  puffer.pushSprite(0,0,TFT_TRANSPARENT);
}

uint8_t lengthOfArray = 4;
uint8_t headings[4] = {0, 24, 130, 300};

// draws a single arrow with the heading and the distance leads to different arrow length
void drawArrow(uint8_t heading, float distance)
{
  int center = 120;
  int inner_radius = 30;
  float lengthOfArrow = 1.0;
  
  if (distance >= 500) {lengthOfArrow = 1.0;}
  else if (distance <= 50) {lengthOfArrow = 0.2;}
  else { lengthOfArrow = distance / 500; }
  
  int outer_radius = inner_radius + 60 * lengthOfArrow;

  int x0 = center + outer_radius * cos(M_PI * 2 * heading / 360);
  int y0 = center + outer_radius * sin(M_PI * 2 * heading / 360);
  
  int x1 = center + inner_radius * cos(M_PI * 2 * (heading + 10) / 360);
  int y1 = center + inner_radius * sin(M_PI * 2 * (heading + 10) / 360);
  
  int x2 = center + inner_radius * cos(M_PI * 2 * (heading - 10) / 360);
  int y2 = center + inner_radius * sin(M_PI * 2 * (heading - 10) / 360);

  rose.fillTriangle(x0, y0, x1, y1, x2, y2, TFT_WHITE);
}

// draws the hardcoded arrows
void drawArrows()
{
  for (int i = 0; i < lengthOfArray; i++)
  {
    drawArrow(headings[i], (i*200));
  }
}

void createRose()
{
  // Create the dial Sprite
  rose.setColorDepth(8);       
  rose.createSprite(240, 240);
  rose.setPivot(120, 120);       

  // Draw dial outline
  rose.fillSprite(TFT_DARKGREY);
  rose.pushImage(0, 0, 240, 240, Rose);

}

void setupDisplay()
{
  pinMode(2, OUTPUT);
  digitalWrite(2, HIGH);

  Serial.begin(250000);
  Serial.println();

  tft.begin();
  tft.setRotation(1);

  tft.fillScreen(TFT_DARKGREY);

  createPuffer();
  puffer.pushSprite(0, 0, TFT_TRANSPARENT);

  createRose();
  rose.pushSprite(0, 0, TFT_TRANSPARENT);          
}

void plotArrows(int16_t angle)
{ 
  rose.fillSprite(TFT_BLACK);
  puffer.fillSprite(TFT_BLACK);
  
  rose.pushImage(0, 0, 240, 240, Rose);
  drawArrows();
  rose.pushRotated(&puffer, angle, TFT_DARKGREY); // dial is the destination Sprite
  
  // Push the resultant dial Sprite to the screen, with transparent colour
  puffer.pushSprite(0, 0, TFT_TRANSPARENT);
  
}

then in the loop following code runs:

if (rose_heading >= 360)
  {
    rose_heading = 0;
  }
  
  if (millis() > next_display_refresh)
  {
    //displayStuff();
    plotArrows(rose_heading);
    rose_heading += 1;
    next_display_refresh = millis() + DISPLAY_REFRESH_RATE;
  }

so i’m out of ideas how to code this and hope someone may can help me to get a better understanding of the library functions or maybe a better way to realize this.

thanks!