XiboIC or Xibo Interactive Control is a JavaScript helper library used primarily to send actions from Widgets running in Xibo's built in Web Browser, to the Player application itself on its local web server.

It can also be used by third parties to get information from Xibo and as a helper to trigger actions.

Copy dist/xibo-interactive-control.min.js to the module folder in the CMS or add to any HTML file.

Library JS file needs to be added to the getResource() method in the module's PHP file (optionaly we can add the widget/target id).

Example:

$javacriptToAdd = '<script type="text/javascript">var xiboICTargetId = ' . $this->getWidgetId() . ';</script>';
$javacriptToAdd .= '<script type="text/javascript" src="' . $this->getResourceUrl('xibo-interactive-control.js') . '"></script>';
$data['javaScript'] = $javacriptToAdd;
return $this->renderTemplate($data);

Use to update the default parameters used to connect with the server. By default the requests are made locally ( '/info' for example ), but by changing the following parameters we can connect to a remote server

xiboIC.config(libOptions)

• libOptions.protocol
• libOptions.hostname
• libOptions.port
• libOptions.headers: Array of headers in the format “key: value” ( e.g. [{ key: 'Content-Type', value: 'application/x-www-form-urlencoded' }] )

• reqOptions.done: callback to run when the request is successful
• reqOptions.error: callback to run when the request fails

Get information about the player

xiboIC.info(reqOptions)

Trigger action in the parent player

xiboIC.trigger(code, reqOptions)

• reqOptions.targetId: target widget id ( if not provided, default id will be used )
• code: trigger code for the web-hook that initiates an action in the parent player

Add a function to a queue so it can be ran later

xiboIC.addToQueue(callback, ...args)

• callback: function definition
• args: comma separated arguments for the target function

Run all the pending function in the queue ( and remove them )

xiboIC.runQueue()

Set widget state as visible and run runQueue()

xiboIC.setVisible()

Expire current widget

xiboIC.expireNow(reqOptions)

• reqOptions.targetId: target widget id ( if not provided, default id will be used )

Extend widget duration using a given value

xiboIC.extendWidgetDuration(duration, reqOptions)

• duration: value in seconds to be added to the widget current duration
• reqOptions.targetId: target widget id ( if not provided, default id will be used )

Set widget duration to a given value

xiboIC.setWidgetDuration(duration, reqOptions)

• duration: value in seconds to replace the widget current duration
• reqOptions.targetId: target widget id ( if not provided, default id will be used )

The interaction control methods use a boolean flag to lock (true) or unlock (false) a specific behaviour, and defaults to lock (true)

Disables text selection

xiboIC.lockTextSelection(lock)

Prevents right click menu

xiboIC.lockContextMenu(lock)

Disables pinch to zoom in/out

xiboIC.lockPinchZoom(lock)

Locks all the behaviours (seen above)

xiboIC.lockAllInteractions(lock)

Get realtime data directly from data connectors

Register a callback function to be called when new data arrive

xiboIC.registerNotifyDataListener(callback)

• callback: The callback function

Get realtime data from the player

xiboIC.getData(dataKey, {done, error})

• dataKey: The key of the dataset

• object: callback functions

  {}.done: callback to run when the request is successful

  {}.error: callback to run when the request fails

Helper function that gets called by the application when new data are available. Internally used.

notifyData(dataSetId, widgetId)