Interface Components

A library of draggable panel controls and canvas sparklines, built as Lit web components on the magx project by mlalma. Every example below is live: panels drag, canvases draw for real, and the controls reseed and animate their data in place. 1.10.0.07017

17 Components

TypeScript

Lightweight

Web Components

FPS static Reshuffle reseeds every canvas · FPS streams new points into all eight panel sparklines

All three panels share one stage: drag a title bar to move a panel anywhere across it, double-click to collapse.

STANDBY · --:--:--

STANDBY Seismic — San Andreas

Live Panel carries every element in the library at once: sparkline, progress bar, range, toggle, checkbox, dropdown, text input, text area, date, clock, colour picker, file chooser, image, arbitrary HTML and button. The clock runs on wall time; throughput is a simulated network trace, mostly idle with bursts.

Cluster Telemetry is the same system reduced to four sparklines and a node selector — the shape most monitoring panels actually take.

World Domination Toolkit points the same elements at an absurd problem, which is the only honest test of a component library. Readiness derives from the severity range, the arm toggle and the deniability checkbox; the posture word derives from readiness. Nothing here reaches anything. Probably.

Line · plain

Line · gradient fill

Line · solid fill

Line · split fill

Line · split stroke

Line · first/last diff

Line · endpoint dot

Line · heavy stroke

Line · hairline

Ref · middle

Ref · average

Ref · median

Ref · first point

Ref · custom (50)

Line · fixed 0–100

Line · capped 25–75

Line · diurnal

Line · spiky

Line · dense

Bar · solid

Bar · gradient

Bar · split fill

Bar · ghost

Bar · ref average

Bar · first/last diff

Bar · fixed 0–100

Bar · coarse

Every rendering variant of the standalone <magx-sparkline> element — line and bar, gradient, solid and split fills, above/below stroke colouring, first/last difference, endpoint dots, fixed and capped axes, and middle/average/median/first-point/custom reference lines. Same set as Sparkline (Animated). Colours come from the eight-pastel chart series, so they track the site accent and the light/dark theme.

Panel

<magx-panel>

CONTAINER

The main container component. A draggable, collapsible floating panel that groups child elements into a unified HUD-style interface. Supports positioning, z-index management, serialization of all child values to/from JSON, and native haptic feedback on mobile (iOS Safari 18+ via switch checkbox, Android via navigator.vibrate).

PROPERTIES

Name	Type	Default	Description
`id`	`String`	`auto-generated`	Unique identifier for the panel
`title`	`String`	`""`	Title displayed in the title bar
`x`	`Number`	`0`	Initial X position (attribute only)
`y`	`Number`	`0`	Initial Y position (attribute only)
`outofbounds`	`Boolean`	`true`	Restrict panel to parent bounds
`closebutton`	`Boolean`	`true`	Show close button in title bar

LIVE DEMO

Haptic Feedback — Panel components provide native haptic feedback on mobile devices. iOS (Safari 18+): uses transparent <input switch> overlays — tapping buttons, checkboxes, inputs, color pickers, date/time pickers, and dropdowns triggers the Taptic Engine via real touch on a switch checkbox wrapped in a label. Android: uses navigator.vibrate() with PWM intensity modulation. Known limitation: range slider drag haptics are not yet supported on iOS — the switch checkbox approach requires discrete taps and cannot fire during continuous drag gestures.

html

<magx-panel id="my-panel" title="Settings" x="50" y="50">
  <magx-panel-textinput title="Name" placeholder="Enter name..."></magx-panel-textinput>
  <magx-panel-range title="Volume" min="0" max="100" step="1" value="50"></magx-panel-range>
  <magx-panel-button title="Apply"></magx-panel-button>
</magx-panel>

typescript

const panel = new MagxPanel();
panel.title = "My Panel";
const input = new MagxPanelTextInput();
input.title = "Name";
panel.appendChild(input);
document.body.appendChild(panel);
panel.setPosition(50, 50);

Button

<magx-panel-button>

CONTROL

