Thank you for the friendly description.
The cod is copied from you, so it's the same as here. Unfortunately, I'm still busy with other things and can't invest that much time yet. I read this message under the dashboard
" There is 1 widget not in a group. Click here create the missing groups"
but can't kick anything
I wondered if your copy / import / deploy process had somehow gone wrong, so copying the flow back here from your computer could help eliminate that.
It would be useful to know what computer you are running Node-red on, how you installed it and the versions of Node-red, node.js and node-red-dashboard.
It can be time consuming to track down problems. When you get some time to devote to this people here will be happy to help.
Raspberry pi
node-red v3.0.2
dashboard 3.6.0
node 12.22.9
[
{
"id": "c31640d81bf733c7",
"type": "tab",
"label": "Boiler Demo",
"disabled": false,
"info": "",
"env": []
},
{
"id": "d25954b36544f696",
"type": "ui_template",
"z": "c31640d81bf733c7",
"group": "be8cd6b09a8d7d5d",
"name": "CSS",
"order": 14,
"width": 0,
"height": 0,
"format": "<style>\n .boiler {\n height: 200px;\n width: 120px;\n border: 4px solid black;\n background: linear-gradient(0deg, var(--bottom) 0% 10%, var(--middle) 55% 65% , var(--top) 90% 100%);\n }\n</style>\n",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "global",
"className": "",
"x": 770,
"y": 120,
"wires": [
[]
]
},
{
"id": "f3c43fd0cfc8b280",
"type": "ui_template",
"z": "c31640d81bf733c7",
"group": "2a81558c7ec1f470",
"name": "",
"order": 7,
"width": 3,
"height": "6",
"format": "<div class=\"boiler\" style=\"--bottom: {{msg.bottom}}; --middle: {{msg.middle}}; --top: {{msg.top}};\">\n</div>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 780,
"y": 160,
"wires": [
[]
]
},
{
"id": "0d04e96dc9578de1",
"type": "function",
"z": "c31640d81bf733c7",
"name": "Convert temp to colour",
"func": "if (msg.payload >= 80) {\n msg.colour = '#600000';\n}\nelse if (msg.payload >= 70) {\n msg.colour = '#8b1600';\n}\nelse if (msg.payload >= 65) {\n msg.colour = '#932700';\n}\nelse if (msg.payload >= 60) {\n msg.colour = '#983400';\n}\nelse if (msg.payload >= 55) {\n msg.colour = '#9f4300';\n}\nelse if (msg.payload >= 50) {\n msg.colour = '#a75700';\n}\nelse if (msg.payload >= 45) {\n msg.colour = '#b16d00';\n}\nelse if (msg.payload >= 40) {\n msg.colour = '#b88000';\n}\nelse if (msg.payload >= 35) {\n msg.colour = '#a58414';\n}\nelse if (msg.payload >= 30) {\n msg.colour = '#5f614d';\n}\nelse if (msg.payload >= 20) {\n msg.colour = '#103b8c';\n}\nelse if (msg.payload < 20) {\n msg.colour = '#000080';\n}\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 200,
"y": 40,
"wires": [
[
"5cff6b93cae4a69d"
]
]
},
{
"id": "3831f2b421e734d8",
"type": "ui_slider",
"z": "c31640d81bf733c7",
"name": "",
"label": "Top Sensor",
"tooltip": "",
"group": "2a81558c7ec1f470",
"order": 2,
"width": 0,
"height": 0,
"passthru": true,
"outs": "end",
"topic": "topic",
"topicType": "msg",
"min": 0,
"max": "100",
"step": 1,
"className": "",
"x": 90,
"y": 120,
"wires": [
[
"f3da952e5ed1c591"
]
]
},
{
"id": "6529859cd44d0fce",
"type": "ui_slider",
"z": "c31640d81bf733c7",
"name": "",
"label": "Middle Sensor",
"tooltip": "",
"group": "2a81558c7ec1f470",
"order": 3,
"width": 0,
"height": 0,
"passthru": true,
"outs": "end",
"topic": "topic",
"topicType": "msg",
"min": 0,
"max": "100",
"step": 1,
"className": "",
"x": 100,
"y": 160,
"wires": [
[
"cf2ee47352f01a60"
]
]
},
{
"id": "1c097ca07f7c0d6f",
"type": "ui_slider",
"z": "c31640d81bf733c7",
"name": "",
"label": "Bottom Sensor",
"tooltip": "",
"group": "2a81558c7ec1f470",
"order": 4,
"width": 0,
"height": 0,
"passthru": true,
"outs": "end",
"topic": "topic",
"topicType": "msg",
"min": 0,
"max": "100",
"step": 1,
"className": "",
"x": 100,
"y": 200,
"wires": [
[
"a388b5497055a426"
]
]
},
{
"id": "d648d364970f0816",
"type": "link in",
"z": "c31640d81bf733c7",
"name": "link in 2",
"links": [],
"x": 55,
"y": 40,
"wires": [
[
"0d04e96dc9578de1"
]
]
},
{
"id": "5cff6b93cae4a69d",
"type": "link out",
"z": "c31640d81bf733c7",
"name": "link out 2",
"mode": "return",
"links": [],
"x": 355,
"y": 40,
"wires": []
},
{
"id": "f3da952e5ed1c591",
"type": "link call",
"z": "c31640d81bf733c7",
"name": "",
"links": [
"d648d364970f0816"
],
"linkType": "static",
"timeout": "30",
"x": 260,
"y": 120,
"wires": [
[
"45adf6b29841bb7b"
]
]
},
{
"id": "cf2ee47352f01a60",
"type": "link call",
"z": "c31640d81bf733c7",
"name": "",
"links": [
"d648d364970f0816"
],
"linkType": "static",
"timeout": "30",
"x": 260,
"y": 160,
"wires": [
[
"ab18517f066b5022"
]
]
},
{
"id": "a388b5497055a426",
"type": "link call",
"z": "c31640d81bf733c7",
"name": "",
"links": [
"d648d364970f0816"
],
"linkType": "static",
"timeout": "30",
"x": 260,
"y": 200,
"wires": [
[
"d3186ffd51763c63"
]
]
},
{
"id": "45adf6b29841bb7b",
"type": "change",
"z": "c31640d81bf733c7",
"name": "",
"rules": [
{
"t": "set",
"p": "top",
"pt": "flow",
"to": "colour",
"tot": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 410,
"y": 120,
"wires": [
[
"30a0aba554bc7f6d"
]
]
},
{
"id": "ab18517f066b5022",
"type": "change",
"z": "c31640d81bf733c7",
"name": "",
"rules": [
{
"t": "set",
"p": "middle",
"pt": "flow",
"to": "colour",
"tot": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 420,
"y": 160,
"wires": [
[
"30a0aba554bc7f6d"
]
]
},
{
"id": "d3186ffd51763c63",
"type": "change",
"z": "c31640d81bf733c7",
"name": "",
"rules": [
{
"t": "set",
"p": "bottom",
"pt": "flow",
"to": "colour",
"tot": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 420,
"y": 200,
"wires": [
[
"30a0aba554bc7f6d"
]
]
},
{
"id": "30a0aba554bc7f6d",
"type": "function",
"z": "c31640d81bf733c7",
"name": "function 52",
"func": "msg.top = flow.get(\"top\") ?? 0\nmsg.middle = flow.get(\"middle\") ?? 0\nmsg.bottom = flow.get(\"bottom\") ?? 0\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 610,
"y": 160,
"wires": [
[
"f3c43fd0cfc8b280"
]
]
},
{
"id": "be8cd6b09a8d7d5d",
"type": "ui_group",
"name": "Labels",
"tab": "704020d306ae5506",
"order": 1,
"disp": false,
"width": 2,
"collapse": false,
"className": ""
},
{
"id": "2a81558c7ec1f470",
"type": "ui_group",
"name": "Boiler",
"tab": "1e5db0123cb5abe5",
"order": 1,
"disp": true,
"width": "6",
"collapse": false,
"className": ""
},
{
"id": "704020d306ae5506",
"type": "ui_tab",
"name": "ESP BME",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": false
},
{
"id": "1e5db0123cb5abe5",
"type": "ui_tab",
"name": "Boiler",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]
Your Node-red version is slightly out of date (3.1 was released a week or so ago) but I don't think that is a significant issue.
node.js v12 may well cause problems though.
It is probably a good idea to re-run the Node-red installation script to update. If you add --node18 to the end, it will update node.js too.
Before you do that, update the operating system.
sudo apt update && sudo apt -y full-upgrade
Then
bash <(curl -sL https://raw.githubusercontent.com/node-red/linux-installers/master/deb/update-nodejs-and-nodered) --node18
If you see any errors please show us them.
Assuming there are none, start Node-red by typing node-red in the terminal.
Copy the output and show us please.
Does the rectangle show the coloured fill now?
Thank you jbudd
That was the solution, now it works!
I now have to deal with packing the whole thing into an .svg
THANKS
That's what I've been looking at, linear gradients in SVG. Please share your solution!
I imagined it would be easier somehow.
I would like to add a few pumps and other things to the SVG and then control them via the browser.
Now I can't get the boiler to change colors in svg.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="317.5mm" height="149.225mm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.2" baseProfile="tiny">
<desc>Created by HiQPdf</desc>
<defs>
</defs>
<g fill="none" stroke="black" stroke-width="1" fill-rule="evenodd" stroke-linecap="square" stroke-linejoin="bevel">
<g fill="#000000" fill-opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" stroke-linecap="square"
stroke-linejoin="miter" stroke-miterlimit="2" transform="matrix(1,0,0,1,0,0)">
</g>
<g fill="#000000" fill-opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" stroke-linecap="square"
stroke-linejoin="miter" stroke-miterlimit="2" transform="matrix(1,0,0,1,0,0)">
</g>
<g fill="#000000" fill-opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" stroke-linecap="square"
stroke-linejoin="miter" stroke-miterlimit="2" transform="matrix(1,0,0,1,0,0)">
</g>
<g fill="#000000" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,0,0)">
<path vector-effect="none" fill-rule="evenodd" d="M8,48 L136,48 L136,52 L8,52 L8,48" />
</g>
<g fill="#000000" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,0,0)">
<path vector-effect="none" fill-rule="evenodd" d="M8,552 L136,552 L136,556 L8,556 L8,552" />
</g>
<g fill="#000000" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,0,0)">
<path vector-effect="none" fill-rule="evenodd" d="M8,48 L12,48 L12,556 L8,556 L8,48" />
</g>
<g fill="#000000" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,0,0)">
<path vector-effect="none" fill-rule="evenodd" d="M132,48 L136,48 L136,556 L132,556 L132,48" />
</g>
<g fill="#ffff00" fill-opacity="1" stroke="#ffff00" stroke-opacity="1" stroke-width="1" stroke-linecap="square"
stroke-linejoin="bevel" transform="matrix(1,0,0,1,0,0)">
<text fill="#ffff00" fill-opacity="1" stroke="none" xml:space="preserve" x="19.5" y="67"
font-family="Times New Roman" font-size="16" font-weight="400"
font-style="normal">{{msg.warning}}</text>
</g>
<g fill="#000000" fill-opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" stroke-linecap="square"
stroke-linejoin="miter" stroke-miterlimit="2" transform="matrix(1,0,0,1,0,0)">
</g>
<g fill="#000000" fill-opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" stroke-linecap="square"
stroke-linejoin="miter" stroke-miterlimit="2" transform="matrix(1,0,0,1,0,0)">
</g>
<g fill="#000000" fill-opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" stroke-linecap="square"
stroke-linejoin="miter" stroke-miterlimit="2" transform="matrix(1,0,0,1,0,0)">
</g>
</g>
</svg>
Well I can confirm that it doesn't seem to do anything.
It's more complicated than anything I've done so far with SVG so I can't begin to debug it.
Svg version of same thing.
[{"id":"0d04e96dc9578de1","type":"function","z":"c31640d81bf733c7","name":"Convert temp to colour","func":"msg.colour = context.get(\"colourFunction\")(msg.payload).css()\nreturn msg;","outputs":1,"noerr":0,"initialize":"const colors = ['blue', 'orange', 'red']\ncontext.set('colourFunction', chroma.scale(colors).mode('lab').domain([20, 50, 90]))","finalize":"","libs":[{"var":"chroma","module":"chroma-js"}],"x":200,"y":40,"wires":[["5cff6b93cae4a69d"]]},{"id":"3831f2b421e734d8","type":"ui_slider","z":"c31640d81bf733c7","name":"","label":"Top Sensor","tooltip":"","group":"2a81558c7ec1f470","order":1,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":"100","step":1,"className":"","x":90,"y":120,"wires":[["f3da952e5ed1c591"]]},{"id":"6529859cd44d0fce","type":"ui_slider","z":"c31640d81bf733c7","name":"","label":"Middle Sensor","tooltip":"","group":"2a81558c7ec1f470","order":2,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":"100","step":1,"className":"","x":100,"y":160,"wires":[["cf2ee47352f01a60"]]},{"id":"1c097ca07f7c0d6f","type":"ui_slider","z":"c31640d81bf733c7","name":"","label":"Bottom Sensor","tooltip":"","group":"2a81558c7ec1f470","order":3,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":"100","step":1,"className":"","x":100,"y":200,"wires":[["a388b5497055a426"]]},{"id":"d648d364970f0816","type":"link in","z":"c31640d81bf733c7","name":"link in 2","links":[],"x":55,"y":40,"wires":[["0d04e96dc9578de1"]]},{"id":"5cff6b93cae4a69d","type":"link out","z":"c31640d81bf733c7","name":"link out 2","mode":"return","links":[],"x":355,"y":40,"wires":[]},{"id":"f3da952e5ed1c591","type":"link call","z":"c31640d81bf733c7","name":"","links":["d648d364970f0816"],"linkType":"static","timeout":"30","x":260,"y":120,"wires":[["45adf6b29841bb7b"]]},{"id":"cf2ee47352f01a60","type":"link call","z":"c31640d81bf733c7","name":"","links":["d648d364970f0816"],"linkType":"static","timeout":"30","x":260,"y":160,"wires":[["ab18517f066b5022"]]},{"id":"a388b5497055a426","type":"link call","z":"c31640d81bf733c7","name":"","links":["d648d364970f0816"],"linkType":"static","timeout":"30","x":260,"y":200,"wires":[["d3186ffd51763c63"]]},{"id":"45adf6b29841bb7b","type":"change","z":"c31640d81bf733c7","name":"","rules":[{"t":"set","p":"top","pt":"flow","to":"colour","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":120,"wires":[["30a0aba554bc7f6d"]]},{"id":"ab18517f066b5022","type":"change","z":"c31640d81bf733c7","name":"","rules":[{"t":"set","p":"middle","pt":"flow","to":"colour","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":420,"y":160,"wires":[["30a0aba554bc7f6d"]]},{"id":"d3186ffd51763c63","type":"change","z":"c31640d81bf733c7","name":"","rules":[{"t":"set","p":"bottom","pt":"flow","to":"colour","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":420,"y":200,"wires":[["30a0aba554bc7f6d"]]},{"id":"30a0aba554bc7f6d","type":"function","z":"c31640d81bf733c7","name":"function 52","func":"msg.top = flow.get(\"top\") ?? 0\nmsg.middle = flow.get(\"middle\") ?? 0\nmsg.bottom = flow.get(\"bottom\") ?? 0\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":610,"y":160,"wires":[["5a10ee0adf578d49"]]},{"id":"5a10ee0adf578d49","type":"ui_template","z":"c31640d81bf733c7","group":"2a81558c7ec1f470","name":"svg-boiler","order":4,"width":"4","height":"6","format":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"100%\" height=\"100%\"\n viewBox=\"0 0 200 300\" preserveAspectRatio=\"xMinYMin meet\">\n <defs>\n <linearGradient id=\"three-color-gradient\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"100%\">\n <stop offset=\"0%\" stop-color=\"{{msg.top}}\" />\n <stop offset=\"50%\" stop-color=\"{{msg.middle}}\" />\n <stop offset=\"100%\" stop-color=\"{{msg.bottom}}\" />\n </linearGradient>\n </defs>\n <rect x=\"5\" y=\"5\" style=\"stroke:black;stroke-width:4px;fill:url(#three-color-gradient)\" id=\"svg-boiler\" width=\"190\"\n height=\"290\" />\n</svg>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":780,"y":200,"wires":[[]]},{"id":"2a81558c7ec1f470","type":"ui_group","name":"Boiler","tab":"1e5db0123cb5abe5","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"1e5db0123cb5abe5","type":"ui_tab","name":"Boiler","icon":"dashboard","disabled":false,"hidden":false}]
Hello
what can I say?
Unfortunately, I don't know enough people like that in real life!
You are an enrichment for everyone who knows you personally and also in virtual life.
With a little effort you will believe in the good in people again!
A BIG THANK YOU to all of these people who sacrifice their free time for others!
Since in our world performance is unfortunately almost only linked to money, I wanted to show my gratitude and would like to donate some money for PEOPLE like this!
But these people don't think much of money otherwise they wouldn't be doing this.
Is there a way to show myself grateful?
Continue to learn about node-red and monitor this forum. When you see questions that you can help with then do that.
And tell others how awesome Node-RED is of course
In the last 4 years there has been just 1 mention of Node-red in the official Raspberry Pi blog.
I suppose more mentions there might diminish it's perceived suitability for industrial applications.
Home Assistant does better - 6 mentions this year.
The problem I still have here is:
If I describe an additional element in the same svg, then the buffer starts flashing.
[
{
"id": "69b3afb3cec991dc",
"type": "tab",
"label": "Flow 1",
"disabled": false,
"info": "",
"env": []
},
{
"id": "abb6b56b3342f42c",
"type": "function",
"z": "69b3afb3cec991dc",
"name": "Eine Kommastelle Begränzer_Boden",
"func": "var f_zaehler = msg.payload;\n//f_zaehler = f_zaehler * 10.2 / 36.7347 * 3600 / 1000;\nmsg.payload = f_zaehler.toFixed(1);\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 871.7142944335938,
"y": 83.14285278320312,
"wires": [
[
"f5975011a278b79e"
]
]
},
{
"id": "f5975011a278b79e",
"type": "function",
"z": "69b3afb3cec991dc",
"name": "Vorlauf_Boden_Temp",
"func": "const color1 = [0, 0, 255]; // blude\nconst color2 = [255, 0, 0]; // red\n\nvar temperature = msg.payload;\nvar factor = msg.payload/ 50;\n\nvar red = Math.round(color1[0] + factor * (color2[0] - color1[0]));\nvar green = Math.round(color1[1] + factor * (color2[1] - color1[1]));\nvar blue = Math.round(color1[2] + factor * (color2[2] - color1[2]));\n\nvar interpolatedColor = \"rgb(\" + red + \",\" + green + \",\" + blue + \")\"; \n\nmsg.payload= [{\n \"command\": \"update_text\",\n \"selector\": \"#boden_temp\",\n \"textContent\": temperature + \"°C\"\n},{\n \"command\": \"update_attribute\",\n \"selector\": \"#boden_temp\",\n \"attributeName\": \"fill\",\n \"attributeValue\": interpolatedColor\n}]\n\nreturn msg;\n",
"outputs": 1,
"timeout": "",
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 1131.7142944335938,
"y": 83.14285278320312,
"wires": [
[]
]
}
]
Hello, I solved it so that all payloads are done via function 52 and not individually
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks⢠or registeredŽ trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy