Skript zur dynamischen Generierung Batterie/Akku Symbol

Ro75

1.0.6: Sortierung der Parameter, Ladesymbol kann auf Wunsch sanft blinken, Dokumentation und Beispiel angepasst

WICHTIG: Wird der Code ausgetauscht- MUSS der Aufruf mit geändert werden! - BEISPIEL ansehen!

Ro75.

sigi234

@ro75

Kannst du mir bitte mal deinen Aufruf mit mehreren Symbolen zeigen?

Ro75

@sigi234 zum Beispiel so. Musst es für dich halt anpassen

Deklaration

const ZielDPHW = '0_userdata.0.Batterie_Heizung_WZ';
const ZielDPHK = '0_userdata.0.Batterie_Heizung_KZ';
const ZielDPHB = '0_userdata.0.Batterie_Heizung_Bad';
 
const dValueW = 'fritzdect.0.DECT_099950330172.battery';
const dValueK = 'fritzdect.0.DECT_099950346641.battery';
const dValueB = 'fritzdect.0.DECT_099950325774.battery';

const decimalPlaces = 0; // bitte anpassen
const labelSuffix = '%'; // bitte anpassen
const customLabel = null; // bitte anpassen
const showPercent = true; // bitte anpassen
const strongColors = true; // bitte anpassen
const colorScheme = 'default'; // bitte anpassen
const showBolt = false; // bitte anpassen
const boltPos = 100; // bitte anpassen
const blinkBolt = false; // bitte anpassen

//einfacher Funktionsaufruf mit Speicherung der SVG in einen Datenpunkt

setState(ZielDPHW, generateBatterySvg(getState(dValueW).val, decimalPlaces, labelSuffix, customLabel, showPercent, strongColors, colorScheme, showBolt, boltPos, blinkBolt), true);
setState(ZielDPHK, generateBatterySvg(getState(dValueK).val, decimalPlaces, labelSuffix, customLabel, showPercent, strongColors, colorScheme, showBolt, boltPos, blinkBolt), true);
setState(ZielDPHB, generateBatterySvg(getState(dValueB).val, decimalPlaces, labelSuffix, customLabel, showPercent, strongColors, colorScheme, showBolt, boltPos, blinkBolt), true);

//Auf Änderung reagieren und Speicherung der SVG in einen Datenpunkt

on({ id: dValueW, change: 'ne' }, dp => {
    setState(ZielDPHW, generateBatterySvg(dp.state.val, decimalPlaces, labelSuffix, customLabel, showPercent, strongColors, colorScheme, showBolt, boltPos, blinkBolt), true);
});
on({ id: dValueK, change: 'ne' }, dp => {
    setState(ZielDPHK, generateBatterySvg(dp.state.val, decimalPlaces, labelSuffix, customLabel, showPercent, strongColors, colorScheme, showBolt, boltPos, blinkBolt), true);
});
on({ id: dValueB, change: 'ne' }, dp => {
    setState(ZielDPHB, generateBatterySvg(dp.state.val, decimalPlaces, labelSuffix, customLabel, showPercent, strongColors, colorScheme, showBolt, boltPos, blinkBolt), true);
});

Ro75.

Ro75

Und es lässt sich auch alles zentral konfigurieren, sodass Änderungen zentral vorgenommen, gespeichert und sofort in Kraft treten.

Ro75.

Maxtor62

@sigi234
hast Du den Aufruf mit einem extra Skript gestartet?

Bei mir wird kein Datenpunkt erstellt.
Grüße

Ro75

@maxtor62 in meinem Beispiel (Post 1) wird auch kein Datenpunkt automatisch erstellt. Im Beispiel wird auf einen bereits existierenden Datenpunkt verwiesen.

Ro75.

Maxtor62

@ro75

Hi, danke für Deine Hilfe. Bin halt kein Java-Scripter.

Meine Datenpunkte:

const ZielDP = '"0_userdata.0.vis.VIS-Batterie.Batt'; // bitte anpassen
 
const dValue = getState('ecoflow-mqtt.0.D3M1ZE1A9H8G0082.DisplayPropertyUpload.bmsBattSoc').val; // bitte anpassen
const decimalPlaces = 0; // bitte anpassen
const labelSuffix = '%'; // bitte anpassen
const customLabel = null; // bitte anpassen
const showPercent = true; // bitte anpassen
const strongColors = true; // bitte anpassen
const colorScheme = 'default'; // bitte anpassen
const showBolt = false; // bitte anpassen
const boltPos = 100; // bitte anpassen
const blinkBolt = false; // bitte anpassen
 
//Funktionsaufruf mit Speicherung der SVG in einen Datenpunkt
setState(ZielDP, generateBatterySvg(dValue, decimalPlaces, labelSuffix, customLabel, showPercent, strongColors, colorScheme, showBolt, boltPos, blinkBolt), true);

Ro75

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

const ZielDP = '"0_userdata.0.vis.VIS-Batterie.Batt';

da ist ein Fehler drin. Korrekt wäre

const ZielDP = '0_userdata.0.vis.VIS-Batterie.Batt';

Und der Datenpunkt (String / Zeichen) muss bereits existieren.

Ro75.

Maxtor62

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

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

const ZielDP = '"0_userdata.0.vis.VIS-Batterie.Batt';

da ist ein Fehler drin. Korrekt wäre
const ZielDP = '0_userdata.0.vis.VIS-Batterie.Batt';
Und der Datenpunkt (String / Zeichen) muss bereits existieren.

Ro75.

Sorry, das " war fehl am Platz. Läuft.:+1:

Danke Dir

Ro75

@maxtor62 Super, freut mich.

Ro75.

Rene55

@ro75 Ich stoße auf einen Fehler, wenn ich ein SVG generiere mit "showBolt = true;".

XML-Verarbeitungsfehler: Präfix nicht an einen Namespace gebunden
Adresse: file:///Z:/Dokumentationen/ioBroker/ro75_BattSymb2a.svg
Zeile Nr. 49, Spalte 7:
      <use xlink:href="#boltSymbol-b-arf2f44" class="" transform="translate(184, 90)
------^

Ro75

@rene55 funktioniert nur via Datenpunkt. Als Datei speichern und dann öffnen geht nicht, da bekomme ich auch nur Meldungen.
Zeige mal bitte den dazugehörigen Code, also den von der Funktion.

Ro75.

Maxtor62

@ro75

Noch ne Frage: wie wird das Skript getriggert? Mein Datenpunkt hat sich geändert, das tolle Bild leider nicht.
Grüße

Ro75

@maxtor62 schaue bitte Post #20.

Ro75.

Maxtor62

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

@maxtor62 schaue bitte Post #20.

Ro75.

Ok, habe wie im Post #20 die Zeile

on({ id: dValue, change: 'ne' }, dp => {
    setState(ZielDP, generateBatterySvg(dp.state.val, decimalPlaces, labelSuffix, customLabel, showPercent, strongColors, colorScheme, showBolt, boltPos, blinkBolt), true);
});

noch eingebaut.

script.js.Test.Batterie: Error by subscription (trigger): Wrong ID of type boolean or number.

Sorry, ich bin halt kein Coder.

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?

  <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?

Community Forum

NEWS

Skript zur dynamischen Generierung Batterie/Akku Symbol

Support us

577

32.5k

81.6k

1.3m