Skip to content

Latest commit

 

History

History
82 lines (65 loc) · 2.74 KB

README.md

File metadata and controls

82 lines (65 loc) · 2.74 KB

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

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

static const uint8_t data[] =
{
    0x00, 0x18, 0x3C, 0x66, /* ... */
};
..##....
.####...
##..##..
... (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):
# 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.

License

MIT © Stefan Gordon. See LICENSE for details.