Creating devices

Devices are an object with a name, id and a set of controls. Everything devices is located in Device.ts

Control prototype

A control prototype is a simple description of how a control looks like. It has nothing to do with how it works, but rather how it is displayed front-end.

To define a control prototype, create a new type in the Control namespace and union it with Control.Any. For example, a slider has this prototype:

export type Slider = {
    label?: string,
    type: 'slider',
    orientation: 'vertical',
    range: [from: number, to: number]
    notches: number
}

Controls

Controls are a simple wrapper around a reactive value and a setter for said reactive, which validates input.

Creating a control is as simple as

export class SpecificControlInstance extends ControlInstance<Control.SpecificPrototype, Tvalue> {
    Set ( value: any ) {
        if ( typeof value === 'type of the Tvalue' ) {
            this.State.Value = value;
        }
    }
};

var instance = new SpecificControlInstance({
    type: 'control-type',
    propA: 10,
    propB: 1
}, defaultValue);

Front-end

The front-end will receive the prototype and the current value with the API.RequestJoinControlRoom or API.RequestDeviceInfo call. It can update the value with the API.MessageModifiedControl message.

Composing a device

To create a functioning device you will need to create a set of control instances:

var button = new ButtonInstance( ... );
var slider = new SliderInstance( ... );

Then, you need to react to their value changes:

button.State.AddOnValueChanged( v => { ... } );
slider.State.AddOnValueChanged( v => { if ( button.State.Value ) { ... } } );

And finally create the device:

return {
    ID: 'my-example-device',
    name: 'My Device',
    controls: [ button, slider ]
}