Text overlay on graphical LCD

Not sure how to explain it, but I wonder if it’s fairly easy to first display a bitmap image on an LCD and then display and update one or more fields with text/characters without clearing the image. I have attached an image that somewhat explains what I want to do even if the text in the attached image looks more to be graphic objects than characters generated by the LCD controller, which in my case will most likely be Epson S1D13700.

My goal is to make a background image that defines a few separate areas of the graphical display along with header for the values and then write the values in the “boxes”.

I found some references here but I can’t find the actual explenation on how to acheive this.

Fun stuff! Now you can overlay text, or draw on on your bitmap.


I think that is just a matter of careful cursor placement when you do the text. The grapohics and labels only need be done once, in setup.

OP's image:

Super easy. Just make sure you never use LCD.clear() and only use the drawFillRectangle() method to clear the boxes where the text is. (Your LCD library make have different names for these functions.)

You should make a separate function like setupScreen() which you can call from setup() or from anywhere else in your code. There may be a reason to overwrite the entire screen during normal operation.

Another thing you can think about, to speed things up, is only erase the digits which change. I've had several projects where writing to the LCD was the most time-consuming part of the code. Basically my updateScreen() method had to remember what it last wrote to the screen and then if "11.8" changed to "12.2" then it would remember that it already had a "1" in the first position and only update the second two digits. (Even the decimal point was part of the background.)