Components

An icon from the icon registry, by semantic name, or any Phosphor icon.

<hd-icon name="device.light"></hd-icon>

A picture: a web address (src, http or https only), one of the device’s own images by name (image, e.g. album art as albumart, a camera’s snapshot) or a picture the user uploaded (upload, its id). It is fetched without referrer or cookies, loads lazily, fades in, and shows the fallback icon while it loads, when there is none and when it fails; grey on e-ink. It fills its parent, so size the element (or its parent) in CSS.

<hd-image></hd-image>

A live number that counts to new values (or snaps, on e-ink).

<hd-value value="{{ cap.measure_power }}"></hd-value>

Time since a moment, kept up to date (“4 min ago”).

<hd-relative-time datetime=""></hd-relative-time>

The time or the date, ticking on its own. AM/PM and seconds are parts: ::part(period), ::part(seconds).

<hd-clock></hd-clock>

How far a track is: a thin bar with the time played and the time left, counting on every second while it plays (players report their position only now and then). Parts: ::part(bar), ::part(times).

<hd-progress position="{{ cap.measure_power }}" duration="{{ cap.measure_power }}"></hd-progress>

Explains what it wraps in a small bubble in the theme’s colours, instead of the browser’s own title tooltip: on hover, on focus and on a tap (a tap on it never reaches the tile’s own tap). The bubble stays inside the window and isn’t cut off by the tile. E.g. <hd-tip text="{{ m.estimatedText }}">≈</hd-tip>.

<hd-tip text=""></hd-tip>

An on/off switch bound to a boolean capability with bind (or the explicit form: value with data-hd-on-change).

<hd-toggle bind="{{ cap.onoff }}" label="Brightness"></hd-toggle>

A slider bound to a numeric capability (dim, target temperature, volume…) with bind (or the explicit form: value with data-hd-on-change). It sends the value once, on release.

<hd-slider bind="{{ cap.dim }}" label="Brightness"></hd-slider>

A 270° dial you drag to set a numeric capability (target temperature): the knob is the value, an optional dot shows a second value (the room), and the value sits large in the middle. A value changed from elsewhere (the − and + buttons, the Homey, another screen) springs into place with one small overshoot; under your finger it follows exactly. Reduced motion and e-ink: it moves at once.

<hd-dial bind="{{ cap.target_temperature }}" label="Brightness"></hd-dial>

Starts a flow or sets a mood when tapped, and shows how it went: its phase attribute is idle, running, done or failed, so the template can style each moment. It also plays the motion kit on itself: a pop when it worked, a shake when it failed (reduced motion fades, e-ink shows nothing). Its content is whatever the template puts inside.

<hd-trigger action="flow" target=""></hd-trigger>

A small history line with live updates, an hd-series inside per line (up to 3, any devices, also for one line); no axes, legend or tooltip, so label the lines around it. Lines with the same unit share a scale.

<hd-sparkline range="24h">  <hd-series bind="{{ cap.measure_power }}"></hd-series></hd-sparkline>

A history chart with an hd-series inside per line (up to 8, any devices, also for one line); can sit behind the widget content as a background. Lines with the same unit share an axis, a second unit goes on the right; from two lines on it has a legend, and its tooltip lists every line at that moment.

<hd-chart range="24h">  <hd-series bind="{{ cap.measure_power }}"></hd-series></hd-chart>

One line of an hd-chart (up to 8) or hd-sparkline (up to 3), written inside it, also for a chart of one line; draws nothing itself. Lines with the same unit share an axis, a different unit goes on the right (two axes at most); from two lines on the chart has a legend, and its tooltip lists every line at that moment with its unit. A line whose device is unavailable steps back and says so; lines over the limit are left out (the editor’s preview and its problems say so, a dashboard doesn’t). A readings setting fills them with a {% for %}: <hd-series bind="{{ r.cap }}" label="{{ r.label }}">.

<hd-chart range="24h">  <hd-series bind="{{ settings.solar.cap.measure_power }}" label="Solar" color="lit"></hd-series>  <hd-series bind="{{ settings.outside.cap.measure_temperature }}" label="Outside" variant="line"></hd-series></hd-chart>

The history of one or more readings as a tile of its own: a chart with range chips (6 hours to a year), what to show (a meter’s usage, or the average, lowest or highest), detail, and with several readings a total, an average or a line each, and the totals under it. It shows what fits its size, keeps up to date (every minute while visible, every five on e-ink) and says so when a reading isn’t recorded or the plan keeps less than the range. What it is shown with (range, what to show, detail) can be changed on the tile and is kept only while the page is open. Its content (an icon, a name, the readings’ names) becomes its heading; the attributes only say what it starts with.

