# BitPlate Designer

> Pixel art editor for BitPlate, a pin-art faceplate for the Steam Machine. The display is a fixed grid of 21 columns x 17 rows. Each cell is empty or holds one colored pin.

Agents can create a design by building a URL. Opening it loads the design into the editor, where the user can edit, save, share or order pins. No API key or backend call is needed.

## URL format

https://design.getbitplate.com/#n=<name>&g=<grid>

- `g` (required): 17 rows separated by `/`. Each row is 21 characters, left to right. Row 1 is the top.
- `.` is an empty cell. Every other character is a color key from the table below.
- `n` (optional): the design name, URL-encoded (e.g. `Red%20Heart`).
- `c` (optional): custom colors as comma-separated `KEY:RRGGBB` pairs, e.g. `c=1:FF8800,2:334455`. Keys are single letters or digits and override the built-in keys. Prefer built-in keys, since only those exist as real pins you can buy.

Keys are case-sensitive. Short rows are padded with empty cells, and extra rows or columns are ignored. Still, aim for exactly 17 rows of 21 characters.

## Built-in pin colors

Uppercase letters are solid pins. A lowercase letter is the translucent version of the same color.

| Key | Color | Hex |
|-----|-------|-----|
| W | Pure White | FFFFFF |
| H | Shell Pink | FADADD |
| A | Ash Gray | B8B8B8 |
| S | Steel Gray | 6B6B6B |
| K | Carbon Black | 000000 |
| R | Signal Red | FF0000 |
| P | Pixel Pink | F472B6 |
| O | Ember Orange | FF6600 |
| Y | Pixel Yellow | FFFF00 |
| D | Sandstone | DEC9A0 |
| C | Cedar Brown | A8875A |
| T | Bark Brown | 7A4A20 |
| V | Volt Green | 00FF00 |
| G | Matrix Green | 2A8C3F |
| M | Camo Green | 4B5320 |
| L | Sky Blue | 87CEEB |
| B | Steam Blue | 1A9FFF |
| N | Midnight Blue | 1A2A6C |
| U | Plasma Purple | 7B3FA0 |
| w | Translucent Clear | E8F0F5 |
| r | Translucent Red | FF3333 |
| y | Translucent Yellow | FFD700 |
| b | Translucent Blue | 33AAFF |
| u | Translucent Purple | 9933FF |
| F | Glow-in-the-Dark | C8FF80 |
| Z | Metallic Silver | C0C0C0 |
| J | Metallic Gold | D4AF37 |

## Example

A red heart with a black outline:

```
.....................
.....................
.....................
....KKKK.....KKKK....
...KRRRRK...KRRRRK...
..KRRWWRRK.KRRRRRRK..
..KRWWRRRRKRRRRRRRK..
..KRWRRRRRRRRRRRRRK..
..KRRRRRRRRRRRRRRRK..
...KRRRRRRRRRRRRRK...
....KRRRRRRRRRRRK....
.....KRRRRRRRRRK.....
......KRRRRRRRK......
.......KRRRRRK.......
........KRRRK........
.........KRK.........
..........K..........
```

As a URL:

https://design.getbitplate.com/#n=Red%20Heart&g=...................../...................../...................../....KKKK.....KKKK..../...KRRRRK...KRRRRK.../..KRRWWRRK.KRRRRRRK../..KRWWRRRRKRRRRRRRK../..KRWRRRRRRRRRRRRRK../..KRRRRRRRRRRRRRRRK../...KRRRRRRRRRRRRRK.../....KRRRRRRRRRRRK..../.....KRRRRRRRRRK...../......KRRRRRRRK....../.......KRRRRRK......./........KRRRK......../.........KRK........./..........K..........

## Tips

- Draw the grid as a 17-line block first and check that every line has 21 characters. Then join the lines with `/`.
- The grid is small. Use bold shapes, outlines in `K`, and few colors.
- Wide content should stay centered horizontally (column 11 is the center).