I am trying to add an object to the tool bar that contains text and variable I set in the flow. The script below has the test section that I am having issues with. I have figured out how to post a variable with text that I configure in the script. However I want to use a global variable that is set from a flow. Here is the context view of the variable confirming its existance:
I have tried var kpi = global.get("kdx") and var kpi = globalContext.get("kdx"). When I add that line the script blows up.
I am running node.js ver v14.17.2 and Node-RED v2.0.1
Please advise on the proper way to import global variables to use in a java script.
<script id="clockScript1" type="text/javascript">
var clockInterval;
$(function () {
if (clockInterval) return;
//add logo
var div1 = $('<div/>');
var logo = new Image();
logo.src = '/svarclogotp.png'
logo.height = 40;
div1[0].style.margin = '0px auto';
div1[0].style.align - 'center';
div1.append(logo);
//test
var kpi = "KPi";
var div2 = $('<div/>');
var p1 = $('<p/>');
div2[0].style.margin = '0px auto';
div2[0].style.align - 'center';
div2.append(p1).text(kpi);
// add clock
var div3 = $('<div/>');
var p = $('<p/>');
div3.append(p);
div3[0].style.margin = '0px';
function displayTime() {
var d = Date();
var options = { timeZone: 'UTC', timeZoneName: 'short', hourCycle: 'h23', hour: `2-digit`, minute: `2-digit`};
p.text(new Date().toLocaleString('en-US', options));
}
clockInterval = setInterval(displayTime, 1000);
//add to toolbar when it's available
var addToToolbarTimer;
function addToToolbar() {
var toolbar = $('.md-toolbar-tools');
if(!toolbar.length) return;
toolbar.append(div1);
toolbar.append(div2);
toolbar.append(div3);
clearInterval(addToToolbarTimer);
}
addToToolbarTimer = setInterval(addToToolbar, 100);
});
</script>
