Is it possible make something like this with a tft?

[claustro]

I am trying to add an air thermometer to my motorbike (Triumph trident 660)
My goal would be to make the graphic as close as possible as the original one.
Something like this

The hardware I am using :

Arduino NANO

**ST7789 TFT 1.3 inch **

DS18B20 Sensor

I am totaly noob on arduiono but I am willing to learn.
I followed this tutorial with success https://simple-circuit.com/st7789-tft-ds18b20-arduino-digital-thermometer/ unfortunatly I am uanble to undestand from were to start for make my desired layout.
The most difficult part seems to have the 3 white line.
Can someone point me in the right direction, to accomplishing this task?

I already made a 3d printed case that fit perfectly the shape of the instuments but now I ma using an orrible standard lcd thermometer.

Thank you all .
Andrea

[jremington]

All of the features in the display example you posted can be created using function calls to the Adafruit graphics library. Graphics library tutorial here.

There are plenty of examples in the code you have already used, so go through some of them line by line to figure out what they do.

For example, this bit sets the text color, moves to a specific location on the screen, prints the temperature, then uses the drawCircle function twice with different diameters to create the degree symbol, then prints the letter C.

    tft.setTextColor(ST77XX_RED, ST77XX_BLACK);  // set text color to red and black background
    tft.setCursor(0, 102);
    tft.print(c_buffer);
    tft.drawCircle(201, 108, 4, ST77XX_RED);     // print degree symbol ( ° )
    tft.drawCircle(201, 108, 5, ST77XX_RED);
    tft.setCursor(210, 102);
    tft.print("C");

As for the "three white lines", each of them are made up of four individual lines drawn between specific points on the screen. Use four calls of the drawLine() function to create each one. The fading effect is rather complicated to do, though.

It is possible, but would take quite a bit of effort, to exactly reproduce the particular character fonts in the example, if the ones built into the graphics library are not close enough.

[claustro]

Thank you for answering me. You gave me a lot of info to start.
I'll post here if I'll have, and it will happen, some problem

Is there a way to easily simulate the code on pc so I can see the chage in the code is "real time" I found this https://www.youtube.com/watch?v=h86Kptqh0UM
Thank you
Andrea

[jremington]

I don't know of any such simulator.

[claustro]

Thank you I am working on Arudino directly isn't to much time consuming the sketch is small

[claustro]

I am managed to print what I need, positioning it in the right spot and changing dimension.
Also, I changed fonts as described in the tutorial .
Unfortunately, all the font is pixellated even if the screen has a quite good resolution. Is there a way to make it prettier?

In this example , the fonts are awesome https://www.youtube.com/watch?v=ZXxoLoYHCTQ

[jremington]

all the font is pixellated

That is what I meant about the font. There are various approaches, such as create a new font table, antialiasing, etc. and all of them are tedious to code. Also, there may not not enough memory in the Nano to do that.

The code for that youtube video can be downloaded from here: GitHub - cbm80amiga/Arduino_ST7789_Fast: Fast SPI library for the ST7789 IPS display

There are large character, fine grained font tables in that Github repository, too.