Departures Board

Live information that people watch: a transport operator's station page, an airport or ferry terminal, a venue's door times, any queue or schedule where the change itself is the news. The board is the content; the table and the announcements carry the same news in words.

Copy the departures-board folder and the flip-dot folder from its package next to your page, link the stylesheets and mount it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="flip-dot/flip-dot.css">
<link rel="stylesheet" href="departures-board/departures-board.css">
<div id="departures-board"></div>

<script type="module">
  import FlipDot from './flip-dot/flip-dot.mjs';
  import { mount } from './departures-board/departures-board.mjs';

  const departuresBoard = mount(document.getElementById('departures-board'), {
    station: 'Keston Parkway',
    operator: 'Harwick & Keston Railway',
    kicker: 'Departures',
  }, { FlipDot });

  // departuresBoard.update({ … });   change any option in place
  // departuresBoard.destroy();        and take it away again
</script>

mount(element, options, { FlipDot })

Builds the block inside the element and returns its handle. Hand it the Flip-Dot it is built with.

handle.root

handle.signs

handle.sim

handle.step()

Run the next update now (for a demo button, and the tests).

handle.update(next = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

1. At restEnamel fascia with the station, operator mark, platform plates and a flip-dot clock; the board asleep; the calling-at sign scrolling the first train's stops.
2. Row updateEvery ~5 s while in view one line changes on its own (BOARDING, EXP 11:08, DELAYED, DEPARTED) with a wave confined to that line's rows.
3. CascadeWhen the first train has gone every train line is rewritten top to bottom, 150 ms apart, and a new service is written in at the bottom; the calling-at sign follows.
4. AnnouncedEach change is one polite sentence and the departures table (visually hidden, real th/caption) is rewritten.
5. PausedA real toggle (aria-pressed) stops the updates (WCAG 2.2.2). The lamp goes dark and the notice says so.
6. PaletteEnamel (a night concourse under navy) or daylight (pale concrete, black fascia); disc fitting mixed, amber or classic yellow-green.
7. TabletThe foot stacks; notes in one column under 760 px.
8. PhoneUnder a 640 px container the board goes to 100 columns, two lines per train (time and destination; platform and status); the fascia stacks with the clock beside the date; buttons full width.
9. Reduced motionEvery sign swaps instantly and requests no frames; the cascade lands at once; the calling sign pages; every update still happens and is announced.
10. Off screenThe update timer stops (IntersectionObserver, hidden tab) and every sign sleeps.

Made of: One line board updates, Cascading row shift, Per column disc fitting, Hanging sign mounts, Accessible table mirror, Pausable live updates, Visibility gated timer, Container tiered sign layout.

Original composition. Keston Parkway, the Harwick & Keston Railway, its mark and every service are invented. Imagery is SVG and CSS drawn for the scene; the signs are the Flip-Dot. Face: Work Sans (SIL OFL 1.1), Latin subsets as WOFF2.

• 03Flip-DotThe flip-disc sign from buses and stations.

More blocks on the same object:

• 03.2ScoreboardA match centre round a flip-dot scoreboard.
• 03.3Venue MarqueeA club’s site on the night, under a brass flip-dot marquee.
• 06.4Specimen CaseA bento of glass-topped compartments in a machined case, each holding one real Tactile object running small (the Odometer, the Flip-Dot, the Detent Dial, the Vessel) with an engraved label card under the glass.