dotmatrixtool

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #claude-code #codex #cli #developer-tools #react #windows

★ 67 Open GitHub ↗

A web application for generating character or image byte arrays for dot matrix style OLED or LCD displays.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## Dot Matrix Tool

Generate character or image byte arrays for monochrome dot‑matrix OLED/LCD displays directly in the browser. Draw on a pixel grid, choose byte ordering and endianness, and export in multiple formats ready to paste into firmware.

### Live demo
[dotmatrixtool.com](http://dotmatrixtool.com)

## Features
- **Interactive pixel editor**: Left‑click to draw, right‑click (or Ctrl+Left) to erase; click‑and‑drag supported.
- **Adjustable canvas**: Width options `4, 6, 8, 16, 24, 32`; Height options `8, 16, 24, 32`.
- **Layout control**:
  - **Byte order**: Row‑major or Column‑major.
  - **Endianness**: Big‑endian (MSB first) or Little‑endian (LSB first).
- **Multiple output formats**:
  - **C/C++**: `static const uint8_t data[] = { ... }` with hex bytes.
  - **Binary**: `0bxxxxxxxx` byte literals.
  - **ASCII art**: Human‑readable `#` and `.` grid.
- **Copy to clipboard**: One click to copy generated output.
- **Pretty printing**: Syntax‑highlighted C output for easy reading.
- **Persistent settings**: Remembers last used size, format, and options via `localStorage`.

## How it works (at a glance)
The grid you draw populates an internal matrix. Depending on the selected options:
- **Row‑major** packs pixels left→right, top→bottom.
- **Column‑major** packs pixels top→bottom by columns (paged in 8‑pixel tall groups typical of many controllers).
- **Endianness** selects whether the first bit written into each byte is MSB or LSB.

## Usage
1. Open the app (link above) or run it locally (see below).
2. **Draw**: Left‑click to toggle pixels on; right‑click or Ctrl+Left to turn them off. Drag to paint.
3. **Set size**: Choose Width and Height from the dropdowns.
4. **Choose layout**: Select Byte Order (Row/Column) and Endian (Big/Little) to match your display/driver.
5. **Pick format**: C/C++, Binary, or ASCII.
6. **Copy**: Click Copy to put the output on your clipboard.

### Example outputs
```c
static const uint8_t data[] =
{
    0x00, 0x18, 0x3C, 0x66, /* ... */
};
```

```text
..##....
.####...
##..##..
... (ASCII art continues)
```

## Running locally
This is a static site—no build step required.

- **Open the file directly**: Double‑click `index.html`.
- **Or serve locally** (recommended for best clipboard behavior):

```bash
# Python 3
python -m http.server 8000

# Node.js (one option)
npx serve -l 8000
```

Then visit `http://localhost:8000`.

## Development
The app is just three files:
- `index.html` – markup and UI
- `app.js` – interaction, state, and exporters
- `cover.css` – styling

Libraries (via CDN):
- **jQuery** `3.7.1`
- **Bootstrap** `3.4.1`
- **Google Code Prettify** (loader)

There is no build tooling; edit and refresh.

dotmatrixtool

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README