![\"\"](\"https:\/\/www.rustimation.eu\/wordpress\/wp-content\/uploads\/2023\/01\/switch1-300x64.png\")
<\/a>Nun sieht dieses Icon f\u00fcr die Darstellung und Schaltung eines Ein\/Aus Schalters ganz h\u00fcbsch aus, f\u00fcr die Darstellung einer Pumpe ist eher weniger passend. Netterweise k\u00f6nnen wir das Property Icon<\/em> auch \u00e4ndern und zus\u00e4tzlich ein paar Einstellungen vornehmen, die aus dem Schalter eine Statusanzeige machen:<\/p>\nIcon \u00e4ndern<\/h3>\n
Zum Beispiel in dieses Icon hier:<\/p>\n
Bei Icon<\/em> w\u00e4hlen wir anstatt Default<\/em> jetzt Custom.<\/em> Es erscheinen nun weitere Eingabefelder zur Eingabe des On- und des Off-Icons. Hier verwenden wir eine der von Node-Red akzeptierten Icon Bibliotheken namens Font Awesome<\/a> oder Material Design<\/a>. Ich fokussiere nachfolgend auf Font Awesome [FA]. Hierbei ist es wichtig zu wissen, dass Node-Red zumindest in der von mir verwendeten Version 3.0.2, nur FA Icons der Version 4.7 verwenden kann. Icons, welche mit FA Version 5 und 6 hinzu gekommen sind, werden (noch) nicht angezeigt und resultieren in einem Fragezeichen Icon.<\/p>\n Tragen wir nun bei der Zeile On Icon\u00a0<\/em> den Inhalt fa-refresh<\/span>\u00a0 ein, bekommen wir den oben angezeigten Kreiselpfeil in kleiner Version. Tr\u00e4gt man fa-3x fa-refresh<\/span>\u00a0 ein, wird das Icon gr\u00f6\u00dfer – bis maximal 4x. Bei\u00a0 fa-3x fa-refresh fa-spin<\/span>\u00a0 dreht sich der Kreiselpfeil. Die Farbe daneben k\u00f6nnen wir z.B. auf red <\/em>einstellen.<\/p>\n F\u00fcr das Off Icon verwende ich gerne fa-power-off<\/span> .<\/p>\n Wollen wir nur etwas anzeigen und nichts schalten, dann ist dieser Switch wie oben dagestellt eine Endstation. Deshalb bei Pass through Hier noch das JSON File f\u00fcr das obige Beispiel:<\/p>\n Der Button (Taste oder Momentschalter) ist normalerweise ein Rechteck. Stattdessen k\u00f6nnen wir wie oben gezeigt mit FA ein Icon darstellen. Zum Beispiel so: fa-2x fa-check-square-o <\/span>\u00a0 bzw. so:<\/p>\n \u00dcber das Farbe<\/em> (colour) Property k\u00f6nne wir die Farbe \u00e4ndern, das geht z.B. im Klartext wie red, blue, black, yellow oder mittels hex Code der Farbe z.B. #983400.<\/p>\n Will man einen Standard Button (Rechteck) einf\u00e4rben, geschieht das \u00fcber das Hintergrund<\/em> Property. Diese Eigenschaft kann man dann auch verwenden, um z.B. Temperaturen anzuzeigen, d.h. die Farbe \u00e4ndert sich von blau (=kalt) zu orange (=warm) zu rot (=hei\u00df), was f\u00fcr die Darstellung von Wassertemperaturen oder \u00e4hnlichem n\u00fctzlich ist. Ich verwende einen Stapel von 10 funktionslosen Anzeigebuttons dazu, die Temperaturschichtung meines Pufferspeichers dazustellen:\u00a0 Farbskala 1 verwendet hex Farbwerte, die ich aus einem Farbkreis rauskopiert habe, die alternative Farbskala 2 verwendet Farbnamen im Klartext.<\/p>\n Gesetzt werden die Farben \u00fcber einen Function Node.<\/p>\n und der \"Button\" wird wie folgt eingestellt:<\/p>\n Mein Pufferspeicher hat insgesamt 4 Sensoren (unten mit Temperatur in \u00b0C und \"(S)\" dargestellt), aus denen ich die Zwischenwerte zwischen den einzelnen konkreten Messpunkten ausrechne. Entspricht vielleicht nicht zu 100% den physikalische Gegebenheiten, sieht aber h\u00fcbsch aus und zeigt auf einen Blick, wieviel hei\u00dfes Wasser ich noch zur Verf\u00fcgung habe. Zus\u00e4tzlich sehe ich noch, mit welcher Temperatur der Puffer geladen wird. In der untersten Zeile die R\u00fccklauftemperatur bis zur R\u00fccklaufanhebung und der dann beim Kamin ankommende angehobene R\u00fccklauf.<\/p>\n Aufgemerkt<\/strong>: die Puffer-Messwerte kommen nicht aus der API sondern von eigenst\u00e4ndigen Messf\u00fchlern (DS18B20) welche mit Pin 7 (bzw. GPIO #4)\u00a0 meines Raspberry Pi verdrahtet<\/a> sind und \u00fcber den entsprechenden Node-Red Node \"Sensor-ds18b20\" ausgelesen werden. Ich empfehle zum Abgreifen von Temperaturen an Rohrleitungen \"Anlegef\u00fchler\" zur besseren W\u00e4rme\u00fcbertragung zu verwenden. Gibts z.B. bei sensorshop24.de\u00a0<\/a> Viele von den hier gezeigten Methoden k\u00f6nnte man auch \u00fcber CSS Funktionen realisieren. Html und alles was dazu geh\u00f6rt, liegt mir aber nicht besonders, weshalb ich lieber den \"straight forward\" Weg gehe und die Attribute direkt in die daf\u00fcr vorgesehenen Felder eintrage.<\/p>\n Trotzdem hier noch ein Link zum Einstieg mit CSS in Node-Red (englisch): Link<\/a><\/p>\n Neben der oben gezeigten M\u00f6glichkeit, bestimmte Icons zu animieren, kann man sein Dashboard auch mit Bildern (Images) aufh\u00fcbschen, die ggf. auch noch animiert sind.<\/p>\n Zum einen gibt es daf\u00fcr den Template Node<\/strong>, was uns wieder mit html und CSS konfrontiert aber sehr leistungsf\u00e4hig ist. Infos hierzu gibt es hier<\/a>.<\/p>\n Viel einfacher geht das mit dem ui-media<\/em><\/a> Node, den man \u00fcber die Palettenverwaltung nachinstallieren kann.<\/p>\n So kann man auch Signale oder Energiefl\u00fcsse animiert darstellen. Zum Beispiel die Energie, die aus den Solarpanels kommt, visuell mit dem Verbrauch und der Einspeisung verkn\u00fcpfen. Oder den Energiefluss von und zur W\u00e4rmepumpe und innerhalb des Hauses etc.<\/p>\n Je komplexer, dsto mehr Gefrickel ist zwar n\u00f6tig, aber das Ergebnis ist nicht schlecht – wenn auch nicht mit professionellen Dashboards vergleichbar. Ich habe so etwas f\u00fcr meine Solaranlage gebaut<\/a>.<\/p>\n![\"\"](\"https:\/\/www.rustimation.eu\/wordpress\/wp-content\/uploads\/2023\/01\/switch2-e1674385547251.png\")
<\/a>Schauen wir uns mal das Eigenschaftsfenster des Switches an:<\/p>\n![\"\"](\"https:\/\/www.rustimation.eu\/wordpress\/wp-content\/uploads\/2023\/01\/Button_Config.png\")
<\/a><\/p>\nFont Awesome<\/h4>\n
msg<\/code> if payload matches valid state<\/em> den Haken wegnehmen und Switch icon shows state of the input <\/em>ausw\u00e4hlen.<\/p>\n[{\"id\":\"677322311996ab19\",\"type\":\"inject\",\"z\":\"090ac94c9cd39a60\",\"name\":\"\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"payload\":\"on\",\"payloadType\":\"str\",\"x\":270,\"y\":340,\"wires\":[[\"c5743555eafb6897\",\"e81ea30d1a988b05\"]]},{\"id\":\"6f55d8a98b2f1717\",\"type\":\"inject\",\"z\":\"090ac94c9cd39a60\",\"name\":\"\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"payload\":\"off\",\"payloadType\":\"str\",\"x\":270,\"y\":420,\"wires\":[[\"c5743555eafb6897\",\"e81ea30d1a988b05\"]]},{\"id\":\"c5743555eafb6897\",\"type\":\"ui_switch\",\"z\":\"090ac94c9cd39a60\",\"name\":\"\",\"label\":\"switch\",\"tooltip\":\"\",\"group\":\"85aecc42dc86d012\",\"order\":0,\"width\":0,\"height\":0,\"passthru\":false,\"decouple\":\"true\",\"topic\":\"topic\",\"topicType\":\"msg\",\"style\":\"\",\"onvalue\":\"on\",\"onvalueType\":\"str\",\"onicon\":\"\",\"oncolor\":\"\",\"offvalue\":\"off\",\"offvalueType\":\"str\",\"officon\":\"\",\"offcolor\":\"\",\"animate\":false,\"className\":\"\",\"x\":530,\"y\":340,\"wires\":[[]]},{\"id\":\"e81ea30d1a988b05\",\"type\":\"ui_switch\",\"z\":\"090ac94c9cd39a60\",\"name\":\"Pumpe\",\"label\":\"Pumpe\",\"tooltip\":\"\",\"group\":\"85aecc42dc86d012\",\"order\":20,\"width\":2,\"height\":2,\"passthru\":false,\"decouple\":\"true\",\"topic\":\"Pumpe\",\"topicType\":\"str\",\"style\":\"\",\"onvalue\":\"on\",\"onvalueType\":\"str\",\"onicon\":\"fa-3x fa-refresh fa-spin\",\"oncolor\":\"red\",\"offvalue\":\"off\",\"offvalueType\":\"str\",\"officon\":\"fa-3x fa-power-off\",\"offcolor\":\"white\",\"animate\":false,\"className\":\"\",\"x\":540,\"y\":420,\"wires\":[[]]},{\"id\":\"85aecc42dc86d012\",\"type\":\"ui_group\",\"name\":\"Switches und Buttons\",\"tab\":\"713a8ca9566dabdd\",\"order\":1,\"disp\":true,\"width\":\"6\",\"collapse\":false,\"className\":\"\"},{\"id\":\"713a8ca9566dabdd\",\"type\":\"ui_tab\",\"name\":\"Blog Beispiel\",\"icon\":\"dashboard\",\"disabled\":false,\"hidden\":false}]<\/pre>\nStatusanzeige mit Buttons<\/h2>\n
![\"\"](\"https:\/\/www.rustimation.eu\/wordpress\/wp-content\/uploads\/2023\/01\/2023-01-22-13_22_36-Centralina-\u2013-Mozilla-Firefox.png\")
<\/a><\/p>\n![\"\"](\"https:\/\/www.rustimation.eu\/wordpress\/wp-content\/uploads\/2023\/01\/2023-01-22-13_30_33-Centralina-\u2013-Mozilla-Firefox.png\")
<\/a><\/p>\n![\"\"](\"https:\/\/www.rustimation.eu\/wordpress\/wp-content\/uploads\/2023\/01\/2023-01-22-13_34_03-Node-RED-_-192.168.178.24-\u2013-Mozilla-Firefox.png\")
<\/a><\/p>\n![\"\"](\"https:\/\/www.rustimation.eu\/wordpress\/wp-content\/uploads\/2023\/01\/2023-01-22-13_35_23-Node-RED-_-192.168.178.24-\u2013-Mozilla-Firefox.png\")
<\/a><\/p>\n
\nLeider liefert meine API au\u00dfer WW Temperatur (oben) und WW Solar (unten) keine Werte f\u00fcr den Pufferspeicher obwohl im Puffer vier Viessmann Sensoren gesteckt sind. Ich habe deshalb in die vier vorhandenen Bohrungen des Puffers nochmal je einen DS18B20 gesteckt. Funktioniert astrein mit nur leichten Unterschieden im Messergebnis.
\n<\/span><\/span><\/p>\n![\"\"](\"https:\/\/www.rustimation.eu\/wordpress\/wp-content\/uploads\/2023\/01\/Pufferschichten.jpg\")
<\/p>\nImages und Animationen<\/h2>\n
![\"\"](\"https:\/\/www.rustimation.eu\/wordpress\/wp-content\/uploads\/2025\/01\/2025-01-08-11_11_05-Centralina-\u2013-Mozilla-Firefox-300x282.png\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"