Tft. T3 Fonts.

Status
Not open for further replies.
B

bigboosted

Well-known member
Hi I'm playing with the ILI9341_t3 library.

I want to change the number fonts.

What font generator would work best?

I want to create the numbers that have a selectable background color. (So I can overwrite faster). I have tried placing a background color box over the text then write the new text. But it looks cleaner with the text with background.

Would it be easier to start with a font I like and edit it to add the background color?

I think all I need to edit is 12 characters.
1,2,3,4,5,6,7,8,9,0,., ,

Thanks
 
Last edited:
I assume you are using the ILI9341_t3 library. Are you using the standard font or Frank's different fonts. The reason I ask, is I believe that drawing the text with a set background color is quite a bit faster than using the transparent text. So instead of doing something like a fillrect, followed by your drawText, simply try setting the bg color when you set the text color...
 
The default font in this ILI9341_t3 library allows a background color to be used.

I have tried 2 other fonts from Paul's extra library. They both ignore the second color selection for the background requiring a box to be drawn over the last write before writing a new number.

So what I would like to do is modify one of two font libraries to allow background colors to be selected.

So far all I have done is open the library and look at the hex files. Not sure where to start. Figured I might need a Font generator program to help. Otherwise I'm going to get much better at Hex and binary.

Is there a chart for this somewhere?
Something that Says the first hex number means this, the second means that. Ect.....?

I'll try the Frankb library and see what happens.
 
Blackketter all the fonts in your library work with opaque.

Very nice. One thing if I can be so bold.
Why do the fonts fill the opaque so low?

I tried Arial 48 and it fills about 20 pixels below the numbers.

I'm guessing this is for letters like y ?

Any way around this that I can do?

It looks like the crystal font is the best at numbers and not filling a big area below the numbers.
 
bigboosted said:
Blackketter all the fonts in your library work with opaque.

Very nice. One thing if I can be so bold.
Why do the fonts fill the opaque so low?

I tried Arial 48 and it fills about 20 pixels below the numbers.

I'm guessing this is for letters like y ?

Any way around this that I can do?

It looks like the crystal font is the best at numbers and not filling a big area below the numbers.
Click to expand...

That's exactly right, the background fills to the full height of the font, not of the individual character.

You can use the clipping feature of the library to clip to the area that you want to draw in with setClipRect(x,y,w,h) then use setClipRect() to reset it to draw to the whole screen.
 
I am setting with tablet, but I think there is call something like setAdafruitFont()
 
Using blacketters above library.
Both of those suggestions don't complile.

Also tried tft.setFont (Adafruit);

Didn't work.
 
Also blackketter the setclipRectangle behaves very weird.

For example,
tft.setClipRect (150,10,10,15);
tft.fillscreen (ILI9341_WHITE);

The above shows me on the screen where the area is that I can write.

This should start at x 150, y10, 10 pixels wide, 15 pixels high correct?

The x and y look correct but it makes a white box 150 wide and about 20 high.

I can't make sense of the numbers.


Sorry Guys guess I'm a total Rookie here.
Someday I'll get up to speed.
 
Can you post the specific error results for the tft.setFont() that's failing?

I'm not sure why the setClipRect is behaving like that... Is it possible you are using the wrong library somehow?
 
Here is what I will do later today. I'll delete arduino and teensy. Start over with a fresh download of both.

I'll delete the included ILI9341_t3 library.
Redown load the above library and see what happens.

Also I figured out how to see the changes you made on github. I'll verify I'm using your library.
 
I was thinking of integrating the opaque drawFontChar code into my version of the ili9341 library. Actually I have it on my machine now...

But looking at it, I believe it will pretty slow, that is it does a lot of graphic primitives (horizontal and vertical lines as well as rectangles...)

I do not completely understand yet exactly how the data is stored, but have uncommented a lot of the printfs to see some of the stuff. If I am not mistaken the data per font char is stored in top to bottom order and left to right. Like maybe a set of 32 bit values with a number of rows the data is valid for. Also in the opaque mode, I believe we will output something for every pixel inside the bounding rectangle for the char.

So wonder how hard it would be to have version of code similar to drawChar, which it basically figures out what each pixel is in pixel order and do all of it more or less at the same speed as a fillRect (or more like writeRect).

