Degree symbol on ILI9431_t3n?

Status
Not open for further replies.

MarkM

New member
Hello,

I am trying to print a degree symbol in a variable line of text on my ILI9341 touchscreen. Normally on a static line length drawing a circle would suffice, but I need it to move dynamically left/right when the numbers become larger/smaller.
Tried the default font degree symbol which is way to low resolution of a circle & the additional font library for the font_awesome fonts to use the circle and scale it down. The problem however is that the infill behind the symbol is not large enough
and the following issue occurs:

DegSym.jpg

As you can see the old digit (in red) is not completely overwritten by the new symbol (°) when the number became smaller in string length.

I am using the ILI9341_t3n on my touchscreen together with the ILI9341_fonts.

I have tried filling an entire black rectangle over the entire string length every time, but this causes flickering of the digits. Is there an easy way to get a degree symbol there, without overcomplicating things?

Thanks in advance,
Mark
 
A couple of different ways. If you use the frame buffer you can do it sloppy and just clear the whole area and redraw it and then do updateScreen, which will update it all at once so no flicker.

But other way is to do it is if you have something like a logical area of the screen that you are updating...

That after you do the: tft.print("4.8");
Mort likely not hard coded number here.
But after you output the number, you then get the current X: tft.getCursorX();
And then use a fillrect to clear out everything to the right of the 8.

Could be done to the end of field/line... Or can remember where previous write ended and only clear from current new cursor x to the previous one if it is > ...
 
Maybe this will help...

You can create a new ILI9341 font but replace a current character with the degree symbol, then display. This vid shows how to create your own fonts
https://www.youtube.com/watch?v=YNUbvpTaaCY

I just created a degree symbol (by replacing the ~ character with a o symbol).

IMG_3379.jpg

Drawing this can be done by Display.print(your_number); Display.print("~"); and manage painting out old data as you currently do. But as you mention, difficult, since you don't know the line width.

To fix that use this flicker free library to do all that for you, have a watch. During "print" it will redraw only changed numbers. I edited the kerning in the font file, so you can see the degree symbol move according to length of number.


Using flicker free is as easy at this...

Code:
#include <ILI9341_t3.h>       // fast display driver lib
#include <FlickerFreePrint.h> // library to draw w/o flicker
#include <Degree.h>           // my custom font where ~ was edited to show the degree

// setup some colors
#define C_BLACK      0x0000
#define C_WHITE       0xFFFF


ILI9341_t3 Display(9, 2);

// create a flicker free object for each data to be drawn to the ILI9341 display
// the library used template scheme so you need to pass the object name in <>
FlickerFreePrint<ILI9341_t3> Data1(&Display, C_WHITE, C_BLACK);

float j;
char buf[20];

void setup() {

  // you know the drill
  Serial.begin(9600);

  Display.begin();
  Display.setRotation(1);
  Display.fillScreen(C_BLACK);
  Display.setFont(Degree);

}

void loop() {

  // get some data
  j += 0.137;

  // conver to desired decimals and store into a char
  dtostrf(j, 0, 3, buf);

  //bolt on the degree symbol
  // I edited the font to display degree symbol as opposed to ~
  strcat(buf, "~");

  Serial.println(buf); // will write the ~ symbol to the serial monitor

  // set cursor as you would normall do
  Display.setCursor(180, 140);
  
  // you must call the text colors for the object
  Data1.setTextColor(C_WHITE, C_BLACK);

  // one call to draw the data in flicker free and with the degree symbol
  // the display library will use the font definition (the degree symbol)
  Data1.print(buf);


  delay(100);

}
 
Status
Not open for further replies.
Back
Top