Flipdot UI

A component library for building user interfaces with flipdot displays.

This library provides a set of reusable components and utilities to easily create the black-and-white pixel style UI commonly seen on flipdot displays. It features components for text, color blocks, pixel maps, and layout elements that all align to the pixel grid and provide an easy way to define your UI. The library also features a React component that renders a flipdot display to a canvas for easy prototyping without needing the physical hardware.

Components

The library includes the following components:

• Rect: A simple filled rectangle
• Border: A border around a rectangle
• Text: Text rendering with a pixel font
• PixelMap: A component to render a pixel map from a 2D array of booleans
• PixelDrawer: Takes a callback that lets you draw pixels directly
• Row and Column: Layout components for arranging children in rows or columns that allow relative sizing and gaps
• Padding: A component to add padding around its children
• Stack: Renders children on top of each other
• Empty: Does nothing, useful for drawing empty spaces or rectangles with nothing inside

Components are drawn outside-in, meaning that parent components are drawn first, and then children are drawn on top. This allows for easy layering of components. This also means that layout is not dynamic, as parent components cannot adjust their size based on their children. For example, Row and Column do not adjust their size based on their children, but instead rely on predefined relative sizes. Child components receive a subsection of the parent's area to draw in. This allows for easy composition of components to create complex UIs.

Other Features

• FlipdotCanvas: A React component that renders a flipdot display to a canvas for easy prototyping without needing the physical hardware.
• render: A function that takes a component and renders it to a CanvasRenderingContext2D.
• newFont: Loads and configures a font for use with the Text component. Automatically handles browser contexts, and needs a callback for usage in server-side environments.

Example Usage

import {useState} from 'react';
import {Column, FlipdotCanvas, newFont, Padding, Rect, Stack, Text} from 'flipdot-ui';

const font = await newFont('name-of-font', 5, 'path/to/font.otf');

export default function App() {
    const [votesA, setVotesA] = useState(0)
    const [votesB, setVotesB] = useState(0)
    const value = (votesA) / Math.max(1, votesA + votesB) * 100

    return (<>
        <FlipdotCanvas style={{margin: 150, scale: "1000%", imageRendering: "pixelated"}} width={84} height={28}>{
            Column({spacing: [1, 2, 1]},
                Text({font, xAlign: "center", yAlign: "middle"}, "use mayonnaise shampoo"),
                Stack(
                    Padding([Math.round(value / 7), 0, 0, 0], Rect({}, Empty)),
                    Padding([5, 35], Text({font, outline: 1}, "OR")),
                    Padding([1, 2], Text({font, outline: 1, xAlign: "left", yAlign: "top"}, votesA.toString())),
                    Padding([1, 2], Text({font, outline: 1, xAlign: "right", yAlign: "bottom"}, votesB.toString())),
                ),
                Rect({}, Text({font, xAlign: "center", yAlign: "middle", invert: true}, "jump while talking")),
            )
        }</FlipdotCanvas>
        <div className="buttons-div">
            <button onClick={() => setVotesA(votesA + 1)}>A</button>
            <button onClick={() => setVotesB(votesB + 1)}>B</button>
        </div>
    </>);
}