Hi Chaps.
Attempting to swap my heating automation control over to dashboard 2 and it's going quite well. one sticking point is that in the old text node (in Dashboard 1) you could format the displayed text by putting something like this in the value format field: {{msg.payload}}
However dashboard 2's text node doesn't have an entry box for Value Format. Is there any way I could achieve displayed text manipulation in Dashboard 2 similar to dashboard 1?
Thanks.
Use a change node with JSONata or a function node before the widget to format your value.
If it comes from a different property, be sure to move it or set it to msg.payload as thats typically where the widget reads its input value from
your data --> change node (format value, set in msg.payload) --> text node
Sorry, forgot to mention that I have a function node before the text node with this code in it (as used in my dashboard 1 version):
switch (msg.payload) {
case true :
msg.color = "Red";
msg.payload = "On";
break;
case false :
msg.color = "Green";
msg.payload = "Off";
break;
//default :
//msg.color = "Gray";
//msg.payload = "not set";
//break;
}
return msg;
This seemed to work ok in dashboard 1 but not in dashboard 2. Interestingly the dashboard 2 display shows the message changing from ON to Off, but the colour remains the same all the time i.e. it doesn't go red or green just stays white.
Thanks.
This will have no effect on dashboard 2.
You can set updates according to the documentation
e.g. msg.ui_update = { color: "red" }
Ahh that makes sense of why it doesn't work in Dashboard 2.
Thanks
Something like this then in the function node?
switch (msg.payload) {
case true :
msg.ui_update = { color: "red"};
msg.payload = "On";
break;
case false :
msg.ui_update = { color: "green" };
msg.payload = "Off";
break;
default :
msg.ui_update = { color: "grey" };
msg.payload = "not set";
break;
}
return msg;
Ok, but I have this ui-text v1 ...
and I would like to have the same layout in v2 but I can't do better than this ...
This is the function ..
const output = [null];
const pay = msg.payload.toFixed(1); //17.6
const lab = msg.label; //TEMP. INT.
output[0] = { payload: pay, ui_update: { label: lab, font: 'Verdana', fontSize: '26', color: '#FFFFFF' } };
return output;
What am I doing wrong?
Ok, but with a css....,
I can't format payload like the label into the function?
If you want to affect the styles like this, you could greatly simplify it by adding CSS styles that target the label and value. Then you just set the class name.
e.g
[{"id":"70ab4a0894a53772","type":"ui-text","z":"8291603bf42d38e4","group":"9486dd9bf5ff5d52","order":1,"width":"2","height":"2","name":"","label":"Temperature","format":"{{msg.payload}}","layout":"col-center","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"temperate-text","x":1590,"y":200,"wires":[]},{"id":"01c890fedd7949c7","type":"inject","z":"8291603bf42d38e4","name":"","props":[{"p":"payload"},{"p":"ui_update.class","v":"temperate-text cold","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"5","payloadType":"num","x":1350,"y":180,"wires":[["70ab4a0894a53772"]]},{"id":"6925fb0167c825f4","type":"inject","z":"8291603bf42d38e4","name":"","props":[{"p":"payload"},{"p":"ui_update.class","v":"temperate-text hot","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"35","payloadType":"num","x":1350,"y":260,"wires":[["70ab4a0894a53772"]]},{"id":"ae26a40f39e0b0db","type":"ui-template","z":"8291603bf42d38e4","group":"","page":"","ui":"72c1e5a9ec204878","name":"","order":0,"width":0,"height":0,"head":"","format":".temperate-text .nrdb-ui-text {\n font-family: Verdana, Geneva, Tahoma, sans-serif;\n}\n.temperate-text .nrdb-ui-text > label {\n font-size: 16px;\n}\n.temperate-text .nrdb-ui-text > span {\n color: black;\n font-size: 26px;\n}\n\n.temperate-text.cold .nrdb-ui-text>span {\n color: blue;\n}\n.temperate-text.hot .nrdb-ui-text>span {\n color: red;\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":1580,"y":160,"wires":[[]]},{"id":"3f6ffddf18874c33","type":"inject","z":"8291603bf42d38e4","name":"","props":[{"p":"payload"},{"p":"ui_update.class","v":"temperate-text","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"20","payloadType":"num","x":1350,"y":220,"wires":[["70ab4a0894a53772"]]},{"id":"9486dd9bf5ff5d52","type":"ui-group","name":"Group Name","page":"8565d0287b18d0e8","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"72c1e5a9ec204878","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-chart"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":5,"showDisconnectNotification":true,"allowInstall":true},{"id":"8565d0287b18d0e8","type":"ui-page","name":"Text","ui":"72c1e5a9ec204878","path":"/text2","icon":"home","layout":"grid","theme":"5075a7d8e4947586","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"5075a7d8e4947586","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
Thank you ....
