Page tree
Skip to end of metadata
Go to start of metadata


The Archer Panel Runtime is basically a wrapper around the Archer Runtime. It adds some additional, panel specific functionalities such as

  • loading and displaying the Archer graphic of the panel
  • receiving and changing the related variable values for the Archer graphic
  • loading history data from the Panel Service and setting the Archer graphic to a history state
  • sending user inputs (like click or touch events) to the Panel Service

You can download the Panel Runtime javascript file under:



  • How to use

  • Panel bootstrap

  • Create a new panel instance.

    var panel = new ArcherPanel.Panel();
  • Create a configuration.

    • cloudBaseUrl: Normally you don’t have to specify it. It is only necessary, if you don’t want to connect to the default Archer Cloud at
    • accessKeyId: If you want to load a panel that is not marked as ‘public viewable’, you have to specify the granted accessKeyId
    • accessKey: The related accessKey for the accessKeyId
    var panelConfig = {
        cloudBaseUrl: 'http://localhost:8081/board',
        accessKeyId: 'xCKQAFsb',
        accessKey: '660cc289-85a3-420d-9c48-748d8b159205'
  • Get a reference to the DOM container element.

    var container = document.getElementById('panel-container');
  • Initialize the panel with the container element and the configuration. init(container, panelConfig) is an async function and returns a promise object.

    panel.init(container, panelConfig).then(function () {
  • Create the websocket connection to enable realtime update and user input transmission. connect() is an async function and returns a promise object.

        return panel.connect();
    }).then(function () {
  • Send authentication request, if you want to load a panel that is not marked as public viewable. The accessKeyId and accessKey specified in the panelConfig object is send to the Archer Panel Service. authenticate() is an async function and returns a promise object.

        return panel.authenticate();
    }).then(function (evt) {
  • Check if authentication was successful.

        if (evt.isAuthenticated) {
  • Load a panel. load(panelId) is an async function and returns a promise object. If the panel is not marked as public viewable, the accessKey transmitted by the previous call of authenticate() has to be assigned to that panel and has to have read permission at least.

            panel.load("YignKLpX").then(function () {
                console.log('Panel loaded successfully.');
            }).catch(function (err) {
  • Otherwise the panel won’t be loaded and the catch block of the promise object will be called.

    }).catch(function (evt) {
  • EVT_CONNECTION_CLOSED is called when the websocket connection get lost. You can use it to try to make an automatic reconnection.

    panel.on(ArcherPanel.EVT_CONNECTION_CLOSED, function () {
  • History handling

  • Define a time range

    var toDate =;
    var fromDate = new Date(toDate.getTime() - 24 * 3600000);
  • The bucketCount defines the downsampling rate for the loaded history data. Please see the historization chapter for detailed information.

    var bucketCount = 800;
  • Load the history data for a panel from the Archer Panel Service. loadHistory(fromDate, toDate, bucketCount) is an async function and returns a promise object.

    panel.loadHistory(fromDate, toDate, bucketCount).then(function () {
  • For setting the panel state to a specific time you can use setToHistoryState(bucketIndex).

        var bucketIndex = 400;
  • EVT_STATE_HISTORY_SET is called when the graphic variable values are set to a specific time within the loaded history.

    panel.on(ArcherPanel.EVT_STATE_HISTORY_SET, function (evt) {
  • This short example will iterate over the loaded history timespan.

    bucketIndex = 0;
    var setState = function () {
        if (bucketIndex < bucketCount) setTimeout(setState, 10);
  • Load the current (most up-to-date) variable values to the panel. loadCurrentState() is and async function and returns a promise object.

    panel.loadCurrentState().then(function () {
  • History details

  • You can use panel.history to access the history object.

    var history = panel.history;
  • You can get the variable values for a specific bucket index with getHistoryValuesAt(bucketIndex). An associative array will be returned that contains a property for each variable value.

    var historyData = history.getHistoryValuesAt(bucketIndex);
    var temperature = historyData['temperature'];
  • To get an array with all values for a specific variable within the loaded timespan you can use getVariableSeries(variableName). The array will always have the size of the bucket count. If no value exists at a bucket index, the value at the array index will be null.

    var temperatureValuesArray = history.getVariableSeries('temperature');
    for (var bucketIndex = 0; bucketIndex < bucketCount; bucketIndex++) {
        if (temperatureValuesArray[bucketIndex] != null) console.log(bucketIndex + ': ' + temperatureValuesArray[bucketIndex]);
  • For computing the start timestamp of a specific bucket index you can use computeTimestampAt(bucketIndex).

    var timestampMillis = history.computeTimestampAt(bucketIndex);
    console.log(new Date(timestampMillis));
  • Archer runtime reference

  • Get a reference to the wrapped archer runtime. For detailed information about the graphic object please see the Archer Runtim Guide.

    var graphic = panel.graphic;

Check out this CodePen for a working demo:

See the Pen Panel integration basics by Archer (@archer-graphics) on CodePen.



  • No labels