Updated README with info on current widgets

This commit is contained in:
nedko 2025-12-12 15:02:56 +02:00
parent 908ddeba44
commit d0f538224b

View File

@ -17,3 +17,71 @@ A utility which can be used to create custom images for TRMNL devices via code
# Notes # Notes
json.hpp from nlohmann/json v3.11.2 json.hpp from nlohmann/json v3.11.2
# List of special types
### TextFit
Controls automatic change the text size depending on contents. **String** type. Has several options:
* none - Text is not changed in any way
* shrink - Renders text with desired size and shrinks it to fit if contents are too large
* auto - Renders text with desired size and enlarges/shrinks it to fit if contents are too small/large
### HAlign
Controls horizontal alignment of elements. **String** type. Has several options:
* left - Align objects to the left
* center - Align objects to be centered
* right - Align objects to the right
### HAlign
Controls vertical alignment of elements. **String** type. Has several options:
* top - Align objects to the top
* center - Align objects to be centered
* bottom - Align objects to the bottom
### color
* **Object** type
* Components - Red, Green, Blue, Alpha
* Each component ranges 0-255
* When Alpha is 255 - the color is fully opaque. When it is 0 - fully transparent.
* Has the structure shown below:
```
"color": {
"r": 0,
"g": 0,
"b": 0,
"a": 255
}
```
**NOTE**: If only some components are present in the config then only the present ones are overwritten from the default.
# List of Widgets and their parameters
### text
Renders text within a specified box
| Name | Type | Required | Default | Description |
| ---: | :--: | :------: | ------: | :---------- |
| x | int | | 0 | Horizontal position in pixels (from left to right) |
| y | int | | 0 | Vertical position in pixels (from top to bottom) |
| width | int | REQ | | Max width in pixels |
| height | int | REQ | | Max height in pixels |
| text | string | | | The text to be shown |
| fit | TextFit | | none | Controls automatic change the text size depending on contents |
| should_wrap | boolean | | false | Whether the text should automatically wrap |
| halign | HAlign | | center | Horizontal alignment of text |
| valign | VAlign | | center | Vertical alignment of text |
| halign_via_visible | boolean | | true | Whether to use visible pixels of the text for horizontal alignment. If false - uses text renderer hints |
| valign_via_visible | boolean | | true | Whether to use visible pixels of the text for vertical alignment. If false - uses text renderer hints |
| color | color | | 0, 0, 0, 255 (BLACK) | Color to use for text rendering |
| size | int | REQ | | Desired size of the text to use |
| font | string | | Global font key | Font file to use when rendering the text |
### rect
Renders a rectangle with optional rounded corners using either fill or internal stroke.
| Name | Type | Required | Default | Description |
| ---: | :--: | :------: | ------: | :---------- |
| x | int | | 0 | Horizontal position in pixels (from left to right) |
| y | int | | 0 | Vertical position in pixels (from top to bottom) |
| width | int | REQ | | Width in pixels |
| height | int | REQ | | Height in pixels |
| radius | int | | 0 | Corner rounding radius in pixels |
| stroke | int | | -1 | Internal stroke size in pixels. If <= 0 then the rectangle will be filled with the desired color |
| color | color | | 0, 0, 0, 255 (BLACK) | Color to use for rectangle |