How do you use solid back ground Ariel font

Status
Not open for further replies.
D

DaQue

Well-known member
I'm using Teensyduino 1.34 and Arduino 1.8.0 with PJRC QVGATouch display and the purple test board Paul made available from OSH Park.

Below is a stripped down version of something I'm working on to show how I will be displaying the info. You can comment out the first line and it will used the default Adafruit font and that works like I want but its ugly blown up that big. I read somewhere on here that someone got the solid background to work other fonts and it maybe was going to be included in the standard ILI9341_t3 library but if so I don't see how to use it. My workaround right now is to redraw both rounded rectangles and then reprint the number but it flickers.

Code: 
#define USEARIAL
#include <ILI9341_t3.h>
#ifdef USEARIAL
#include <font_Arial.h> // from ILI9341_t3
#endif USEARIAL
#include <XPT2046_Touchscreen.h>
#include <SPI.h>
#define CS_PIN  8
#define TFT_DC  9
#define TFT_CS 10
#define TIRQ_PIN  2
XPT2046_Touchscreen ts(CS_PIN, TIRQ_PIN);
ILI9341_t3 tft = ILI9341_t3(TFT_CS, TFT_DC);
elapsedMillis runningTime;
void setup()
{
	Serial.begin(38400);
	tft.begin();
	tft.setRotation(1);
	tft.fillScreen(ILI9341_BLACK);
	#ifdef USEARIAL
	tft.setFont(Arial_72);
	#else
	tft.setTextSize(10);
	#endif
	ts.begin();
	while (!Serial && (millis() <= 1000));
	int tenthsecs =0;
	tft.fillScreen(ILI9341_BLACK);
	tft.fillRoundRect(0, 5, 255, 99, 4, ILI9341_GREEN);
	tft.fillRoundRect(4, 9, 246, 91, 4, ILI9341_BLACK);
	tft.setCursor(10 , 20);
	tft.setTextColor(ILI9341_GREEN,ILI9341_BLACK);
}

void loop(){
	int tenthsecs =0;
	tenthsecs = ((runningTime/100)%10000);
	tft.setCursor(10 , 20);
	if (tenthsecs < 1000) tft.print("0");
	if (tenthsecs < 100) tft.print("0");
	if (tenthsecs < 10) tft.print("0");
	tft.println(tenthsecs);
	delay(100);

}
 
If anyone wonders the other part of the screen is filled with 12 buttons that are just drawn once and used with the touchscreen to set the value that is displayed and control other parts of the real sketch.
 
I have a version of the ili9341_t3 library that has drawing font characters opaque. i.e. it handles the case you have tft.setTextColor(ILI9341_GREEN,ILI9341_BLACK);
However one issue with these is it may fill in a larger area than you want, as it fills in full width and height to next row of text... Which is why I also ported in the ability to set a clipping rectangle.

I merged all of this into current code base from my ili9341_t3n library, where a lot of the code came from another outstanding PR to Paul's library. I have not yet issued a PR as it probably needs some more testing, plus maybe some quick checking on if this impacts the performance of the library.

If you are interested, code is up in in my Fork/Branch: https://github.com/KurtE/ILI9341_t3/tree/Merge-Bounds-offsets-_T3N
 
Thanks I will grab it in a bit. I thought it got bundled in already and I was missing something.
 
Ok it (the solid background) works! I do have a couple questions on setting the clip rectangle. it looks like I would use a tft.setClipRect(a,b,c,d,) to set it, right?

In the header the prototype is void setClipRect(int16_t x1, int16_t y1, int16_t w, int16_t h) how do the parameters relate to a font? Playing with random values I have not yet gotten any part of the numbers to display.
 
Oops sorry missed your message yesterday.

The clip rectangle is by default by the screen origin. So for example if you do a: tft.setCursor(10 , 20);

Then X, Y would likely be 10, 20, as for width and height, I might try large W like 250 as maybe nothing to right of it. And Try something like 72 for H and see what it gives.

Note: in your test program, you only set the text position in Setup and you use println So it is going to quickly walk down the display on each call to output...

FYI: I issued a Pull Request this morning: https://github.com/PaulStoffregen/ILI9341_t3/pull/41

Not sure if it will be accepted or not. It grows the library by about 2K I think. The benchmarks appear to run pretty similar...
 
Thanks I'll give that a try. I looked at the code but got lost really fast. I'm not sure if I fixed the println issue after I posted the test code but it didn't scroll for me. I guess that means I did.

Like most things I program I have already changed it by just making the number area larger and deleting a row of buttons and changed how the remaining buttons work. This got it to look right. Best part flicker free.
 
Status
Not open for further replies.
Back
Top