Skript zur dynamischen Generierung Batterie/Akku Symbol

[Ro75]

@maxtor62 dValue muss praktisch dein Datenpunkt sein.

Ro75.

[Maxtor62]

@ro75
Das ist der richtige Datenpunkt. Sorry, ich kann das halt nicht.
Aber ist ok.
Danke

[Ro75]

@maxtor62 wie lautet denn der Datenpunkt mit den Batterie Werten?
Ro75

[OliverIO]

Ich habe mal das Skript für das widget aus dem adapter jsontemplate umgesetzt

https://forum.iobroker.net/topic/31521/test-widget-json-template/33?_=1762980256778

Damit kann man dann ohne Datenpunkt, um das Bild zwischenzuspeichern, das Bild verwenden. Das Widget reagiert auch direkt auf veränderungen.

[Rene55]

@ro75 Ich habe das SVG in einem Datenpunkt abgelegt, und den Inhalt dann als Datei (.svg) gespeichert. Das konnte ich ohne Probleme im Firefox öffnen. Als ich in einem zweiten Versuch dann den Blitz eingeschaltet hatte, kam diese Meldung. Meintest du mit Code den SVG-Code?

Spoiler

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 129" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">

  <defs>
    <linearGradient id="glass-b-arf2f44" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.80"/>
      <stop offset="100%" stop-color="#ffffff" stop-opacity="0.10"/>
    </linearGradient>
    <linearGradient id="diagGlass-b-arf2f44" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.75"/>
      <stop offset="45%" stop-color="#ffffff" stop-opacity="0.22"/>
      <stop offset="100%" stop-color="#ffffff" stop-opacity="0.03"/>
    </linearGradient>
    <pattern id="stripes-b-arf2f44" width="8" height="8" patternUnits="userSpaceOnUse">
      <rect width="8" height="8" fill="transparent"/>
      <path d="M-1,6 l8,-6 M-1,10 l8,-6" stroke="#fff" stroke-opacity="0.08" stroke-width="1"/>
    </pattern>
    <clipPath id="clip-fill-b-arf2f44">
      <rect x="24" y="28" width="101" height="72" rx="12" ry="12"/>
    </clipPath>
    <linearGradient id="boltGradient-b-arf2f44" x1="8.7" x2="80.9" y1="17.1" y2="142.1" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#f7b23b"/>
      <stop offset=".5" stop-color="#f7b23b"/>
      <stop offset="1" stop-color="#f59e0b"/>
    </linearGradient>
    <symbol id="boltSymbol-b-arf2f44" viewBox="0 0 102.7 186.8">
      <path fill="url(#boltGradient-b-arf2f44)" stroke="#000" stroke-width="6" stroke-linejoin="round"
            d="m34.8 2-32 96h32l-16 80 80-112h-48l32-64h-48z"/>
    </symbol>
  </defs>

  <rect x="20" y="24" width="200" height="80" rx="18"
        fill="#222" stroke="#ddd" stroke-width="4"/>

  <rect x="24" y="28" width="101" height="72"
        rx="12" ry="12" fill="hsl(63,100%,35%)"/>

  <g clip-path="url(#clip-fill-b-arf2f44)">
    <rect x="24" y="28" width="101" height="72"
          rx="12" fill="url(#stripes-b-arf2f44)" opacity="0.95"/>
    <rect x="24" y="28" width="101" height="72"
          rx="12" fill="url(#glass-b-arf2f44)" opacity="0.25"/>
  </g>

  <rect x="20" y="24" width="200" height="80"
        rx="18" fill="url(#diagGlass-b-arf2f44)" opacity="0.9"/>

  <rect x="224" y="46" width="20" height="36" rx="6" fill="#ccc" stroke="#888" stroke-width="2"/>

  <use xlink:href="#boltSymbol-b-arf2f44" class="" transform="translate(184, 90)
scale(0.728051391862955)
translate(-51.35, -93.4)"/>

{1}

    <g transform="translate(120, 64)">
      <text text-anchor="middle"
            font-family="Arial, Helvetica, sans-serif"
            font-size="53" font-weight="700"
            fill="#fff" stroke="rgba(0,0,0,0.85)"
            stroke-width="8"
            paint-order="stroke" dy="0.35em">52.5%</text>
    </g>
</svg>

Hierin habe ich auch ein "{1}" gesehen. Ist das so richtig?

[Ro75]

@rene55 als Datei ist nicht vorgesehen.

Ro75

[Rene55]

@ro75 Mag sein. Mich wundert dann nur, dass es ohne Blitz geht! Hab halt aktuell keine VIS.

[Ro75]

@rene55 SVG Code muss sich ja auch in andere Visualisierungen einfügen lassen.

Ro75

[Rene55]

@ro75 Ja sicher, daher dachte ich 'standalone' im Browser müsste es auch gehen.

[wolfi913]

@rene55 @Ro75
Nur zur Info falls es weiterhilft.
Mit der Version 1.0.3 funktioniert es auch (zumindest bei mir) tadellos mit dem Speichern in eine Datei (mit und ohne Blitz) für die Nutzung im Energiefluss-erweitert-Adapter. Klappt perfekt. Mit Version 1.0.6 bekomme ich da leider auch die gleichen Probleme wenn ich's in eine Datei wegspeichere und dann über den Browser aufrufen möchte. Mir persönlich reichen aber die Einstellmöglichkeiten der "alten" Version voll und ganz.

[Ro75]

Ich arbeite gerade an einem Fix, der das Problem mit den Dateien löst. Weiterhin wird es einen weiteren Parameter geben, welcher das Farbschema vom Ladeblitz beeinflusst.

Ro75.

[Ro75]

@OliverIO wenn ich dann den korrigierten und erweiterten Code einstelle, passt du dann dein Beispiel an?

Ro75.

[Ro75]

Version 1.0.8 mit Fehlerkorrektur ist raus. Die SVG-Codes können nun ohne Probleme in eine Datei gepackt werden. Weiterer Parameter für Farbschema Ladesymbol.

Ro75.

[sigi234]

@ro75 sagte in Skript zur dynamischen Generierung Batterie/Akku Symbol:

Sollte aber auch mit VIS 2 oder anderen Modulen laufen.

Ja, aber für VIS-2 gibt es ein eigenes Widget.

Vis 2 - Messgeräte - Batterie

Für VIS1 aber ausgezeichnet!

[wolfi913]

@ro75
Kurzes feedback:
Die neue Version (1.0.8) funktioniert bei mir top.
Export in Datei klappt jetzt einwandfrei.
Vielen Dank.

[Rene55]

@ro75 Jetzt funktioniert es auch bei mir wie erwartet (über Datenpunkt, externe Datei und Aufruf im Browser). Danke für die Idee, die Umsetzung und natürlich für die Zeit.