Using JavaScript

Navigation:  Pandoras Box > External Control (DMX,Midi,...) > SDK > Getting Started >

Using JavaScript

prev main next

Navigation:  Pandoras Box > External Control (DMX,Midi,...) > SDK > Getting Started >

Using JavaScript

prev main next

Loading...

This chapter assumes that you already have a little knowledge about Html and JavaScript.

Setup of Pandoras Box web server
Open Pandoras Box and go to the Configuration tab. Choose Web Server from the categories list and change the settings as you like. Make sure to click the "Start" button as well. If you would like to, you can have a look at the demo pages which can be viewed from your web browser. Simply navigate to the IP address of your Pandoras Box Master using the port you previously set up in the Configuration tab.
URL example: Assuming your IP is 192.168.178.100 and the configured port is 80: http://192.168.178.100 or http://192.168.178.100:800 in case the port is not the default web port

Once you are familiar with using Pandoras Box web server you can go ahead and write your own html. The only thing required to be included is the pandora.js In your header section use
<script type="text/javascript" src="web_ui.js"></script>

The web server utilizes the very same commands as all the other languages. To be able to retrieve data, all commands ask for a callback function as the first parameter. This mechanism is explained in the demo files.

Using a dedicated web server
For advanced uses it is also possible to use a dedicated web server such as Apache to proxy the commands to Pandoras Box. We supplied a simple .php script for that. All you need to do is to change one line in pandora.js. Change "var usesProxy = false;" to "var usesProxy = true;"

Example - Sequence Control
// The first parameter is the callback, which is described later on.
// The second parameter is the sequence id, which in our case is simply 1
// The third parameter describes the desired state, which can be "Play","Pause" or "Stop" (case-sensitive!)
// "Play"-button code is
PBAutoCommands.setSequenceTransportMode(false,1,'Play')

Example - Retrieving Values
// callback_sequencemode is the callback (the function that is responsible to handle the incoming data)
PBAutoCommands.getSequenceTransportMode(callback_sequencemode,1)
 
function callback_sequencemode(response){
 // Quit if "false" is passed. That means that there is no response
 if(response === false) return;
 
 // Check for errors (On error, the first short is eAutoCmdError)
 if( && response.getNextAsShort() == eAutoCmdGetSequenceTransportMode){
         // Get the mode number
         var mode = response.getNextAsInt();
         var modeText = "???";
         // Translate numeric "mode" to text
         if(mode == 1) modeText = "Play";
         if(mode == 2) modeText = "Stop";
         if(mode == 3) modeText = "Pause";
         // Display
         document.getElementById("seq1mode").value = modeText;
 }