Comment on page
Virtual Systems

Interface development should not rely on having access to physical hardware.
Systems engineers should work with the user experience team to provide accurate models of real systems
Development Settings
There is a settings file that defines how you would like to work.
The "env" key can be set to either "dev" or "prod"
When in "dev" mode the system will talk to the virtual systems
When in "prod" mode the system expects to talk to a live Engine instance.
Production mode can also be used for development.
The "domain" key is used to proxy requests from your development machine to an Engine instance.
This allows real-world testing to occur before building and deploying your interface.
All requests to http://localhost:dev_port are proxied to the remote instance at "domain"
Building a System Mock
Please take a look at the demo mock system​
It is worth going over Key Concepts before continuing
Basic Structure
A system is a collection of drivers and logic. Drivers are accessed using a generic name and an index.
An example system:
System: Presentation Room 2 (sys-b0W12)
Presentation Logic (Presentation_1)
Sony Projector Left (Display_1)
Hitachi Projector Right (Display_2)
Extron HDMI Switcher (Switcher_1)
Dynalite Lighting (Lighting_1)
Each driver in the system is made up of state. For example:
Power is On or Off - true or false.
Volume is 80
Max volume is 120
Drivers also expose functions:
For modifying the power state: power(state) accepting true or false
volume(level) accepting an integer and will modify the volume state
When building a mock system only the functions and state variables that matter need to be represented.
TypeScript Representation
You’ll find that the mock version of a system looks and feels much like the code it is emulating. In some cases it looks like the settings you might provide a real system.
The system definitions are stored on the window object at window.control.systems
The keys of control.systems act as the system IDs.
A representation of the example system, above, looks like:
window.control.systems['sys-b0W12'] = {
    Presentation: [{
        ...
    }],
    Display: [
        {
            // Display_1
        },
        {
            // Display_2
        }
    ],
    Switcher: [{
        ...
    }],
    Lighting: [{
        ...
    }]
};
The keys of system sys-b0W12 represent the generic name of the drivers present in the system. These keys are an array of drivers where the position of that driver in the array defines it’s index.
Mock Driver Definition
Drivers have state and functions.
State is defined as any of the keys in the driver
Functions are marked as functions by adding a $ sign before the key
Functions are scoped to the driver. So you can modify the state of driver by using this.
// example Display driver
​
{
    // Initial state values
    power: false,
    volume: 0,
    mute: true,
    input: `hdmi`
​
    // Functions
    $power: (state: boolean) => {
        this.power = state;
        this.mute = state;
    },
    $volume: (level: number) => {
        this.volume = level;
    },
    $mute: (state: boolean) => {
        this.mute = state;
    },
    $input: (name: string) => {
        this.input = name;
    }
}
You only need to define functions that modify the state that you are tracking. The absence of a mock function won’t throw errors.
Logic modules, such as Presentation in the example, will communicate with devices in a system. This is achieved by providing a helper $system which provides access to the system definition.
// example Presentation logic
​
{
    // Initial state values
    state: `shutdown`,
    inputs: {
        `Laptop HDMI`: 1,
        `Wireless Presenter`: 2,
        `Document Camera`: 3
    },
    outputs: {
        `Left`: 1,
        `Right`: 2
    }
​
    // Functions
    $powerup: () => {
        this.$system.Display.forEach((display) => {
            display.$power(true);
        });
    },
    $shutdown: () => {
        // Iterate over all the displays
        this.$system.Display.forEach((display) => {
            display.$power(false);
        });
    },
    $switch_input: (input: string, display: string) => {
        this.$powerup();
​
        // Access Switcher_1
        this.$system.Switcher[0].$switch(
            this.inputs[input], this.outputs[display]
        );
    }
}
Composer
Widgets
Last modified 3yr ago