Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

HTML
<div id="container">
    <div id="background"></div>
    
      <ul id="jump_to">
        <li>
          <a class="large" href="javascript:void(0);">Jump To &hellip;</a>
          <a class="small" href="javascript:void(0);">+</a>
          <div id="jump_wrapper">
          <div id="jump_page_wrapper">
            <div id="jump_page">
              
                
                <a class="source" href="panel-runtime-guide.html">
                  panel-runtime-guide.js
                </a>
              
                
                <a class="source" href="runtime-guide.html">
                  runtime-guide.js
                </a>
              
            </div>
          </div>
        </li>
      </ul>
    
    <ul class="sections">
        
        
        
        <li id="section-1">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-1">&#182;</a>
              </div>
              <h1 id="how-to-use">How to use</h1>

            </div>
            
        </li>
        
        
        <li id="section-2">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-2">&#182;</a>
              </div>
              <h2 id="panel-bootstrap">Panel bootstrap</h2>

            </div>
            
        </li>
        
        
        <li id="section-3">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-3">&#182;</a>
              </div>
              <p>Create a new panel instance.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">var</span> panel = <span class="hljs-keyword">new</span> ArcherPanel.Panel();</pre></div></div>
            
        </li>
        
        
        <li id="section-4">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-4">&#182;</a>
              </div>
              <p>Create a configuration.</p>
<ul>
<li><code>cloudBaseUrl</code>: 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 <a href="https://cloud.archer.graphics/panels">https://cloud.archer.graphics/panels</a>.</li>
<li><code>accessKeyId</code>: If you want to load a panel that is not marked as ‘public viewable’, you have to specify the granted accessKeyId</li>
<li><code>accessKey</code>: The related accessKey for the accessKeyId</li>
</ul>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">var</span> panelConfig = {
    <span class="hljs-attr">cloudBaseUrl</span>: <span class="hljs-string">'http://localhost:8081/board'</span>,
    <span class="hljs-attr">accessKeyId</span>: <span class="hljs-string">'xCKQAFsb'</span>,
    <span class="hljs-attr">accessKey</span>: <span class="hljs-string">'660cc289-85a3-420d-9c48-748d8b159205'</span>
};</pre></div></div>
            
        </li>
        
        
        <li id="section-5">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-5">&#182;</a>
              </div>
              <p>Get a reference to the DOM container element.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">var</span> container = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'panel-container'</span>);</pre></div></div>
            
        </li>
        
        
        <li id="section-6">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-6">&#182;</a>
              </div>
              <p>Initialize the panel with the container element and the configuration. <code>init(container, panelConfig)</code> is an async function and returns a promise object.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>panel.init(container, panelConfig).then(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{</pre></div></div>
            
        </li>
        
        
        <li id="section-7">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-7">&#182;</a>
              </div>
              <p>Create the websocket connection to enable realtime update and user input transmission. <code>connect()</code> is an async function and returns a promise object.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">return</span> panel.connect();

}).then(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{</pre></div></div>
            
        </li>
        
        
        <li id="section-8">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-8">&#182;</a>
              </div>
              <p>Send authentication request, if you want to load a panel that is not marked as <em>public viewable</em>.
The <code>accessKeyId</code> and <code>accessKey</code> specified in the <code>panelConfig</code> object is send to the <em>Archer Panel Service</em>.
<code>authenticate()</code> is an async function and returns a promise object.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">return</span> panel.authenticate();

}).then(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">evt</span>) </span>{</pre></div></div>
            
        </li>
        
        
        <li id="section-9">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-9">&#182;</a>
              </div>
              <p>Check if authentication was successful.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">if</span> (evt.isAuthenticated) {</pre></div></div>
            
        </li>
        
        
        <li id="section-10">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-10">&#182;</a>
              </div>
              <p>Load a panel. <code>load(panelId)</code> is an async function and returns a promise object.
If the panel is not marked as <em>public viewable</em>, the <code>accessKey</code> transmitted by the previous call of
<code>authenticate()</code> has to be assigned to that panel and has to have <em>read</em> permission at least.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        panel.load(<span class="hljs-string">"YignKLpX"</span>).then(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Panel loaded successfully.'</span>);
        }).catch(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">err</span>) </span>{</pre></div></div>
            
        </li>
        
        
        <li id="section-11">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-11">&#182;</a>
              </div>
              <p>Otherwise the panel won’t be loaded and the catch block of the promise object will be called.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>            <span class="hljs-built_in">console</span>.log(err);
        });
    }

}).catch(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">evt</span>) </span>{

    <span class="hljs-built_in">console</span>.log(evt);
});</pre></div></div>
            
        </li>
        
        
        <li id="section-12">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-12">&#182;</a>
              </div>
              <p><code>EVT_CONNECTION_CLOSED</code> is called when the websocket connection get lost.
