From 1a2665aa863c7c0bbb735a4b6b2585416ca7450c Mon Sep 17 00:00:00 2001 From: gabriel Date: Sun, 30 Aug 2026 21:16:00 +0200 Subject: [PATCH] docs: add anchor example screenshot to README Rename the Anchors section to `anchor` so the screenshot generator picks it up, add a crosshair-based nine-anchor demo config, and update the pivot link. --- README.md | 30 ++++++++++++++++++++++++++++-- docs/screenshots/anchor.png | Bin 0 -> 1045 bytes 2 files changed, 28 insertions(+), 2 deletions(-) create mode 100644 docs/screenshots/anchor.png diff --git a/README.md b/README.md index 11c435b..1b39ed5 100644 --- a/README.md +++ b/README.md @@ -128,7 +128,7 @@ Coordinates accept either absolute integers (`10`, `256`) or percentage strings When `y` is omitted, elements stack automatically: each element is placed below the previous one using `pos_y + y_padding` (default padding: 10px). -### Anchors +### `anchor` Used by `text`, `icon`, and `icon_sequence` to set which point of the element aligns to the given `x`/`y` coordinates, and by `pivot` (see [rotation](#rotation)/[mirror](#mirror)) to set the transform origin. @@ -148,6 +148,32 @@ All of them use the PIL anchor format — horizontal axis first, then vertical: `icon` and `icon_sequence` default to `la` (left-ascender) rather than `lt`; otherwise the codes are identical. +Each label below is drawn with its own anchor code at a crosshair; the intersection of the two gray lines is the `x`/`y` coordinate the text is anchored to: + +```yaml +[ + # Illustration only — crosshairs marking the nine x/y coordinates: + {"type": "line", "x_start": 0, "x_end": 296, "y_start": 30, "fill": "gray"}, + {"type": "line", "x_start": 0, "x_end": 296, "y_start": 64, "fill": "gray"}, + {"type": "line", "x_start": 0, "x_end": 296, "y_start": 98, "fill": "gray"}, + {"type": "line", "x_start": 55, "x_end": 55, "y_start": 0, "y_end": 128, "fill": "gray"}, + {"type": "line", "x_start": 148, "x_end": 148, "y_start": 0, "y_end": 128, "fill": "gray"}, + {"type": "line", "x_start": 241, "x_end": 241, "y_start": 0, "y_end": 128, "fill": "gray"}, + + {"type": "text", "value": "lt", "x": 55, "y": 30, "size": 18, "anchor": "lt"}, + {"type": "text", "value": "mt", "x": 148, "y": 30, "size": 18, "anchor": "mt"}, + {"type": "text", "value": "rt", "x": 241, "y": 30, "size": 18, "anchor": "rt"}, + {"type": "text", "value": "lm", "x": 55, "y": 64, "size": 18, "anchor": "lm"}, + {"type": "text", "value": "mm", "x": 148, "y": 64, "size": 18, "anchor": "mm"}, + {"type": "text", "value": "rm", "x": 241, "y": 64, "size": 18, "anchor": "rm"}, + {"type": "text", "value": "lb", "x": 55, "y": 98, "size": 18, "anchor": "lb"}, + {"type": "text", "value": "mb", "x": 148, "y": 98, "size": 18, "anchor": "mb"}, + {"type": "text", "value": "rb", "x": 241, "y": 98, "size": 18, "anchor": "rb"} +] +``` + +![anchor example](https://raw.githubusercontent.com/OpenDisplay/odl-renderer/main/docs/screenshots/anchor.png) + ### The `visible` field Every element type accepts an optional `visible` field. When falsy, the element is skipped entirely (no rendering, no position update). Defaults to `true`. @@ -171,7 +197,7 @@ Every element type accepts an optional `rotation` (degrees, **positive = clockwi | Field | Required | Default | Notes | |------------|----------|------------------|------------------------------------------------------------------------------------| | `rotation` | no | `0` | Degrees, positive = clockwise | -| `pivot` | no | `"mm"` (center) | [Anchor](#anchors) keyword relative to the element (e.g. `lt`, `mm`, `rb`), **or** `[x, y]` canvas coords (percentages allowed, e.g. `["50%", "50%"]`) | +| `pivot` | no | `"mm"` (center) | [Anchor](#anchor) keyword relative to the element (e.g. `lt`, `mm`, `rb`), **or** `[x, y]` canvas coords (percentages allowed, e.g. `["50%", "50%"]`) | > Not to be confused with the `image`/`dlimg`-only `rotate` field, which rotates the *source image before fitting it to the box*. Use `rotation` to tilt any rendered element on the canvas. diff --git a/docs/screenshots/anchor.png b/docs/screenshots/anchor.png new file mode 100644 index 0000000000000000000000000000000000000000..9864d778ac99da5b00e1267af5632d4c95b588d9 GIT binary patch literal 1045 zcmeAS@N?(olHy`uVBq!ia0y~yVAKM#n>g5jsAUJbP&1~_n}%SSbBT(&I#IVZhEoTdu1Iq*gx$rl=0vFrS|`8d*|%# zGpTlRGY*CaGO7fJIM}$d9-$$%yCl~9TkZY1H@{Z>{q^I`>sjZD75ArapZW33uYK~T zt?o@*dF%0>d6m6q;xC78ySequ{n*Is`}wa+`|gZ6<@dclb@t4{`Ai*-Br`(e_3p_+SW{V^7F#T?Pm^_$OUyR53}=5{=BzkZ@u{U zpFOqoBSpD!t>TYmnfNMY_9pT09L`(9h#`84UW-C41#S1!HnxSkgnbL?DH*!_u} zHQPT=zHAk|UpD{cK9g&Q_Fn4;s=jS`Vx?c;*=4$)doyz1oB>2cPkrDd|$@r{={TXMYYZ`MFlBppYEP>^!t5tG1DVWErofDh^69$w^z>G ze=_;4VVz!m$~TT`Sc04U@?=ToU7PN$HF9VDu6?aZ-R2V*dao-c@$KpK%r{kg!_3Sh z-=B3!@Y&F(iBM_Imp^naxHN#S(1~lO3O>o6V`P)^Fz`ExL(M7zmZ+FL&krc`MJfAo?SJ0o$FX UBODSRf!UqG)78&qol`;+03;gtQ2+n{ literal 0 HcmV?d00001