A clickable button with an explicit press contract. Three modes make the result of a press visible: momentary darkens and releases, toggle darkens and stays engaged with an ON/OFF marker, countdown darkens and replaces the label with a ticking counter before releasing. Long-press, right-click or alt-click fires an optional secondary action, and the readout strip names both actions and which one fired last.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Button label text
`mode`	`String`	`"momentary"`	"momentary" \| "toggle" \| "countdown" — how the press state is held
`seconds`	`Number`	`3`	Countdown length, countdown mode only
`secondary`	`String`	`""`	Label for the long-press / alt-click action. Set it to enable the secondary action.
`readout`	`Boolean`	`false`	Force the action readout strip on even without a secondary action
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

Three presses, three contracts. Each mode makes the outcome of a press visible after the finger lifts. Run Once is momentary: it darkens long enough to register, then releases. Nothing persists. Record is a toggle: it darkens and stays darkened, with an ON/OFF marker on the right. It is the mode that overlaps a checkbox — a toggle button is an action you leave engaged, a checkbox is a value you read back. Purge is a countdown: the label becomes a ticking counter, then releases at zero. Press and hold it (or right-click, or alt-click) to fire the secondary action instead. The strip under each button names both actions and underlines whichever fired last.

html

<magx-panel-button title="Submit" id="btn1"></magx-panel-button>
<magx-panel-button title="Record" mode="toggle"></magx-panel-button>
<magx-panel-button title="Purge" mode="countdown" seconds="5" secondary="Abort"></magx-panel-button>

Toggle Switch

<magx-panel-toggle>

CONTROL

A square left-to-right sliding switch. Shares the checkbox palette so the two read as one family — the checkbox answers "is this set?", the toggle answers "is this running?". The knob is square, not round, to stay inside the panel geometry.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`checked`	`Boolean`	`false`	Initial state (attribute)
`labelOn`	`String`	`"ON"`	State text when engaged
`labelOff`	`String`	`"OFF"`	State text when idle
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

Toggle vs checkbox. Both return a boolean, but they are two separate controls and are never drawn as one. They share no artwork: the checkbox is a boxed tick, the toggle an outlined rectangle with a plain white square knob that slides left to right. Use the checkbox for values you set and read back later — options, flags, filters. Use the toggle for things that are running: a stream, a sensor, a mode. The state word on the right (LIVE / IDLE, configurable via labelOn and labelOff) means you never have to infer state from colour alone.

html

<magx-panel-toggle title="Streaming" labelOn="LIVE" labelOff="IDLE" checked></magx-panel-toggle>

Checkbox

<magx-panel-checkbox>

CONTROL

A checkbox element. Returns a boolean indicating checked state. Use it for a value you set and read back later — an option, flag or filter. For something that is running rather than set, use the Toggle Switch.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`checked`	`Boolean`	`false`	Initial checked state (attribute)
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-checkbox title="Enable Feature" id="chk1" checked></magx-panel-checkbox>

ColorPicker

<magx-panel-colorpicker>

CONTROL

A color selection element. Displays a color preview swatch and allows picking a new color via the native color input.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`value`	`String`	`"#000000"`	Initial hex color value
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-colorpicker title="Background" id="cp1" value="#3792a4"></magx-panel-colorpicker>

Date

<magx-panel-date>

INPUT

A date picker element that uses the native HTML date input. Returns the selected date as a string.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-date title="Start Date" id="date1"></magx-panel-date>

DropDown

<magx-panel-dropdown>

CONTROL

A dropdown select element. Options can be defined via HTML option elements or set programmatically. Returns the selected index and label.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`index`	`Number`	`0`	Initially selected option index
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-dropdown title="Mode" id="dd1" index="0">
  <option label="Easy">Easy</option>
  <option label="Normal">Normal</option>
  <option label="Hard">Hard</option>
</magx-panel-dropdown>

typescript

const dropdown = document.getElementById('dd1');
dropdown.setOptions(['Red', 'Green', 'Blue'], 1);

FileChooser

<magx-panel-filechooser>

CONTROL

