diff --git a/README.md b/README.md index 12c33b2..0fab95d 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ # Labelmaker -[Labelmaker](https://labelmaker.xyz) is a simple web tool for generating text-based images, perfect for creating decals in [Tabletop Simulator](https://www.tabletopsimulator.com/). Just append your desired text to the URL and Labelmaker will return an image, no design tools required. +[Labelmaker](https://labelmaker.xyz) is a simple web tool for generating text-based images, perfect for creating [decals](https://kb.tabletopsimulator.com/game-tools/decal-tool/) in [Tabletop Simulator](https://www.tabletopsimulator.com/). Just append your desired text to the `labelmaker.xyz/` and Labelmaker will return an image, no design tools required! A few options are available via query string parameters: font, color, outline, and size. The homepage offers a form to make things a bit easier. + +![Risky business](/priv/static/images/ukraine_1024x512.png) ## ✨ Features @@ -15,7 +17,7 @@ [https://labelmaker.xyz/Hello World](https://labelmaker.xyz/Hello%20World) -Generates an image of "Hello World" in the default style. +(I'm actually cheating here and appended `?outline=white` so that the image is visible on dark backgrounds) ![Hello World](https://labelmaker.xyz/Hello%20World?outline=white) @@ -23,42 +25,27 @@ Generates an image of "Hello World" in the default style. [https://labelmaker.xyz/Hello?color=yellow](https://labelmaker.xyz/Hello?color=yellow) -Renders "Hello" in yellow text. - ![Yellow Hello](https://labelmaker.xyz/Hello?color=yellow) ### Add Outline [https://labelmaker.xyz/Hello?color=yellow&outline=black](https://labelmaker.xyz/Hello?color=yellow&outline=black) -Renders "Hello" in yellow with a black outline, perfect for contrast on similar backgrounds. - ![Outlined yellow Hello](https://labelmaker.xyz/Hello?color=yellow&outline=black) ### Customize Font and Size -[https://labelmaker.xyz/Courier?font=Courier&size=96&color=CornFlowerBlue&outline=white](https://labelmaker.xyz/Courier?font=Courier&size=96&color=CornFlowerBlue&outline=white) +[https://labelmaker.xyz/Comic Sans?font=cs&size=96&color=orange&outline=blue](https://labelmaker.xyz/Comic%20Sans?font=cs&size=96&color=orange&outline=blue) -Uses the `Courier` font at 96px size. - -![CornflowerBlue Courier](https://labelmaker.xyz/Courier?font=Courier&size=72&color=CornflowerBlue&outline=white) +![Comic Sans](https://labelmaker.xyz/Comic%20Sans?font=cs&size=96&color=orange&outline=blue) ### Multiple Lines -[https://labelmaker.xyz/Multiple\nLines?font=DejaVu-Sans-Oblique&color=orange](https://labelmaker.xyz/Multiple\nLines?font=DejaVu-Sans-Oblique&color=orange) +[https://labelmaker.xyz/Multiple\nLines?font=Impact&color=orange](https://labelmaker.xyz/Multiple\nLines?font=Impact&color=orange) Use `\n` to insert line breaks. -![Multiple\nLines](https://labelmaker.xyz/Multiple\nLines?font=DejaVu-Sans-Oblique&size=72&color=orange) - -## ⚙️ Query Parameters - -| Parameter | Description | Example Value | -| --------- | ------------------- | ----------------------- | -| `color` | Text color | `red`, `CornFlowerBlue` | -| `outline` | Outline color | `black`, `white` | -| `font` | Font name | `Courier`, `Helvetica` | -| `size` | Font size in pixels | `24`, `48` | +![Multiple\nLines](https://labelmaker.xyz/Multiple\nLines?font=Impact&size=72&color=orange) ## 🧪 Try It Live @@ -68,6 +55,45 @@ Visit the [Labelmaker homepage](https://labelmaker.xyz/) to: - Test out combinations - Copy generated URLs for use in Tabletop Simulator or elsewhere +## ⚙️ Query Parameters + +| Parameter | Description | Values | +| --------- | ------------------- | ----------------- | +| `color` | Text color | `black` | +| | | `blue` | +| | | `brown` | +| | | `gray` | +| | | `green` | +| | | `orange` | +| | | `pink` | +| | | `purple` | +| | | `red` | +| | | `white` | +| | | `yellow` | +| `outline` | Outline color | `none` | +| | | `blue` | +| | | `brown` | +| | | `gray` | +| | | `green` | +| | | `orange` | +| | | `pink` | +| | | `purple` | +| | | `red` | +| | | `white` | +| | | `yellow` | +| `font` | Font name | `Comic Sans (cs)` | +| | | `Courier (cr)` | +| | | `Georgia (g)` | +| | | `Helvetica (h)` | +| | | `Impact (i)` | +| | | `Verdana (v)` | +| `size` | Font size in pixels | `16` | +| | | `24` | +| | | `32` | +| | | `...` | +| | | `120` | +| | | `128` | + ## 🧰 Development This project is powered by Elixir + Phoenix, employs ImageMagick to create the images, and uses Docker for deployment. diff --git a/lib/labelmaker_web/components/layouts/app.html.heex b/lib/labelmaker_web/components/layouts/app.html.heex index cbb3ae6..fa3cdb3 100644 --- a/lib/labelmaker_web/components/layouts/app.html.heex +++ b/lib/labelmaker_web/components/layouts/app.html.heex @@ -25,7 +25,7 @@ -
+
<.flash_group flash={@flash} /> {@inner_content} diff --git a/lib/labelmaker_web/components/layouts/root.html.heex b/lib/labelmaker_web/components/layouts/root.html.heex index adf51ff..af03279 100644 --- a/lib/labelmaker_web/components/layouts/root.html.heex +++ b/lib/labelmaker_web/components/layouts/root.html.heex @@ -12,16 +12,21 @@ + + + + + - + - +