Problem with drawString

[colinb1950]

I'm having a problem with drawString that I cannot seem to resolve. I have done a few projects with this library with little problem and have come to prefer to use drawString rather than print.
This project is a base station for a airborne variometer, used in R/C gliders. I want to put up an alert if the radio link is lost and do this by setting a time when there is a received signal, and then on each loop I check to see if more than a sec has elapsed since a signal and if so put up an error.
The issue I have is that if I use drawString, the message appears correctly for the first iteration of loop, and then after that the output is displaced off to the left so the original message, (simply 'Rcv:' and the millis since receipt), is left unchanged and the rest of the updates only show the last 4 characters.

The attached pic shows the problem with the one on the left working correctly using print, and the one on the right showing the problem using drawString. All other display info is done using drawString, drawNumber.

The relevant bit of code is below, and none of the rest of the code hits this area.
`
// This works
tft.setTextColor(TFT_RED, TFT_WHITE);
//tft.print("Rcv time: "+String(millis()));

// This doesn't
tft.drawString("Rcv time: "+String(millis()),Msgx,Msgy-20,4);
`

As I say I have resolved using 'print' but I would like to get to the bottom of this,

Thanks

[dookie454]

Can you set the location to put that text right before that line?

It's possible the location is being changed somewhere else in your loop?

[colinb1950]

Thanks for the suggestion, but the x,y variables are only being referenced in those lines.

To prove the point in the code I substituted the actual values of 50 & 220 for the x, y variables

  if ((millis()-lastrx) > timeout) {
//    tft.fillRect(Msgx-10,Msgy-20,250,30,TFT_WHITE);
    tft.fillRect(50-10,220-20,250,30,TFT_WHITE);
//    tft.setCursor(Msgx,Msgy);
    tft.setCursor(50,220);
    
    // This works
    tft.setTextColor(TFT_RED, TFT_WHITE);
    tft.print("** Connection Lost **");
    
    // This doesn't
    //tft.drawString("Rcv time: "+String(millis()),Msgx,Msgy-20,4);
    //tft.drawString("** Connection Lost **",50,220-20,4);
    
    tft.setTextColor(TFT_GREEN, TFT_BLACK);
    delay(500);
  } else {

but still get the same result ...

[Bodmer]

Check that the text datum has not been changed by your sketch, to for example right justify the numbers.

To be safe set the datum before using drawString

[dookie454]

I started having this same problem with some text after adding a On/Off button, the text turned large and moved far left of screen, and also made the changing text stay on the screen, not clear every loop like it used too.

This fixed the left alignment: tft.setTextDatum(TL_DATUM);
But, the font size was still much larger than normal, and changing text values continue to "stack up" , to fix that I added this before the Datum statement: tft.setTextColor(TFT_WHITE, TFT_BLACK); , this clears the text.

Is there a better way to fix this? So I can get the text back to nromal size without chaning the font value, and get the auto-clearing working like it used too? My Method flickers a bit.

Thanks!

[colinb1950]

How did you set the large font for the button? Maybe add a command to reset the font after outputting the button text. Not sure if you are using print or drawString, but as well as the font commands you can also set the font with the drawString function.

[dookie454]

My engine data is line 4, that used to somehow auto-clear and redraw by itself, before I added the On/Off button.
Since adding the button, I had to add line 1 to clear the screen before the new engine data was drawn, or it would just stack up on itself. Somehow it was auto-clearing when line 4 ran (before adding button).

Line 2 "tft.setTextDatum(TL_DATUM);" fixed the position after adding the button.

Now I see in the Button code, it says:
tft.setTextSize(2);
tft.setTextDatum(MC_DATUM);
But, I dont know what these DATUM commands are. Any clue how to "reset" back to "normal" after they draw? For example, I had font size 4 with no button, and now I have font size 2 after adding button, and it is still bigger than the old 4.

Thanks!!!!!!!!!

//Added this to v10 due to the touch button messing up the text
// Change colour for scrolling zone text
1 - tft.setTextColor(TFT_WHITE, TFT_BLACK); // this erases the digits that are used, not the entire screen since it wont erase on it's own since I added the On/Off touch button ,but it makes some flickering
2 - tft.setTextDatum(TL_DATUM); // this fixes the position after adding the toggle button, but not the size or overwriting or text size..

3 - tft.drawString(" RPM: ", 0, 60, 2); // A, B, C = A = X axis Position, B = Y axis, C = Font Size.
4 - tft.drawNumber(message_fast.rpm, 80, 60, 2); // A, B, C = A = X axis Position, B = Y axis, C = Font Size.

On/Off Button code:
{
tft.fillRect(REDBUTTON_X, REDBUTTON_Y, REDBUTTON_W, REDBUTTON_H, TFT_RED);
tft.fillRect(GREENBUTTON_X, GREENBUTTON_Y, GREENBUTTON_W, GREENBUTTON_H, TFT_DARKGREY);
drawFrame();
tft.setTextColor(TFT_WHITE);
tft.setTextSize(2);
tft.setTextDatum(MC_DATUM);
tft.drawString("ON", GREENBUTTON_X + (GREENBUTTON_W / 2), GREENBUTTON_Y + (GREENBUTTON_H / 2));
tft.drawString("OFF", REDBUTTON_X + (REDBUTTON_W / 2) + 1, REDBUTTON_Y + (REDBUTTON_H / 2)); // draws OFF text over the RED BOX
SwitchOn = false;
}

// Draw a green button
void greenBtn()
{
tft.fillRect(GREENBUTTON_X, GREENBUTTON_Y, GREENBUTTON_W, GREENBUTTON_H, TFT_GREEN);
tft.fillRect(REDBUTTON_X, REDBUTTON_Y, REDBUTTON_W, REDBUTTON_H, TFT_DARKGREY);
drawFrame();
tft.setTextColor(TFT_WHITE);
tft.setTextSize(2);
tft.setTextDatum(MC_DATUM);
tft.drawString("OFF", REDBUTTON_X + (REDBUTTON_W / 2) + 1, REDBUTTON_Y + (REDBUTTON_H / 2));
tft.drawString("ON", GREENBUTTON_X + (GREENBUTTON_W / 2), GREENBUTTON_Y + (GREENBUTTON_H / 2)); // draws ON text over the GREEN BOX
SwitchOn = true;
}

[colinb1950]

OK I think there is a confusion between font and font size. The font parameter in the draw... functions selects the font to be used whereas setTextSize keeps the current font but makes it bigger. If I understand you, you don't want font size 2? So just delete those lines. (How did you output the labels and numbers? Print or draw...?

As to the text datums this is a powerful feature that is one reason I like this library. Essentially if you define text at point x,y then you can use the datum function to define where the text should draw from - e.g. if you use TL_DATUM then the text will appear to the right and below x,y (i.e. left justified and below x), whereas if you use MR_DATUM then the text will display to the left of x but on the same level, (right justified and level with x). Maybe this will make it clearer though no doubt Bodmer can explain it better! In each case the end of the line from the description would be the x,y position...

[dookie454]

thank you, very helpful. Where are you finding these helpful documents? Maybe then I will understand more, ask less questions :)

