Skip to main content

DeviceInformation

Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.

The frame's battery level and signal strength in one readout. It reads both values from the widget runtime, so there is nothing to wire up: drop it into a widget and it draws whatever the frame reports.

The battery empties as its level drops, a bolt appears beside it while it charges, and its percentage follows. The signal has four bars; the ones it reaches are filled and the rest are outlined, so the readout stays in full ink on the panel.

Import​

import { DeviceInformation } from "~lib/device-information";

The same entry exports useBatteryLevel and useSignalStrength, for a widget that lays the two readings out itself with Icon (batteryIconName, signalIconName) and a Display of its own.

import {
  DeviceInformation,
  useBatteryLevel,
  useSignalStrength,
} from "~lib/device-information";

Props​

NameTypeRequiredDefaultDescription
direction"row" | "column"No"row"Along one line, or the battery over the signal, each centered
size"fill"NoN/AFill the box it is given instead of drawing at scale
scalenumberNo2Multiplier on the readout's smallest size, when it does not fill

Filling a box​

With size="fill" the readout is as large as its parent's box holds, centered in it. It scales with that box alone, the way a chart at 100% does, so a saved render shown in a smaller box of the same shape shrinks the readout with it.

The percentage needs the room to be set at least at the type scale's smallest size. In a box too small for that, the readout leaves the percentage out and draws the battery and the signal larger in the room it frees. The box decides this itself whenever it changes size, with no script.

Give the parent a size: a parent with no height of its own gets a box of the readout's own proportion.

<div className="h-16 w-full">
  <DeviceInformation size="fill" />
</div>

Examples​

Default​

Open Default in Storybook

Full Battery & Full Signal​

Open Full Battery Full Signal in Storybook

Charging​

A bolt appears next to the battery icon while the device is plugged in.

Open Charging in Storybook

Low Battery​

The battery icon empties as the level drops.

Open Low Battery in Storybook

Critical Battery​

Open Critical Battery in Storybook

Column​

The battery and its percentage over the signal, for a slim column or a square.

Open Column in Storybook

Filling a Band​

Open Fill Band in Storybook

Filling a Square​

Open Fill Square in Storybook

Too Small for the Percentage​

Open Fill Too Small For Text in Storybook

See Also​