WebHMI Docs

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
You can use custom javascript to implement nearly any interaction with objects, a canvas or the entire page.
General functions that work globally:
<code javascript> 
/**
 * Get current register value by id
 * @param regId {int|string}
 * @returns {boolean|string}
 */
getRegisterValueById(regId)
</code> 
<code javascript>
/**
 * Get current register value by its variable
 * @param variable {string}
 * @returns {boolean|string}
 */
getRegisterValueByVariable(variable)
</code> 
Functions for interaction with dashboard (in the case of screens, functions are performed in isolation):
<code javascript>
/**
 * Creates canvas overlay
 * @returns {CanvasRenderingContext2D}
 */
createCanvas2DContext()
</code> 
<code javascript>
/**
 * Sets property to dashboard object.
 * @param id {int} required. You can find id in ObjectInspector or in object Properties tab (first row)
 * @param properties {Object} required. An object, contains properties to set {property: value, secondProperty: diffValue, ...}
 * Typical list of properties is: width, height, top, left, stroke, fill, hide, globalAlpha and so on
 * @param settings {Object|false} optional. An object, contains animation settings.
 * Possible keys are:
 *      duration {int} ms optional, default transition duration is dashboard refresh interval,
 *      onComplete {function} optional, callback function
 *      easing {string} optional, list: easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce
 */
setObjProperty(id, properties, settings)
</code>

Events observer can be implemented via callback functions. As for now handling available for 'alert', 'message' and general scan update ''('register:newValue') ''  with ''  App.on(event, callback([{}, ...]))''
Most handy event '' 'register:newValue'''  brings array of registers, changed during update interval as''  [{regId: int, state: string, value: string}, ...]'' 


Example: 

<code javascript> 
var minValue = getRegisterValueById(74);
var maxValue = getRegisterValueByVariable('max');
var currentValue = getRegisterValueById(55);

function getSmoothTemperatureColor(){
    var delta = currentValue - minValue;
    return 'hsl(' + (150 - parseInt(delta)) + 'deg 50% 50%)';
}

if (minValue && maxValue)
    setObjProperty(12, {fill: getSmoothTemperatureColor()});
    
App.on('register:newValue', data => {
    let needle = data.filter(r => r.regId === 55);
    if (needle.length === 1) {
       currentValue = needle[0].value;
    }
    setObjProperty(12, {fill: getSmoothTemperatureColor()});
    if (currentValue >= maxValue) {
        // do some other stuff
    }
});

</code>