Beiträge weiter oben habe ich eh schon meinen Flow und den Ventilatorflow hoch geladen..
Vielen Dank für deine Hilfe bis jetzt!
Das teste ich nochmals vielleicht hatte ich einen Fehler drinn.
Was meinst mit -> die klasse im flow selber definieren?
klasse ==> diese class hier class="rotating"
selber definiere sodass es im template so aussieht:
<svg viewBox="0 0 310 282" style="width: 80%; height: 80%;" class="{{ msg.payload.class }}">
Dann irgendwo im flow davor muss der wert im payload gesetzt werden, zB mit ein Change node
[{"id":"f3bd9905cf466a6d","type":"change","z":"f93e13e54f881a08","name":"","rules":[{"t":"set","p":"payload.class","pt":"msg","to":"rotating","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1304,"y":171,"wires":[[]]}]
statt was jetzt dort steht: {{msg.payload === 'Ein' ? 'rotating' : ''}} -->
aber das ist nur eine vermutung, keine ahnung ob das wirklich hilft.
Ich glaube ich bestimme ueber meine Zeit und was ich installiere. Bitte mir nicht sagen was ich zu tun habe um dein Problem zu loesen.
Bitte auch nicht schlechtes gewissen verteilen. Schade für dich aber dir ist offensichtlich meine Zeit auch egal ... schade eigentlich.
Nein bitte nicht falsch verstehen ich bin sehr sehr froh das du dir Zeit nimmst...
Bitte nicht falsch verstehen...sorry wenn das falsch rüber gekommen ist...
Hast du jetzt beim Flow was eingebaut zum Verständniss für mich?
Nein.
Nochmal: ich bin nicht dein Mitarbeiter, ich habe dir geholfen so gut wie es geht. Ich erwartet eigentlich das du ein bisschen selbst in die Hand nimmst und mal was ausprobierts. Schau doch mal selber ob du nicht dahinter kommst. Und wenn du nichts neues lernen willst und alles ist zu schwer, ist auch ok. Aber erwarte nicht das ich dein Problem debug, ich kann nur so viel machen und danach bist du leider auf dich gestellt (oder jemand andern).
Ok Vielen Dank
Ich geh nochmal alles durch...was du mir gesagt hast vielleicht habe ich doch einen Fehler gemacht...
Danke ich hoffe hab dich nicht verärgert war keine Absicht....
Danke dir bist der Beste ich hatte einen Fehler drinnen...
Ich habe es mit einer Funktion probiert weil ich ja die Farbe auch ändern möchte daher Funktion Node...
Der Lüfter dreht....Ich versuche hierüber den Lüfter EIN / AUS zuschalten aber dieser dreht immer durch....
Kann ich die Farbe auch noch anpassen?
Grün EIN -> Rot AUS?
Das wäre zumindest mal mein versuch
Wenn mal Zeit hast vielleicht kannst mir Bitte nochmals helfen und sagen was ich falsch gemacht habe ich glaube die payload text stimmt nicht...
Besten Dank
Unfortunately most here only speak English. If you were to translate your posts then possibly someone who uses the dashboard may be able to help. In fact it might be better to start a new topic explaining what exactly is the problem now.
Can't manage what? You can use an online service to do the translation.
But equally well the reader can easily translate within the browser.
One thing to consider... This is primarily an English spoken community. I personally have no issue with other languages being used myself (I'd love to learn German and Spanish) but as a good netizen it is not unreasonable to hope for the 1 requesting assistance to do the translation VS the 100s of readers / potential helpers floating around.
For example, I was tempted to help out this morning before work, but thought "I'm too busy to decipher the request" (sorry, but true/honest)
No offence intended btw.
Hello
I'll try it in English...
Here's my node; I'm trying to turn the fan on and off...
Payload is incorrect, I don't know why!
This is the ChangeNode of @gregorius
Test Lüfter.json (9.2 KB)
For the future, please post flows inline, it is much easier then to copy it. See this post for more details - How to share code or flow json
For others finding this, here it is
[
{
"id": "e19031902fb31d65",
"type": "tab",
"label": "Test Lüfter",
"disabled": false,
"info": "",
"env": []
},
{
"id": "de27dbcd5b8dc223",
"type": "debug",
"z": "e19031902fb31d65",
"name": "Zustand",
"active": false,
"tosidebar": false,
"console": false,
"tostatus": true,
"complete": "payload",
"targetType": "msg",
"statusVal": "payload",
"statusType": "auto",
"x": 1160,
"y": 260,
"wires": []
},
{
"id": "0e6cf6b90d87062a",
"type": "ui-template",
"z": "e19031902fb31d65",
"group": "38b5cd254674a4de",
"page": "",
"ui": "",
"name": "Ventilator-Symbol",
"order": 4,
"width": "0",
"height": "0",
"head": "",
"format": "<div style=\"width: 80px; height: 80px;\">\n <style>\n .rotating {\n animation: rotate 2s linear infinite;\n }\n\n @keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n }\n </style>\n <svg viewBox=\"0 0 360 360\" style=\"width: 80%; height: 80%;\" class=\"rotating\">\n <path style=\"fill: {{msg.color}};\"\n d=\"M 163.00,3.87 C 172.05,6.13 181.92,7.37 188.96,14.10 201.20,25.82 197.64,38.32 196.17,53.00 196.17,53.00 188.84,120.00 188.84,120.00 188.84,120.00 185.26,137.00 185.26,137.00 185.40,140.88 189.22,144.48 191.23,151.00 193.58,158.64 192.59,164.52 193.60,166.78 194.94,169.77 199.13,170.44 202.00,171.34 202.00,171.34 226.00,178.57 226.00,178.57 226.00,178.57 271.00,191.00 271.00,191.00 278.21,193.38 287.22,196.72 292.53,202.30 299.34,209.45 301.11,218.51 301.00,228.00 300.93,233.39 300.02,237.11 297.67,242.00 295.13,247.29 289.11,253.57 285.07,258.00 274.68,269.40 268.78,274.19 253.00,274.00 238.83,273.83 223.18,259.30 212.00,251.15 212.00,251.15 170.00,220.11 170.00,220.11 161.60,213.60 161.38,209.94 157.90,208.02 155.00,206.42 148.60,207.21 145.00,206.83 137.69,206.05 131.47,202.81 130.28,202.57 127.06,201.93 124.16,205.09 122.00,207.09 122.00,207.09 107.00,221.91 107.00,221.91 107.00,221.91 80.00,247.01 80.00,247.01 68.72,258.02 57.57,271.02 40.00,269.68 17.95,267.99 11.09,255.30 5.58,236.00 3.53,228.81 2.04,225.67 2.00,218.00 1.98,214.39 1.80,210.49 2.79,207.00 7.76,189.52 26.90,184.04 42.00,178.00 42.00,178.00 93.00,155.86 93.00,155.86 93.00,155.86 110.79,150.40 110.79,150.40 113.99,148.01 114.95,143.25 119.33,138.00 124.14,132.24 128.56,130.49 130.57,127.82 132.80,124.69 131.47,121.40 130.57,118.00 130.57,118.00 125.87,98.00 125.87,98.00 125.87,98.00 119.35,71.00 119.35,71.00 114.09,48.10 102.25,18.68 130.00,4.81 134.10,2.76 136.59,2.26 141.00,1.44 148.96,0.42 155.33,1.96 163.00,3.87 Z M 173.28,103.00 C 173.28,103.00 178.17,58.00 178.17,58.00 178.75,52.17 181.51,37.77 180.01,33.00 177.45,24.86 171.19,23.93 164.00,22.13 152.31,19.20 138.60,14.37 131.44,28.00 127.22,36.04 132.03,48.63 134.13,57.00 134.13,57.00 144.88,102.00 144.88,102.00 144.88,102.00 150.00,124.00 150.00,124.00 159.52,124.01 160.17,124.49 169.00,128.00 172.54,119.55 172.23,111.77 173.28,103.00 Z M 127.19,167.00 C 128.30,180.42 140.27,191.62 154.00,189.70 157.28,189.24 161.15,188.09 164.00,186.39 186.34,173.03 175.22,139.23 147.00,140.37 135.98,142.93 126.23,155.48 127.19,167.00 Z M 70.00,185.28 C 70.00,185.28 38.00,199.14 38.00,199.14 32.59,201.53 25.10,204.29 21.21,209.04 17.43,214.23 19.37,220.32 21.21,226.00 24.00,236.46 26.83,250.33 40.00,251.81 48.65,252.79 54.03,246.58 60.00,241.42 60.00,241.42 80.00,222.01 80.00,222.01 80.00,222.01 99.00,204.00 99.00,204.00 99.00,204.00 109.00,194.17 109.00,194.17 110.80,192.52 113.86,190.32 114.60,187.96 114.60,187.96 110.00,169.00 110.00,169.00 100.67,170.90 80.07,180.94 70.00,185.28 Z M 178.34,200.99 C 179.23,204.46 191.62,213.39 195.00,215.85 195.00,215.85 238.00,246.87 238.00,246.87 242.86,250.52 250.54,257.42 257.00,256.38 262.74,255.45 267.81,249.17 271.42,245.00 279.93,235.18 291.25,224.99 276.96,213.53 271.04,208.78 257.65,206.05 250.00,203.86 250.00,203.86 210.00,192.00 210.00,192.00 204.49,190.41 195.38,186.95 190.04,186.92 186.67,188.42 177.31,197.00 178.34,200.99 Z\" />\n </svg>\n</div>",
"storeOutMessages": true,
"passthru": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 950,
"y": 260,
"wires": [
[
"de27dbcd5b8dc223"
]
]
},
{
"id": "c1e0871ef8d26d3f",
"type": "inject",
"z": "e19031902fb31d65",
"name": "Ein",
"props": [
{
"p": "payload"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "Ein",
"payloadType": "str",
"x": 390,
"y": 240,
"wires": [
[
"508260cca3a6942f"
]
]
},
{
"id": "e47f3489df445b7d",
"type": "inject",
"z": "e19031902fb31d65",
"name": "Aus",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "Aus",
"payloadType": "str",
"x": 390,
"y": 280,
"wires": [
[
"508260cca3a6942f"
]
]
},
{
"id": "508260cca3a6942f",
"type": "change",
"z": "e19031902fb31d65",
"name": "",
"rules": [
{
"t": "set",
"p": "payload.class",
"pt": "msg",
"to": "rotating",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 670,
"y": 260,
"wires": [
[
"0e6cf6b90d87062a",
"b7de13d3e073c016"
]
]
},
{
"id": "b7de13d3e073c016",
"type": "debug",
"z": "e19031902fb31d65",
"name": "debug 2",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 960,
"y": 380,
"wires": []
},
{
"id": "38b5cd254674a4de",
"type": "ui-group",
"name": "Lüfter Wr. Schrank Handbetrieb",
"page": "6159669995343365",
"width": "5",
"height": "11",
"order": 3,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false",
"groupType": "default"
},
{
"id": "6159669995343365",
"type": "ui-page",
"name": "Visu Lüftersteuerung Wechselrichterschrank + Temperatur Logger Schaltschränke",
"ui": "08ae0883f7a46568",
"path": "/page1",
"icon": "home",
"layout": "flex",
"theme": "c9f3473fae20b646",
"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": "08ae0883f7a46568",
"type": "ui-base",
"name": "Mein Dashboard",
"path": "/dashboard",
"appIcon": "",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control",
"ui-led"
],
"showPathInSidebar": false,
"headerContent": "page",
"navigationStyle": "default",
"titleBarStyle": "default",
"showReconnectNotification": true,
"notificationDisplayTime": 1,
"showDisconnectNotification": true,
"allowInstall": false
},
{
"id": "c9f3473fae20b646",
"type": "ui-theme",
"name": "Standardthema",
"colors": {
"surface": "#768983",
"primary": "#e2fb97",
"bgPage": "#a6b8a0",
"groupBg": "#c1c100",
"groupOutline": "#3e3e3e"
},
"sizes": {
"density": "default",
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px"
}
},
{
"id": "f376d784b3ac6aef",
"type": "global-config",
"env": [],
"modules": {
"@flowfuse/node-red-dashboard": "1.30.2"
}
}
]
You have asked the change node to set msg.payload.class, but msg.payload is a string, which cannot have properties beneath it. Perhaps you meant to set msg.class.
Also you have set msg.payload in the inject nodes, but I don't see that being used in the template. The only property used seems to be msg.color.
I mis-copied it when I pasted it in from your file. Corrected now.
That is just the file you posted though.
Yes
I just saw that...I don't really know what the problem is.
Thanks
Here is one way you can do this using the payload to set a class on the SVG.
there are other ways too - you could send the color as a value from Node-RED or a boolean rotating flag and use logic if you wish
[{"id":"de27dbcd5b8dc223","type":"debug","z":"e19031902fb31d65","name":"Zustand","active":false,"tosidebar":false,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":1140,"y":260,"wires":[]},{"id":"0e6cf6b90d87062a","type":"ui-template","z":"e19031902fb31d65","group":"38b5cd254674a4de","page":"","ui":"","name":"Ventilator-Symbol","order":1,"width":"0","height":"0","head":"","format":"<div style=\"width: 80px; height: 80px;\">\n <style>\n svg.ein {\n transform-origin: center;\n animation: rotate 2s linear infinite;\n }\n svg path {\n fill: black; /* default/off */\n }\n svg.ein path {\n fill: green;\n }\n @keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n }\n </style>\n <svg viewBox=\"0 0 360 360\" style=\"width: 80%; height: 80%;\" :class=\"msg.payload\">\n <path\n d=\"M 163.00,3.87 C 172.05,6.13 181.92,7.37 188.96,14.10 201.20,25.82 197.64,38.32 196.17,53.00 196.17,53.00 188.84,120.00 188.84,120.00 188.84,120.00 185.26,137.00 185.26,137.00 185.40,140.88 189.22,144.48 191.23,151.00 193.58,158.64 192.59,164.52 193.60,166.78 194.94,169.77 199.13,170.44 202.00,171.34 202.00,171.34 226.00,178.57 226.00,178.57 226.00,178.57 271.00,191.00 271.00,191.00 278.21,193.38 287.22,196.72 292.53,202.30 299.34,209.45 301.11,218.51 301.00,228.00 300.93,233.39 300.02,237.11 297.67,242.00 295.13,247.29 289.11,253.57 285.07,258.00 274.68,269.40 268.78,274.19 253.00,274.00 238.83,273.83 223.18,259.30 212.00,251.15 212.00,251.15 170.00,220.11 170.00,220.11 161.60,213.60 161.38,209.94 157.90,208.02 155.00,206.42 148.60,207.21 145.00,206.83 137.69,206.05 131.47,202.81 130.28,202.57 127.06,201.93 124.16,205.09 122.00,207.09 122.00,207.09 107.00,221.91 107.00,221.91 107.00,221.91 80.00,247.01 80.00,247.01 68.72,258.02 57.57,271.02 40.00,269.68 17.95,267.99 11.09,255.30 5.58,236.00 3.53,228.81 2.04,225.67 2.00,218.00 1.98,214.39 1.80,210.49 2.79,207.00 7.76,189.52 26.90,184.04 42.00,178.00 42.00,178.00 93.00,155.86 93.00,155.86 93.00,155.86 110.79,150.40 110.79,150.40 113.99,148.01 114.95,143.25 119.33,138.00 124.14,132.24 128.56,130.49 130.57,127.82 132.80,124.69 131.47,121.40 130.57,118.00 130.57,118.00 125.87,98.00 125.87,98.00 125.87,98.00 119.35,71.00 119.35,71.00 114.09,48.10 102.25,18.68 130.00,4.81 134.10,2.76 136.59,2.26 141.00,1.44 148.96,0.42 155.33,1.96 163.00,3.87 Z M 173.28,103.00 C 173.28,103.00 178.17,58.00 178.17,58.00 178.75,52.17 181.51,37.77 180.01,33.00 177.45,24.86 171.19,23.93 164.00,22.13 152.31,19.20 138.60,14.37 131.44,28.00 127.22,36.04 132.03,48.63 134.13,57.00 134.13,57.00 144.88,102.00 144.88,102.00 144.88,102.00 150.00,124.00 150.00,124.00 159.52,124.01 160.17,124.49 169.00,128.00 172.54,119.55 172.23,111.77 173.28,103.00 Z M 127.19,167.00 C 128.30,180.42 140.27,191.62 154.00,189.70 157.28,189.24 161.15,188.09 164.00,186.39 186.34,173.03 175.22,139.23 147.00,140.37 135.98,142.93 126.23,155.48 127.19,167.00 Z M 70.00,185.28 C 70.00,185.28 38.00,199.14 38.00,199.14 32.59,201.53 25.10,204.29 21.21,209.04 17.43,214.23 19.37,220.32 21.21,226.00 24.00,236.46 26.83,250.33 40.00,251.81 48.65,252.79 54.03,246.58 60.00,241.42 60.00,241.42 80.00,222.01 80.00,222.01 80.00,222.01 99.00,204.00 99.00,204.00 99.00,204.00 109.00,194.17 109.00,194.17 110.80,192.52 113.86,190.32 114.60,187.96 114.60,187.96 110.00,169.00 110.00,169.00 100.67,170.90 80.07,180.94 70.00,185.28 Z M 178.34,200.99 C 179.23,204.46 191.62,213.39 195.00,215.85 195.00,215.85 238.00,246.87 238.00,246.87 242.86,250.52 250.54,257.42 257.00,256.38 262.74,255.45 267.81,249.17 271.42,245.00 279.93,235.18 291.25,224.99 276.96,213.53 271.04,208.78 257.65,206.05 250.00,203.86 250.00,203.86 210.00,192.00 210.00,192.00 204.49,190.41 195.38,186.95 190.04,186.92 186.67,188.42 177.31,197.00 178.34,200.99 Z\" />\n </svg>\n</div>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":950,"y":260,"wires":[["de27dbcd5b8dc223"]]},{"id":"c1e0871ef8d26d3f","type":"inject","z":"e19031902fb31d65","name":"Ein","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"ein","payloadType":"str","x":730,"y":240,"wires":[["0e6cf6b90d87062a"]]},{"id":"e47f3489df445b7d","type":"inject","z":"e19031902fb31d65","name":"Aus","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"aus","payloadType":"str","x":730,"y":280,"wires":[["0e6cf6b90d87062a"]]},{"id":"38b5cd254674a4de","type":"ui-group","name":"Lüfter Wr. Schrank Handbetrieb","page":"6159669995343365","width":"5","height":"11","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"6159669995343365","type":"ui-page","name":"Visu Lüftersteuerung Wechselrichterschrank + Temperatur Logger Schaltschränke","ui":"e91dfad2a32019e9","path":"/page1","icon":"home","layout":"flex","theme":"c9f3473fae20b646","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":2,"className":"","visible":true,"disabled":false},{"id":"e91dfad2a32019e9","type":"ui-base","name":"FlowFuse","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification"]},{"id":"c9f3473fae20b646","type":"ui-theme","name":"Standardthema","colors":{"surface":"#768983","primary":"#e2fb97","bgPage":"#a6b8a0","groupBg":"#c1c100","groupOutline":"#3e3e3e"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