A file selection element. Displays the chosen filename and provides access to the File object.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`placeholderLabel`	`String`	`""`	Text shown when no file selected
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-filechooser title="Upload" id="fc1" placeholderLabel="Choose a file..."></magx-panel-filechooser>

HTML

<magx-panel-html>

DISPLAY

Allows embedding arbitrary HTML content inside a panel. Content is provided via slotted children.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

Bold, italic, and underlined text

html

<magx-panel-html title="Custom Content" id="html1">
  <p style="color: red;">Any <b>HTML</b> here</p>
</magx-panel-html>

Image

<magx-panel-image>

DISPLAY

Displays an image inside the panel. The image URL can be set via attribute or programmatically.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`src`	`String`	`""`	Image URL (attribute)
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-image title="Preview" id="img1" src="./photo.jpg"></magx-panel-image>

ProgressBar

<magx-panel-progressbar>

DISPLAY

A visual progress bar. Set current and max values to display progress percentage.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`currentValue`	`Number`	`0`	Current progress value
`maxValue`	`Number`	`100`	Maximum value
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-progressbar title="Loading" id="pb1" currentValue="65" maxValue="100"></magx-panel-progressbar>

typescript

const bar = document.getElementById('pb1');
bar.currentValue = 75; // Updates visually

Range

<magx-panel-range>

INPUT

A slider input element. Displays the current numeric value and allows dragging to change it within min/max bounds.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`min`	`Number`	`0`	Minimum value
`max`	`Number`	`10`	Maximum value
`step`	`Number`	`1`	Step increment
`value`	`Number`	`0`	Current value
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-range title="Volume" id="rng1" min="0" max="100" step="5" value="50"></magx-panel-range>

Panel Sparkline

<magx-panel-sparkline>

DISPLAY

A sparkline chart embedded inside a panel element. Wraps the standalone Sparkline component for use within the Panel system.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-sparkline title="CPU Usage" id="spark1"></magx-panel-sparkline>

TextArea

<magx-panel-textarea>

INPUT

A multi-line text input area. Supports placeholder text and returns the current content.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`placeholder`	`String`	`""`	Placeholder text
`value`	`String`	`""`	Initial text content (attribute)
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-textarea title="Notes" id="ta1" placeholder="Type here..."></magx-panel-textarea>

TextInput

<magx-panel-textinput>

INPUT

A single-line text input. Supports text, number, and password modes with optional min/max validation for numbers.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`type`	`String`	`"text"`	"text", "number", or "password"
`placeholder`	`String`	`""`	Placeholder text
`value`	`String`	`""`	Initial value (attribute)
`maxlength`	`Number`	`524288`	Maximum character length
`min`	`Number`	`MIN_VALUE`	Min value (number type only)
`max`	`Number`	`MAX_VALUE`	Max value (number type only)
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-textinput title="Username" id="ti1" placeholder="Enter name..." type="text"></magx-panel-textinput>

Time

<magx-panel-time>

INPUT

A time picker element using the native HTML time input. Returns the selected time string.

PROPERTIES

Name	Type	Default	Description
`title`	`String`	`""`	Label text
`id`	`String`	`auto-generated`	Unique identifier

LIVE DEMO

html

<magx-panel-time title="Alarm" id="time1"></magx-panel-time>

Sparkline (Standalone)

<magx-sparkline>

CANVAS

A standalone canvas-based sparkline component. Supports line charts, bar charts, area fills, reference lines, endpoints, and gradient coloring. Highly configurable with 30+ options for rendering style, bounds, and data management.

PROPERTIES

Name	Type	Default	Description
`width`	`Number`	`200`	Canvas width in pixels
`height`	`Number`	`50`	Canvas height in pixels

LIVE DEMO

Line / Gradient Fill

Bar / Bordered

Line / Above-Below

Line / Endpoint Dot

Bar / No Border

Line / Thin + Median

Bar / Gradient Fill

Line / Thick + Solid

Line / First Point Ref

Bar / Above-Below

Line / Hairline

Bar / Outline Only

Line / Capped Values

Line / Dual + Endpoint

Bar / Avg Reference

