Getting Started

Preview Code Example

If you would like to jump right into code, please take a look at our example app  to view how our Dashboard and Player SDK can be easily implemented to create an app of your own!

Installing

  • CDN: <script src="http://cdn.enplug.net/libs/dashboard-sdk/3.0.3/sdk.min.js"></script>
  • Bower: bower install enplug-dashboard-sdk --save-dev
  • NPM: npm install @enplug/dashboard-sdk --save

Usage and Getting Started

When you build an app for Enplug displays, you also need to provide a web page that allows users to customize your app for their displays. This web page is loaded as an iFrame in the Enplug dashboard (dashboard.enplug.com). In order for your web page to communicate with and control the dashboard, you should use this SDK.

All SDK methods are asynchronous RPC calls. If you’re loading data, the data will be provided via the onSuccess callback that every method provides. There is also an onError callback for you to handle errors.

Available APIs

The SDK is split into two APIs:

enplug.account: Used for loading and modifying a user’s account settings and app config.

enplug.dashboard: Provides convenient access to UI components:

  • Loading indicator (with loading, success and error states)
  • Confirm box with custom text
  • Confirm unsaved changes box
  • Change the page header title and buttons

Jump to the API Documentation to read more.

Debug mode

Set enplug.debug = true; for the SDK to log most actions to debug. You’ll see messages like:

[Enplug SDK] Calling method: [MethodCall object]

AngularJS plugin

The JavaScript SDK comes with a built-in AngularJS plugin. If you load the SDK in a project that has already loaded Angular, the plugin will automatically be initialized. The Angular plugin provides two services for working with the Enplug SDK, and returns promises instead of requiring the use of callbacks.

To use the plugin, first include the enplug.sdk module in your Angular app’s dependencies:

angular.module('myApp', ['enplug.sdk']);

Then, the $enplugAccount and $enplugDashboard are available in your app. All method calls will return promises you can chain to, and still accept callbacks if you prefer.

angular.module('myApp').controller('MyController', function ($enplugAccount, $enplugDashboard) {
    'use strict';
    $enplugAccount.getAssets().then(function (assets) {
        $scope.assets = assets;
    });
    $enplugDashboard.openConfirm({ title: 'A title', text: 'A longer description' }).then(function () {
        // user confirmed
    }, function () {
        // user cancelled
    });
});

All methods available on enplug.account are also available on $enplugAccount, and all methods available on enplug.dashboard are available on $enplugDashboard.

Build Setup

As shown in our example-app, we are using Webpack as a build and development tool. There are two configuration files, one for the dashboard part of your project, and one for the display/player portion of the project. 

Npm scripts are used to perform the build operations. You can take a look at them in the package.json file.

When the application is built it will be in the dist/ directory. You can point a local web server to the dist/ directory if you want to preview the production build locally.

Scripts

There are only a few commands that you will need to use:

npm install: installs dependencies. 

npm run build: builds a production version of the project placing it in the dist/directory. It allows you to chose between the dashboard or app portion of the application to build.

npm run dev: this is for development. It will first build then spin up a webpack-dev-server and enable hot module reloading. 

npm run release: this is for deploying your project. It will first build, then allow you to deploy to S3 with additional AWS configuration.

Dashboard Configuration

In order to run your application through the Enplug dashboard, you must create a new app under your account and configure the settings, including the app's name, urls, screen orientations, etc.

Under the settings tab, select web application and enter the two urls for both the dashboard and player/app portions.

If working locally, these should point to your computer's IP address, corresponding with the port numbers listed in the package.json. When your ready to deploy, enter your S3 buckets or urls of your hosted application instead.

For the dashboard url, the local dev server is configured by default to use https, while the app/player portion must use http to render on Enplug displays. If you would like to use http for the dashboard instead, remove the --https argument from the build script as shown below:

Finally, run npm run dev to spin up your local dev server and select your app from the Apps dropdown.