To create custom interaction controls, you can use one of samples as starting point or build your own project. The steps are:
- Add a html file for adding the UI for the interaction controls
- 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.