Image

Category: Display · Reads data: yes (URL) · Sends commands: no

Mental model

An Image is a picture frame. It shows a picture — product art, a diagram, a status graphic — and the picture can change if you push a new URL to it.

When to use it

Product imagery, branding, diagrams
A state graphic that swaps based on data

Settings

General / Data

Widget Title / ID · Image URL · Alt text

Style

Image fit · width / height · alignment
Image filter · opacity · padding · border

Example — swap the image by data

device.updateWidget(targetId, "doorImg",
  isOpen ? String("https://.../open.png") : String("https://.../closed.png"));

Script API example

The same interactions from a dashboard script:

// Swap the image from incoming device data
ws.onMessage((msg) => {
  if (msg.door !== undefined) {
    widget.setValue('doorImg', msg.door
      ? 'https://example.com/open.png'
      : 'https://example.com/closed.png');
  }
});

SVG

For crisp, scalable vector graphics.

Designer

Widget Reference

Mental model

When to use it

Settings

General / Data

Style

Example — swap the image by data

Script API example

SVG

​Mental model

​When to use it

​Settings

​General / Data

​Style

​Example — swap the image by data

​Script API example

SVG

Mental model

When to use it

Settings

General / Data

Style

Example — swap the image by data

Script API example