Included in the Adroit 126.96.36.199 SCADA Additional Components bundle is a new Web-client dashboard called Performance Anywhere. Developed in HTML5, it represents unprecedented mobility by allowing you to visualize and interact with data contained in remote agent servers from a web browser running on a computer, a tablet, or a smartphone, and on any platform – Windows, iOS, Android, etc.
Performance Anywhere is profile-based meaning different users logging in can create their own, separate user interfaces from the extensive set of widgets available on the dashboard. Architecturally, Performance Anywhere is a web application hosted in IIS (Internet Information Services) on a Windows machine that has the Adroit Smart UI Web Service installed and running. As such it can be thought of as a layer on top of said Web Service that allows users to both configure and run collections of widgets thereby making up their own set of mobile user interfaces.
This page endeavours to provide an introductory overview of Performance Anywhere, culminating in some screenshots of the different widgets in run mode.
Starting up and Logging In
To get started, create a shortcut, or manually type a URL of the form https://192.168.x.x/PerfAnyW where 192.168.x.x is the IP address of a machine with Performance Anywhere installed. Alternatively, if you create a suitable entry in the hosts file, located in the C:\Windows\System32\drivers\etc folder, as shown below, your URL could just be https://R211/PerfAnyW where R211 is the host machine name...
If everything is correct and you browse to the correct URL you should be presented with a page like…
…where you can enter your user name and password, and also set the page up to remember you, log you in automatically, and/or switch straight into Run mode instead of Design mode on start up.
Configuring pages to build your own UI
The hamburger icon to the left of the Adroit logo is used to switch between Run and Design mode. In Design mode, clicking the hamburger icon reveals the following list of widgets that can be added in a left to right Flow layout to whichever page you are working on:
|Used as a spacing separator between widgets.|
|Displays a list of alarms in a grid of configurable columns. A compact view is available for mobile or small screen browsers. User interaction includes acknowledgement of alarms.|
|Typically used to trend live data by displaying one or more series of points connected to form lines. A compact view is available for mobile or small screen browsers.|
|Typically used to display numeric values in a series of one or more vertical or horizontal bars.|
|Typically used to show numeric values by displaying a number of slices or segments that form a complete pie or circle. An option exists to display a Doughnut instead of a Pie.|
|Typically used to show numeric values by displaying data in a polar coordinate system (around a central point). An option exists to display a Radar Plot.|
|Provides a simplified, unlabelled trend of a single numeric value and indicates by means of coloured points when minimum and maximum values are reached.|
|Graphically and textually displays a single numeric value in an arc or a complete circle. Coloured ranges can be configured to give visual cue as to when alarm values are reached.|
|Graphically and textually displays a single numeric value in a vertical or horizontal line. Coloured ranges can be configured to give visual cue as to when alarm values are reached.|
|Provides either a Slider or Spin control to allow changing of a numeric value.|
|Provides different types of shapes (Square, Round, Motor, Valve) to indicate state of a single discrete value. Also provides a Switch type to toggle state of discrete value.|
|Used to display minimum, maximum, and average in addition to current value and unit for a group of Adroit Analogs that have been configured in Adroit to calculate rolling statistics.|
|Displays free-format text with placeholders thereby allowing a number of tag values of mixed types to be displayed and formatted as required.|
|Displays dataset data elements in a grid of rows and columns. Examples of datasets are event logs, database tables, Adroit agent ListSlots|
|Displays a series of images like a slide show. Can also be used to display one or more images based on numeric values.|
Using the Adroit configuration developed as part of the GIS and Mapping Quick Start guide running on the Adroit web server, and going through all the widgets in more or less the order of the above list, the next few screenshots show some widget pages displayed in run mode…
Page 1 - Trend Chart and Alarm Viewer
The top part of the screenshot shows a Trend Chart displaying six series – one for each of the Ardleigh, Bosley, Derwent, Drift, Llyn Cwellyn, and Threipmuir reservoir levels respectively.
The lower part of the screenshot shows an Alarm Viewer listing various Reservoir Level and Intruder alarms as these occur.
Page 2 - Bar Chart, Pie Chart, Polar Chart, Sparkline, Circular Gauge, Linear Gauge
Top left of the screenshot shows the six reservoir levels displayed on a horizontal Bar Chart.
Moving across, they are displayed on a Pie Chart.
Centre-left are the same six tags shown on a Polar Chart – Area Fill option.
Moving across is a single tag – Ardleigh Reservoir Level shown on Sparkline – series type Splinearea.
At the bottom the same single reservoir level tag is shown firstly on a Circular Gauge, and secondly on a Linear Gauge. In both cases suitable coloured axis ranges show the different alarm thresholds configured for this level measurement.
Page 3 - Switch, Analog Statistics, Text Display, Data Grid, Slider, Gallery
Top left of the screenshot are two Switch widgets. The first is type Square meaning it is used only to display the state of a discrete value, in this case Ardleigh Reservoir Intruder Alarm. The second widget is of type Switch which means it both indicates and controls its discrete value by toggling the value each time it is clicked.
Across on the top right is an Analog Statistics widget configured to show the six reservoir level tags. In order to show statistics instead of just current values these tags need to be configured in Adroit to calculate rolling statistics.
Next in the centre of the screenshot is Text Display listing a number of tags: Ardleigh Reservoir Level description, value, engineering units, Ardleigh Reservoir Intruder Alarm description, value and finally current system time. Text display widgets can be used like this to build complete free-format paragraphs containing a number of real-time tag values.
Next, below the Text Display, across the whole screen width is a Data Grid displaying paged contents of the Adroit event log. Columns have been selected, re-ordered, and headed to make sensible reading.
At the bottom of the screen are the final two widgets: Slider and Gallery. The Slider to the left both displays and controls the value of a numeric tag, in this case Ardleigh Reservoir High-high alarm limit which is set to 90 metres.
The Gallery widget is used to display one of two images depending on the state of Ardleigh Intruder alarm. As can be seen, the intruder alarm is active.
This web-page has just been a brief introduction to the new Performance Anywhere Web-client dashboard and more detail is available in WorkingWithPerformanceAnywhere.PDF available here or provided when the Performance Anywhere option is checked on installing the Adroit SCADA Additional Components bundle.