adafruit / Adafruit_CircuitPython_Display_Text

Library to display text using displayio
MIT License
57 stars 38 forks source link

label.Label padding is wrong when using DWR or UPR #185

Closed Neradoc closed 1 year ago

Neradoc commented 1 year ago

When using DWR or UPR label_direction, the label's background is displayed incorrectly. I don't know what the intention is, if the padding should follow the rotation (top becoming right), or not, but that's not what is going on here anyway. It seems that only the background box position is wrong, not the label's position.

In this example each label.Label is in color, uses the "DWR" direction, with a single padding value not set to 0 as indicated by the text of the label. The appearance I would expect (if the padding matches the rotation) is shown behind it in gray, generated with a fixed bitmap_label.Label using the same parameters.

# setup the display (this was tested on a CPB with TFT gizmo)
# display = ...

from adafruit_display_text import label, bitmap_label
import time
import displayio
import terminalio
import vectorio

# Make the display context
splash = displayio.Group(x=1, y=1, scale=3)
display.show(splash)
display.auto_refresh = False

color_palette = displayio.Palette(3)
color_palette[0] = 0x008000  # Bright Green
color_palette[1] = 0x808080 # 0xAA0088
color_palette[2] = 0x000022

lines = displayio.Group()
for num in range(21):
    y = 10 * num
    if num % 5 == 0:
        COLOR = 0
    else:
        COLOR = 1
    lines.append(vectorio.Rectangle(pixel_shader=color_palette,
        width=display.width, height=1, x=0, y=y, color_index=COLOR,
    ))
    lines.append(vectorio.Rectangle(pixel_shader=color_palette,
        width=1, height=display.height, x=y, y=0, color_index=COLOR,
    ))

TEXT = "AB"
DIRECTION = "LTR" # LTR / RTL / UPR / DWR
RED = 0xFF0000

text_group = displayio.Group(scale=1, x=0, y=0)

def add_text(border=0, x=0, y=0, anchor=(0,0), scale=1,
             direction="LTR", color=RED, text=TEXT,
        ):
    position = (x, y)
    if isinstance(border, int):
        border = (border, border, border, border)
    text_area1 = bitmap_label.Label(
        terminalio.FONT, text=text, color=0xFFFFFF,
        anchor_point=anchor,
        anchored_position=position,
        padding_top = border[0],
        padding_bottom = border[1],
        padding_left = border[2],
        padding_right = border[3],
        background_color = 0x606060,
        scale = scale,
        label_direction=direction,
    )
    text_area2 = label.Label(
        terminalio.FONT, text=text, color=0xFFFFFF,
        anchor_point=anchor,
        anchored_position=position,
        padding_top = border[0],
        padding_bottom = border[1],
        padding_left = border[2],
        padding_right = border[3],
        background_color = color, # 0x606060,
        scale = scale,
        label_direction=direction,
    )
    text_group.append(text_area1)
    text_group.append(text_area2)

add_text(border=(5,0,0,0), x=10, y=10, direction="DWR", text="TOP")
add_text(border=(0,5,0,0), x=10, y=50, direction="DWR", text="BTM", color=0x0000FF)
add_text(border=(0,0,5,0), x=50, y=10, direction="DWR", text="LFT", color=0x008000)
add_text(border=(0,0,0,5), x=50, y=50, direction="DWR", text="RGT", color=0xA08000)

splash.append(text_group)
splash.append(lines)
display.refresh()

while True:
    pass

paddings-with-label-and-back

jposada202020 commented 1 year ago

Thanks :) One thing, I have different results for LFT and BTM in a pyportal titano with the script above image

will take a look

Neradoc commented 1 year ago

Ah yes, that's because the gray boxes (the "correct" way) were generated with the bitmap_label from #186 Otherwise with the current I get the same as you, where half of the gray boxes are wrong too. Sorry for the confusion.

jposada202020 commented 1 year ago

Neradoc, one last question, are you going to submit a PR for the padding. My memory is not that good, so I do not remember if the padding was supposed to follow the normal direction or the text direction. Not sure what is doing now, but I guess is better that follow the direction of the text before the change, as is more intuitive. What do you think?

Neradoc commented 1 year ago

I'll have to look deeper into the code to understand how to fix the padding on label, and maybe get what the original intention was, maybe it was intended to not follow the rotation, but top/bottom were swapped and left/right not distinguished. I don't know what the best choice would be. A quick search in the learn guide repo doesn't seem to find any code using "DWR" or "UPR".

I feel like there's a point in having the margins turn with the text, since changing the orientation would then not change the look of the label. Since the position of the anchor point is not affected by the margins, It might be more intuitive to think of them as relative to the text, as they don't relate to anything else. On the other end, it might make more sense to have the parameter be absolute up down left right positions because of their name and when writing it directly rather than thinking of it as a "turned" label.

The bitmap_label currently (before and after #186) has the padding relative to the text, but that could be changed too of course.

Also I didn't look at UPD or TTB yet, my main concern was to ensure that switching between label and bitmap_label would not change the look of the label.

jposada202020 commented 1 year ago

No worries, :) just wanted to check with you first, I did not want to do something if you have already figured it out. I will see what is in the library regarding where is down. But if I will be down to leave down, down :)