[Web] Center text horizontally and vertically

[iMicknl]

It would be great if the WebUI could center the text both horizontally and vertically. At the moment, it appears slightly shifted to the right and a bit too close to the top, as shown in the image below.

Could this be related to the label size? I am currently using 30 × 14 mm labels in my printer, but I also have 50 × 14 mm available. It seems that I cannot adjust the label dimensions in the WebUI.

Is this the highest resolution the label printer can print? It feels pixelated, but might be the limit of the printer, not sure if some smoothing can be applied.

(and thanks for your project, just bought a label printer to give it a try!)

[0xMH]

Thanks for trying it out! This should be fixed now in the latest push. I've tried to tune the print quality as much as possible. If you get a chance, please test the current settings and let me know how they look.

[iMicknl]

There is still a small offset to the right (and top seems not centered either). I have refreshed my cache to make sure I was not using a previous version.

@0xMH did you publish your changes as well? I did use your hosted variant, didn't check out your code yet.

[0xMH]

@iMicknl Yes I did. Did you choose the correct label length from the list?

[iMicknl]

Yes! I will see if I can debug this locally and figure out if the issue is in the canvas generation or in the printing.

[iMicknl]

@0xMH could you give https://gist.github.com/iMicknl/d88a98d0fe089603a45b42512aebfaaf a try? I have added a feature to print a boundary test, that will show you the printing boundary.

Set the X and Y offset to 0, they are prefilled with the values that worked for me to perfectly center the text.

[RenateUSB]

I think that it's better to consider 30 mm stickers as 96 x 224 pixels.
While debugging this I used 2880 bytes of random data.
There was always white at the left side and it wrote right off the trailing edge.
So now I make my images 96 x 224 (2688 bytes) and center the images horizontally at 112 pixels.
It ends up perfect.

We started with 240 for 30 mm labels.
If this was considered as the full width, that works out to 8 pixels/mm, 200 DPI.
The height is 96 pixels, fixed by the print head.
96 pixels / 8 dpmm = 12 mm.
On 14 mm tape that gives us a top and bottom margin of 1 mm.
So this all agrees.

The white we get on the leading side when printing a random image sure looks like 1 mm.
Leaving a margin on the trailing side of 1 mm gives us 30 mm - 2 * 1 mm = 28 mm.
28 mm * 8 dpmm = 224 px.

I don't know if it's bad for the printer long term to "print" where there isn't a label.
I mean, it could overheat if there wasn't a label there to suck up the heat.
As I said, I don't know.
But I don't need to print there so I'll stick with 224 px.
Shown with one pixel border.

[0xMH]

Just pushed some changes. Can y'all test it?

[Rijgersberg]

I happened to clone the repo just after your changes. Thanks a lot by the way, it's awesome!

I think the text is now offset slightly too much to the left.

[0xMH]

@Rijgersberg Thanks for checking it. Did you happen to test the new web App? Can you confirm the issue still existed

[iMicknl]

I do face issues with the latest version as well, it seems to be a -5 offset that is required. But I didn't full debug it yet (with diagnostics lines to figure out the exact offset).

[0xMH]

I can't really reproduce it. Can you pls give me some instructions to what to print and which config do I need to use to notice it?