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

1
2
3
<!-- Include the Singular Graphic JavaSrcipt library -->
<script src="https://app.singular.live/libs/singularplayer/0.1.2/singularplayer.js">
</script>

Define iframe to load the AppOutput URL in.

1
<iframe id="SingularPlayer" 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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
// global variables
var player;
var _APP_INSTANCE_ID_ = 18602; // Singular App Instance

// some code here ...

// create player object from iframe 'SingularPlayer'
player = SingularPlayer("SingularPlayer");

// 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 [initPlayerSDK()]: App output loaded');
});

// some more code here ...

Load Composition

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
// global variables
var player;
var _COMPOSITION_ID_ = 1234; // Singular Composition ID

// some code here ...

// create player object from iframe 'SingularPlayer'
player = SingularPlayer("SingularPlayer");

// render composition instance specified by _COMPOSITION_ID_
player.loadComposition(_COMPOSITION_ID_, function(){
  console.log('INFO - [initPlayerSKD()]: 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.

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

Trigger animations from JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
// global variables
var player;
var _COMPOSITION_ID_ = 1234; // Singular Composition ID
var subCompName = "name of subcomposition"

// some code here ...

// create player object from iframe 'SingularPlayer'
player = SingularPlayer("SingularPlayer");

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

// some more code here ...

Update Content

Define text input fields

1
2
<input type='text' id='Title' value="Title">
<input type='text' id='SubTitle' value="SubTitle">

Set Control Node Field named Title in local player instance

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
// global variables
var player;
var subCompName = "Headline Comp"

// some code here ...

// create player object from iframe 'SingularPlayer'
player = SingularPlayer("SingularPlayer");

// set content
function setTitle(id) {
    var subComp = player.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

1
2
3
<!-- Include the Singular Graphic JavaSrcipt library -->
<script src="https://beta.singular.live/libs/singularplayer/0.1.2/singularplayer.js">
</script>

Define iframe to load the AppOutput URL in.

1
2
<iframe id="SingularPlayer" 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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// some code here ...

// Listen to mouse events from Singular graphics
player.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