@intuiface/core

This library will enables you to create custom interface assets that can be used in your Intuiface experiences.

In @intuiface/core, we use TypeScript decorators to declare Properties, Triggers and Actions exposed in Intuiface Composer. You can find all available decorators in this documentation.

@intuiface/core also exposes services that will help you access low level information (device's id, name, os...), hardware, cache... in an easy and cross-platform way.

Use the @intuiface/interface-asset to create and initialize your project workspace. Then you can use IntuifaceElement and @Asset decorator to declare your interface asset and @Property, @Trigger and @Action decorators to customize it. See @Asset example for a squeleton class of a custom interface asset.

Remarks

Before reading how to create interface assets and declare Properties, Triggers, Actions and Parameters, please note that we choose to use the camelCase naming convention.

Table of contents

Enumerations

• CacheStrategy
• CacheScope

Classes

• Watchable
• IntuifaceCollection
• ElementContainer
• IntuifaceElement

Interfaces

• IDisposable
• IActionOptions
• IComputorOptions
• IElementOptions
• IParameterOptions
• IPropertyOptions
• ITriggerOptions
• ICollectionConfiguration
• CacheEntry
• CacheOptions
• DownloadProgress

Decorators

• Action
• Computor
• Asset
• Collection
• InternalProperty
• Parameter
• Property
• Trigger

Services

• CacheService
• EnvironmentService
• SystemInfoService
• UsbSerialService

Types

• Color
• IConvertibleType
• Typeface
• Font
• LinearGradient
• Path
• RadialGradient
• Resource
• SolidColor
• Time

Decorators

Action

▸ Action(options?): () => void

The @Action decorator enables you to declare an Action that can be used by Triggers in Intuiface Composer

Parameters

Name	Type	Description
options?	IActionOptions	Options to configure the Action (Display name, description...)

Example

1/**
2 * Turn on autoplay.
3 */
4 @Action({
5  displayName: 'Turn Autoplay mode on', // display name of the action
6  description: 'Turn Autoplay mode on.' // description of the action
7 })
8public turnOnAutoplay(): void
9{
10   this.isAutoplay = true; // code of the action
11}

Note: the name "turnOnAutoplay" is in camelCase as the naming convention.

Example

If your action has parameter(s), you can specify them with @Parameter decorator:

1/**
2 * Action to set the volume of the media.
3 */
4@Action({
5    displayName: 'Set volume', // the display name of the action
6    description: 'Set the volume.', // the description of the action
7    validate: true // boolean for parameter validation
8})
9public setVolume(
10    @Parameter({ // declaration of the parameter
11        name: 'volume', // the name of the parameter (has to match the parameter)
12        displayName: 'Volume', // the display name of the parameter
13        description: 'Desired volume of the media', // the description of the parameter
14        defaultValue: 1, // the default value of the parameter
15        minValue: 0, // the minimum value of the parameter
16        maxValue: 1, // the maximum value of the parameter
17        type: Number // the type of the parameter
18    })volume: number): void // the declaration of the parameter to use (same name)
19{
20    this.volume = volume; // the code of the action
21}

Please read the section @Parameter for more information.

---

Computor

▸ Computor(options): (target: any, propertyKey: string | symbol, descriptor: PropertyDescriptor) => void

The @Computor decorator can be added on a method that will be automatically called when one of the inputs declared in options changes.

Computor listens to input changes on instance of Watchable. This means all listed inputs must notify changes with Watchable.notifyPropertyChanged to trigger a computor call.

Inputs values will be passed as arguments of the method in the order they appears in the inputs array in options.

Parameters

Name	Type	Description
options	IComputorOptions	Options to configure the computor

Example

A method that will be called when scale or width changes to compute a width with the applied scaled:

1   @Property({
2       displayName: 'scale',
3       type: Number
4   })
5   public scale: number;
6
7   @Property({
8       displayName: 'width',
9       type: Number
10   })
11   public width: number;
12
13   @Property({
14       displayName: 'Computed width',
15       readOnly: true,
16       type: Number
17   })
18   public computedWidth: number;
19
20   @Computor({
21       inputs: ['scale', 'width']
22   })
23   private computeWidth(scale: number, width: number): void
24   {
25       this.computedWidth = scale * width;
26   }

Note that scale and width are in the same order in inputs and as computeWidth arguments.

---

Asset

▸ Asset(options?): (cls: any) => any

The @Asset decorator enables you to declare an interface asset that can be used in an Intuiface experience.

The @Asset decorator is placed on a class and you can then declare properties, triggers and action using decorators @Property, @Trigger and @Action inside this class.

An asset class must extends IntuifaceElement.

Parameters

Name	Type	Description
options?	IElementOptions	of the asset (display name, description, ...)

Example

Skeleton of an interface asset class:

1/**
2 * Custom Interface Asset
3 */
4@Asset({
5    name: 'MyCustomInterfaceAsset',
6    displayName: 'Custom interface asset',
7    category: 'My Custom Interface Asset Category',
8    behaviors: []
9})
10export class MyCustomInterfaceAsset extends IntuifaceElement {
11
12    /**
13     * Property example
14     */
15    @Property({
16        displayName: 'propertyExample',
17        description: 'A property declaration example.',
18        defaultValue: 0,
19        minValue: 0,
20        maxValue: 10,
21        type: Number
22    })
23    public propertyExample: number = 0;
24
25    /**
26     * Trigger Example
27     */
28    @Trigger({
29        name: 'exampleTrigger',
30        displayName: 'A Trigger Example',
31        description: 'Raised when the property example changed'
32    })
33    public exampleTrigger(): void {}
34
35    /**
36     * Action Example
37     */
38    @Action({
39        displayName: 'Action Example',
40        description: 'An Action example with a parameter and validation',
41        validate: true
42    })
43    public actionExample(
44        @Parameter({
45            name: 'actionParam',
46            displayName: 'Action parameter',
47            description: 'An action parameter example.',
48            defaultValue: 1,
49            minValue: 0,
50            maxValue: 10,
51            type: Number
52        }) actionParam: number): void
53    {
54        if (this.propertyExample !== actionParam) {
55            this.propertyExample = actionParam;
56            // raise the trigger
57            this.exampleTrigger();
58        }
59    }
60}

---

Collection

▸ Collection(options?): (cls: any) => any

The @Collection decorator enables you to declare a custom collection that can be used in an Intuiface experience.

This is experimental as there is currently no way to use a custom collection created with the CDK in Intuiface Composer.

Parameters

Name	Type	Description
options?	ICollectionOptions	of the collection (display name, description, ...)

---

InternalProperty

▸ InternalProperty(options?): (target: unknown, propertyKey: string) => void

Decorator similar to @Property but for property not intended to be exposed in Composer.

When using this decorator on a property, it will automatically generate getter and setter that will raise the Watchable.notifyPropertyChanged event. You can also set the affectRendering option to true to indicate that any change made on this property affects rendering and should trigger rendering engine update.

Parameters

Name	Type	Description
options?	Object	-
options.affectRendering?	boolean	If true, ask visual component update when changed

---

Parameter

▸ Parameter(options?): Function

The @Parameter decorator enables you to declare an action's parameter or a trigger's parameter.

Parameters

Name	Type	Description
options?	IParameterOptions	options of the parameter (display name, description, ...)

Returns

Function

Example

An action with paramters:

1/**
2 * Action to set the volume of the media.
3 */
4@Action({
5    displayName: 'Set volume', // the display name of the action
6    description: 'Set the volume.', // the description of the action
7    validate: true // boolean for parameter validation
8})
9public setVolume(
10    @Parameter({ // declaration of the parameter
11        name: 'volume', // the name of the parameter (has to match the parameter)
12        displayName: 'Volume', // the display name of the parameter
13        description: 'Desired volume of the media', // the description of the parameter
14        defaultValue: 1, // the default value of the parameter
15        minValue: 0, // the minimum value of the parameter
16        maxValue: 1, // the maximum value of the parameter
17        type: Number // the type of the parameter
18    })volume: number): void // the declaration of the parameter to use (same name)
19{
20    this.volume = volume; // the code of the action
21}
22

Example

A trigger with paramters

1/**
2 * Count changes event
3 */
4@Trigger({
5    name: 'countChanged',
6    displayName: 'Count changes'
7})
8public countChanged(
9    @Parameter({
10        name: 'count', // the name of the parameter (has to match the parameter)
11        displayName: 'count', // the display name of the parameter
12        description: 'New count value', // the description of the parameter
13        type: Number // the type of the parameter
14    }) count: number): void { } //the parameter

---

Property

▸ Property(options?): (target: any, propertyKey: string) => void

The @Property decorator enable you to declare a Property on your asset that can be used in a Intuiface experience.

Parameters

Name	Type	Description
options?	IPropertyOptions	options of the property (display name, description, ...)

Example

1@Property({
2    displayName: 'Volume', // 'Volume' is the name of the property
3    description: 'Current volume in the media.', // here the description of the property
4    defaultValue: 1, // the default value of the property : 1
5    minValue: 0, // the minimum value : 0
6    maxValue: 1, // the maximum value : 1
7    type: Number // the property is a number (so binding on a text with '0.5' value will be converted in a number value 0.5)
8})
9public volume: number = 0; // declaration of the property

Note: the name volume is in camelCase as the naming convention.

❗⚠️⚠️⚠️⚠️❗For property type Array there is a limitation: if you modify the array with methods like push, pop, reduce, reverse, shift, sort, splice... without calling a setter (e.g. this.myArray = [...]) bindings will not be updated. To fix that, you can use the method Watchable.notifyPropertyChanged.

Example

I have an item list declared like this:

1/**
2 * Item List
3 */
4@Property({
5    displayName: 'List Items',
6    defaultValue: [],
7    type: Array,
8    itemType: ListItem
9})
10public listItems: ListItem[] = [];

I have an action which adds an item to the list using the push method. I have to add this code to be sure all my bindings will be resolved when I add a new item:

1// add my new item to the list
2this.listItems.push(newItem);
3// call the notify property changed
4this.notifyPropertyChanged('listItems', this.listItems);

Also the item class should extends Watchable and have the decorator Asset:

1@Asset({
2 name: 'ListItem',
3 behaviors: []
4}))
5export class ListItem extends Watchable
6{
7     // Declare here properties for this class 
8}