Line / Dense Data

Bar / Wide Gradient

Line / Custom Ref

Bar / Dual + Median

Line / Uptrend

Line / Downtrend

Bar / Heavy Border

Line / Volatile

Bar / Teal Solid

html

<magx-sparkline id="chart1" style="width: 200px; height: 60px;"></magx-sparkline>

typescript

const spark = document.getElementById('chart1');
spark.setDataPointNum(30);
spark.setSparklineType(SparklineType.Line);
spark.setLine(Linetype.Straight, 2, { r: 50, g: 50, b: 50, a: 1.0 });
for (let i = 0; i < 30; i++) {
  spark.addDataPoint(Math.random() * 100);
}
spark.renderCanvas();

Sparkline (Animated)

Every variant from the standalone section, streaming instead of static. One requestAnimationFrame loop drives all of them and throttles to the requested rate, reading the rate through a getter on each frame — so dragging the slider retunes the running animation rather than restarting it, and the charts keep their history. Zero fps parks the loop without tearing it down, which is why pausing and resuming is instantaneous. After a background tab stall the accumulator is taken modulo the frame step rather than drained, so you get the next frame, not forty catch-up frames at once.

FPS 8 fps Same data pipeline as the static section — only the clock differs

Line · plain

Line · gradient fill

Line · solid fill

Line · split fill

Line · split stroke

Line · first/last diff

Line · endpoint dot

Line · heavy stroke

Line · hairline

Ref · middle

Ref · average

Ref · median

Ref · first point

Ref · custom (50)

Line · fixed 0–100

Line · capped 25–75

Line · diurnal

Line · spiky

Line · dense

Bar · solid

Bar · gradient

Bar · split fill

Bar · ghost

Bar · ref average

Bar · first/last diff

Bar · fixed 0–100

Bar · coarse

Rate comparison

The same four variants at three fixed rates, running simultaneously. These ignore the slider above on purpose — the comparison only works if all three are on screen at once.

1 fps Reads as a log. Each point is a discrete event you can count.

8 fps Reads as a monitor. Motion is legible without demanding attention.

30 fps Reads as an instrument. Smooth, but it owns the eye — use sparingly.

What the Mock Panel Hooks Into

The panel in the hero is a real control surface, not a mock-up, but it is worth being explicit about which of its elements actually reach the device and which are just state. Three do something outside the page: the ranges drive a live CSS filter, the toggle and buttons reach the platform haptics path, and a button push advances a Font Awesome glyph. Everything is read through one document-level event — magx-panelValueChanged, carrying detail.panelElementId — so wiring a panel into an application means adding a single listener, not subscribing element by element.

Preview plate reacting to the brightness and contrast sliders — `filter: brightness(100%) contrast(100%)`

Two magx-panel-range elements. The handler reads getValue() off the element named in the event and writes it straight into an inline filter — applied twice here, once to the magx-panel-image inside the panel and once to the plate below it, so you can see the same value driving a picture the panel owns and a picture it does not. No per-frame work — the browser composites it.

navigator.vibrate not exposed

last event none yet

Every panel control fires haptics on press. Android and desktop Chrome go through navigator.vibrate. iOS Safari ignores that API entirely, so the elements keep a hidden <input type="checkbox" switch> in the shadow root and toggle it on the next frame — the only way to reach the Taptic Engine from a web page. The toggle above gates both paths.

fa-gauge-high 1 of 8

Next Glyph steps forward through the set and wraps at the end; Reset (the secondary press) returns to the first. The strip above shows the whole enumeration with the current entry filled, so the button's effect is visible without cycling through to find out. Icons are the bundled Font Awesome Pro 6.5.1 Thin family (fat prefix) — local, never a CDN, and never emoji. The progress bar under the button is driven from the same index, which is the cheapest way to show a panel element reflecting state owned by the host application rather than by itself.

Font Awesome Pro

6.5.1

3547 ICONS

Font Awesome Pro 6.5.1 with thin, light, regular, solid, sharp, and duotone families. Browse the full catalog at the Font Awesome Explorer.