Skip to content

Developer Guide

This section describes the usage of the Singular GraphicSDK (former known as PlayerSDK).

Initialize GraphicSDK

Include the Singular Graphic JavaScript Library into your web page

<!-- Include the Singular Graphic JavaSrcipt library -->
<script src="https://app.singular.live/libs/singulargraphics/1.0.0/singulargraphics.js"></script>

Define iframe to load the AppOutput URL in.

<iframe
  id="SingularOverlay"
  style="width:720px; height: 400px; border: solid 1px black"
  src="https://app.singular.live/singularplayer/client"
></iframe>

Load Content into the Graphic Instance

Load AppOutput URL

// global variables
var player;
var _APP_INSTANCE_ID_ = 18602; // Singular App Instance

// some code here ...

// create graphic object from iframe 'SingularOverlay'
player = SingularGraphics("SingularOverlay");

// render app instance specified by _APP_INSTANCE_ID_,
// the second param is output name, passing undefined to select the first output
player.renderAppOutput(_APP_INSTANCE_ID_, null, function () {
  console.log("INFO [initGraphicsSDK()]: App output loaded");
});

// some more code here ...

Load Composition

// global variables
var overlay;
var _COMPOSITION_ID_ = 1234; // Singular Composition ID

// some code here ...

// create player object from iframe 'SingularOverlay'
overlay = SingularGraphics("SingularOverlay");

// render composition instance specified by _COMPOSITION_ID_
overlay.loadComposition(_COMPOSITION_ID_, function () {
  console.log("INFO - [initGraphicsSDK()]: Composition loaded");
});

// some more code here ...

Controlling the Graphics Instance

Control Animations

Define e.g. buttons to trigger the In and Out animations of a subcomposition.

<input type="button" value="animate IN" onclick="showSubComposition('In')" />
<input type="button" value="animate OUT" onclick="showSubComposition('Out')" />

Trigger animations from JavaScript:

// global variables
var overlay;
var _COMPOSITION_ID_ = 1234; // Singular Composition ID
var subCompName = "name of subcomposition";

// some code here ...

// create player object from iframe 'SingularOverlay'
overlay = SingularGraphics("SingularOverlay");

// Show, hide subcomposition
function showSubComposition(showState) {
  var subComp = overlay.getMainComposition().find(subCompName)[0];
  subComp.playTo(showState);
}

// some more code here ...

Update Content

Define text input fields

<input type="text" id="Title" value="Title" /> <input type="text" id="SubTitle" value="SubTitle" />

Set Control Node Field named Title in local player instance

// global variables
var overlay;
var subCompName = "Headline Comp";

// some code here ...

// create player object from iframe 'SingularOverlay'
overlay = SingularGraphics("SingularOverlay");

// set content
function setTitle(id) {
  var subComp = overlay.getMainComposition().find(subCompName)[0];
  var titleText = $("#Title").val();
  var subtitleText = $("#SubTitle").val();

  subComp.setPayload({
    Title: text,
    SubTitle: text,
  });
}

Example

  • Load composition into the local Graphic Instance: see here...
  • Control graphics in the local Graphic Instance: see here...

Handle Client Interactivity

Initialize GraphicSDK to handle interactivity

Include the Singular Graphic JavaScript Library into your web page

<!-- Include the Singular Graphic JavaSrcipt library -->
<script src="https://app.singular.live/libs/singulargraphics/1.0.0/singulargraphics.js"></script>

Define iframe to load the AppOutput URL in.

<iframe
  id="SingularOverlay"
  style="width:720px; height: 400px; border: solid 1px black"
  src="https://beta.singular.live/singularplayer/client?interactive=1"
>
</iframe>

Singular Event Callbacks

Add listener for Singular mouse events

// some code here ...

// Listen to mouse events from Singular graphics
overlay.addListener("message", function (event, msg) {
  // handle "click" events:
  if (msg.event === "click") {
    console.log("INFO [Listener] - click: ", msg);
    switch (msg.params.name) {
      case "MenuItem_1_Select":
      case "MenuItem_2_Select":
        // call function to handle "menue" click event
        handleClickItemEvent(msg);
        break;
      case "ClearItem_Select":
        // call function to handle "clear" click event
        handleClickClearEvent(msg);
        break;
      default:
        console.log("INFO [Listener] - No handle for ", msg.params.name);
    }
  }
  // handle "enter" events
  if (msg.event === "enter") {
    console.log("INFO [Listener] - enter: ", msg);
    switch (msg.params.name) {
      case "MenuItem_1_Select":
      case "MenuItem_2_Select":
      case "ClearItem_Select":
        // call function to handle enter event
        handleEnterItemEvent(msg);
        break;
      default:
        console.log("INFO [Listener] - No handle for ", msg.params.name);
    }
  }
  // handle "leave" events
  if (msg.event === "leave") {
    console.log("INFO [Listener] - leave: ", msg);
    switch (msg.params.name) {
      case "MenuItem_1_Select":
      case "MenuItem_2_Select":
      case "ClearItem_Select":
        // call function to handle leave event
        handleLeaveItemEvent(msg);
        break;
      default:
        console.log("INFO [Listener] - No handle for ", msg.params.name);
    }
  }
});

Example

  • Handle interactive callbacks in the local Graphic Instance: see here...

Getting Help