Patch Bay

An integrations or routing section that shows what the product does by letting the visitor do it: sources on the left, destinations on the right, one real cable per source to move. Each route is a cable with length and weight that settles into a catenary; a live counter and flashing lamps prove the routes carry something. Every jack is a button: press a source, then a destination; Escape lets a cable hang; the status line says every change.

Copy the patch-bay 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="patch-bay/patch-bay.css">
<div id="patch-bay"></div>

<script type="module">
  import { mount } from './patch-bay/patch-bay.mjs';

  const patchBay = mount(document.getElementById('patch-bay'), {
    eyebrow: 'Routes',
    heading: 'Patch it in and it runs.',
    lede: 'Every source is a jack and so is every place it can go. A cable is a route; the lamp beside it lights for each event it carries. There is no flowchart to draw.',
  });

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

mount(element, options)

Builds the block inside the element and returns its handle.

handle.update(next = {})

Change options in place.

handle.routes

handle.tally

handle.cables

handle.destroy()

Stops it and cleans up after it.

Events it fires, which bubble from the element: change.

1. At restCables hang still in their curves; the lamps of fed destinations are lit; nothing runs.
2. CarriedThe plug follows the hand, the cable swings after it, and the jack under it is ringed.
3. SeatedThe plug seats (with sound on: a click and a thunk), the cable swings into its curve, the lamp lights, the status line says so.
4. HangingDropped in the air, the cable falls from its source and the spare lies on the desk below the panel.
5. RefusedA jack that already holds a cable refuses a second (with sound on: a knock); the status line names the cable in it.
6. SignalEvents arrive at each source's rate; each one down a cable flashes the destination's lamp and adds one to the lit counter.
7. KeyboardA source jack picks its cable up; a destination seats it; Escape lets it hang; Delete pulls a source's plug.
8. AluminiumA bead-blasted panel with screws, a reflective LCD counter, dark cables first.
9. GraphiteA soft-touch panel, a vacuum-fluorescent counter, light cables first.
10. Off screen or hiddenNo loop and no events.
11. Reduced motionCables are drawn at rest at once; lamps are steady.

Made of: Verlet cable, Catenary settle, Floor contact, Route table, Two step keyboard patch, Poisson events, Container query layout, Finish following, Sleeping loop.

Original. The routes, sources and destinations are placeholders for an invented event router. Cables are Verlet chains of fixed length drawn on one canvas; the jacks are buttons. Fonts: Instrument Sans and Geist Mono, both OFL 1.1, shipped as WOFF2 with their licences.