Weihnachtsangebot 2025! 🎄

[Bushveld]

Hallo zusammen,

im EE habe ich ein SVG eingebunden mit folgenden Inhalt:

  <!-- Achsen -->
  <line x1="20" y1="100" x2="300" y2="100" stroke="#888" stroke-width="1"/>
  <line x1="20" y1="10"  x2="20"  y2="100" stroke="#888" stroke-width="1"/>

  <!-- Liniensegmente: 24 Stunden -->
  <line x1="20"  y1="{y00solar}" x2="30"  y2="{y01solar}" stroke="#00ff66" stroke-width="2"/>
  <line x1="30"  y1="{y01solar}" x2="40"  y2="{y02solar}" stroke="#00ff66" stroke-width="2"/>
...
  <line x1="230" y1="{y21solar}" x2="240" y2="{y22solar}" stroke="#00ff66" stroke-width="2"/>
  <line x1="240" y1="{y22solar}" x2="250" y2="{y23solar}" stroke="#00ff66" stroke-width="2"/>

  <!-- Beschriftung -->
  <text x="160" y="115" font-size="10" fill="#aaa" text-anchor="middle">
    Solarprognose (nächste 24 Stunden)
  </text>

Um Zugriff auf die Objekte im iobroker mit den solar Daten zu erlangen habe ich im EE diese als Datenquelle definiert und gehofft so die Werte im SVG einbinden zu können.
Leider hat dieses nicht funktioniert. Hier meine beiden Varianten einmal mit dem in der Datenquelle benannten Datenpunkt einmal mit dem "Alias"

<line x1="30" y1="{javascript.0.SVGsolar.y11}" x2="40" y2="{javascript.0.SVGsolar.y12}" stroke="#00ff66" stroke-width="2"/>
<line x1="40" y1="{y02solar}" x2="50" y2="{y03solar}" stroke="#00ff66" stroke-width="2"/>

Hat jemand eine Idee ob und wenn ja wie ich die Werte ins SVG bekomme?
Wenn ich das SVG manuell anpasste tut es exakt was es soll und man kann linien Diagramme zeichnen die dem o.g. Bild nahe kommen.

Viele Grüße und vielen Dank!
Michael

[Steffe.S.]

Hallo,

gibt es eine Möglichkeit bei einem Symbol, ähnlich wie bei einem Text, die Farbe abhängig vom Wert zu ändern.

Hier meine Änderung für den Text in rot, gelb oder grün (funktioniert sehr gut):

{
    "<=33": {
        "fill": "rgb(221,0,0)",
        "display": "inline"
    },
    "<=66": {
        "fill": "rgb(221,194,50)",
        "display": "inline"
    },
    ">66": {
        "fill": "rgb(87,221,46)",
        "display": "inline"
    }
}

Genau die selben Farben sollen bei einem Symbol kommen (bekomme ich nicht hin).

Gruss S.

[SKB]

@steffe-s das Icon wird genauso eingefärbt - allerdings nutzt du hier color. Datenquelle zuweisen und alles geht.

[Steffe.S.]

@skb sagte in Support Adapter Energiefluss-erweitert v0.7.7:

@steffe-s das Icon wird genauso eingefärbt - allerdings nutzt du hier color. Datenquelle zuweisen und alles geht.

Vielen Dank, für mich war es so schwer, wenn es dann doch so einfach ist

[wolfi913]

@skb
Sorry falls die Frage irgendwo schon beantwortet wurde, hab aber leider trotz intensiver Suche nichts passendes gefunden.

Möchte ein SVG von der URL http://192.168.2.203:8082/0_userdata.0/id3/svg_battery_soc.svg einbinden. Über die URL ist im Browser das SVG auch aufrufbar und wird angezeigt.
Bekomme aber im energiefluss-erweitert (0.7.7) immer nur das Folgende:

Kannst Du mir irgendwie auf die Sprünge helfen was ich da falsch mache. Schonmal vielen Dank.

[SKB]

@wolfi913 SVG ist ja ein Bild und sollte über das Element Bild auch einbindbar sein. Du gibst es aktuell als Frame an.

[wolfi913]

@skb
Danke :+1: . Jetzt klappt's. Hatte es fälschlicherweise über

gemacht. :astonished:

[SKB]

@wolfi913 Dieses Element kannst du mit dem Textinhalt eines SVG füllen - ist aber dann statisch.

Ich denke, dein Bild wird immer dynamisch generiert oder?

