Plugin for using PixLive in hybrid Ionic app

View the Project on GitHub vidinoti/angular-pixlive


Build Status

Plugin for using PixLive SDK in Ionic framework.


The documentation is available at

Using the Augmented Reality View

Follow the following steps do add an augmented reality view in your Ionic project:

Synchronizing content from PixLive Maker

PixLive Maker is a platform that allows anyone to create content for your app embeding PixLive SDK.

Your app needs to be synchronized with PixLive Maker so that the content can be used within the app.

To do so, the plugin exposes a PxlRemoteController service allowing you to request synchronizations of the contexts / AR content. This can be done anywhere in your controllers or at app launch time. The plugin make sure that everything is ready before issuing the call so it's safe to use it anywhere.

Example of usage within a controller constructor:

myApp.controller('PixLiveCtrl', function($scope, $ionicLoading, $compile, PxlRemoteController, $ionicPopup) {
    // Trigger a synchronization with the tag *test*
    // You can pass an empty array to synchronize with all the contexts.
    PxlRemoteController.synchronize(['test']).then(function(contexts) {
        console.log('Syncronization OK: ');
    }, function(reason) {
            title: 'PixLive Synchronization Error',
            template: reason
    }, function(progress) {
        console.log('Synchronization progress: '+progress);

Directives for events

The following directives can be used as attribute on any elements to get the associated events from the PixLive SDK:

It can be used for example as follow in your HTML template:

<ion-view view-title="AR" style="background-color: transparent !important;">
  <pxl-view pxl-context-enter="contextEnter">


This will call the contextEnter on the controller linked with the view when an image or a iBeacon is detected. The context ID is passed as a parameter to the contextEnter method.

See the directives' doc for more information.

How to build

npm install -g grunt-cli
npm install