Again I don't fully understand the code yet, but thought I would throw it out.

First internal question to myself and maybe others.
in drawFontBits, my quick look at code I wonder things like, why there is:
Code: 
	if (bits == 0) {
		if (opaque) {
			while (repeat) {
				drawFastHLine(x,y++, numbits, textbgcolor);
				repeat--;
			};
		}
		return;
	}
versus
Code: 
	if (bits == 0) {
		if (opaque && repeat) {
			fillRect(x, y, numbits, repeat, txtbgcolor);
		}
		return;
	}
Note: not just on this new part, this is true I believe for all of the calls inside this function?
 
Last edited:
I just uploaded my code that added the opaque font text. Still WIP, but I did change the code to use fillRect instead of multiple calls to drawFastHLine
 
Scanned the code - lots of bits. Without having the prior area's filled bits needing overwrite it seems efficiently wiping the full char space is the best plan.

Going to that trouble the only better thing would be to fill a buffer with background - set new char foreground bits (including the over and under) in the buffer then single write that buffer to display so no bit is written twice or a pixel at a time? But where is that buffer and how big is controlled by the font at hand.
 
Last edited:
Fresh download of arduino 1.6.11
Teensy loader 1.30
Windows 10 PC

tft.setClipRect (x,y,w,h);
tft.fillScreen (ILI9341_WHITE);


Still not operating correctly.

X and Y appear to work. But can't for the life of me figure out what's going on with w,h
 
So I looked through the library and notice separate setclip code for each function. So I decided to try another route. I tried it with actual text instead of fillscreen. Works perfectly.

Now my only issue is getting back to the original font after calling a different font. But I can solive that by using another font instead.

Thanks for all the help guys!
 
Bigboosted: Glad you have it working for your case.