<hd-history readings=""></hd-history>

A 270° dial filled up to a value within a range (target temperature, battery, power); the centre is left free for the template.

<hd-gauge></hd-gauge>

A progress ring for a fraction (battery, solar share, cover position).

<hd-ring value="{{ cap.measure_power }}"></hd-ring>

A period as bars against the previous one: each value a bar in its colour with a soft glow, the previous period’s value behind it as an outline, the running bar (current) drawn as “so far”, values below zero hanging under the line. Hover or tap a bar to read both. Bars grow in at full motion only; flat on e-ink. For any series of numbers: an hour by hour day, a week, a month.

<hd-bars values="{{ energy.electricity.compare.week.bars.values }}" previous="{{ energy.electricity.compare.week.bars.previous }}" labels="{{ energy.electricity.compare.week.bars.labels }}" current="{{ energy.electricity.compare.week.bars.current }}" unit="kWh"></hd-bars>

A light bulb that blooms on and fades off, and spills its light around it, wider and stronger the brighter it is (the tile clips it). Reduced motion fades; e-ink snaps without a glow.

<hd-bulb></hd-bulb>

A plug and socket that snap together when it switches on and pull apart when it switches off, with a short pulse from the joint when power starts to flow. Reduced motion fades; e-ink snaps.

<hd-socket></hd-socket>

A lock that locks and unlocks with a springy motion (the shackle drops in and bounces, swings open). While busy the shackle wiggles; when a busy lock ends where it began (refused, or never answered) it shakes.

<hd-lock></hd-lock>

The motion kit around anything: plays a motion when value changes, wiggles while busy, and shakes when a command ends with value where it began (refused, or never answered). Follows the motion level: reduced motion only fades (a pulse while busy), e-ink shows nothing.

<hd-motion></hd-motion>

A door in its frame for a contact sensor: it swings open on its hinge (past where it stops, and back) with the light of the room beyond showing through, and swings shut with a small bounce. Its colour is the text colour around it. Reduced motion: no swing; e-ink snaps.

<hd-door></hd-door>

A window with blinds or curtains, or a garage door, that moves: blinds roll up into the top, curtains bunch at the sides, a sectional garage door rolls up with its light blinking. A new position springs into place (a garage door settles with a thud as it closes); while the motor runs the slats travel, the curtains sway, the garage light blinks. Reduced motion: no travel; e-ink snaps.

<hd-cover></hd-cover>

A sensor or alarm that says it went off, with its own icon: motion pings like a radar (then calmly while it still sees movement), smoke, CO and the siren shake and pulse while on, water ripples under a bobbing drop, a doorbell swings and rings twice. Its colour is the text colour around it. Reduced motion: a still halo; e-ink snaps.

<hd-alert></hd-alert>

A heat pump, heater, pump, fan or air conditioner that answers being switched (a fan spins up or winds down, a pump hums, a heater’s flame blooms), then rests. While it works it shows it in colour with a soft glow (warm heating, cool cooling, accent running) and keeps a calm motion going: a fan turns with its speed, a heat pump’s fan turns, a heater’s flame flickers, a pump pulses, an air conditioner breathes. Reduced motion: no motion; e-ink snaps.

<hd-machine></hd-machine>

A washing machine, dryer or dishwasher whose own moving part shows it works: a washer’s drum turns and returns, a dryer’s tumbles on, a dishwasher’s spray bobs. Done it rests in the good colour; off it is dimmed. Reduced motion: still; e-ink snaps.

<hd-appliance></hd-appliance>

A living background for a tile that heats or cools: soft reds and ambers rising like warm air, or ice blues sinking and drifting. Stronger the harder it works. Position it behind the content; it never takes a tap. Reduced motion: still colour; e-ink: nothing.

<hd-ambience></hd-ambience>

A battery whose charge fills it from the bottom: while it charges a wave rolls on the surface, while it gives power a shimmer runs down through it; low (under 20%) it turns warn. Reduced motion: still; e-ink snaps.

<hd-battery></hd-battery>

An EV charger’s bolt: rings pulse out while it charges (faster with more power), in while the car gives power back; paused or plugged in it rests. Reduced motion: still; e-ink snaps.

<hd-charge></hd-charge>

Small equaliser bars that dance while a media player plays and settle low when it pauses. Reduced motion and e-ink: still, at play heights.

<hd-equalizer></hd-equalizer>

A play/pause button face that turns from one into the other; it shows what a tap does. Reduced motion: a fade; e-ink snaps.

<hd-playpause></hd-playpause>

