Aleksandr Shchilkin
Get in touch

Aleksandr Shchilkin

Viewing: Design Lab

shchilkin@gmail.com GitHub (opens in new tab)

Instrument primitives

The v3 cockpit is built from Canvas gauge recipes and a few supporting widgets. This companion page keeps those pieces inspectable outside the car frame.

The newer instrument layer renders gauge recipes to Canvas, so whole dashboard families can share primitive rules while changing style, density, layout, and data bindings.

Reference board

A full-board reference pass keeps the target language visible: round dials, compact cards, segmented strips, and state tiles all render through the same primitive renderer.

Primitive vocabulary

Gauge recipes are assembled from canvas primitives such as surfaces, arcs, tick scales, text, needles, icons, and segmented fills.

Canvas vocabulary

Primitive Vocabulary

These are the drawing atoms behind every dashboard preset. Presets combine them into gauges, while the renderer keeps each primitive data-bound, theme-aware, and crisp on high-DPI screens.

Surfaces

Panel, inner face, soft backdrop, and vignette primitives.

cardbackground-circlebackground-rectvignette

Layered Arc

Static track, interactive value, and secondary arc share one polar system.

arc-layerarc-trackarc-value

Scale

Tick marks and labels are static scale primitives, separate from value rendering.

tick-ringtick-labelsarc-zone

Needle

Pointer primitives can sit above any compatible static scale.

needledot-markerglow

Segmented Forms

Ring and pill segment primitives share the same value binding model.

segmented-arcsegmented-bar

Linear Metric

Value, inline unit, track, value fill, and marker stay in one horizontal rhythm.

value-textlinear-tracklinear-valuelinear-marker

Readout System

Text primitives handle labels, values, units, and secondary metric pairs.

label-textvalue-textunit-textsecondary-metricstatic-text

Status Marks

Icon and dot primitives add meaning without creating DOM nodes per mark.

icondot-markerbackground-rect

Sector Fill

Donut and pie sectors support mode, terrain, and split-state gauges.

sector-fillbackground-circle

Pattern catalog

Patterns group primitives into reusable gauge families before they become dashboard presets or editable composer widgets.

Pattern Layer

Gauge patterns

PrimitivePatternPresetWidgetLayout

layered-arc

Layered Arc

Primary value, quiet track, optional support arc, centered readout.

Primitives
background-circlearc-layervalue-textunit-textsecondary-metric
Recipes
primary arc + support arcprimary arc + remainder arcarc + mini donut
Data roles

speed / rpm / power / fuel / battery / temperature

Sizes: tile-1x1 / tile-2x2 / hero-4x2

analog-dial

Analog Dial

Static scale, tick labels, pointer, zones, and a numeric readout.

Primitives
tick-ringtick-labelsneedlearc-zonevalue-text
Recipes
scale + needle combinationneedle dial + danger zone
Data roles

speed / rpm / heading / temperature

Sizes: tile-2x2 / tile-3x2 / hero-4x2

segmented-metric

Segmented Metric

Discrete cells or ring segments for battery, fuel, power, and state.

Primitives
segmented-arcsegmented-barvalue-textunit-text
Recipes
segmented ring + central numeric readoutsegmented pill + support label
Data roles

battery / fuel / power / oilLife / tripProgress

Sizes: tile-1x1 / tile-2x1 / tile-2x2

linear-metric

Linear Metric

Large value, inline unit, track, fill, marker, and optional support row.

Primitives
value-textunit-textlinear-tracklinear-valuelinear-markericon
Recipes
linear metric + secondary inline metrichorizontal bar + marker
Data roles

range / speed / battery / fuel / temperature / trip

Sizes: tile-2x1 / strip-4x1 / hero-4x2

sector-mode

Sector Mode

Filled sectors around a mode or gear readout for expressive dashboard states.

Primitives
sector-fillbackground-circlestatic-textsecondary-metric
Recipes
sector fill + outer reference trackmode dial + support metric
Data roles

gear / driveMode / terrain / battery

Sizes: tile-1x1 / tile-2x2

status-strip

Status Strip

Small text, dots, icons, and bars for trip or state summaries.

Primitives
background-rectstatic-textdot-markersegmented-bar
Recipes
status dots + tiny labelstimeline strip + segmented progress
Data roles

trip / time / warnings / service / timeline

Sizes: tile-2x1 / strip-4x1

The gallery compares technical, clean, compact, and wide module presets against the same demo vehicle data.

Instrument System

Dial Variant Gallery

Clean Dashboard Gauges

Tile 2x2
Clean speed gauge is 60 km/h.
Clean Primary ArcLayered Arc
Clean RPM gauge is 2200 rpm.
Clean Technical ArcLayered Arc
Clean power gauge is 74 %.
Clean Dual ArcLayered Arc
Clean battery gauge is 68 %.
Clean Secondary ArcLayered Arc
Clean hybrid energy gauge is 68 %.
Clean Hybrid Dual ArcLayered Arc

Analog Technical Gauges

Tile 2x2
Speed is 60 km/h.
Radial Value DialAnalog Dial
Tachometer is 2200 rpm.
Needle DialAnalog Dial
Technical cut speed gauge is 60 km/h.
Technical Cut ArcAnalog Dial
Speed segmented ring is 60 km/h.
Segmented RingAnalog Dial

