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

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.

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

VAlign

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

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

List of Widgets and their parameters

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

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
size	int	REQ		Desired size of the text to use
font	string		Global font key	Font file to use when rendering the text
color	color		0, 0, 0, 255 (BLACK)	Color to use for text rendering
should_wrap	boolean		false	Whether the text should automatically wrap
fit	TextFit		none	Controls automatic change the text size depending on contents
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