You can use it to try to make an automatic reconnection.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>panel.on(ArcherPanel.EVT_CONNECTION_CLOSED, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{

});</pre></div></div>
            
        </li>
        
        
        <li id="section-13">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-13">&#182;</a>
              </div>
              <h2 id="history-handling">History handling</h2>

            </div>
            
        </li>
        
        
        <li id="section-14">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-14">&#182;</a>
              </div>
              <p>Define a time range</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">var</span> toDate = <span class="hljs-built_in">Date</span>.now();
<span class="hljs-keyword">var</span> fromDate = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(toDate.getTime() - <span class="hljs-number">24</span> * <span class="hljs-number">3600000</span>);</pre></div></div>
            
        </li>
        
        
        <li id="section-15">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-15">&#182;</a>
              </div>
              <p>The <code>bucketCount</code> defines the downsampling rate for the loaded history data. Please see the historization chapter for detailed information.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">var</span> bucketCount = <span class="hljs-number">800</span>;</pre></div></div>
            
        </li>
        
        
        <li id="section-16">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-16">&#182;</a>
              </div>
              <p>Load the history data for a panel from the <em>Archer Panel Service</em>. <code>loadHistory(fromDate, toDate, bucketCount)</code> is an async function and returns a promise object.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>panel.loadHistory(fromDate, toDate, bucketCount).then(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{</pre></div></div>
            
        </li>
        
        
        <li id="section-17">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-17">&#182;</a>
              </div>
              <p>For setting the panel state to a specific time you can use <code>setToHistoryState(bucketIndex)</code>.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">var</span> bucketIndex = <span class="hljs-number">400</span>;
    panel.setToHistoryState(bucketIndex);
});</pre></div></div>
            
        </li>
        
        
        <li id="section-18">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-18">&#182;</a>
              </div>
              <p><code>EVT_STATE_HISTORY_SET</code> is called when the graphic variable values are set to a specific time within the loaded history.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>panel.on(ArcherPanel.EVT_STATE_HISTORY_SET, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">evt</span>) </span>{

    <span class="hljs-built_in">console</span>.log(evt);
});</pre></div></div>
            
        </li>
        
        
        <li id="section-19">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-19">&#182;</a>
              </div>
              <p>This short example will iterate over the loaded history timespan.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>bucketIndex = <span class="hljs-number">0</span>;
<span class="hljs-keyword">var</span> setState = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{

    panel.setToHistoryState(bucketIndex++);
    <span class="hljs-keyword">if</span> (bucketIndex &lt; bucketCount) setTimeout(setState, <span class="hljs-number">10</span>);
};</pre></div></div>
            
        </li>
        
        
        <li id="section-20">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-20">&#182;</a>
              </div>
              <p>Load the current (most up-to-date) variable values to the panel. <code>loadCurrentState()</code> is and async function and returns a promise object.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>panel.loadCurrentState().then(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{

});</pre></div></div>
            
        </li>
        
        
        <li id="section-21">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-21">&#182;</a>
              </div>
              <h2 id="history-details">History details</h2>

            </div>
            
        </li>
        
        
        <li id="section-22">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-22">&#182;</a>
              </div>
              <p>You can use <code>panel.history</code> to access the history object.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">var</span> history = panel.history;</pre></div></div>
            
        </li>
        
        
        <li id="section-23">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-23">&#182;</a>
              </div>
              <p>You can get the variable values for a specific bucket index with <code>getHistoryValuesAt(bucketIndex)</code>.
