Differences

This shows you the differences between two versions of the page.

--- js:scripts [2024/02/26 14:36] – removed - external edit (Unknown date) 127.0.0.1
+++ js:scripts [2024/02/26 14:36] (current) – ↷ Page moved from hidden:js:scripts to js:scripts atolstov
@@ Line 1: / Line 1: @@
+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>