Display Time with ":" Always in the Same Location

[GeorgeIoak]

I'm displaying time in the upper right corner of my screen and hours less than 10 are single digit (no leading zero) so the width of the time will either be 4 characters (i.e. 9:15) or 5 characters (i.e. 10:15).

Does anyone have any cleaver ways to display the time so it always appears in the same location? I'm using MR_DATUM for now but I think there still might be a slight shift in location depending on the width of the numbers used?

[Bodmer]

There are functions to do this here:
https://github.com/Bodmer/OpenWeather/blob/master/examples/TFT_eSPI_OpenWeather_LittleFS/TFT_eSPI_OpenWeather_LittleFS.ino#L611

Example of use for time in a String type in these lines here:
https://github.com/Bodmer/OpenWeather/blob/master/examples/TFT_eSPI_OpenWeather_LittleFS/TFT_eSPI_OpenWeather_LittleFS.ino#L517-L523

[GeorgeIoak]

That looks like what I was looking for! Plenty of hidden gems yet to be found.

I'm a little unclear on why your padding has spaces on both sides of the 88:88 and then you're also adding a space at the end of your time.

I got your example to work but the padding doesn't seem to be working correctly because I'm getting some extra pixels on the right of the time sometimes. It looks like the whole time value is written the first time and then it shifts to the left on the next call and stays at the new location after that. I'm sure there's a bug somewhere in my code hiding or maybe I've implemented your logic incorrectly. If you have a moment maybe you could look and see if there's anything obviously wrong here.

`void refreshHeader()
{
tft.setTextDatum(MR_DATUM); // Set datum to Middle Right
tft.setTextColor(TFT_GREEN, TFT_BLACK);

tft.setTextPadding(tft.textWidth("-88.8", 4));
tft.drawFloat(Registry::getSensorReadings()->roomTemp, 1, 100, 25, 4);
tft.setTextPadding(tft.textWidth("-8888.8", 4));
tft.drawFloat(Registry::getSensorReadings()->ambientLight, 1, 200, 25, 4);

tft.setTextPadding(tft.textWidth(" 88:88 ", 4));
char theTime[6];
strftime(theTime, 6, "%l:%M", &timeinfo); // %l = 12 hour without leading zero
String newTime = String(theTime) + " ";
tft.setTextDatum(BR_DATUM);
int8_t timeIndex = strstr(theTime, ":") - theTime;
std::string newestTime = theTime + std::string(" ");
int8_t dt = tft.textWidth(newestTime.substr(timeIndex, 3).c_str());
tft.drawString(newestTime.c_str(), 270 + dt, 25 + tft.fontHeight(4)/2, 4);

tft.setTextDatum(MC_DATUM);
tft.drawString(WiFi.localIP().toString(), tft.width() / 2, 65, 4);
tft.setTextPadding(tft.textWidth("88", 4));
tft.drawNumber(Registry::getIHPMode(), tft.width() / 2, 105, 4);
tft.setTextPadding(0);

}`

[Bodmer]

..spaces on both sides of the 88:88 - because 8 might not be the "widest" character.

...also adding a space at the end of your time - because the right hand end datum is used and this can move left if narrow characters are after the colon : ( eg, 11:11 will be narrower than 22:24 so part of the 4 will remain). The datum has to move to compensate for the different character widths, then the : will be static (padding is only added to left when datum is on right). If a middle datum was used with the appropriate adjusts then padding would be on both sides of the string and the extra space is not needed. But the code was kept simple!

The original code works fine so probably best to start with a direct copy.

[GeorgeIoak]

OK, thanks for the explanation. It's been running for a while and it hasn't shifted or left any old pixels. I'll keep an eye on it and see how it goes. Thanks for the help.

[GeorgeIoak]

As a follow up I thought I'd post what I found to be my problem. In your rightOffset command you use tft.textWidth but you don't pass in the font and rely on the currently selected font. In my program I have a few different fonts and calls to subroutines that use fonts. My clock is displayed in the header and uses font #4 but other sections of code use GFXFF so they use the setFreeFont command but my header uses drawString and drawFloat command and passes 4 for the font.

When I put in some debug statements I could see the dt variable change from a width of 24 to 32 but it wasn't consistent. Now when I calculate dt and pass in 4 for the font I'm always getting a width of 40.

Bad coding on my part I guess, perhaps I should always be using setTextFont or setFreeFont in all of my functions.

[Bodmer]

Yes, you do need to be careful with the fonts. Setting the font number in a function over-rides any currently set font (fr historical support reasons) so that is any easy trap to fall into.