[colinb1950]

Great hobby but frustrating when COVID prevents you going to the field !! Thanks again.

…

Sent from my iPad On 24 Feb 2021, at 00:03, Bodmer <[email protected]<mailto:[email protected]>> wrote: Nice project. I used to fly RC gliders, I ought to get mine out of the loft and repair it! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<https://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FBodmer%2FTFT_eSPI%2Fdiscussions%2F1025%23discussioncomment-399592&data=04%7C01%7C%7C4280b76d8a51497cc74308d8d85794d6%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637497217951445691%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=C7iJyfMh2sXipE5yTuT8Ull1IlEBef%2FUqs8D3N0MzsQ%3D&reserved=0>, or unsubscribe<https://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAS63CUZOBKK6Y5IECUU3SKLTAQ64FANCNFSM4YDDPTFQ&data=04%7C01%7C%7C4280b76d8a51497cc74308d8d85794d6%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637497217951445691%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=w%2BO4XAk8eUgNLYp3sGWN4GKNu9UtDw4bIWPRolS%2B6So%3D&reserved=0>.

[colinb1950]

Hi, Ambercroft has developed a Wiki that isn't bad - https://github.com/Ambercroft/TFT_eSPI/wiki and then looking in the example code helps a lot. Failing that having a look at the code in TFT_eSPI.cpp in the TFT_eSPI library! Regards, Colin From: dookie454 <[email protected]> Sent: 26 February 2021 12:14 To: Bodmer/TFT_eSPI <[email protected]> Cc: colinb1950 <[email protected]>; Author <[email protected]> Subject: Re: [Bodmer/TFT_eSPI] Problem with drawString (#1025) thank you, very helpful. Where are you finding these helpful documents? Maybe then I will understand more, ask less questions :) - You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<https://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FBodmer%2FTFT_eSPI%2Fdiscussions%2F1025%23discussioncomment-409010&data=04%7C01%7C%7C7a7db054c8514cf3c17608d8da500b08%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637499384602852564%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=E%2Bd%2B%2FnRITjnawsga30htPBdTR10owk6%2BPb7LhsUt0Bg%3D&reserved=0>, or unsubscribe<https://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAS63CU5KDNAHEC377WLUAV3TA6GBVANCNFSM4YDDPTFQ&data=04%7C01%7C%7C7a7db054c8514cf3c17608d8da500b08%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637499384602862553%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=vLo2uvnBCmtGkdS0LJO38WYU5j%2FXPToWpWN0En4lj%2FI%3D&reserved=0>.

