Visualisierung mit Node Red erstellen
-
@damrak2022 Schaut gut aus - nur passt das Bild nicht, wenn Du Dein anderes Auto auswählst.
-
@mickym Ja, dieses Thema hatten wir schon mal mit dem Bilderwechsel. Das habe ich damals schon nicht begriffen. Aber nicht mehr heute
-
@mickym Ich rätsel schon eine ganze Weile, wie das mit dem Bilderwechsel funktioniert, zumal es ja in Abhängigkeit des ausgewählten Autos stehen muss.
-
@damrak2022 So ich hab den Flow nochmal überarbeitet - sodass die Daten mit jedem Browserrefresh neu abgerufen werden, sodass die Daten korrekt aktualisiert werden. Ein Pollen, also ein automatisches Abrufen in bestimmten Zeiteinheiten mache ich bewusst nicht.
Die Table Node kannst Du durch Deine Node wieder ersetzen. Da ich vorne dran noch einen Knoten gemacht habe - brauchst Du Dir keine Sorgen um Mehrfachanbindungen der table Node machen.
Hier nun die nächste Version:
Wichtig ist, dass die Seite noch Spritmonitor heißen muss. Wenn Du die umbenennst dann musst Du die Switch Node
ändern, die momentan filtert, dass nur auf Ereignisse dieser Seite als Trigger dienen.
-
@damrak2022 sagte in Visualisierung mit Node Red erstellen:
@mickym Ich rätsel schon eine ganze Weile, wie das mit dem Bilderwechsel funktioniert, zumal es ja in Abhängigkeit des ausgewählten Autos stehen muss.
Ja Du musst also im Prinzip den Flow beeinflussen und wie Du sagst wird ja das Auto nach der DropDown Liste und dann über eine Change Node selektiert.
Damit Du nicht den Flow zerstören und nicht mit Kabeln aus dem Flow hantieren musst und auch keine Link-IN und Link-Out Nodes nutzen musst, kannst Du die Complete Node nutzen.
Diese Node spiegelt Dir die Ausgabe einer bestimmten Node aus dem Flow. Das funktioniert aber nicht mit allen Nodes - aber zum Glück funktioniert es mit einer Change Node.
Im Prinzip brauchst Du also die Ausgabe der Change Node "Aktives Fahrzeug", die die Auswahl des DropDown Feldes verarbeitet. Ich hab das mal markiert.
Es gibt aber eine ganz geniale Node - die aber sehr selten verwendet wird. Die complete Node.
Ich hab sie mal "Aktives Fahrzeug" genannt.
Mit der complete Node gibst Du an welche Nodes überwacht werden sollen.
In der complete sucht Du nach den Nodes die "Aktives Fahrzeug" heißen (gelb markiert)
und markierst natürlich die Change Node.
Wenn diese Change Node dann fertig ist, dann bekommst Du die gleiche Ausgabe gespiegelt heraus:
Damit kannst Du dann weiter arbeiten und selbst weiterarbeiten ohne dass Du in den Flow großartig eingreifen musst.
-
@mickym Mein Layout sieht seltsam aus
Ich habe es mit der original table node übernommen, weil ich die ja einfach wieder einstellen kann
-
@damrak2022 Tja das eine ist die Table Node die Du weg gesichert hast - und die keine Daten bekommt. Die andere ist die aus dem neuen Flow.
Du musst natürlich dann Dein table Node anstelle der jetzigen im Flow ersetzen.
2 ist bissi schlecht. -
@mickym Stimmt, ich sag ja mir geht es heute nicht gut. Habe vergessen die zu löschen
-
@mickym Beim Bildwechsel mache ich etwas falsch, denn bei mir sieht das so aus:
Ich sehe auch, das bei Dir die Complete Node etwas anders aussieht -
@damrak2022 mal ne Frage so zwischendurch:
Macht Ihr da einen Mix aus privaten Nachrichten und Posts hier im Beitrag ? Da blickt keiner durch ! Das wäre schade weil das Forum hier ja eigentlich helfen soll... für Suchende und nicht nur für euch "Insider" ... bitte ändern wenn dem so ist ! -
@djmarc75 Ja stimmt schon - ich gelobe Besserung. Wobei ich schon immer versuche auch @Damrak2022 dazu zu bewegen alles im Thread zu posten.
-
@mickym verschoben
-
@djmarc75Ja, manchmal rutscht halt auch was privates durch. Aber ich werde mehr darauf achten.
-
@damrak2022 Anders rum - alles was mit NodeRed zu tun hat, sollte in den Thread
-
@damrak2022 Ja Du musst schon noch was machen - das Objekt, das da unten rauskommt den kannst doch nicht einfach so nehmen, sondern den musst Du schön analysieren und dann das richtige Bild setzen, so wie Du ja auch das andere Bild gesetzt hast. Das Bild ist nicht Bestandteil der Abfrage, dass musst Du selbst wieder hochladen und genauso setzen wie Du das Bild von Deinem Mercedes gesetzt hast.
Wie setzt Du denn das Bild von Deinem Mercedes da rein?
Wenn Du schon hier selbst was verschönern willst, dann musst das auch selbst erarbeiten - da kannst doch nicht einfach das Objekt da rein schreiben und erwarten, dass da "simsalabim" das gewünschte Bild erscheint.
-
@mickym Ja, das ist klar, das ich das Bild selbst hochladen/hinterlegen muss. Ich probiere gerade folgenden Ansatz:
Wenn payload.make ist Mercedes setzte dieses Bild, wenn payload.make ist Hyundai setze dieses Bild.
Aber ich habe ich gerade wieder dicke Fehler drin.
Auch wenn es peinlich ist das zu posten, so scheitert es wieder an meinem logischen Denken
-
@damrak2022 Du willst erstmal keine Daten verändern. Solche Abfragen mache ich doch mit einer Switch-Node. Dann setzt man als payload die Bilddatei und gibt das Bild auch nur in einer Node aus und nicht in zwei Nodes. Du willst doch nicht beide Bilder gleichzeitig anzeigen.
Den String als quelle hälst Du variable mit der doppelt geschweiften Klammer mit msg.payload, so wie Du es ja auch vorgegeben bekommst, wenn Du eine neue Text Node rausziehst.
-
@mickym So sieht mein Flow aus:
So mein Debug:
So meine Switch Node die wohl komplett falsch zu sein scheint:
Und zum Schluss die Text node:
Wenn ich in der Switch Node noch mehr eintrage habe ich ja auch mehr Ausgänge, was auch nicht stimmen kann.
-
@damrak2022 Nein Du liest auch nicht was ich schreibe.
Du setzt doch in der Switch Node keine Werte, sonder Du prüfst.
Also die Eigenschaft payload.make ist ja richtig. Aber da steht doch wie Du ja anhand der Debug Node siehst Hyundai oder Mercedes drin und sicher nicht der Pfad zu dem Bild.
Du prüfst also ab und leitest dann an je nachdem an den einen oder anderen Ausgang weiter.Mehr willst Du von dem Objekt nicht mehr und deswegen kannst Du es jetzt wegschmeissen. Du setzt also mit einer Change Node nun den Pfad zu dem jeweiligen Bild.
In deiner Text Node hast Du doch das Bild angezeigt in dem Du
<img src="Pfad zum Bild angegeben hast" alt="n/a" ....>da jetzt ja Dein Pfad in der msg.payload steht ersetzt den Pfad einfach durch {{msg.payload}} in der Du ja vorher mittels der Change Nodes den Pfad gesetzt hast, also
{{msg.payload}}Eine msg.payload.make Eigenschaft gibts ja gar nicht mehr, weil Du nur noch einen einfachen String als payload hast, in der <img src= .... steht. Du willst ja nicht den Text drin stehen haben sondern ein Bild rein machen.
So wie Du jetzt die switch Node definiert hast, wird da nie eine Nachricht rauskommen,
da in der payload.make sicher NIE <img src= .... steht.
Du kannst ja dann hinter die beiden Ausgänge der switch Node wieder debug Nodes hinhängen. Damit prüfst Du ob beim umstellen des Fahrzeugs eine Nachricht am richtigen Ausgang rauskommt.
-
@mickym Wie geil ist das denn - es klappt.
