gavin/labelmaker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'trunk' of https://gitea.mcmorgans.us/gavin/labelmaker into trunk

Browse Source
This commit is contained in:
Gavin McDonald
2025-05-18 15:07:53 -04:00
parent 2ec13ee7df 3c94685d1e
commit 009235065a
6 changed files with 60 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
README.md
View File

@@ -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.

2
lib/labelmaker_web/components/layouts/app.html.heex
View File

@@ -25,7 +25,7 @@
</div>
</div>
</header>
<main class="px-4 py-20 sm:px-6 lg:px-8">
<main class="px-4 py-10 sm:px-6 lg:px-8">
<div class="mx-auto max-w-2xl">
<.flash_group flash={@flash} />
{@inner_content}

9
lib/labelmaker_web/components/layouts/root.html.heex
View File

@@ -12,16 +12,21 @@
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
<link rel="shortcut icon" href="/images/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png" />
<meta name="theme-color" content="#6495ED" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Labelmaker" />
<meta name="apple-mobile-web-app-status-bar-style" content="translucent-black" />
<meta property="og:title" content="Labelmaker" />
<meta
property="og:description"
content="Easily create text images via URL for Tabletop Simulator"
/>
<meta property="og:url" content="https://labelmaker.xyz" />
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image" content="https://labelmaker.xyz/labelmaker_1200x630.png" />
<meta property="og:image" content="https://labelmaker.xyz/images/ukraine_1200x630.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Labelmaker" />
<meta
@@ -31,7 +36,7 @@
<meta name="twitter:image:type" content="image/png" />
<meta name="twitter:image:width" content="1024" />
<meta name="twitter:image:height" content="512" />
<meta name="twitter:image" content="https://labelmaker.xyz/labelmaker_1024x512.png" />
<meta name="twitter:image" content="https://labelmaker.xyz/images/ukraine_1024x512.png" />
<link rel="manifest" href="/site.webmanifest" />
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>

7
lib/labelmaker_web/live/home.ex
View File

@@ -55,8 +55,11 @@ defmodule LabelmakerWeb.Home do
)
~H"""
<div class="max-w-xl mx-auto p-4 space-y-6">
<h1 class="text-2xl font-bold text-center">Labelmaker</h1>
<div class="max-w-xl mx-auto p-3 space-y-5">
<h1 class="text-5xl font-bold text-center text-primary">Labelmaker</h1>
<p class="text-l text-center w-[350px] m-auto">
Easily create text-based images. Perfect for quickly creating decals in Tabletop Simulator.
</p>
<div
class={

BIN
priv/static/images/ukraine_1024x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 467 KiB

BIN
priv/static/images/ukraine_1200x630.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 679 KiB