An associative array will be returned that contains a property for each variable value.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">var</span> historyData = history.getHistoryValuesAt(bucketIndex);
<span class="hljs-keyword">var</span> temperature = historyData[<span class="hljs-string">'temperature'</span>];</pre></div></div>
            
        </li>
        
        
        <li id="section-24">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-24">&#182;</a>
              </div>
              <p>To get an array with all values for a specific variable within the loaded timespan you can use <code>getVariableSeries(variableName)</code>.
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 <code>null</code>.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">var</span> temperatureValuesArray = history.getVariableSeries(<span class="hljs-string">'temperature'</span>);
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> bucketIndex = <span class="hljs-number">0</span>; bucketIndex &lt; bucketCount; bucketIndex++) {
    <span class="hljs-keyword">if</span> (temperatureValuesArray[bucketIndex] != <span class="hljs-literal">null</span>) <span class="hljs-built_in">console</span>.log(bucketIndex + <span class="hljs-string">': '</span> + temperatureValuesArray[bucketIndex]);
}</pre></div></div>
            
        </li>
        
        
        <li id="section-25">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-25">&#182;</a>
              </div>
              <p>For computing the start timestamp of a specific bucket index you can use <code>computeTimestampAt(bucketIndex)</code>.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">var</span> timestampMillis = history.computeTimestampAt(bucketIndex);
<span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(timestampMillis));</pre></div></div>
            
        </li>
        
        
        <li id="section-26">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-26">&#182;</a>
              </div>
              <h2 id="archer-runtime-reference">Archer runtime reference</h2>

            </div>
            
        </li>
        
        
        <li id="section-27">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-27">&#182;</a>
              </div>
              <p>Get a reference to the wrapped archer runtime. For detailed information about the <code>graphic</code> object please see the Archer Runtim Guide.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">var</span> graphic = panel.graphic;</pre></div></div>
            
        </li>
        
    </ul>
  </div>

https://codepen.io/archer-graphics/pen/KZepWOCheck out this CodePen for a working demo:

HTML
<p data-height="300" data-theme-id="24736" data-slug-hash="KZepWO" data-default-tab="html,result" data-user="archer-graphics" data-embed-version="2" data-pen-title="Panel integration basics" class="codepen">See the Pen <a href="https://codepen.io/archer-graphics/pen/KZepWO/">Panel integration basics</a> by Archer (<a href="https://codepen.io/archer-graphics">@archer-graphics</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

 

Simple test html page

Code Block
languagexml
<html>
<head>
    <meta charset="UTF-8">
    <title>Panel test page</title>
    <style>
        #panel-container {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

    </style>
    <script type="text/javascript" src="https://cloud.archer.graphics/libs/archer.panel.min.js"></script>
</head>
<body>
<div id="panel-container"></div>

<script type="text/javascript">

    var panel = new ArcherPanel.Panel();

    panel.init(document.getElementById('panel-container'), {
        cloudBaseUrl: 'https://cloud.archer.graphics/panels',
        accessKeyId: 'xCKQAFsb',
        accessKey: '660cc289-85a3-420d-9c48-748d8b159205'
    });

    panel.on(ArcherPanel.EVT_READY, function (evt) {

        panel.load('YignKLpX');
    });

    panel.on(ArcherPanel.EVT_PANEL_LOAD_FINISHED, function (evt) {

        console.log('Panel loaded');
    });

</script>
</body>
</html>