As I mentioned in a different thread ( , been having some fun trying to make a fast version of the drawing of Opaque font text and have it mostly working. Should be near the speed of filling a rectangle. I thought it was reasonably working yesterday, but found cases that I need to fix. Some of the cases I am not sure what the "Proper fix" is yet.

Example: using Arial Bold 40 and draw a 'C' Suppose the Text cursor is at (73, 0): Some of the debug information shows:
Code: 
drawFontChar(C) 67
  index =  2944
  size =   35,41
  line space = 61
  offset = 2,0
  delta =  40
  cursor = 73,0
  origin = 75,-1
In this case the origin shows -1 for y. So does this imply the first row should draw at -1 (and be clipped)? Lets update I changed the starting of drawing text to Row 5, so this shows now as:
Code: 
drawFontChar(C) 67
  index =  2944
  size =   35,41
  line space = 61
  offset = 2,0
  delta =  40
  cursor = 73,5
  origin = 75,4
So in this case should it start drawing in row 4? And as such should it opaque out the portions that it does not directly write: first 2 pixels and last 3 pixels.

Likewise suppose you look at drawing 'f'
Code: 
drawFontChar(f) 102
  index =  6189
  size =   20,41
  line space = 61
  offset = 1,0
  delta =  19
  cursor = 184,5
  origin = 185,4
Here is says, that the offset to the next character is 19, but it's x size is 20. So do you clip off the last pixel, or do you extend 1 pixel into beyond where you set the next cursor to. If you draw 1 extra, do you also then opaque those pixels above and below on those pixels? I am guessing yes...

The other one I see with issue is the 'j'
Code: 
drawFontChar(j) 106
  index =  6426
  size =   14,52
  line space = 61
  offset = -3,-12
  delta =  15
  cursor = 297,5
  origin = 294,5
Again it sets the origin to before the cursor...
 
@KurtE: Have you done any benchmarks on the performance of the current opaque text? It would interesting to know which cases are slow. I personally haven't had any issues with opaque text drawing speed that have made me think about further optimizations.
 
I am currently trying to track down why in Ariel bold 24 I am having problems with a 'f'. It works Ok in some other sizes.
Update: fixed

As for timings, so far it is still slower than transparent text, at least with some of my changes to transparent text.
My current stuff is up at: https://github.com/KurtE/ILI9341_t3n

Right now my test case program is:
Code: 
#include <font_Arial.h>
#include <font_ArialBoldX.h>
#include <ILI9341_t3n.h>

#include <SPIN.h>
#include "SPI.h"
#define KURTS_FLEXI
#ifdef KURTS_FLEXI
#define TFT_DC 22
#define TFT_CS 15
#define TFT_RST -1
#define TFT_SCK 14
#define TFT_MISO 12
#define TFT_MOSI 7
#define DEBUG_PIN 13
#else
#define TFT_DC  9
#define TFT_CS 10
#define TFT_RST 7
#define TFT_SCK 13
#define TFT_MISO 12
#define TFT_MOSI 11
#endif
ILI9341_t3n tft = ILI9341_t3n(TFT_CS, TFT_DC, TFT_RST, TFT_MOSI, TFT_SCK, TFT_MISO, &SPIN);
Adafruit_GFX_Button button;
uint8_t draw_opaque = 0;

void setup() {
  while (!Serial && (millis() < 4000)) ;
  Serial.begin(115200);
  tft.begin();
  tft.fillScreen(ILI9341_BLACK);

  // read diagnostics (optional but can help debug problems)
  uint8_t x = tft.readcommand8(ILI9341_RDMODE);
  Serial.print("Display Power Mode: 0x"); Serial.println(x, HEX);
  x = tft.readcommand8(ILI9341_RDMADCTL);
  Serial.print("MADCTL Mode: 0x"); Serial.println(x, HEX);
  x = tft.readcommand8(ILI9341_RDPIXFMT);
  Serial.print("Pixel Format: 0x"); Serial.println(x, HEX);
  x = tft.readcommand8(ILI9341_RDIMGFMT);
  Serial.print("Image Format: 0x"); Serial.println(x, HEX);
  x = tft.readcommand8(ILI9341_RDSELFDIAG);
  Serial.print("Self Diagnostic: 0x"); Serial.println(x, HEX);
#ifdef DEBUG_PIN
  pinMode(DEBUG_PIN, OUTPUT);
#endif

  button.initButton(&tft, 200, 100, 100, 40, ILI9341_GREEN, ILI9341_YELLOW, ILI9341_RED, "UP", 1);

  drawTextScreen(draw_opaque);
}

uint16_t pixel_data[2500];


void drawTextScreen(bool fOpaque) {
  Serial.printf("Draw Opaque %d ", fOpaque); Serial.flush();
  uint32_t start_time = millis();
  tft.fillScreen(fOpaque ? ILI9341_RED : ILI9341_BLACK);
  tft.setRotation(3);
  tft.setFont(Arial_40_Bold);
  if (fOpaque)
    tft.setTextColor(ILI9341_WHITE, fOpaque ? ILI9341_BLACK : ILI9341_RED);
  else
    tft.setTextColor(ILI9341_WHITE);
  tft.setCursor(0, 5);
  tft.println("AbCdEfGhIj");
  tft.setFont(Arial_28_Bold);
  tft.println("0123456789!@#$");
  tft.setFont(Arial_20_Bold);
  tft.println("abcdefghijklmnopq");
  tft.setFont(Arial_14_Bold);
  tft.println("ABCDEFGHIJKLMNOPQRST");
  tft.setFont(Arial_10_Bold);
  tft.println("0123456789zyxwvutuvwxyzABCD");
  tft.setFont(Arial_8_Bold);
  tft.println("ABCDEFGHILKLMNOPQRSTUVWXYZ0123456789");

  Serial.println(millis() - start_time, DEC);
}

void loop(void) {
  // See if any text entered
  if (Serial.read() != -1) {
    while (Serial.read() != -1) ;
    draw_opaque = draw_opaque? 0 : 1;
    drawTextScreen(draw_opaque);
  }

}

Some of the stuff I did to the transparent code was to change some stuff in drawFontBits, to not repeat calling draw horizontal line when repeat > 1
Some of the stuff I thought about doing before trying this approach to build complete pixel map was that instead of calling horizontal line for both left and right edges when opaque could probably do two rectangle calls like the top and bottom were done...

Anyway the text output numbers I am getting is:
Code: 
Draw Opaque 0 66
Draw Opaque 1 76
Draw Opaque 0 67
Draw Opaque 1 77
Would be interesting to try your code with opaque support to see what numbers you get. Probably need to change library name, include file...
 
Last edited:
Status
Not open for further replies.
Back
Top