Lüfter Dasboard 2

gegge · 22 March 2026 08:52

Hallo

Ich versuche einen animierten Lüfter einzubauen was ich aber nicht hinbekomme.

Hier mein Template

<div style="width: 60px; height: 60px;">
    <style>
        .rotating {
            animation: rotate 2s linear infinite;
        }
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
    <svg viewBox="0 0 310 282" style="width: 80%; height: 80%;" class="{{msg.payload === 'Ein' ? 'rotating' : ''}}">
        <path style="fill: {{msg.color}};" 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" />
    </svg>
</div>

Vielleicht könnte mir da jemand heflen mit CSS habe ich leider nichts am Hut
Danke euch

gregorius · 22 March 2026 09:00

Hi There,

Dein CSS block:

gegge:

<style>
        .rotating {
            animation: rotate 2s linear infinite;
        }
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>

Wenn ich das richtig verstanden habe, sollte der Style block im SVG selbst definitiert werden:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="100%" height="100%" viewBox="-4 -4 8 8">
 <title>SVG animation using CSS</title>
 <style>
  @keyframes rot_kf {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  .rot { animation: rot_kf 1s linear infinite; }
 </style>
 <circle class="rot" 
  cx="0" cy="1" r="2" stroke="blue" fill="none"/>
</svg>

Du hast den style block ausserhalb vom SVG definiert, das funkt mglw. nicht ....

Aber ich bin auch kein Profi!

gegge · 22 March 2026 09:22

Ja wenn Lüfter EIN dann grün und drehen und wenn aus rot und nicht drehen!

Soll ich mal meinen flow hochladen??

Bin da leider auch kein Profi daher sehe ich den Fehler nicht!

xx_Nexus_xx · 22 March 2026 09:26

ich weiss ned ob du unbeding SVG brauchst , aber es geht auch einfacher

<div style="display: flex; justify-content: center; align-items: center; height: 100%;">
  <!-- Use mdi-spin to make the icon spin -->
  <v-icon class="mdi-spin" style="font-size: 48px;">mdi-fan</v-icon>
</div>

kannst die farbe vom Luefter genauso einfach aendern

gegge · 22 March 2026 09:31

Beim Dashboard also beim alten funktionierts ja.

gegge · 22 March 2026 09:33

Beim Dashboard 2.0 nicht...

Bin jetzt kein Profi habe das vom alten nur auf das neue Dashboard 2.0 umgestellt wie gesagt funktioniert so nicht...bin auch keine Profi würds halt gerne an laufen bringen!

Danke euch

gregorius · 22 March 2026 09:36

<style>
....
</style>
<svg>
...
</svg>

das ist was du machst, was wikipedia hat ist:

<svg>
  <style>
  ....
  </style>
...
</svg>

das ist was ich meinte mit style im svg block definieren.

Ich weiss nicht ob das dein problem loest aber das ist der unterschied zu wikipedia...

gegge · 22 March 2026 09:42

Magst dir mal meinen Flow anschauen?

gregorius · 22 March 2026 09:59

Hast du die CSS/SVG aenderungen gemacht?

Wo immer das hier definiert ist:

gegge:

<div style="width: 60px; height: 60px;">
    <style>
        .rotating {
            animation: rotate 2s linear infinite;
        }
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
    <svg viewBox="0 0 310 282" style="width: 80%; height: 80%;" class="{{msg.payload === 'Ein' ? 'rotating' : ''}}">
        <path style="fill: {{msg.color}};" 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" />
    </svg>
</div>

Aendere es zu:

<div style="width: 60px; height: 60px;">
    <svg viewBox="0 0 310 282" style="width: 80%; height: 80%;" >
      <style>
        .rotating {
            animation: rotate 2s linear infinite;
        }
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
      </style>
        <path class="{{msg.payload === 'Ein' ? 'rotating' : ''}}" style="fill: {{msg.color}};" 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" />
    </svg>
</div>

Aenderungen:

Style definition im SVG definition
CSS klasse am path element/tag definiert nicht am svg element/tag

mglw macht das ein unterschied.

gegge · 22 March 2026 10:05

Im unterne template habe ich es so eingestellt

Das ober Template ist für das alte Dashboard
Hier mal mein Flow

[
    {
        "id": "334742730b6751b8",
        "type": "tab",
        "label": "Raspberry Lüfter Steuerung",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "f9c23d23.c8c24",
        "type": "exec",
        "z": "334742730b6751b8",
        "command": "vcgencmd measure_temp",
        "addpay": false,
        "append": "",
        "useSpawn": "false",
        "timer": "",
        "oldrc": false,
        "name": "Raspberry CPU Temperature",
        "x": 400,
        "y": 100,
        "wires": [
            [
                "a0ad4644.0efbf8"
            ],
            [],
            []
        ]
    },
    {
        "id": "a0ad4644.0efbf8",
        "type": "function",
        "z": "334742730b6751b8",
        "name": "Extract CPU Temp",
        "func": "const re = /^temp=(.*)'C$/gm;\nmsg.payload = Number(msg.payload.replace(re, '$1'));\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 690,
        "y": 100,
        "wires": [
            [
                "8317134.cff18f",
                "22aecce93491ccdc",
                "f5489b6b1daed367",
                "0aebe6bad510a41d"
            ]
        ]
    },
    {
        "id": "8317134.cff18f",
        "type": "debug",
        "z": "334742730b6751b8",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 990,
        "y": 60,
        "wires": []
    },
    {
        "id": "821eed026b1b3261",
        "type": "inject",
        "z": "334742730b6751b8",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "20",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 130,
        "y": 100,
        "wires": [
            [
                "f9c23d23.c8c24"
            ]
        ]
    },
    {
        "id": "22aecce93491ccdc",
        "type": "hysteresis",
        "z": "334742730b6751b8",
        "name": "Lüfter EIN/AUS",
        "ThresholdType": "fixed",
        "ThresholdRising": "50",
        "ThresholdFalling": "48",
        "TopicThreshold": "",
        "TopicCurrent": "",
        "ThresholdDeltaRising": "",
        "ThresholdDeltaFalling": "",
        "InitialMessage": true,
        "OutRisingType": "num",
        "OutRisingValue": "1",
        "OutFallingType": "num",
        "OutFallingValue": "0",
        "OutTopicType": "str",
        "OutTopicValue": "Gipo",
        "DynRaiseError": false,
        "x": 540,
        "y": 320,
        "wires": [
            [
                "6b91a8aa8e468538",
                "78630d5a35811c3e"
            ]
        ]
    },
    {
        "id": "6b91a8aa8e468538",
        "type": "rpi-gpio out",
        "z": "334742730b6751b8",
        "name": "Lüfter Gipo EIN/AUS",
        "pin": "14",
        "set": true,
        "level": "0",
        "freq": "",
        "out": "out",
        "bcm": true,
        "x": 1200,
        "y": 320,
        "wires": []
    },
    {
        "id": "f5489b6b1daed367",
        "type": "ui-gauge",
        "z": "334742730b6751b8",
        "name": "Raspberry Pi Temperatur",
        "group": "50e96f24e642019e",
        "order": 1,
        "value": "payload",
        "valueType": "msg",
        "width": "0",
        "height": "0",
        "gtype": "gauge-half",
        "gstyle": "needle",
        "title": "Temperatur RPI",
        "alwaysShowTitle": false,
        "floatingTitlePosition": "top-left",
        "units": "Grad C°",
        "icon": "",
        "prefix": "",
        "suffix": "",
        "segments": [
            {
                "from": "0",
                "color": "#80ff80",
                "text": "",
                "textType": "label"
            },
            {
                "from": "30",
                "color": "#009500",
                "text": "",
                "textType": "label"
            },
            {
                "from": "50",
                "color": "#ff0000",
                "text": "",
                "textType": "label"
            },
            {
                "from": "60",
                "color": "#ff0000",
                "text": "",
                "textType": "label"
            }
        ],
        "min": 0,
        "max": "60",
        "sizeThickness": "16",
        "sizeGap": 4,
        "sizeKeyThickness": "8",
        "styleRounded": true,
        "styleGlow": false,
        "className": "",
        "x": 1030,
        "y": 120,
        "wires": [
            []
        ]
    },
    {
        "id": "0aebe6bad510a41d",
        "type": "ui-chart",
        "z": "334742730b6751b8",
        "group": "50e96f24e642019e",
        "name": "Temperaturverlauf",
        "label": "Temperaturverlauf",
        "order": 2,
        "chartType": "line",
        "category": "topic",
        "categoryType": "msg",
        "xAxisLabel": "",
        "xAxisProperty": "",
        "xAxisPropertyType": "timestamp",
        "xAxisType": "time",
        "xAxisFormat": "",
        "xAxisFormatType": "{HH}:{mm}:{ss}",
        "xmin": "",
        "xmax": "",
        "yAxisLabel": "",
        "yAxisProperty": "payload",
        "yAxisPropertyType": "msg",
        "ymin": "0",
        "ymax": "60",
        "bins": 10,
        "action": "append",
        "stackSeries": false,
        "pointShape": "circle",
        "pointRadius": "1",
        "showLegend": true,
        "removeOlder": 1,
        "removeOlderUnit": "86400",
        "removeOlderPoints": "1000",
        "colors": [
            "#0095ff",
            "#ff0000",
            "#ff7f0e",
            "#2ca02c",
            "#a347e1",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "textColor": [
            "#666666"
        ],
        "textColorDefault": true,
        "gridColor": [
            "#e5e5e5"
        ],
        "gridColorDefault": true,
        "width": "6",
        "height": "5",
        "className": "",
        "interpolation": "step",
        "x": 1010,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "1a10f91e6298d499",
        "type": "ui-button",
        "z": "334742730b6751b8",
        "group": "38b5cd254674a4de",
        "name": "Lüfter Handbetrieb EIN",
        "label": "Lüfter Handbetrieb EIN",
        "order": 1,
        "width": 0,
        "height": 0,
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "1",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "green-darken-1 #43A047",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 540,
        "y": 400,
        "wires": [
            [
                "6b91a8aa8e468538"
            ]
        ]
    },
    {
        "id": "d9848c3e09b7b524",
        "type": "ui-button",
        "z": "334742730b6751b8",
        "group": "38b5cd254674a4de",
        "name": "Lüfter Handbetrieb AUS",
        "label": "Lüfter Handbetrieb AUS",
        "order": 2,
        "width": 0,
        "height": 0,
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "0",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "orange-lighten-1 #FFA726",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 530,
        "y": 440,
        "wires": [
            [
                "6b91a8aa8e468538"
            ]
        ]
    },
    {
        "id": "78630d5a35811c3e",
        "type": "ui-led",
        "z": "334742730b6751b8",
        "name": "Ausgang Lüfter Dashboard",
        "group": "38b5cd254674a4de",
        "order": 3,
        "width": 0,
        "height": 0,
        "label": "Lüfter Kühlung RPI",
        "labelPlacement": "left",
        "labelAlignment": "flex-start",
        "states": [
            {
                "value": "1",
                "valueType": "num",
                "color": "#00ff00"
            },
            {
                "value": "0",
                "valueType": "num",
                "color": "#c0c0c0"
            }
        ],
        "allowColorForValueInMessage": false,
        "shape": "square",
        "showBorder": true,
        "showGlow": true,
        "x": 1180,
        "y": 280,
        "wires": []
    },
    {
        "id": "9b5106a1e1c84078",
        "type": "ds18b20",
        "z": "334742730b6751b8",
        "name": "Temperaturfühler Wr Schrank",
        "sensorid": "28-0000005b060d",
        "timer": "1",
        "x": 180,
        "y": 560,
        "wires": [
            [
                "c218d98aeffca8fd"
            ]
        ]
    },
    {
        "id": "c218d98aeffca8fd",
        "type": "debug",
        "z": "334742730b6751b8",
        "name": "debug 1",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 760,
        "y": 560,
        "wires": []
    },
    {
        "id": "f6dbec466577a9f6",
        "type": "ds18b20",
        "z": "334742730b6751b8",
        "name": "Temperaturfühler Schrank Lüftung",
        "sensorid": "28-000000581ac5",
        "timer": "1",
        "x": 200,
        "y": 620,
        "wires": [
            [
                "eb1c3bee6bd77345"
            ]
        ]
    },
    {
        "id": "22f203638613b39f",
        "type": "ds18b20",
        "z": "334742730b6751b8",
        "name": "Temperaturfühler Schrank Heizung",
        "sensorid": "28-0000005b060d",
        "timer": "1",
        "x": 200,
        "y": 680,
        "wires": [
            [
                "80685a7e4691e2a1"
            ]
        ]
    },
    {
        "id": "eb1c3bee6bd77345",
        "type": "debug",
        "z": "334742730b6751b8",
        "name": "debug 2",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 760,
        "y": 620,
        "wires": []
    },
    {
        "id": "80685a7e4691e2a1",
        "type": "debug",
        "z": "334742730b6751b8",
        "name": "debug 3",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 760,
        "y": 680,
        "wires": []
    },
    {
        "id": "84fd95a27f095d76",
        "type": "function",
        "z": "334742730b6751b8",
        "name": "Farbe festlegen",
        "func": "if (msg.payload === \"Ein\") {\n    msg.color = \"green\";\n} else if (msg.payload === \"Aus\") {\n    msg.color = \"red\";\n}\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 860,
        "y": 460,
        "wires": [
            [
                "b85500fad03ee35f",
                "50c57f521628b08a"
            ]
        ]
    },
    {
        "id": "c2e6ec555b991de8",
        "type": "debug",
        "z": "334742730b6751b8",
        "name": "Zustand",
        "active": false,
        "tosidebar": false,
        "console": false,
        "tostatus": true,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "payload",
        "statusType": "auto",
        "x": 1250,
        "y": 460,
        "wires": []
    },
    {
        "id": "b85500fad03ee35f",
        "type": "ui_template",
        "z": "334742730b6751b8",
        "group": "cf258324222aef65",
        "name": "Ventilator-Symbol",
        "order": 0,
        "width": "0",
        "height": "0",
        "format": "<div style=\"width: 60px; height: 60px;\">\n    <style>\n        .rotating {\n            animation: rotate 2s linear infinite;\n        }\n        @keyframes rotate {\n            from {\n                transform: rotate(0deg);\n            }\n            to {\n                transform: rotate(360deg);\n            }\n        }\n    </style>\n    <svg viewBox=\"0 0 310 282\" style=\"width: 80%; height: 80%;\" class=\"{{msg.payload === 'Ein' ? 'rotating' : ''}}\">\n        <path style=\"fill: {{msg.color}};\" 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>\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1070,
        "y": 460,
        "wires": [
            [
                "c2e6ec555b991de8"
            ]
        ]
    },
    {
        "id": "50c57f521628b08a",
        "type": "ui-template",
        "z": "334742730b6751b8",
        "group": "38b5cd254674a4de",
        "page": "",
        "ui": "",
        "name": "Ventilator-Symbol",
        "order": 4,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<div style=\"width: 60px; height: 60px;\">\n    <style>\n        .rotating {\n            animation: rotate 2s linear infinite;\n        }\n        @keyframes rotate {\n            from {\n                transform: rotate(0deg);\n            }\n            to {\n                transform: rotate(360deg);\n            }\n        }\n    </style>\n    <svg viewBox=\"0 0 310 282\" style=\"width: 80%; height: 80%;\" class=\"{{msg.payload === 'Ein' ? 'rotating' : ''}}\">\n        <path style=\"fill: {{msg.color}};\" 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>\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1070,
        "y": 520,
        "wires": [
            [
                "c2e6ec555b991de8"
            ]
        ]
    },
    {
        "id": "a30d5fa31568e01e",
        "type": "inject",
        "z": "334742730b6751b8",
        "name": "Ein",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "Ein",
        "payloadType": "str",
        "x": 590,
        "y": 480,
        "wires": [
            [
                "84fd95a27f095d76"
            ]
        ]
    },
    {
        "id": "62191ca290274b5e",
        "type": "inject",
        "z": "334742730b6751b8",
        "name": "Aus",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "Aus",
        "payloadType": "str",
        "x": 600,
        "y": 520,
        "wires": [
            [
                "84fd95a27f095d76"
            ]
        ]
    },
    {
        "id": "50e96f24e642019e",
        "type": "ui-group",
        "z": "334742730b6751b8",
        "name": "Lüfter Kühlung RPI",
        "page": "6159669995343365",
        "width": "5",
        "height": "4",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "38b5cd254674a4de",
        "type": "ui-group",
        "name": "Lüfter Handbetrieb",
        "page": "6159669995343365",
        "width": "5",
        "height": "11",
        "order": 5,
        "showTitle": true,
        "className": "",
        "visible": true,
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "cf258324222aef65",
        "type": "ui_group",
        "name": "Ventilator",
        "tab": "51effc356fa25bc1",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "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": "51effc356fa25bc1",
        "type": "ui_tab",
        "name": "Dashboard",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": 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": "22b56d623decc833",
        "type": "global-config",
        "env": [],
        "modules": {
            "node-red-contrib-hysteresis": "0.3.0",
            "node-red-node-pi-gpio": "2.0.7",
            "@flowfuse/node-red-dashboard": "1.30.2",
            "@flowfuse/node-red-dashboard-2-ui-led": "1.1.0",
            "node-red-contrib-ds18b20": "0.0.3",
            "node-red-dashboard": "3.6.6"
        }
    }
]

gegge · 22 March 2026 10:07

Ventilator

[
    {
        "id": "8ebc4d27a45628b4",
        "type": "inject",
        "z": "76cbc9fb4e3adf22",
        "name": "Ein",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "Ein",
        "payloadType": "str",
        "x": 140,
        "y": 100,
        "wires": [
            [
                "80e1e79b686523aa"
            ]
        ]
    },
    {
        "id": "80e1e79b686523aa",
        "type": "function",
        "z": "76cbc9fb4e3adf22",
        "name": "Farbe festlegen",
        "func": "if (msg.payload === \"Ein\") {\n    msg.color = \"green\";\n} else if (msg.payload === \"Aus\") {\n    msg.color = \"red\";\n}\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 350,
        "y": 100,
        "wires": [
            [
                "1bcaaba787c74ee8"
            ]
        ]
    },
    {
        "id": "23c76562c0fb027d",
        "type": "inject",
        "z": "76cbc9fb4e3adf22",
        "name": "Aus",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "Aus",
        "payloadType": "str",
        "x": 150,
        "y": 140,
        "wires": [
            [
                "80e1e79b686523aa"
            ]
        ]
    },
    {
        "id": "1bcaaba787c74ee8",
        "type": "ui_template",
        "z": "76cbc9fb4e3adf22",
        "group": "cf258324222aef65",
        "name": "Ventilator-Symbol",
        "order": 0,
        "width": "0",
        "height": "0",
        "format": "<div style=\"width: 60px; height: 60px;\">\n    <style>\n        .rotating {\n            animation: rotate 2s linear infinite;\n        }\n        @keyframes rotate {\n            from {\n                transform: rotate(0deg);\n            }\n            to {\n                transform: rotate(360deg);\n            }\n        }\n    </style>\n    <svg viewBox=\"0 0 310 282\" style=\"width: 80%; height: 80%;\" class=\"{{msg.payload === 'Ein' ? 'rotating' : ''}}\">\n        <path style=\"fill: {{msg.color}};\" 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>\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 570,
        "y": 100,
        "wires": [
            [
                "2af34d3c0379e1a3"
            ]
        ]
    },
    {
        "id": "2af34d3c0379e1a3",
        "type": "debug",
        "z": "76cbc9fb4e3adf22",
        "name": "Zustand",
        "active": false,
        "tosidebar": false,
        "console": false,
        "tostatus": true,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "payload",
        "statusType": "auto",
        "x": 740,
        "y": 100,
        "wires": []
    },
    {
        "id": "cf258324222aef65",
        "type": "ui_group",
        "name": "Ventilator",
        "tab": "51effc356fa25bc1",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "51effc356fa25bc1",
        "type": "ui_tab",
        "name": "Dashboard",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    },
    {
        "id": "6a1627338aad0eea",
        "type": "global-config",
        "env": [],
        "modules": {
            "node-red-dashboard": "3.6.5"
        }
    }
]

gegge · 22 March 2026 10:12

Habs gerade probiert mit deiner Änderung leider das selbe ich denke es ligt irgendwie am CSS oder so leider keine Ahnung

gregorius · 22 March 2026 10:28

Ok, habs bei https://jsfiddle.net mal ausprobiert und dein css + svg definition is korrekt, hab folgens ins html fenster gepastet und auf run gedrueckt:

<div style="width: 60px; height: 60px;">
    <style>
        .rotating {
            animation: rotate 2s linear infinite;
        }
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
    <svg viewBox="0 0 310 282" style="width: 80%; height: 80%;" class="rotating">
        <path  style="fill: {{msg.color}};" 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" />
    </svg>
</div>

Screen Recording 2026-03-22 at 11.23.55

Es liegt dann am {{msg.payload === 'Ein' ? 'rotating' : ''}} versuch dort einfach "rotating" einzutragen und schauen ob das funkt.

Ich glaube du wuerdest besser mit {{ msg.payload.klass }} fahren und die klasse im flow selber definieren. Ich glaube {{ ... ? ... : ...}} funkt nicht im template code.

gegge · 22 March 2026 11:27

Wenn ich das so eintrage also "rotating" dann steht "rotating" in ROT da und das Dashboard reagiert bzw. startet nicht mehr auf..

Und der Browser bzw. Nodered also über die Oberfläche nicht mehr Bedienbar...

gegge · 22 March 2026 11:44

Denke das weist du besser als ich
Wenn mir vielleicht den Code bitte so anpassen könntest wäre schon was du für das beste haltest!
Danke

gegge · 23 March 2026 14:56

@gregorius

Kannst mir vielleicht sagen oder zeigen wie ich das machen muss?
Oder könntest es mir machen dann kann ich es mir anschauen bitte.

Danke dir

gregorius · 24 March 2026 06:51

Habe ich doch:

Und wie schon gesagt habe, ich nutze Dashboard 2 nicht also kann ich es auch nicht testen. Ich habe nur ein vorschlag gemacht was falsch sein könnte, du musst es selbst ausprobieren um zu prüfen ob es wirklich funkt.

Im ui_template müssen die Änderung gemacht werden. Aber warscheinlich müssen noch andere nodes geändert werden - aber kann ich nicht sagen weil ich nicht dein Setup habe oder Dashboard 2 nutze.

gegge · 24 March 2026 07:20

Hallo

Das habe ich schon probiert siehe Beitrag oben...den Flow kann ich dir wohl mailen...

Ich weis jetzt aber nicht wie ich das machen muss...

Deine Vorschläge habe ich getestet ich denke das ich das richtig gemacht habe

gregorius · 24 March 2026 07:42

Dann kann ich auch nicht weiter helfen, besonders wenn du es schon ausprobiert hast.

Dann ist wohl was anderes schuld aber wie gesagt, kann ich nicht testen weil ich nicht dein Setup habe.

gegge · 24 March 2026 08:13

Ja....kanns auch falsch gemacht haben...

Den Flow kann ich dir alles mailen oder hochladen..

Dashboard 2 wäre auch gleich installiert...

Schade....

Topic		Replies	Views
How to change svg circle attribute based on msg.payload and msg.topic? Dashboard	12	1739	27 November 2019
Heating buffer dynamize Dashboard	35	748	14 November 2023
Dynamic CSS changes in Dashboard V3beta Share Your Projects node-red-dashboard	0	1134	10 September 2021
Dashboard buttons easy colour state change? Dashboard	55	5885	2 January 2021
How Can I Make Logic 1 and Logic 0 graphical with Node red and RPi 3 Dashboard	69	4742	11 September 2018

Lüfter Dasboard 2

Related topics