You can use custom javascript to implement nearly any interaction with objects, a canvas or the entire page. General functions that work globally: /** * Get current register value by id * @param regId {int|string} * @returns {boolean|string} */ getRegisterValueById(regId) /** * Get current register value by its variable * @param variable {string} * @returns {boolean|string} */ getRegisterValueByVariable(variable) Functions for interaction with dashboard (in the case of screens, functions are performed in isolation): /** * Creates canvas overlay * @returns {CanvasRenderingContext2D} */ createCanvas2DContext() /** * 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) 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: 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 } });