Control Panel

Register a panel schema to surface controls in the dashboard. Streamers can adjust your widget without editing code.

SBCanvas.panel.register(schema)

SBCanvas.panel.register({
  fields: [
    { key: 'speed', type: 'slider', label: 'Scroll Speed', min: 1, max: 10, default: 5 },
    { key: 'theme', type: 'dropdown', label: 'Theme', options: ['dark', 'light', 'neon'] },
    { key: 'enabled', type: 'toggle', label: 'Enable Alerts', default: true }
  ],
  actions: [
    { name: 'reset', label: 'Reset Counter', confirm: true },
    { name: 'test', label: 'Send Test Alert' }
  ]
});

Listening for Field Changes

Field updates arrive through the event bus:
SBCanvas.on('panel:field_change', ({ key, value }) => {
  if (key === 'speed') setScrollSpeed(value);
  if (key === 'theme') applyTheme(value);
});

Handling Actions

Use panel.onAction to respond to dashboard button clicks:
SBCanvas.panel.onAction('reset', () => {
  counter = 0;
  updateDisplay();
});

SBCanvas.panel.onAction('test', () => {
  triggerTestAlert();
});
Remove a handler with panel.offAction:
SBCanvas.panel.offAction('reset', myHandler);
// or remove all handlers for an action:
SBCanvas.panel.offAction('reset');

API Reference

MethodDescription
panel.register(schema)Register fields and actions for the dashboard
panel.onAction(name, fn)Handle a named action button press
panel.offAction(name, fn?)Remove action handler(s)