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

Name	Type	Required	Default	Description
`direction`	`"row" \| "column"`	No	`"row"`	Along one line, or the battery over the signal, each centered
`size`	`"fill"`	No	N/A	Fill the box it is given instead of drawing at `scale`
`scale`	`number`	No	`2`	Multiplier 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

StorybookでDefaultを開く

Full Battery & Full Signal

StorybookでFull Battery Full Signalを開く

Charging

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

StorybookでChargingを開く

Low Battery

The battery icon empties as the level drops.

StorybookでLow Batteryを開く

Critical Battery

StorybookでCritical Batteryを開く

Column

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

StorybookでColumnを開く

Import​

Props​

Filling a box​

Examples​

Default​

Full Battery & Full Signal​

Charging​

Low Battery​

Critical Battery​

Column​

Filling a Band​

Filling a Square​

Too Small for the Percentage​

See Also​