Where power goes right now: solar, the grid, the home battery and the car around the house, with dots flowing along the lines (arrows on e-ink and with reduced motion). A part left empty is not drawn.

<hd-energy-flow></hd-energy-flow>

Electricity prices as bars in their colours, cheap to expensive on each day’s own range (cheap, normal, expensive; below zero its own colour, drawn under the zero line), the slot now marked and the past dimmed. A band can mark the cheapest hours (highlight-*), a bracket another stretch, like a car’s charging (mark-*); slots not published yet (tomorrow before ~13:00) wait as a dashed outline with pending on it. Hover or tap a bar to read its price. The colours follow the theme (--hd-price-*), as greys on e-ink. Bars grow in at full motion only. For today and tomorrow: values="{{ prices.bars.values }}" start="{{ prices.bars.start }}" step="{{ prices.bars.step }}" now="{{ prices.now.start }}".

<hd-price-bars values="{{ prices.bars.values }}" levels="{{ prices.bars.levels }}" start="{{ prices.bars.start }}" step="{{ prices.bars.step }}" now="{{ prices.now.start }}" slots="{{ prices.bars.slots }}" pending="{{ prices.bars.pending }}"></hd-price-bars>

A live flow as a small moving glyph: water drops falling, a gas flame flickering, power pulsing, quicker and fuller as more flows; still and faint at zero. Reduced motion and e-ink: still, with its fullness shown.

<hd-flow-rate></hd-flow-rate>

A map with a pin for each hd-map-pin inside it; pins glide when they move and the map follows them, framing all or one. Light or dark with the theme. Reduced motion jumps; e-ink is a still map in greys. Lists the places where maps can’t be drawn.

<hd-map></hd-map>

One place on an hd-map, written inside it; draws nothing itself.

<hd-map-pin></hd-map-pin>

A still, faded map behind a tile’s content (A.1), centred on a place, with the hd-map-pin children as small marks; the place moves over the picture and a new picture is drawn once it leaves the middle. A picture, not a live map: no WebGL per tile. E-ink: grey. Reduced motion: no fades or gliding.

<hd-map-backdrop></hd-map-backdrop>

The weather, drawn from registry icons and moving calmly: the sun turning, the moon under twinkling stars, clouds drifting, rain falling, snow fluttering, lightning striking, fog sliding. Reduced motion and e-ink: still.

<hd-weather-icon></hd-weather-icon>

A living sky that fills its tile, under the content: the condition’s sky by day or night, toned to the theme, with the sun, stars, drifting clouds, rain, snow, lightning or fog moving in it. Reduced motion: still; e-ink: none.

<hd-weather-sky></hd-weather-sky>

A camera: its latest snapshot as the picture, live video over it while the tile is on screen (the host signals WebRTC with its own session, so the template never sees a token), a status pill (Live, Connecting…, Paused, Snapshot with its age, Unavailable) and, when asked, the camera’s name, a motion badge and an expand mark, over soft scrims. It streams only while visible, while the page is visible and the host allows it, never on e-ink (the snapshot only, refreshed), at most four at a time per page, and retries with backoff when a stream can’t start, showing the snapshot meanwhile. It fills its parent and sets data-state on itself: connecting, live, paused, failed, snapshot or unavailable.

<hd-camera></hd-camera>

A part of the widget that folds open and closed under a heading, like the sections of the widget settings; while closed it shows summary. To remember it per screen, bind open to the widget’s state and keep each change: open="{{ state.schedule }}" data-hd-on-change="setState('schedule', event.value)". Without that it still folds, but starts over when the widget is drawn anew.

<hd-section heading="Details" open="{{ state.details }}"  data-hd-on-change="setState('details', event.value)">  <p>{{ device.name }}</p></hd-section>

Panes (hd-tab) of which one shows at a time, switched by tapping the tab bar, swiping across the pane or the arrow keys. To remember the choice per screen, bind selected to the widget’s state and keep each change: selected="{{ state.period }}" data-hd-on-change="setState('period', event.value)".

<hd-tabs label="Period" selected="{{ state.period }}"  data-hd-on-change="setState('period', event.value)">  <hd-tab name="today" label="Today"><p>Today</p></hd-tab>  <hd-tab name="week" label="Week"><p>This week</p></hd-tab></hd-tabs>

One pane of hd-tabs, directly inside it.

<hd-tab name="month" label="Month"><p>This month</p></hd-tab>

Puts what is inside it (an hd-icon, an hd-image, anything) at a spot and size of its own, over or behind the rest, relative to the widget (or the nearest element with position: relative). What is inside fills its box.

<hd-place at="top-right" size="large">  <hd-icon name="device.light"></hd-icon></hd-place>