@intuiface/core
Advanced tools
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.
▸ Action(options?): () => void
The @Action decorator enables you to declare an Action that can be used by Triggers in Intuiface Composer
| Name | Type | Description |
|---|---|---|
options? | IActionOptions | Options to configure the Action (Display name, description...) |
Example
/**
* Turn on autoplay.
*/
@Action({
displayName: 'Turn Autoplay mode on', // display name of the action
description: 'Turn Autoplay mode on.' // description of the action
})
public turnOnAutoplay(): void
{
this.isAutoplay = true; // code of the action
}
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:
/**
* Action to set the volume of the media.
*/
@Action({
displayName: 'Set volume', // the display name of the action
description: 'Set the volume.', // the description of the action
validate: true // boolean for parameter validation
})
public setVolume(
@Parameter({ // declaration of the parameter
name: 'volume', // the name of the parameter (has to match the parameter)
displayName: 'Volume', // the display name of the parameter
description: 'Desired volume of the media', // the description of the parameter
defaultValue: 1, // the default value of the parameter
minValue: 0, // the minimum value of the parameter
maxValue: 1, // the maximum value of the parameter
type: Number // the type of the parameter
})volume: number): void // the declaration of the parameter to use (same name)
{
this.volume = volume; // the code of the action
}
Please read the section @Parameter for more information.
▸ 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.
| 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:
@Property({
displayName: 'scale',
type: Number
})
public scale: number;
@Property({
displayName: 'width',
type: Number
})
public width: number;
@Property({
displayName: 'Computed width',
readOnly: true,
type: Number
})
public computedWidth: number;
@Computor({
inputs: ['scale', 'width']
})
private computeWidth(scale: number, width: number): void
{
this.computedWidth = scale * width;
}
Note that scale and width are in the same order in inputs and as computeWidth arguments.
▸ 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.
| Name | Type | Description |
|---|---|---|
options? | IElementOptions | of the asset (display name, description, ...) |
Example
Skeleton of an interface asset class:
/**
* Custom Interface Asset
*/
@Asset({
name: 'MyCustomInterfaceAsset',
displayName: 'Custom interface asset',
category: 'My Custom Interface Asset Category',
behaviors: []
})
export class MyCustomInterfaceAsset extends IntuifaceElement {
/**
* Property example
*/
@Property({
displayName: 'propertyExample',
description: 'A property declaration example.',
defaultValue: 0,
minValue: 0,
maxValue: 10,
type: Number
})
public propertyExample: number = 0;
/**
* Trigger Example
*/
@Trigger({
name: 'exampleTrigger',
displayName: 'A Trigger Example',
description: 'Raised when the property example changed'
})
public exampleTrigger(): void {}
/**
* Action Example
*/
@Action({
displayName: 'Action Example',
description: 'An Action example with a parameter and validation',
validate: true
})
public actionExample(
@Parameter({
name: 'actionParam',
displayName: 'Action parameter',
description: 'An action parameter example.',
defaultValue: 1,
minValue: 0,
maxValue: 10,
type: Number
}) actionParam: number): void
{
if (this.propertyExample !== actionParam) {
this.propertyExample = actionParam;
// raise the trigger
this.exampleTrigger();
}
}
}
▸ 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.
| Name | Type | Description |
|---|---|---|
options? | ICollectionOptions | of the collection (display name, description, ...) |
▸ 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.
| Name | Type | Description |
|---|---|---|
options? | Object | - |
options.affectRendering? | boolean | If true, ask visual component update when changed |
▸ Parameter(options?): Function
The @Parameter decorator enables you to declare an action's parameter or a trigger's parameter.
| Name | Type | Description |
|---|---|---|
options? | IParameterOptions | options of the parameter (display name, description, ...) |
Example
An action with paramters:
/**
* Action to set the volume of the media.
*/
@Action({
displayName: 'Set volume', // the display name of the action
description: 'Set the volume.', // the description of the action
validate: true // boolean for parameter validation
})
public setVolume(
@Parameter({ // declaration of the parameter
name: 'volume', // the name of the parameter (has to match the parameter)
displayName: 'Volume', // the display name of the parameter
description: 'Desired volume of the media', // the description of the parameter
defaultValue: 1, // the default value of the parameter
minValue: 0, // the minimum value of the parameter
maxValue: 1, // the maximum value of the parameter
type: Number // the type of the parameter
})volume: number): void // the declaration of the parameter to use (same name)
{
this.volume = volume; // the code of the action
}
Example
A trigger with paramters
/**
* Count changes event
*/
@Trigger({
name: 'countChanged',
displayName: 'Count changes'
})
public countChanged(
@Parameter({
name: 'count', // the name of the parameter (has to match the parameter)
displayName: 'count', // the display name of the parameter
description: 'New count value', // the description of the parameter
type: Number // the type of the parameter
}) count: number): void { } //the parameter
▸ 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.
| Name | Type | Description |
|---|---|---|
options? | IPropertyOptions | options of the property (display name, description, ...) |
Example
@Property({
displayName: 'Volume', // 'Volume' is the name of the property
description: 'Current volume in the media.', // here the description of the property
defaultValue: 1, // the default value of the property : 1
minValue: 0, // the minimum value : 0
maxValue: 1, // the maximum value : 1
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)
})
public 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:
/**
* Item List
*/
@Property({
displayName: 'List Items',
defaultValue: [],
type: Array,
itemType: ListItem
})
public 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:
// add my new item to the list
this.listItems.push(newItem);
// call the notify property changed
this.notifyPropertyChanged('listItems', this.listItems);
Also the item class should extends Watchable and have the decorator Asset:
@Asset({
name: 'ListItem',
behaviors: []
}))
export class ListItem extends Watchable
{
// Declare here properties for this class
}
▸ 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.
| Name | Type | Description |
|---|---|---|
options? | ITriggerOptions | options of the trigger (display name, description, ...) |
Example
/**
* Trigger when button is pressed
*/
@Trigger({
name: 'Released', // name of the trigger
displayName: 'Is released', // display name in composer
description: 'Raised when the button is released.', // description of the trigger
propagationMode: EPropagationMode.Standard, // this trigger will be propagating
mode: ERoutingMode.BUBBLING // the propagation will bubble to parent elements
})
public 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.
/**
* Count changes event
*/
@Trigger({
name: 'countChanged',
displayName: 'Count changes'
})
public countChanged(
@Parameter({
name: 'count', // the name of the parameter (has to match the parameter)
displayName: 'count', // the display name of the parameter
description: 'New count value', // the description of the parameter
type: Number // the type of the parameter
}) count: number): void { } //the parameter
Please read the section @Parameter for more information.
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/
FAQs
The core library to use when creating an interface asset
We found that @intuiface/core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.