PUMA template

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:


SR Lifetime:

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:


SR Current

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:

MOD SAFETY
  • 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