Hi everyone, i am working with a displa and driving iw with the MCUFRIEND library, the problem that i have right now is that i cant manage to write some text over a colored loading bar. I read in some forums that using myGLCD.setTextColor(0xFF00B0, 0xffffffff); will set a transaprent background for the text, but onfortunately it does not work for me. Sadly, i managed to do this two weeks ago before i lost all my data in the computer. Can someone explain me how to do this?
MCUFriend_kbv uses Adafruit_GFX for graphics and text rendering.
Adafruit_GFX draws TrueType fonts transparently. Only foreground pixels are drawn.
Adafruit_GFX draws the glcd font with foreground and background, except if foreground and background color are set the same, then it draws only foreground pixels.
I had seen the use of a special color for transparent in some library, but wasn't it for background? Anyway, I think this is obsolete.
-jz-
BTW: please fix the typo in your title.
yes, what i need is a transparent background, since sometime the text is over the colored part of the loading bar and also the black background. A transparent background on the text is what i am trying to achieve bot cant get how to do it. If you have any suggestions, i will highly appreciate them.
Fix your topic title and use a TrueType font.
If you set only foreground color for text, then the background color is set the same, to achieve transparent. TrueType drawing may have been enhanced, I am too busy to check now.
// NOTE: THERE IS NO 'BACKGROUND' COLOR OPTION ON CUSTOM FONTS.
// THIS IS ON PURPOSE AND BY DESIGN. The background color feature
// has typically been used with the 'classic' font to overwrite old
// screen contents with new data. This ONLY works because the
// characters are a uniform size; it's not a sensible thing to do with
// proportionally-spaced fonts with glyphs of varying sizes (and that
// may overlap). To replace previously-drawn text when using a custom
// font, use the getTextBounds() function to determine the smallest
// rectangle encompassing a string, erase the area with fillRect(),
// then draw new text. This WILL infortunately 'blink' the text, but
// is unavoidable. Drawing 'background' pixels will NOT fix this,
// only creates a new set of problems. Have an idea to work around
// this (a canvas object type for MCUs that can afford the RAM and
// displays supporting setAddrWindow() and pushColors()), but haven't
// implemented this yet.
So i am not exactly sure what it is you want. As @ZinggJM has explained. On the default Font, the background color is added by default, if defined as far as i know, otherwise no background pixels are drawn. On custom fonts this is omitted to prevent artifacts when a font is not evenly spaced. If you look in Adafruit_GFX.h (about where that section of comments is) you can see how and when what is done, and possibly even make some modifications to suit you needs, although i would recommend creating a complete parallel header file. Adafruit_GFX.h is used in many libraries.
btw isn't this what you want ?
HI, what i want is to draw some text over a colored rectangle. I am using no custom fonts because i read that i cant set the background to transparent with them.
This is my method for drawing the rectangle and the text:
void drawbar(int i, int width, String text){
myGLCD.setFont(BigFont);
myGLCD.setColor(colorsR[i],colorsG[i],colorsB[i]);
myGLCD.fillRect(0,barheigt*(i),width,barheigt*(i+1)); //oriz start, vert start, oriz end, vert end
//////////myGLCD.setFont(&DejaVu_Sans_Mono_Bold_36);
myGLCD.setTextColor(0xFF00B0, 0x00000000);
//myGLCD.setColor(0xFF,0x00,0xB0);
myGLCD.setTextSize(2);
myGLCD.print(text, CENTER, (i*110)+55);
//myGLCD.print("test", CENTER, 390);
//delay(1000);
}
And this is the result:
Chewed on your code, but can neither eat nor digest it. Grrr!
Post complete code, so I know e.g. what myGLCD and BigFont are.
Where is your library from?
Hi, BigFont and SmallFont are fonts incuded in the MCUFIREND library.
Here it is the full code:
#include <UTFTGLUE.h> //use GLUE class and constructor
UTFTGLUE myGLCD(0,A2,A1,A3,A4,A0); //all dummy args
//#include <Fonts/FreeMonoBold24pt7b.h>
//#include <Fonts/DejaVu_Sans_Mono_Bold_36.h>
#define barheigt (440/4)
int colorsR[4] = {192, 192, 128, 64};
int colorsG[4] = {0, 192, 128, 64};
int colorsB[4] = {32, 192, 128, 64};
unsigned int values[4] = {90, 129, 18045, 13596};
void setup()
{
// Setup the LCD
myGLCD.InitLCD(0);
myGLCD.setFont(BigFont);
myGLCD.setColor(0,0,0);
myGLCD.fillRect(0,0,320,480); //oriz start, vert start, oriz end, vert end
}
void loop()
{
printCoolant();
printBatt();
}
void printCoolant(){
int id = 0;
int width = (((values[id]-50)*320)/80);
String toPrint = String(values[id]) + "C" ;
// id % px
// 50c = 0 = 0
// 90c = 50 = 160
//130c = 100 = 320
drawbar(id,width,toPrint);
}
void printTurbo(){ //intake manifold absolute pressure 0 - 255 kpa (100 = 1 bar). 100 = pressione ambientale
int id = 1;
int width = ((values[id]*16)/10);
int bar = (values[id]-100)*10; //pressione del turbo in bar
String toPrint = String(bar) + "mbar" ;
// id % px
// 0 = 0 = 0
// 100 = 50 = 160
// 200 = 100 = 320
drawbar(id,width,toPrint);
}
void printCr(){ //Fuel Rail Gauge Pressure 0 - 655,350 kpa (bar full = 200 000 Kpa, 2 000 bar). arduino max int = 65 535, il valore che si legge é pid/10
int id = 2;
int width = ((values[id]*16)/1000);
int bar = values[id]/10; //pressione del turbo in bar
String toPrint = String(bar) + "bar" ;
// id % px
// 0 = 0 = 0
// 10 000 = 50 = 160
// 20 000 = 100 = 320
drawbar(id,width,toPrint);
}
void printBatt(){
int id = 3;
int width = (((values[id]-12000)*16)/100);
float volt = (values[id]/1000); //pressione del turbo in bar
int voltprint = values[id]/10;
String toPrint = String(voltprint) + "v" ;
// id % px
// 12 000 = 0 = 0
// 13 000 = 50 = 160
// 14 000 = 100 = 320
drawbar(id,width,toPrint);
}
/*void printDpf(){ // arduino max int = 65 535, il valore che si legge é pid/10
int id = 3;
int width = ((values[id]-40)/2);
float degrees = (values[id]-40); //pressione del turbo in bar
String toPrint = String(degrees) + "v" ;
// id % px
// 0 = 0 = 0
// 320 = 50 = 160
// 640 = 100 = 320
drawbar(id,width,toPrint);
}*/
void drawbar(int i, int width, String text){
myGLCD.setFont(BigFont);
myGLCD.setColor(colorsR[i],colorsG[i],colorsB[i]);
myGLCD.fillRect(0,barheigt*(i),width,barheigt*(i+1)); //oriz start, vert start, oriz end, vert end
//////////myGLCD.setFont(&DejaVu_Sans_Mono_Bold_36);
myGLCD.setTextColor(0xFF00B0, 0x00000000);
//myGLCD.setColor(0xFF,0x00,0xB0);
myGLCD.setTextSize(2);
myGLCD.print(text, CENTER, (i*110)+55);
//myGLCD.print("test", CENTER, 390);
//delay(1000);
}
Oh, well. Wasn't obvious. Not recommended if not for re-use of UTFT code:
#warning @@@@@@@@@@@@@@@@@@@@@@@@@ <UTFTGLUE.h> @@@@@@@@@@@@@@@@@@@@@@@@@@
* 4. UTFTGLUE uses FreeFonts or NULL (System 5x7)
#include <FreeDefaultFonts.h>
#define SmallFont &FreeSmallFont
#define BigFont &FreeBigFont
#define SevenSegNumFont &FreeSevenSegNumFont
See UTFTGLUE.h
The remarks of @ZinggJM concerning TrueType FreeFonts apply.
And your pictures prove that they are drawn transparently.
If they are drawn transparently, how can i get all the text to being drawn transaprently and not only the top part of it?
I just discovered this:
if (textcolor != textbgcolor) fillRect(x1, poY + _ydatum - _ascent, xpad, _ascent + _descent, textbgcolor);
MCUFRIEND_kbv::setCursor(poX, poY + _ydatum);
print(string);
from TFT_PRINTGLUE.h line 160.
See also: Bodmer-style FreeFont formatting
use the same color for foreground and background!
Reptiles can eat rotten meat, but may get belly aches from obsolete code.
Yeah, didnt know utfglue was obsolete, so i started with that.
Anyway, i managed to find the problem.
if the code is written this way:
void drawbar(int i, int width, String text){
myGLCD.setFont(BigFont);
myGLCD.setColor(colorsR[i],colorsG[i],colorsB[i]);
myGLCD.fillRect(0,barheigt*(i),width,barheigt*(i+1)); //oriz start, vert start, oriz end, vert end
myGLCD.setBackColor(0xffffffff); //pay attention there
myGLCD.setColor(0xFF,0x00,0xB0); //and there
myGLCD.setTextSize(4);
myGLCD.print(text, CENTER, (i*110)+55);
//myGLCD.print("test", CENTER, 390);
//delay(1000);
}
you get screen artifacts:
but if you set first the color and then the bakgoruld, like this:
void drawbar(int i, int width, String text){
myGLCD.setFont(BigFont);
myGLCD.setColor(colorsR[i],colorsG[i],colorsB[i]);
myGLCD.fillRect(0,barheigt*(i),width,barheigt*(i+1)); //oriz start, vert start, oriz end, vert end
myGLCD.setColor(0xFF,0x00,0xB0); //pay attention there
myGLCD.setBackColor(0xffffffff); //and there
myGLCD.setTextSize(4);
myGLCD.print(text, CENTER, (i*110)+55);
//myGLCD.print("test", CENTER, 390);
//delay(1000);
}
you get no screen artifacts at all:
Hope this can be helpful to someone
There seems to be something wrong with the bounding box calculation in TFT_PRINTGLUE.h.
And here comes the explanation:
void setBackColor(uint32_t c) {
if (c == 0xFFFFFFFF) _bcolor = _fcolor;
else _bcolor = c;
MCUFRIEND_kbv::setTextColor(_fcolor, _bcolor);
}
only works if _fcolor has been set before.
Yeah that's what i thought to, so isn't it then just as simple as this ?
myGLCD.setTextColor(0xFF00B0, 0xFF00B0);
I know the issue is solved, but this work also ?
Of course, it is the same as the above:
with the second code version from @Chris2002.
Oh, sorry, your question was addressed at @PiluDrake. He certainly would agree.
This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.