Skip to the object
TACTILE UI

Map

A lit dot-matrix world map, made as a panel: a machined bezel round smoked glass, and behind it a grid of lamps. Land is dim unlit domes, the sea is empty glass. Places light as small clusters, packets step lamp to lamp along the great circle between them, and the glass zooms to a region with the same lamp pitch.

Everything you set here is what the Code and Prompt tabs give you.

Datasheet

Mechanism
Equal earth projection, Scanline land raster, Lamp atlas, Great circle packet, Lamp quantised path, Css bloom breathing, Region re rasterise, Roving marker buttons, Engraved plate, Sleeping loop, Room fixed sheen
Stack
Vanilla ES modules, Canvas 2D, CSS
Needs
Nothing — no dependencies
States
14 documented
Version
0.1.0
Licence
With a Pass

States

  1. IdleLand is a field of dim domes, the sea is empty glass, the places are lit clusters. Nothing runs and no frame is drawn.
  2. MarkersA place lights a cross of lamps with soft shoulders and a bloom behind the glass: green for ok, amber for degraded, red for down, cool white for neutral.
  3. DownA red place breathes slowly. The breathing is a CSS animation on its bloom, so it costs no frames.
  4. Routeroute or pulse sends a short lit packet along the great circle, snapped to the lamps, stepping one lamp at a time with a track that fades behind it. A ring of lamps spreads where it lands, and route-end fires. A route that leaves one edge of the glass comes back in at the other.
  5. SelectHover or focus shows an engraved plate with the place, its status and what it says; Enter or a click keeps it up with a ring of lamps round the place.
  6. KeyboardThe places are one tab stop. Arrow keys walk them west to east, Home and End go to the ends, Enter selects, Escape clears.
  7. RegionfocusRegion eases the glass to Europe, the Americas, Asia, Oceania, Africa or the world. The lamp pitch stays; the land is rasterised again at the new extent, so a region takes more lamps and a smaller area.
  8. HeatOptional: land near a point warms, from an ember to warm white. Amber and white only.
  9. ScanOptional and off by default: a slow bar of light across the glass with a short tail.
  10. AluminiumA bead-blasted bezel with the glass let into it.
  11. GraphiteA soft-touch black bezel; the glass is the same smoked dark.
  12. SoundOptional: a relay tick for each step a packet takes. Off by default and only after the page has been touched.
  13. Off screen or hiddenNo frames. A zoom lands at once and a route ends on time.
  14. Reduced motionA route is drawn whole and fades, the zoom is instant, red does not breathe, there is no scan and no sound.

What it is for

Where things are happening, for the places a product shows the world: traffic between regions, shipments, the edges of a network, an incident's spread. Each place is a real button with its status in its name, in west-to-east order that the arrow keys walk, with an engraved plate on select. Routes, statuses and zoom are plain calls (route, pulse, setStatus, focusRegion) with events for a selection, the end of a route and a landed zoom. It draws nothing while nothing moves and stops off screen.

Original. The land is not an image: the Natural Earth rings are projected once and filled by scanline onto the lamp grid for each view (about 2 ms), so a zoom re-rasterises every frame. Lamps are a handful of small pictures painted once per size onto an atlas and copied. Two canvases: the land, drawn once per size and region, and the lit things, drawn only while they move. In the source tree land.mjs beside the Map re-exports the Globe's; a package carries the real file under the Map's own folder.