Creating custom interaction controls

To create custom interaction controls, you can use one of samples as starting point or build your own project. The steps are:

  1. Add a html file for adding the UI for the interaction controls
  2. Add a css file for styling the controls

The interaction control needs to be registered by calling below method:

rin.Ext.registerInteractionControlFactory takes a unique interaction control ID as first param. To make the interaction control ID unique, use this suggested format <CompanyName>.Rin.InteractionControls.<InteractionControlName>. The second parameter is factory function.

The factory function has 2 parameters. First one is “resourcesResolver” – this is a proxy object to the resource resolving mechanism used by the player. This can be used to get full path to system resources by passing in relative paths. The second parameter “loadedCallback” is a callback to the experience stream that requested the interactionControl, signaling the completion of load and thus returning the html element.

In the experience stream that has to display this interaction control, implement the following public method

In the getInteractionControls method of the Experiencestream, query the orchestrator’s getInteractionControls method and return the interaction controls ui element to be added to the player footer. The orchestrator’s getInteractionControls method takes two arguments; first argument is an array of the interaction control unique IDs, the same id with which the control was registered to the InteractionControlFactory in the step above, second argument is a callback function from the InteractionControl, after loading its html. Inside the callback function, you can bind or hookup to the UI events and implement the required functionality.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s