Centering text?

[wumfi]

Is there a simple way of working out the width of the rendered object after calling wri.printstring?

I'd like to be able to centre text based on the screen width. I've been playing around with .clip_width and .char_width methods, but they don't seem to be set to the actual length of the rendered text on the screen. I tried the following in the REPL:

txt="This is a test"
from Pico_ePaper import Eink
from writer import Writer
import sys
sys.path.append("/fonts")
import dinomouse20, dinomouse30, dinomouse40
import framebuf
class DummyDevice(framebuf.FrameBuffer):
    def __init__(self, width, height, buf_format):
        self.width = width
        self.height = height
        self._buf = bytearray(self.width * self.height // 8)
        super().__init__(self._buf, self.width, self.height, buf_format)
        self.fill(1)

epd = Eink(rotation=270)
Data loading time: 6816 ms

dummy = DummyDevice(epd.width, epd.height, framebuf.MONO_HLSB)
wri = Writer(dummy, dinomouse40)
wri.set_clip(row_clip=True, col_clip=True, wrap=True)
wri.printstring(txt, invert=True)
Writer.set_textpos(dummy, 0, 0)

Orientation: Horizontal. Reversal: False. Width: 480. Height: 280.
Start row = 0 col = 0
(True, True, True)
(0, 0)

wri.char_width
19

epd.fill()
epd.blit(dummy, int(epd.width/2)-int(wri.char_width/2), 100, key=1)
epd.show()
Data loading time: 6842 ms

Renders as this.

Apologies if I'm using the wrong terminology, or indeed, using the wrong forum to ask questions. I'm very much at the beginning of my MicroPython journey, and trying to learn as I go along.

[phoreglad]

You should use stringlen() method to find out the length of rendered text in pixels and then do some math to calculate text position. The same goes for vertical centering, but you should use font height. That works only for one line text since the Writer class doesn't calculate the width/length of multiline text. To do that you'd probably have to divide your text into single lines and position them appropriately.

Using:
Writer.set_textpos(dummy, (epd.height-wri.height)//2, (epd.width-wri.stringlen(text))//2)
to set the text position should center it horizontally and vertically.

One important thing to note. With this method of using Writer you should always blit dummy buffer on position 0, 0:
epd.blit(dummy, 0, 0, key=1)
and use Writer set_textpos() method to change the text position.

I've also noticed that you're using an older version of my driver, so you might consider updating it to the newest version. There were some bugfixes and massive speed up (~10x) for landscape mode.

[wumfi]

Firstly, thank you for explaining the centering calculations. Oddly though, if I take your recommendation:

Writer.set_textpos(dummy, (epd.height-wri.height)//2, (epd.width-wri.stringlen(text))//2)
epd.blit(dummy, 0, 0, key=1)

The text is rendered top-left of the screen. However, if I switch it round to:

Writer.set_textpos(dummy, 0, 0)
epd.blit(dummy, (epd.height-wri.height)//2, (epd.width-wri.stringlen(txt))//2, key=1)

It works as expected.

It should be noted also that I'm not running this on a Pico, I'm using a TinyS2 attached to the pins on the back of the screen via a breadboard currently. I needed internet, so can't use the Pico. Perhaps that's why I'm seeing different output? I'm happy to test using a Pico if you would like me to.

Also, thank you for the new library. I've just tried it and it's certainly is a lot quicker! However, I've been using the one on the partial-updates branch as it benefits my project. Are you planning on merging that into main?

[phoreglad]

I have just noticed that you're writing text to screen before setting text position. set_textpos() method should be used before printstring().

Also, thank you for the new library. I've just tried it and it's certainly is a lot quicker! However, I've been using the one on the partial-updates branch as it benefits my project. Are you planning on merging that into main?

I'm still not sure that the current implementation of differential/partial updates is how I want it to look like so I'm not planning to merge it to main at this time. That being said partial-updates branch also has been updated with some speedups, so you might want to grab its newer version regardless. I'll try to update it further to be as fast as main, but it may take some time.

PS I've converted this issue to "discussion", mainly because I want to try this feature out and this conversation isn't related to any specific issue with the library.

[wumfi]

Not a problem moving it to discussion, I had a feeling that it wasn't an issue!

I've moved the lines as you suggested, but using the x/y coordinates in the set_textpos still doesn't work. Using it in the blit method does.

This is my working code (x and y are being calculated based on your previous help with centering):

    Writer.set_textpos(dummy, 0, 0)
    wri.set_clip(row_clip=True, col_clip=True, wrap=True)
    wri.printstring(text, invert=True)
    epd.blit(dummy, x, y, key=1)
    debug(f"x={x} y={y}")

If I change it so it's Writer.set_textpos(dummy, x, y) and epd.blit(dummy, 0, 0, key=1) then my text ends up all over the place. The final debug line is printing out the correct coordinates, but the text only goes to those coordinates if I have the code as above.

I note that in your this example, you insert the x/y coordinates in the epd.blit call, so that's how I ended up guessing that's where it went when rendering fonts.

That said, I'm not entirely sure of the relationship between Writer.set_textpos and epd.blit. I have something working mainly due to hacking around with it this afternoon!

[phoreglad]

It's very, very strange and I don't see why it's that way. Can you try this code and see the results? It should show the text "This is only a test" centered horizontally and vertically.

from Pico_ePaper import Eink
import framebuf
from writer import Writer

import freesans20

text = "This is only a test"

class DummyDevice(framebuf.FrameBuffer):
    def __init__(self, width, height, buf_format):
        self.width = width
        self.height = height
        self._buf = bytearray(self.width * self.height // 8)
        super().__init__(self._buf, self.width, self.height, buf_format)
        self.fill(1)


epd = Eink(rotation=270)
dummy = DummyDevice(epd.width, epd.height, framebuf.MONO_HLSB)
wri = Writer(dummy, freesans20)
wri.set_clip(row_clip=True, col_clip=False, wrap=True)
print(wri.stringlen(text))
Writer.set_textpos(dummy, (epd.height-wri.height)//2,
                   (epd.width-wri.stringlen(text))//2)
wri.printstring(text, invert=True)
epd.blit(dummy, 0, 0, key=1, ram=epd.RAM_RBW)
epd.show()
epd.sleep()

I note that in your this example, you insert the x/y coordinates in the epd.blit call, so that's how I ended up guessing that's where it went when rendering fonts.

That said, I'm not entirely sure of the relationship between Writer.set_textpos and epd.blit. I have something working mainly due to hacking around with it this afternoon!

In the example, I'm using blit to position images because the temporary buffer that contains the image is only as big as the image itself. With Writer class (or at least the way I use it here) the buffer used for rendered text is the size of the whole screen, thus blit should be on position 0, 0 and text position managed by Writer. When you tell it to blit onto some other coordinates some part of this buffer overflows the screen, but FrameBuffer is able to cope with it and the result seems to be ok.

[wumfi]

Hello again. I think I've finally figured out what's going on!

Firstly, your example code ran perfectly, so I then proceeded to transpose your code into my text writing function for testing.

And it didn't work again. So after much debugging, I realised that the set_textpos function is y/x not x/y!

So I switched the x and y parameters around in my code, and all now works as it should!

This is my function now. Bear in mind I'm a beginner, so this may not be the best code!

def wstring(text,fontname,x=None,y=None,xoffset=None,xwidth=None,yoffset=None,yheight=None):
    
    dummy = DummyDevice(epd.width, epd.height, framebuf.MONO_HLSB)
    wri = Writer(dummy, fontname)
    
    if x==None:
        if xoffset==None:
            x=(epd.width - wri.stringlen(text)) // 2
        else:
            x=(xwidth - wri.stringlen(text)) // 2 + xoffset
    if y==None:
        if yoffset==None:
            y=(epd.height - wri.height) // 2
        else:
            y=(yheight - wri.height) // 2 + yoffset
    wri.set_clip(row_clip=True, col_clip=True, wrap=True)
    Writer.set_textpos(dummy, y, x)
    print(f"X={x} Y={y}")
    wri.printstring(text, invert=True)
    epd.blit(dummy, 0, 0, key=1, ram=epd.RAM_RBW)

I have the optional parameters so that I can choose:

1. Whether or not the text is centred
2. Whether the text is centred in just x or just y
3. Whether the centre is in relation to the whole screen, or just a portion

I'm writing a weather display, and so I want to be able to arrange text and images within boxes. As per my previous screenshot.

I want to thank you for sticking with me through all of this! And for writing a library that finally allows me to use this e-ink display that's been sitting around for months!

Edit: So the only reason my original code was working, is that the blit function does work in x/y. So by setting my set_textpos to 0,0, and then blitting it to x,y it was going in the correct place. Albeit with the rest of the blitted object being off the screen.

Edit 2: Just figured out that the more "pythonic" way of doing it would be: Writer.set_textpos(dummy, col=x, row=y), which works also, and is a lot friendlier to read.