88 lines
3.9 KiB
Markdown
88 lines
3.9 KiB
Markdown
# What is this
|
|
A utility which can be used to create custom images for TRMNL devices via code
|
|
|
|
# How to write new visual stuff
|
|
1. Inherit from `Widget` and then do your magic inside your own class.
|
|
2. Add your widget builder in `main.cpp` inside `init_builders`.
|
|
3. Write your config file. Either named `config.json` or added as the first command line parameter.
|
|
4. ???
|
|
5. Profit
|
|
|
|
# ImageMagick commands
|
|
### Convert image without dithering
|
|
`convert trmnl.png -monochrome -colors 2 -depth 1 -strip png:output.png`
|
|
|
|
### Convert image with dithering
|
|
`convert trmnl.png -dither FloydSteinberg -remap pattern:gray50 -depth 1 -strip png:output.png`
|
|
|
|
# Notes
|
|
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 |
|