[wolfi913]

@skb
Richtig. Das wird dynamisch erstellt mit diesem Skript aus dem Forum.

[SKB]

@wolfi913 Verstehe. Allerdings müsste jetzt das Bild auch alle X Sekunden aktualisiert werden - was aktuell nicht implementiert ist.

[wolfi913]

@skb
Das ist kein Problem. Sooft ändert sich der SOC nicht. Den Refresh kann ich auch manuell machen. Aber fallst Du den Refresh irgendwann automatisch mal einbindest wär das (vielleicht auch für andere) evtl. ein nützliches Feature. Ich bräuchte das momentan nicht unbedingt.

[schaefersklaus]

@skb
Hi!
Danke für Deine Mühen, ich nutze den Adapter bereits seit den frühen Stunden und ziehe mir häufig ein Update.
Heute habe ich von 0.7.7 auf 0.8.1 aktualisiert.

Meine Animationen "atmen" nun :-)

Weiß gar nicht, wie ich das beschreiben soll.
Die einzelnen Punkte laufen (entsprechend der Leistung) auf der Linie.
Zyklisch (ca. 2 s Takt) dehnen sich die Punkte auseinander, also bilden größere Abstände zwischen einander, und dann wieder zurück zum ursp., korrekten Abstand.

Vielleicht war das hier schon mal thematisiert, aber ich habe es in den letzten Beiträgen nicht gefunden.

Vielen Dank!

Animations-Einstellungen siehe Screenshot.

Anim Einstellung für einen Datenpunkt:

[SKB]

@schaefersklaus steht so in der Beschreibung der Änderung. Der Übergang auf eine andere Geschwindigkeit wird animiert, statt zu springen.

[Scrounger]

@skb
Hab jetzt auch Mal angefangen deinen Adapter zu nutzen, funktioniert super und die Doku ist auch Klasse, vielen Dank dafür.

Eine Sache die ich nicht gefunden habe ist, wie ich eine andere Schriftart verwenden kann oder besser gesagt ich möchte von den Google Fonts die Roboto Condensed und Jura Schrift Art verwenden. Falls das schon geht was muss ich Unterschriftart dafür eintragen. Hab dazu nix in der Doku gefunden ;-)

[SKB]

@scrounger Einfach den Namen der Schriftart in den Einstellungen oder pro Element. Dann sollte die Schriftart genutzt werden.

[Scrounger]

@skb sagte in Support Adapter Energiefluss-erweitert v0.7.7:

@scrounger Einfach den Namen der Schriftart in den Einstellungen oder pro Element. Dann sollte die Schriftart genutzt werden.

Das geht aber leider nicht, wenn ich "Jura-Medium" und "Jura-Light" verwende bleibt die Schriftart gleich, scheint mir so als ob die auf ein default zurück fällt. Die Google Fonts müssten von deinem Adapter glaub explizit mitgeliefert werden, zumindet ist das bei VIS so gewesen.

[SKB]

@scrounger Ja, die musst du dann natürlich selbst einbinden. Der Adapter liefert keine Schriftart mit.

Auch kannst du sie per CSS einbinden, wenn du TTF oder Woff Dateien hast.

[Scrounger]

@skb sagte in Support Adapter Energiefluss-erweitert v0.7.7:

Auch kannst du sie per CSS einbinden, wenn du TTF oder Woff Dateien hast.

Ah top, an die Einbindung per css hab ich gar nicht gedacht. Funktioniert, thx für den support!

[TimoWald]

Seit Update von 0.7.4 auf 0.8.1 funktioniert die Animation nicht mehr. Kann mir einer sagen woran es liegt? Würde ungern wieder zurück auf die 0.7.4.

[schaefersklaus]

@skb Danke für die Antwort!

Doch habe ich ja gar keine andere Animationsgeschwindigkeit vorgewählt. Die Einstellungen steht auf "gleichmäßige Geschwindigkeit".

Anbei ein Screenshot-Video, es läßt sich schlecht erklären. Schaut in meinen Augen aber irgendwie schon komisch aus.

Danke!

Viele Grüße!

Edit: Der gesamte Energiefluss ist auch leicht verschoben. Bei v 0.7.7 lagen die Beschriftungen exakt auf den Linien und die Ein- und Ausgänge des "Verteil-Blocks" in der Mitte waren auch alle passend. Komisch.

Bildschirmaufnahme 2025-11-15 um 09.55.52.mov