Help with text node alignment

Dashboard
1

Hello

I have the following flow:

image

Basically the function populates the text node with:

> msg.payload = existing_text_in_text_node + new_text + " <br>";

I store the existing text every time the function is triggered, add some new text each time and the function node is triggered every minute.

When I set the text node to width/height = auto, this happens:
image

On the fourth injection, it starts to cut text off.

When I set the text node to width/height = 20 x 4, this happens:

image

It automatically adds a large space between LOG: and the text node.

I want it to appear under the LOG: heading, but not sure how?

2

Here's a bit simpler approach. No need to mess with string combining and stuff. Just keep your log lines in array and send to the template. The rest is just the CSS ...

[{"id":"1d7b926393413478","type":"template","z":"f8b8c963bdc117f5","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<p>LOG:</p>\n<ul>\n  {{#payload}}\n  <li>{{.}}</li>\n  {{/payload}}\n</ul>","output":"str","x":500,"y":500,"wires":[["afbfef9b667ccbdf"]]},{"id":"aaf3fa2934635822","type":"inject","z":"f8b8c963bdc117f5","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[\"This is log line one\",\"second line of log\",\"third log line\",\"yet anothr log line\"]","payloadType":"json","x":330,"y":500,"wires":[["1d7b926393413478"]]},{"id":"afbfef9b667ccbdf","type":"ui_template","z":"f8b8c963bdc117f5","group":"55888982bdd0637f","name":"log","order":1,"width":"6","height":"2","format":"<style>\n    .log ul{\n        list-style-type: none;\n        margin-block: 0px;\n        padding-inline: 0px;\n        font-size: .725em;\n    }\n</style>\n<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"log","x":670,"y":500,"wires":[[]]},{"id":"55888982bdd0637f","type":"ui_group","name":"1. group","tab":"62083694d0eab7ca","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"62083694d0eab7ca","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
3

Thanks for that, looks much better. However, how can I add a new line constant after each payload? I tried html braek
in the payload, but that doesn't seem to work.

4

You need to collect those log lines and store in array. And every time new log lines added, feed that array into downstream to dashboard.
Collecting log lines can freely be separate process. You haven't shared anything about log line birth so can't advise the flow or approach just like that.

5

Here is the flow

[
    {
        "id": "fd39c82798061132",
        "type": "function",
        "z": "185499ce70cfb9ef",
        "name": "PC Warning",
        "func": "let datetime = new Date();\nlet day = datetime.getDate()  //day as a number 1 -31\nlet month = datetime.getMonth() + 1 // month as a number 0-11\nlet year = datetime.getFullYear() //year as a four digit number (yyyy)\nlet hours = datetime.getHours() //the hour (0-23)\nlet minutes = datetime.getMinutes() //-the minute (0-59)\nlet seconds = datetime.getSeconds() //-the seconds (0-59)\n\nif (month < 10) { \n    month = \"0\" + month;\n}\nif (seconds < 10) {\n    seconds = \"0\" + seconds;\n}\nif (minutes < 10) {\n    minutes = \"0\" + minutes;\n}\n\nif (hours  < 10) {\n    hours = \"0\" + hours;\n}\n\n\ndatetime = day + \"/\" + month + \"/\" + year + \" \" + hours + \":\" + minutes + \":\" + seconds; \n\nif (global.get(\"cpu_temp_warning\") === 0 && global.get(\"cpu_temp_fault_flag\") != 1) {\n    global.set(\"cpu_temp_fault_flag\", 1);\n    global.set(\"stringtext\", global.get(\"stringtext\") + \"[\" + datetime + \"] \" + \"CPU TEMPERATURE HIGH - RECORDED: \" + msg.payload + \"° <br>\");\n}\nif (global.get(\"cpu_usage_warning\") === 0 && global.get(\"cpu_usage_fault_flag\") != 1) {\n    global.set(\"cpu_usage_fault_flag\", 1);\n    global.set(\"stringtext\", global.get(\"stringtext\") + \"[\" + datetime + \"] \" + \"CPU USAGE HIGH - RECORDED: \" + msg.payload + \"% <br>\");\n\n}\nif (global.get(\"mem_warning\") === 0 && global.get(\"mem_usage_fault_flag\") != 1) {\n    global.set(\"mem_usage_fault_flag\", 1);\n\n    global.set(\"stringtext\", global.get(\"stringtext\") + \"[\" + datetime + \"] \" + \" MEMORY USAGE HIGH - RECORDED: \" + msg.payload + \"%  <br>\");\n}\nif (global.get(\"hdd_capacity_warning\") === 0 && global.get(\"hdd_usage_fault_flag\") != 1) {\n    global.set(\"hdd_usage_fault_flag\", 1);\n    global.set(\"stringtext\", global.get(\"stringtext\") + \"[\" + datetime + \"] \" + \" HDD USAGE HIGH - RECORDED: \" + msg.payload + \"%  <br>\");\n\n}\n\nmsg.payload = global.get(\"stringtext\");\n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 4330,
        "y": 4660,
        "wires": [
            [
                "2a67b5bdf5f3f348"
            ]
        ]
    },
    {
        "id": "2a67b5bdf5f3f348",
        "type": "template",
        "z": "185499ce70cfb9ef",
        "name": "",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<p>LOG:</p>\n<ul>\n  {{#payload}}\n  <li>{{.}}</li>\n  {{/payload}}\n</ul>",
        "output": "str",
        "x": 4960,
        "y": 4940,
        "wires": [
            [
                "c33ab084033559fb",
                "f2ad52505ed94526"
            ]
        ]
    },
    {
        "id": "c33ab084033559fb",
        "type": "ui_template",
        "z": "185499ce70cfb9ef",
        "group": "45239af46bedd77d",
        "name": "Log text",
        "order": 4,
        "width": "20",
        "height": "5",
        "format": "<style>\n    .log ul {\n        list-style-type: none;\n        margin-block: 0px;\n        padding-inline: 0px;\n        font-size: .725em;\n    }\n</style>\n<div ng-bind-html=\"msg.payload\"></div>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "log",
        "x": 5160,
        "y": 4940,
        "wires": [
            []
        ]
    },
    {
        "id": "45239af46bedd77d",
        "type": "ui_group",
        "name": "Server7",
        "tab": "65cdc3b7ba4a47b9",
        "order": 8,
        "disp": false,
        "width": "20",
        "collapse": false
    },
    {
        "id": "65cdc3b7ba4a47b9",
        "type": "ui_tab",
        "name": "Server",
        "icon": "dashboard",
        "order": 11,
        "disabled": false,
        "hidden": false
    }
]

I have a function node injecting stringtext which contains an error message every minute based on a condition. Can a new line constant be added to the end of each array entry?

It displays fine, but each entry is placed on the same line.

6

Those lines where you do

 global.set("stringtext", global.get("stringtext") + "[" + datetime + "] " + "CPU TEMPERATURE HIGH - RECORDED: " + msg.payload + "° <br>");

should be changed to store the part

"[" + datetime + "] " + "CPU TEMPERATURE HIGH - RECORDED: " + msg.payload

into array.
Same way as you do with the full text currently but just new entry to array.

7

so instead of storing into global var stringtext, stringtext should be an array with each entry stored into a new element of the array?

8

Correct. And that also gives you the option to manage how much log lines will be held or shown.

9

Thanks I will try this later today

10

So I gave it a shot, here is the code:

let datetime = new Date();
let day = datetime.getDate()  //day as a number 1 -31
let month = datetime.getMonth() + 1 // month as a number 0-11
let year = datetime.getFullYear() //year as a four digit number (yyyy)
let hours = datetime.getHours() //the hour (0-23)
let minutes = datetime.getMinutes() //-the minute (0-59)
let seconds = datetime.getSeconds() //-the seconds (0-59)
var x = 0;
var y = 0;

if (month < 10) { 
    month = "0" + month;
}
if (seconds < 10) {
    seconds = "0" + seconds;
}
if (minutes < 10) {
    minutes = "0" + minutes;
}

if (hours  < 10) {
    hours = "0" + hours;
}


for(x=0;x<4;x++) {
    if (global.get("stringtext[x]") != undefined) {
       y = y + 1;
    }
}


datetime = day + "/" + month + "/" + year + " " + hours + ":" + minutes + ":" + seconds; 

if (global.get("cpu_temp_warning") === 0 && global.get("cpu_temp_fault_flag") != 1) {
    global.set("cpu_temp_fault_flag", 1);
    global.set("stringtext[y]", "[" + datetime + "] " + "CPU TEMPERATURE HIGH - RECORDED: " + msg.payload + "°");
}
if (global.get("cpu_usage_warning") === 0 && global.get("cpu_usage_fault_flag") != 1) {
    global.set("cpu_usage_fault_flag", 1);
    global.set("stringtext[y]", "[" + datetime + "] " + "CPU USAGE HIGH - RECORDED: " + msg.payload + "% ");

}
if (global.get("mem_warning") === 0 && global.get("mem_usage_fault_flag") != 1) {
    global.set("mem_usage_fault_flag", 1);

    global.set("stringtext[y]", "[" + datetime + "] " + " MEMORY USAGE HIGH - RECORDED: " + msg.payload + "%");
}
if (global.get("hdd_capacity_warning") === 0 && global.get("hdd_usage_fault_flag") != 1) {
    global.set("hdd_usage_fault_flag", 1);
    global.set("stringtext[y]", "[" + datetime + "] " + " HDD USAGE HIGH - RECORDED: " + msg.payload + "%");

}

msg.payload = global.get("stringtext[y]");

return msg;

I keep getting this error:

Error: Invalid property expression: unexpected x at position 11

I don't know why that error is returning, position 11 has nothing to do with x :\

11 
let log = global.get('log') ?? [] // full log to store
let logline = null; // line of log if conditions met
const loglimit = 10; // limit count of loglines to hold

let datetime = new Date();
let day = datetime.getDate()  //day as a number 1 -31
let month = datetime.getMonth() + 1 // month as a number 0-11
let year = datetime.getFullYear() //year as a four digit number (yyyy)
let hours = datetime.getHours() //the hour (0-23)
let minutes = datetime.getMinutes() //-the minute (0-59)
let seconds = datetime.getSeconds() //-the seconds (0-59)

if (month < 10) {
    month = "0" + month;
}
if (seconds < 10) {
    seconds = "0" + seconds;
}
if (minutes < 10) {
    minutes = "0" + minutes;
}

if (hours < 10) {
    hours = "0" + hours;
}
datetime = day + "/" + month + "/" + year + " " + hours + ":" + minutes + ":" + seconds;







if (global.get("cpu_temp_warning") === 0 && global.get("cpu_temp_fault_flag") != 1) {
    global.set("cpu_temp_fault_flag", 1);
    logline = "[" + datetime + "] " + "CPU TEMPERATURE HIGH - RECORDED: " + msg.payload + "°";
}
if (global.get("cpu_usage_warning") === 0 && global.get("cpu_usage_fault_flag") != 1) {
    global.set("cpu_usage_fault_flag", 1);
    logline = "[" + datetime + "] " + "CPU USAGE HIGH - RECORDED: " + msg.payload + "% ";

}
if (global.get("mem_warning") === 0 && global.get("mem_usage_fault_flag") != 1) {
    global.set("mem_usage_fault_flag", 1);
    logline = "[" + datetime + "] " + " MEMORY USAGE HIGH - RECORDED: " + msg.payload + "%";
}
if (global.get("hdd_capacity_warning") === 0 && global.get("hdd_usage_fault_flag") != 1) {
    global.set("hdd_usage_fault_flag", 1);
    logline = "[" + datetime + "] " + " HDD USAGE HIGH - RECORDED: " + msg.payload + "%";
}

// none of conditions above has been met, do nothing
if (!logline){
    return
}

//add new logline to array as last element
log.push(logline)

//remove loglines from array beginning if array is longer than limit says 
while (log.length > loglimit) {
    log.shift()
}

//store log
global.set("log",log)

// add log to payload
msg.payload = log;
//send out
return msg;

Code is not tested cos I don't have many things as you do in global context

1 Like
12

Thank you - that worked a treat!

13

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.