[dookie454]

cool, yes very helpful, didnt notice that. Im working on a situation now where I want a decimal on the TFT.

With the normal LCD libraries and many other TFT libaries, I could just use TFT.Print(2.31, 2), the 2 would be the decimal places.

How would I do that using the directions shown below in the Wiki? And would I add TFT to the front? "TFT.print(TEXT,TYPE);"

That is where these examples are a bit confusing, the examples are missing critical pieces.

print(TEXT,TYPE);
TEXT >> "", *pointer, NUM
TYPE >> CHR, HEX, DEC, OCT = Optional, DEFAULT CHR
println(TEXT,TYPE);
TEXT >> "", *pointer, NUM
TYPE >> CHR, HEX, DEC, OCT = Optional, DEFAULT CHR
print(); with the addition of lf & cr

[colinb1950]

For the screen that is in the picture I use draw rather than print. For the fixed text and messages I have ... tft.setCursor(Msgx,Msgy); // Position cursor, not needed for drawstring but a hangover from my using print tft.setTextDatum(TL_DATUM); // Set datum to top left of text so text is left justified tft.setTextColor(TFT_RED, TFT_WHITE); // Set message colour tft.drawString(msgtxt,Msgx,Msgy-20,4); // Output message text. (Could have used tft.print(msgtxt); tft.setTextColor(TFT_GREEN, TFT_BLACK); // Reset text colour For the changing data e.g. height I have ... tft.setTextColor(TFT_GREEN, TFT_BLACK); // Set text color tft.setTextDatum(TR_DATUM); // Sets datum to right of text so it will right justift // PROCESS HEIGHT // Write to the display the string with right text alignment: tft.setTextPadding( tft.textWidth("8888", 4) ); // Define text padding so I do not have to worry about clearing digits e.g. going from 1100 to 900, don't have to write space over leading '1' tft.drawNumber(HeightNum,Heightx,Heighty,4); // drawString text or value using font 4 Regards, Colin From: dookie454 <[email protected]> Sent: 26 February 2021 14:04 To: Bodmer/TFT_eSPI <[email protected]> Cc: colinb1950 <[email protected]>; Author <[email protected]> Subject: Re: [Bodmer/TFT_eSPI] Problem with drawString (#1025) cool, yes very helpful, didnt notice that. Im working on a situation now where I want a decimal on the TFT. With the normal LCD libraries and many other TFT libaries, I could just use TFT.Print(2.31, 2), the 2 would be the decimal. How would I do that using the directions shown below in the Wiki? And would I add TFT to the front? "TFT.print(TEXT,TYPE);" That is where these examples are a bit confusing, the examples are missing critical pieces. print(TEXT,TYPE); TEXT >> "", *pointer, NUM TYPE >> CHR, HEX, DEC, OCT = Optional, DEFAULT CHR println(TEXT,TYPE); TEXT >> "", *pointer, NUM TYPE >> CHR, HEX, DEC, OCT = Optional, DEFAULT CHR print(); with the addition of lf & cr - You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<https://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FBodmer%2FTFT_eSPI%2Fdiscussions%2F1025%23discussioncomment-409334&data=04%7C01%7C%7C308d8d0bef534cd6ce7308d8da5f5330%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637499450232692434%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=pxcrthmxa%2BRJg%2Fz6DFJuctf4Z4Brg7Sl1rk3VaXSZEM%3D&reserved=0>, or unsubscribe<https://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAS63CU3HAGM3EF2GUZ74C7DTA6S33ANCNFSM4YDDPTFQ&data=04%7C01%7C%7C308d8d0bef534cd6ce7308d8da5f5330%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637499450232702428%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=Mr%2BvHWMijARQXOD5Pyg90LIpo1ZQ0jPkihoa5ocpQgU%3D&reserved=0>.

[dookie454]

Huge help, thanks so much! This is first time really getting into these TFT displays, as you can tell.

Will try this asap: tft.setTextPadding( tft.textWidth("8888", 4) ); // Define text padding so I do not have to worry about clearing digits e.g.