Mode / Power Gauges

Tile 2x2
Power Sport Sector Mode is 72 %.
Sport Sector ModeLayered Arc
Dual Arc EnergyLayered Arc
Mode DialSector Mode
Battery Terrain Pie is 75 %.
Terrain PieLayered Arc

Compact Metric Gauges

Tile 1x1
Fuel level is 45 %.
Partial Metric ArcAnalog Dial
Oil life is 87 %.
Mini DonutLayered Arc
Compass CircleAnalog Dial
Engine temperature is 92 °C.
Danger Zone ArcAnalog Dial
Average speed is 45 km/h.
Metric SliderLinear Metric

Composer-Friendly Wide Modules

Tile 2x1
Range is 218 km.
Horizontal Metric BarLinear Metric
Battery is 68 %.
Segmented Pill BarSegmented Metric
Trip ComputerStatus Strip
Heading is 315 degrees.
Linear BearingLinear Metric
Timeline SegmentsStatus Strip
Cruise control speed is 45 km/h.
Cruise ControlSegmented Metric

Unsorted Registered Presets

Tile mixed
Yellow technical speed dial is 60 km/h.
Yellow Technical Speed DialAnalog Dial
Red economy needle dial is 218 km.
Red Economy Needle DialAnalog Dial
Wide RPM segmented strip is 2200 rpm.
Wide RPM Segmented StripSegmented Metric

Customization showcase

Slot-backed recipes expose meaningful override points: color, geometry, primitive variants, density, glow, and frame treatment can change without rewriting the renderer.

Customization Proof

Same signal, different modules

Customization model

Palette modesmonochrome / duotone / tri-accent / radial-gradient / flat-mono

Accent strategiestheme-primary / manual / signal-derived / mode-derived / computed-secondary / monochrome-derived

Geometryangles / gap / stroke / ticks / segments / center disk

Compositionsecondary / remainder / nested / mirrored / shared track

Data bindingspeed / battery / fuel / temperature / range / mode

Speed as four modules

speed binding
Clean speed gauge is 60 km/h.

Clean Primary Arc

Layered Arc9 primitives
cardbackground-circlearc-layervalue-textunit-text
Speed is 60 km/h.

Radial Value Dial

Analog Dial10 primitives
cardbackground-circlearc-layertick-ringtick-labels
Speed segmented ring is 60 km/h.

Segmented Ring

Analog Dial6 primitives
cardbackground-circlesegmented-arctick-labelsvalue-text
Average speed is 45 km/h.

Metric Slider

Linear Metric9 primitives
cardvalue-textlinear-tracklinear-valuelinear-marker

Battery as four modules

battery binding
Clean battery gauge is 68 %.

Clean Secondary Arc

Layered Arc7 primitives
cardbackground-circlearc-layervalue-textunit-text
Oil life is 87 %.

Mini Donut

Layered Arc6 primitives
cardlabel-textarc-trackarc-valuevalue-text
Battery is 68 %.

Segmented Pill

Segmented Metric5 primitives
cardiconsegmented-barvalue-text
Range is 218 km.

Horizontal Bar

Linear Metric5 primitives
cardiconvalue-textlinear-tracklinear-value

Temperature as four modules

engineTemp binding
Engine temperature is 92 °C.

Danger Zone Arc

Analog Dial11 primitives
cardlabel-textarc-trackarc-zonearc-value
Average speed is 45 km/h.

Metric Slider

Linear Metric9 primitives
cardvalue-textlinear-tracklinear-valuelinear-marker
Fuel level is 45 %.

Partial Metric Arc

Analog Dial8 primitives
cardlabel-textarc-trackarc-valuetick-ring
Oil life is 87 %.

Mini Donut

Layered Arc6 primitives
cardlabel-textarc-trackarc-valuevalue-text

Same module, different styles

Layered Arc pattern
Clean speed gauge is 60 km/h.
Flat monomonochrome-derived
Clean speed gauge is 60 km/h.
Blue electricduotone
Clean speed gauge is 60 km/h.
Pink motionmanual accent
Clean speed gauge is 60 km/h.
Red sportsignal aware

Same preset, different sizes

Size-aware collapse behavior
Oil life is 87 %.
tile-1x1Compact labels collapse

Compact tile: reduced labels and simplified ticks.

Range is 218 km.
tile-2x1Wide readout and marker

Wide tile: linear and strip-friendly readouts.

Clean speed gauge is 60 km/h.
tile-2x2Full dial hierarchy

Standard dial: full readout and support metric.

strip-4x1Dense status strip

Status strip: dense horizontal summary.

The Canvas gauges carry the main instrument language. These smaller widgets keep the surrounding cockpit state inspectable.

Gear selector and indicator

The selector keeps drive mode outside the instrument panel, matching the main study.

3
gear

Rolling value

Numeric transitions stay useful for odometer and gear-state changes.

2
4
7
 Odometer value

On-board computer

The center panel stays a separate state surface for trip, range, and vehicle status.

4
gear
01Trip
14:32
Distance42.7km
Time00:30:45
Avg Speed83.4km/h
Energy2.8 / 4.6L/kWh