adafruit / Adafruit_CircuitPython_Display_Text

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

Fix width/height properties #206

Closed SamantazFox closed 4 months ago

SamantazFox commented 5 months ago

When I was trying to align other elements relative to the label, I found out that the width and height properties were out of the place in comparison to the actual bounding box.

To better illustrate that, I wrote a small function that draws the bounding box of the label, to better visualize the problem.


Before/after comparison on a 2.2" TFT display

![Before](https://github.com/adafruit/Adafruit_CircuitPython_Display_Text/assets/52980486/5adac8c4-6a46-4c24-af6b-293a25f72823) ![After](https://github.com/adafruit/Adafruit_CircuitPython_Display_Text/assets/52980486/47ae94fd-5a08-464f-b858-5cbf8aea56c7)

Code used for the demo

```python import board import terminalio import displayio import adafruit_ili9341 from adafruit_display_text import bitmap_label, label from adafruit_display_shapes.line import Line displayio.release_displays() display_bus = displayio.FourWire( board.SPI(), command=board.D10, reset=board.D11, chip_select=board.D12 ) display = adafruit_ili9341.ILI9341(display_bus, width=240, height=320, rotation=270) grid = displayio.Group() for x in range(0, 240, 10): grid.append(Line(x, 0, x, 320, color=0x404040)) for y in range(0, 320, 10): grid.append(Line(0, y, 240, y, color=0x404040)) test_grp = displayio.Group(scale=3) def add_bb_visualizer(group, txt_area): if txt_area._base_alignment: y_off = 0 else: y_off = txt_area.height // 2 x1 = txt_area.x y1 = txt_area.y + y_off x2 = x1 + txt_area.width y2 = y1 - txt_area.height # Bounding box group.append(Line(x1, y1, x2, y1, color=0x00FFFF)) group.append(Line(x2, y1, x2, y2, color=0xFFFF00)) group.append(Line(x2, y2, x1, y2, color=0xFF00FF)) group.append(Line(x1, y2, x1, y1, color=0x00FF00)) # Cross for anchor point x0 = txt_area.x y0 = txt_area.y group.append(Line(x0-2, y0-2, x0+2, y0+2, color=0xFF0000)) group.append(Line(x0-2, y0+2, x0+2, y0-2, color=0xFF0000)) common_kwargs = { 'text': 'Hello `y', 'color': 0xFFFFFF, 'background_color': 0x123456, #'base_alignment': False, 'background_tight': True, # 'anchor_point': (0,0), # 'anchored_position': (0,0), 'padding_left': 10 } # Regular label text_area1a = label.Label(terminalio.FONT, x = 10, y = 20, base_alignment=False, **common_kwargs) test_grp.append(text_area1a) add_bb_visualizer(test_grp, text_area1a) text_area1b = label.Label(terminalio.FONT, x = 10, y = 60, base_alignment=True, **common_kwargs) test_grp.append(text_area1b) add_bb_visualizer(test_grp, text_area1b) root_grp = displayio.Group() root_grp.append(grid) root_grp.append(test_grp) display.root_group = root_grp while True: pass ```

SamantazFox commented 4 months ago

If you're interested / willing to submit your test code as a new example in this repo, it'd be great to have it included in the examples/ dir. It makes a nice visual illustration of how the base_alignment works, it could potentially be adapted for anchor_point / anchored_position as well.

Sure thing!