auratiles

ui component · web component

glowing tiles for live numbers; here they show today's weather from open-meteo.

states

the tile's data

click a tile on the screen to see what drives it.

install

one module, no dependencies: 73 kb, 24 kb compressed; the types are in aura.d.ts next to it. import it from here, or copy both files into your project.

<script type="module" src="https://likemiens.com/ui/aura/aura.js"></script>

<aura-board editable persist="home">
  <aura-tile metric="temperature"></aura-tile>
  <aura-tile metric="air"></aura-tile>
  <aura-tile id="disk" kind="ring" label="Disk" sublabel="Used"
             unit="%" tone="percent"></aura-tile>
</aura-board>

import { bindWeather } from "https://likemiens.com/ui/aura/aura.js";

bindWeather(document.querySelector("aura-board"), { place: "Berlin" });

const disk = document.getElementById("disk");
disk.update({ value: 81, alert: 90 });
disk.addEventListener("aura-select", (event) => openStorage(event.detail.key));

aura.js aura.d.ts githubMIT

api

<aura-tile>

attributes, or everything at once as tile.data = {…}. attributes win over data: keep live values in data and the look in attributes.

kindring · dial · wave · ruler · split · pulse · scatter · swatch · meter · dots

label sublabel captionthe two lines at the top and the line at the bottom

value min max unit decimalsthe reading and its scale; 0–100 unless set

textwords in place of the number

series times atpoints of a chart, their labels and the current one; ruler, scatter and dots can be scrubbed

endstwo labels at the ends of the scale

angle spreadwhere the dial points and how wide its mark is

color stopsthe swatch's colour; the colours of the meter's scale

tonea palette — coral teal red lime magenta blue sand moss mauve ember slate ice; a scale that colours by the value — temperature uv aqi clouds delta percent; or four colours

stateloading · empty · error · stale; ready when left out

messagewhat the tile says in place of its caption when it is empty, in error or stale

alerta threshold: at or above it the tile pulses; empty — always

spancolumns on a board, 1–4, like the sizes of a widget; the tile lays itself out by its width

factsreadings a wide tile shows on its right: [[label, value], …]; its caption joins them

size numeralsshort — half the height; dotted — digits drawn with dots

tile.update({…})changes a part of the data

aura-selectclick or Enter: { key, value, index, data }

aura-scrubthe point under the pointer or the arrows: { key, index, value, time }

aura-retrya click on a tile in error

aura-toggle− or + on a tile, or Delete, while editing: { key, hidden }

<aura-board>

editablethe edit button and a long press: drag to move, pull the corner to widen, − to hide, ✓ to keep, ✕ to undo; arrows, Shift with arrows, Delete, Enter and Esc on the keyboard

persista name: the order, the hidden tiles and the widths stay in localStorage

edit() done() cancel()the same from code

layout{ order, hidden, spans }; a tile goes by its id, metric or label

aura-edit aura-change aura-resize{ editing } when the mode changes; { order, hidden, spans } when a layout is kept; { key, span } when a tile changes its width

--aura-columns --aura-gap --aura-rowcolumns (2–4 by the board's width), the gap, the row height as a share of the column

bindWeather(board, options)

fills every tile that has a metric, then refreshes it every 10 minutes and when the tab comes back.

options{ lat, lon } or { place: "Berlin" }, units: metric | imperial, lang: en | ru, every: seconds (0 — only refresh())

metrictemperature · delta · humidity · pressure · clouds · uv-day · uv · wind · air · daylight · rain

returns{ refresh(), set(options), stop(), weather }; aura-weather on the board after each update

findPlaces(name)[{ name, country, lat, lon }] by the open-meteo geocoder

styling

--aura-edge --aura-mid --aura-core --aura-accentthe four colours of a tone, by hand: rim, glow, heart, marks

--aura-ink --aura-font --aura-radius --aura-focustext, font (the page's by default), corner, focus ring

::part()tile, label, sublabel, caption, viz, badge, grip; on the board grid, toolbar, edit, cancel, done

your own data

tile.data = {
  kind: "ruler", label: "Sales", sublabel: "Today",
  value: 128, unit: "k", series: hourly, times: hours, at: 13,
  caption: "Best since May", tone: "coral",
};

in react 19 the tags work as they are; give data through a ref: ref.current.data = {…}.

notes

weather data by open-meteo.com, cc by 4.0.

more components

light dial presence voice dock pinch calendar coin stack