---

Trigger

▸ Trigger(options?): (target: any, propertyKey: string | symbol, descriptor: PropertyDescriptor) => void

The @Trigger decorator enables you to declare a new trigger on your asset that can be used in an Intuiface experience.

Parameters

Name	Type	Description
options?	ITriggerOptions	options of the trigger (display name, description, ...)

Example

1/**
2 * Trigger when button is pressed
3 */
4@Trigger({
5    name: 'Released', // name of the trigger
6    displayName: 'Is released', // display name in composer
7    description: 'Raised when the button is released.', // description of the trigger
8    propagationMode: EPropagationMode.Standard, // this trigger will be propagating
9    mode: ERoutingMode.BUBBLING // the propagation will bubble to parent elements
10})
11public raiseButtonReleased(): void { } // the trigger is an empty function

Note: the name raiseButtonReleased is in camelCase as the naming convention

Example

If your trigger has parameter(s), you can specify them with @Parameter decorator, the same way you declare parameters for actions.

1/**
2 * Count changes event
3 */
4@Trigger({
5    name: 'countChanged',
6    displayName: 'Count changes'
7})
8public countChanged(
9    @Parameter({
10        name: 'count', // the name of the parameter (has to match the parameter)
11        displayName: 'count', // the display name of the parameter
12        description: 'New count value', // the description of the parameter
13        type: Number // the type of the parameter
14    }) count: number): void { } //the parameter

Please read the section @Parameter for more information.

Help

Found a problem, a bug? Or need some help?
Please do not create an issue in Github! Ask us via our Support page : https://support.intuiface.com/