This is a template in order to create PUMA html screens.
This html file doesn't include any JavaScript library because it is dinamically loaded in an environment in which all
necessary library are already included, in particular PUMA, Bootstrap and JQuery.
In order to display a PUMA variable you need to insert in any html tag a class called puma and valorize an
html attribute called data-src with the name (or FQDN) of the variable to be shown
for example:
It is better to assign a unique id to the html tag.
Different html tags can be used, the tag can be configured with the attribute data-onupdate which declares a JavaScript
function triggered by the update of data-src, this function can receive 3 parameters:
value, id, timestamp
detectState() is an already defined callback aimed to display Tango defined states
for example:
If some JavaScript initializations are necessary they must be included in the function onScreenLoaded().
data-src values can include variable strings delimited in brackets {}. This strings must be initialized in the onScreenLoaded() using the
function initReplace(name, value) (e.g. initReplace('modNum', modNum)).
If a PUMA variable isn't meant to be displayed in a tag or is displayed in many tags (e.g. array of boolean rendered as an array of green/red leds)
an hidden tag can be used
for example:
![]() | KEY |
![]() | DOOR |
![]() | HOOK |
if a tab menu is necessary it can be added this way:
In some cases all buttons are disabled, they are enabled according to an ACL.
Parameters are read from JavaScript variable document.location.search
All commands open a popup prompt.
If the user isn't logged in there is a username password prompt otherwise the user is reminded that all command executions are logged
the FQDN of the command is shown and unless a checkbox is unchecked the popup is close authomatically 2 seconds after the command
results are shown to the user.
A percentuage can be shown by a bar
Charts are embedded in iframe
arrows can be embedded in a SVG
SVG can be animated addressing id attribute and changing style property
class tangoThresholds changes background color according to thresholds
class gauge implements a gauge using attributes data-max, data-min, data-majorTicks, data-minorTicks, data-greenZones, data-yellowZones, data-redZones
polling period can be adjusted using setPollingPeriod()
multiple fetch are reached through map() and Promise.all() methods