OLED matrix

Text as lit pixels on a 5 x 7 dot-matrix screen, drawn on one canvas. It is the hero bar on binbot.fun, and it works anywhere a box has a size: a status line, a banner, a figure that should feel like it comes from the machine. Drawn once, redrawn only on resize.

The hero bar

Two matrices share one pitch (fit) and sit flush to the visor (align). The question is the quiet look, the answer the hot one.

The black look

The same pixels on visor-black glass (the look on binbot.fun): add is-black to the screen and use OLED_AMBER_BLACK / OLED_AMBER_HOT_BLACK, which swap the unlit grid to grey.

Colours on the black glass

hot-black BINBOT's voice

mint in range, paid, kept

coral out of range, tension

violet the brand moment

Colour carries meaning, never decoration: the problem in coral, BINBOT's answer in amber is the tension and its release. One colour per message; ice is the neutral. Presets: OLED_MINT, OLED_CORAL, OLED_VIOLET, OLED_ICE.

Pixel size

pixel: 6

pixel: 5

pixel: 4

pixel: 3

A number always draws at that pitch. Leave it out ('auto') and the largest of sizes that fits the box is used.

Lit and unlit

OLED_AMBER a quiet line

OLED_AMBER_HOT the answer

unlit: 'none', glowSize: 0 pixels only

In the product

Sample
Sample

Any figure that is not live carries the SAMPLE tag. The font has A to Z, 0 to 9 and . , : ; ! ? ' " - _ + = / % $ & # * ( ) < > and the four arrows; anything else draws as a blank cell.

When it is too small

A box too small for a readable matrix keeps the unlit grid and sets the words as type in the pixel colour (data-fallback="1"). fallback chooses how the words break; size the type with --oled-type-size and --oled-type-font.

// 1. the file and its stylesheet
import { mountOledMatrix, OLED_AMBER_HOT } from './oled-matrix.js'
import './oled-matrix.css'

// 2. any box with a size
const m = mountOledMatrix(box, {
  ...OLED_AMBER_HOT,
  lines: ['IN RANGE', 'FEES +0.42 SOL'],
  pixel: 5,
})
m.update({ lines: ['OUT OF RANGE'] })
m.destroy()

Options

linesOne string per row of the screen, left-aligned inside the block. Upper-cased for you.
pixelPitch of one lit pixel in CSS px, or 'auto' (default) to fit the box from sizes ([6, 5, 4, 3]), measured on fit (default lines) less margin ([6, 6]).
align'start' (default) or 'end': the edge the block sits flush to.
color, glow, glowSizeA lit pixel, the light it bleeds into the glass, and that bleed in pixels of pitch (0 is off).
unlit, dotAn unlit pixel, or 'none' to hide the grid; the radius of an unlit pixel as a share of the pitch (0.36).
fallbackThe words as type when 'auto' finds no size that fits. Default lines.