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

Introduction

An Archer Panel is an Archer graphic that is hosted inside the Archer Cloud and logically bound to a set of data. It typically represents the state of an instance of something.

Imagine you have an Archer graphic that visualizes weather conditions like temperature, humidity, wind etc. This graphic will be displayed in various states depending on the associated geographical weather data. 

The combination of the Archer graphic and the local weather data is called an Archer Panel. So you can have a panel for Nuremberg, one for San Francisco and one for any other City.

Another example could be an Archer graphic that shows the condition of a train within a train fleet. Each train of the fleet is indentical and can therefore be visualized by the same graphic, but each train has its own set of conditional data. In this case you would have a panel for each train that connects the train specific condition data with the Archer graphic.

Define a Panel

The first thing you need before you define an Archer panel is an Archer graphic uploaded to the Archer Host. See section Archer Host for details. 

Open and login to the Archer Host (https://cloud.archer.graphics/host

Choose your Archer Graphic from the catalog and click on edit.

In this documentation we use our weather example. You can download this example from the Archer Editor start screen.

In the popup, switch to the tab "Panels". 

Click on the add button to define a new panel.

 

Each Archer Panel will automatically get a Panel Id assigned. This is the unique identifier for this panel and you cannot change it.

Please type in a name for the panel and check "Historize" and "Public viewable". 

Then we want to define a Static variable. The panel we create is intended to display the weather in San Francisco. Within the Archer graphic a variable is defined that can be used to display the location name. For the current panel the value of the location variable shall always be "San Francisco". Please select the location variable from the list and type "San Francisco" into the input field.

Click on Apply

Thats it! Your panel is now available and ready to use.

You can repeat the last steps to create panels for all cities you like.

Clicking on a row will open the administration form for the panel.

Clicking on the trashcan icon will remove the panel. 

Please keep in mind that all historic data of this panel will be deleted once you remove a panel!

Test a Panel

Find the Link right next to the "Public viewable" checkbox within the Settings form.

This link is available as long you set your panel as "Public viewable". This is a great way in the beginning of the setup to try out and test your panel. Later on and of course in productive systems you may want to define more detailed grants for your panel. But for now we want to keep it public.

 

Clicking on the Link will open the Archer Panel Test App in a new browser tab. The Panel Id ist added to the URL as a query parameter. This will induce the Panel Test App to initially load your Panel.

https://cloud.archer.graphics/panels/test?panel-id=<your-panel-id>

On the left side of the header area the name of the Archer graphic and the name of the Archer panel is displayed. On the right side you have an input field for loading other Archer panels. Simply type in or copy and paste the Archer Panel Id. You can load any panel that is marked as "public viewable". You can load Panels from other users too. You just have to know the Panel Id (if the Panel Id does not exists or the panel is not marked as "Public viewable", you will get an error message)

You can open the Panel Test App also from your mobile phone or tablet. This gives you a comfortable and quick way to check how your Panel is working on mobile devices.


Here are some example panels we profide

Panel IdDescription 
4H3I2Kb6Example of a fictitious production line.https://cloud.archer.graphics/panels/test/?panel-id=4H3I2Kb6
HHCwYhnzVisualizes the state of a philips hue lamp.https://cloud.archer.graphics/panels/test/?panel-id=HHCwYhnz
CshK6ud6Weather in Singapore.https://cloud.archer.graphics/panels/test/?panel-id=CshK6ud6

Click on the history button at the bottom left corner and inspect the panels history.

Secure a Panel

Even if you can load and display an Archer Panel, because it is marked as "Public viewable", you are not yet allowed to set any variable value of the panel.

For setting variable values you will need to have an Access Key that is granted to the panel.

To create an Access Key open the user menu at the top left corner of the Archer Host.

Click on Manage access keys.

On the opened popup window click on Create new.

An Access Key Id and an Access Key will be generated. Click on the little eye icon beside the Access Key field to show the value. Please read the displayed text carefully and follow the instructions!

Now open the Settings popup of your Archer graphic, switch to the Panels tab again and click on the first panel within the list. 

Click on the plus icon below the Public viewable checkmark. A new row for specifing a grant will appear. Type in or copy and paste the Access Key Id in the input field and select the grant level from the drop down list. You can choose between View and View and Change. For setting variable values you need to select View and Change.

Click on Apply.

Set Panel Variables over HTTP request

Now that you have granted an Access Key you may set variable values of the panel.

There are two ways to set variable values. 

The first one is via a simple HTTP(s) request. This is the perfect choice for some quick tests, presentations or as long we don't support the Client API for your preferred programming language.

The second and recommended way is to use our Client API. It is much faster, more comfortable and also provides the ability to receive client events (like click or touch events) from the panel. The Client API is described in details in a separate chapter (see Panel Client API).

To define and send the HTTP request you can either use a tool like Postman, use the cURL command on a terminal window or write some code in your programming language. 

To see how the Panel reacts in realtime on your variable changes, you can load your Panel into the Panel Test App. 

Realtime Syncronization

In addition, you can open the panel in a second browser or on your mobile device to watch the realtime syncronization.


Using cURL

curl

-d ""
-H "Access-Key-Id:<access-key-id>
-H "Access-Key:<access-key>"  
'https://cloud.archer.graphics/panels/webapi/panels/<panel-id>/variables?<variable-name>=<variable-value>[&<variable-name>=<variable-value>]'
The example below shows how you can set the temperature and humidity of the weather example.

cURL Example
curl -d '' -H 'Access-Key-Id:Bhlj8o21' -H 'Access-Key:a8a3982e-75f5-4faf-819b-b87af50851ec' 'https://cloud.archer.graphics/panels/webapi/panels/2PhNmNRo/variables?temp=22&humidity=87'

Please remember to set the url in quotes if you specify more than one variable value. Otherwise everything after the '&' sign will be ignored.

 

Now if everything worked well you will get a json formatted response that echoes the modified values, the timestamp and the panel id.

Using Postman

 

 

 

 

  • No labels