Skip to main content
Small, composable patterns using the Script API globals.

React to a widget change

widget.on('brightnessSlider', 'change', (value) => {
  widget.setText('brightnessLabel', `Brightness: ${value}%`);
});

Send a command to a device

widget.on('fanSwitch', 'toggle', (isOn) => {
  ws.send(context.deviceId, { fan: isOn ? 1 : 0 });
});

React to incoming device data

const off = ws.onMessage((msg) => {
  if (typeof msg.temperature === 'number') {
    widget.setValue('tempGauge', msg.temperature);
  }
});

Remember a user’s choice

const saved = storage.get('view');
if (saved) widget.setValue('viewSelector', saved);

widget.on('viewSelector', 'change', (v) => storage.set('view', v));

Render the latest database record

const rows = await db.query('readings', {}, {
  limit: 1, orderBy: 'created_at', ascending: false
});
if (rows.length) {
  widget.setText('lastReading', `${rows[0].temperature} °C`);
}

Responsive UI

if (context.device.isMobile) {
  widget.hide('detailPanel');
}

Periodic refresh

const id = setInterval(async () => {
  const rows = await db.query('status', {}, { limit: 1 });
  if (rows.length) widget.setText('statusLabel', rows[0].state);
}, 5000);

API overview

All the globals these examples use.