Eigenes Widget erstellen und mit Daten füllen
-
@mattes-0
Du kannst jederzeit auf ein beliebiges Widget ein anderes legen.Wenn du es aber unbedingt in einem SVG integriert haben möchtest, könntest du auch mein Widget json-Template nehmen im gleichnamigen Adapter
https://forum.iobroker.net/topic/31521/test-widget-json-template?_=1757587185055
Wenn du mir das/ein svg mit vorbereiteten textplatzhalter bereitstellst mache ich dir ein kleines Beispiel
-
0_userdata.0.Heizungssteuerung.Heizen.VL_Minimum wäre ein Datenpunkt.
Der Platzhalter dafür in der Grafik wäre mir erstmal egal wo der ist, das lässt sich ändern.
Wenn du mir dafür ein Beispiel basteln würdest wäre das wunderbar.
Ich habe rund 35 Sensoren verlegt und eingepflegt und steuere bisher knapp 5 Pumpen, zwei Mischer, 7 Stellmotoren, Außenlicht, Klingeln, Öffner und da kommt mit Sicherheit noch was dazu, denn die alte Steuerung war zum Teil noch umfangreicher, allerdings alles Arduino und entsprechend weniger Netzwerkfähig.
Es fehlt Bewässerung, Alarmanlage, Lüftungsanlage... muss ich alles noch selbst umsetzen bzw. installieren... ist Softwaretechnisch mit iobroker deutlich schneller und einfacher als mit cpp alles neu zu entwickeln.
Leider hasse ich Javascript... steige da nicht mehr durch und bin obendrein gerade in einer Umschulung...
-
wo ist die svg?
ich habe keine -
-
@homoran ja, allerdings leider auch nicht das was ich gerne hätte.
Was funktioniert ist die Hardware und die Steuerung via Scripte, bspw. bei Dämmerung automatisch das Außenlicht ein bzw ausschalten, Türklingel an Smartphone weiterleiten uvm.
Jetzt versuche ich mich an der Visualisierung und stoße bei den bisherigen Widgets an Grenzen... Vis bzw vis2 sind irgendwie nix für mich, habpanel schon eher, allerdings wird es extrem unübersichtlich und sieht jedesmal auf verschiedenen Geräten anders aus (Auflösung).
Speziell geht's bei mir momentan vor allem um Wärme.
Quelle ist je nach Lage solarthermie, Wärmepumpe, heizstab oder Pufferspeicher.
Bei Störungen ist so ein animiertes Hydraulikschema dann sehr praktisch...Ziel, je nach Situation entweder Warmwasserspeicher, Pufferspeicher oder heizkreis oder die noch zu bauende Lüftungsanlage...
Situation ist abhängig von Raumtemperaturen, Außentemperaturen, Speicher bzw Puffer Temperaturen und Tageszeit oder sowas wie Legionnellen Schaltung (Desinfektion).
Die Solarthermie ist momentan mit 10 Kollektoren Heizung und 3 Kollektoren für Warmwasser realisiert und als Altbestand (ehemalige Holzvergaserheizung) stehen noch 3x800l Pufferspeicher im Keller+ 800l die ich anschließen kann wenn Platz gemacht wurde.
Sind noch immer im Umbau bzw energetischer Sanierung - Fassaden sind gedämmt, Dach muß noch... hauptsächlich Eigenleistung, da nichts vermietet ist - sind 9 Personen und alles Familie mit geringem Einkommen da Rentner (Generationen Haus).
-
Hier das widget zum importieren.
es verwendet wie oben schon gesagt den vis-jsontemplate adapterim svg sind die folgenden datenpunkte eingebaut
0_userdata.0.val1
0_userdata.0.val2falls was nicht klappt einfach nochmal fragen.
vis1
vis2
habe gerade festgestellt, das jsontemplate von vis1 nach vis2 nicht übertragbar ist. daher noch mal eine 2. version des imports für vis2
-
@oliverio vielen dank, werde ich heute Abend nach Feierabend ausprobieren - morgen dann zur Frühschicht... hoffe es klappt alles.
Berichte aber so oder so
-
@mattes-0 sagte in Eigenes Widget erstellen und mit Daten füllen:
Situation ist abhängig von Raumtemperaturen, Außentemperaturen, Speicher bzw Puffer Temperaturen und Tageszeit oder sowas wie Legionnellen Schaltung (Desinfektion).
wovon reden wir?
Darstellung oder Steuerung.Auch zu EE gibt es einige Beispiele den Energiefluss von vergleichbaren Heizungssystemen zu visualisieren.
-
@mattes-0 ich habe mir mal ein komplettes Heizsystem mit Animation gebaut und die SVG-Daten mit objekt-binding ins Standard HTML-Widget gepackt - nutze es nur nicht mehr.
-
@fuerchtischlumpf hier noch ein Code-Schnipsel mit meinen animierten Heizkörper - Aus und laufend mit Heat-Ani und Binding an einen Modbus-Datenpunkt:
-
@homoran der erst Eindruck ist dann wohl der richtige - hab anfangs bewusst auf Details verzichtet um hier nicht unnötig Verwirrung zu stiften und deine frage zeigt mir, das war eigentlich richtig.
Es geht noch immer um die Darstellung, den ganzen Rest schaffe ich ohne Hilfe und EE gefällt mir nicht - das sieht mir bisschen zu sehr nach "Lizenz! und Spende" aus und damit habe ich schlechte Erfahrungen gemacht.
Danke für deine mühe.
-
@mattes-0 sagte in Eigenes Widget erstellen und mit Daten füllen:
das sieht mir bisschen zu sehr nach "Lizenz! und Spende" aus und damit habe ich schlechte Erfahrungen gemacht.
Deine "Erfahrungen" in allen Ehren, aber bevor Du hier so einen Quark in die Welt setzt, empfehle ich ganz dringend Dich VORHER mit ioBroker und insbesondere mit einem bestimmten Adapter, dessen Entstehungsgeschichte und seinem Dev auseinanderzusetzen. So ein Geschwurbel gefällt hier nämlich auch nicht unbedingt.
-
@oliverio funktioniert nicht, Meldung kommt das er das template/widget nicht kennt(unbekannter Widget-Typ), aber ich wollte eigentlich das ganze komplett ohne Vis oder Vis2 umsetzen.
Hab mich jetzt bisschen mit Vis2 beschäftigt und schaffe es die SVG Daten anzuzeigen und auch die diversen Datenpunkte über diese Grafik zu legen.
Wie blende ich aber die Animationen ein bzw aus?
Das ist mir bisher nicht gelungen.
Hatte gedacht ich könnte "boolsches SVG" nutzen, dort je eine Line mit bzw ohne animation eintragen und das ganze mit einem Datenpunkt verbinden, den ich auf True oder False setzen kann .... nur wird mir keine Line angezeigt, egal ob true oder false ....
und jetzt habe ich eine Lösung gefunden - ich setze statt bolsches svg ein weiteres Basic HTML Widget ein und blende dessen line ein bzw aus.
-
@samson71 muss es auch nicht - Meinungsfreiheit, von daher alles bestens.
Ja meine "Erfahrungen" sind MEINE Erfahrungen und bezüglich des genannten Projekts MUSS das auch nicht stimmen und ich kann komplett falsch liegen.
Trotzdem schreibe ich sowas nicht grundlos oder leichtfertig und das jemand der Zeit in etwas investiert hat, freiwillige Spenden nimmt ist ebenfalls okay für mich.Mir ist aber schon mehrfach passiert, das ich bei so Projekten mitgewirkt habe und dann plötzlich war es Kommerziell und ich sollte bezahlen - deshalb auch die vorherige Eigenentwicklung meines Projektes.
Vielleicht ist der genannte Adapter auch einer der Besten die IOBroker zu bieten hat ... weiß ich nicht, gefällt mir trotzdem nicht und das sollte denke ich auch reichen.
Ist nicht Persönlich gemeint und sollte man auch nicht so auffassen.
-
@mattes-0 sagte in Eigenes Widget erstellen und mit Daten füllen:
@oliverio funktioniert nicht, Meldung kommt das er das template/widget nicht kennt(unbekannter Widget-Typ),
so, du hast recht. ich habe noch ein problem im adapter gefunden, der dafür gesorgt hat. leider habe ich das nicht rechtzeitig entdeckt, da das nur dann auftritt, wenn man den adapter regulär installiert. in der dev umgebung ist jeweils edit und runtime alles gelaufen.
das problem ist hoffentlich in der version 4.1.0 des adapters behoben.
ich wollte eigentlich das ganze komplett ohne Vis oder Vis2 umsetzen.
komplett ohne irgendeine visualisierung?
du meinst wahrscheinlich ohne das vis-template. wie gesagt. du kannst jederzeit über deine grafik die normalen widgets legen, die sich dann normal mit den daten aktualisieren. allerdings wird es dann bei deinem nächsten wunsch da schon wieder schwierigerWie blende ich aber die Animationen ein bzw aus?
als du meinst die linien. meinst du den alle linien im einzelnen. oder alle linien gesamt? dann wahrscheinlich ersteres. dazu müsstest du jede einzelne linie in eine eigene grafik/svg packen. das dann alles übereinander stapeln(layern). über den abschnitt sichtbarkeit in der widgetkonfiguration (also bspw html) kannst du dann die sichtbarkeit über datenpunkte steuern und so ein layer/also einzelne linie ein oder ausblenden.
Hatte gedacht ich könnte "boolsches SVG" nutzen, dort je eine Line mit bzw ohne animation eintragen und das ganze mit einem Datenpunkt verbinden, den ich auf True oder False setzen kann .... nur wird mir keine Line angezeigt, egal ob true oder false ....
zeige das bitte als beispiel. das kommt darauf an wo/wie du das da eingetragen hast. theoretisch könnte man das per binding in die svg eintragen. da muss man aber immer genau schauen, was das jeweilige binding da konkret ausgibt, ansonste interpretiert der browser das falsch.
und jetzt habe ich eine Lösung gefunden - ich setze statt bolsches svg ein weiteres Basic HTML Widget ein und blende dessen line ein bzw aus.
das hatte beschrieben. werden dann wahrscheinlich dann sehr viele widgets übereinander, was dann die bearbeitung etwas komplizierter macht. es gibt eine Lock-Funktion, die ein widget vor versehentlichem verschieben schützt.
mit dem json-template wäre das ebenfalls möglich. neben dem true/false setzen hättest du da auch die möglichkeit datenpunkt abhängig jeden einzelne linie zu rendern oder nicht.
denke daran, das svg nicht zu komplex zu machen, da bei jeder einzelnen änderung das html widget seinen inhalt komplett entfernt und neu einfügt. wenn der inhalt zu komplex ist kann das durch ein kleines flackern sichtbar werden. wenn dann dazu noch sehr häufige änderungen der daten vorkommen, dann sieht man das. hängt aber auch von der performance des anzeigegeräts ab.
hier habe ich mal so ein liniendemo gemacht. wieder als widget zum importieren
f2789709-1f52-428e-a130-82d96074d441-20250912-0054-42.6217983.mp4
-
@mattes-0 sagte in Eigenes Widget erstellen und mit Daten füllen:
Trotzdem schreibe ich sowas nicht grundlos oder leichtfertig
doch es ist leichtfertig!
Solche Posts fürhren regelmäßig zu Shitstormähnlichen Threads, dass hier bald alles gebührenpflichtig wird.
Das wird es nicht!egal welche Erfahrungen du gemacht haben willst.
Das hier ist eine CommunityDa gibt es eher die User, die ein ähnliches Verhalten wie du an den Tag legen, und sich hier beraten lassen, um anschließend das Ergebnis gewerblich zu nutzen.
-
@homoran tut mir aufrichtig leid, denn das war nicht meine Absicht.
Wie bereits erwähnt, Erfahrungen in dieser Hinsicht sind scheinbar bei mehreren vorhanden, aber deshalb einen shitstorm veranstalten weil's hier vielleicht, vielleicht auch nicht so kommen könnte ist mega übertrieben und unfair euch gegenüber.
-
@oliverio ich bin mir noch nicht ganz sicher ob ich das jetzt wirklich mit so vielen Widgets machen möchte oder ob ich die Linien bspw mit CSS dynamisch ein und ausblenden möchte - oder Javascript... das mit dem übereinander legen funktioniert in habpanel nicht, deshalb Anfangs die Verwirrung.
Ist schon bisschen was her das ich mit dem Thema zu tun hatte - zuletzt mein Lebenslauf, auf allen Browsern und allen Displays exakt die selbe Seite darzustellen war damals sehr aufwendig.
Bei meiner letzten Steuerung habe ich die Daten mit einem Python Script von den arduinos gesammelt und mit einem anderen regelmäßig die HTML Seiten gebastelt... das ging relativ lange und sehr zuverlässig, aber kein Vergleich zu dem was jetzt geht.
Ich habe auch am 24. mündliche Prüfung, also eigentlich kaum Zeit für so Spielereien ... und schon habe ich die nächste Idee, was ich mit SVG (ohne iobroker) etc. noch anstellen kann... aber erst nach der Prüfung.
-
ohne das widget kannst du im svg an das jeweilige liniensegment folgenden ausdruck hinzufügen
visibility="{val:0_userdata.0.val3;debugger;val?"visible":"hidden"}"so dass ein komplettes liniensegment
wie folgt aussieht<line visibility="{val:0_userdata.0.val3;debugger;val?"visible":"hidden"}" id="von_Puffer_an_Heizen_VL" x1="15000" y1="2500" x2="15500" y2="2500" stroke="#FF0000" stroke-width="60" stroke-linecap="round" stroke-dasharray="120 120" stroke-dashoffset="0"> <animate attributeName="stroke-dashoffset" from="0" to="-240" dur="1s" repeatCount="indefinite"/> </line>wenn du dann noch einen datenpunkt vom typ boolean hast, kannst du die visibility des elements darüber steuern. der ausdruck ist relativ einfach zu lesen.
{val:0_userdata.0.val3;debugger;val?"visible":"hidden"}{} innerhalb der Klammern erkennt vis den binding ausdruck
val:0_userdata.0.val3;debugger weise der variable val den inhalt des datenpunkts zu
val?"visible":"hidden" prüfe die variable val, wenn wahr gebe das hinter dem fragezeichen aus, wenn falsch, dann das hinter dem doppelpunkt.
so wird dynamisch die visibility des elements wahlweise auf visible oder hidden gestellt.da eine linie bei dir aus mehreren segmenten bestellt, muss man zu jedem einzelnen liniensegment die gleiche prüfung hinzufügen.
ohne javascript geht, aber ohne boolsche logik wird es dann bei so einer steuerung schwierig.
