Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Skripten / Logik
    4. JavaScript
    5. Skript zur dynamischen Generierung Batterie/Akku Symbol

    NEWS

    • Wartung am 15.11. – Forum ab 22:00 Uhr nicht erreichbar

    • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?

    • Monatsrückblick – September 2025

    Skript zur dynamischen Generierung Batterie/Akku Symbol

    This topic has been deleted. Only users with topic management privileges can see it.
    • Ro75
      Ro75 @Maxtor62 last edited by

      @maxtor62 Super, freut mich.

      Ro75.

      1 Reply Last reply Reply Quote 0
      • Rene55
        Rene55 @Ro75 last edited by

        @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 1 Reply Last reply Reply Quote 0
        • Ro75
          Ro75 @Rene55 last edited by 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.

          M Rene55 2 Replies Last reply Reply Quote 0
          • M
            Maxtor62 @Ro75 last edited by

            @ro75

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

            Ro75 1 Reply Last reply Reply Quote 0
            • Ro75
              Ro75 @Maxtor62 last edited by

              @maxtor62 schaue bitte Post #20.

              Ro75.

              M 1 Reply Last reply Reply Quote 0
              • M
                Maxtor62 @Ro75 last edited by

                @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 1 Reply Last reply Reply Quote 0
                • Ro75
                  Ro75 @Maxtor62 last edited by

                  @maxtor62 dValue muss praktisch dein Datenpunkt sein.

                  Ro75.

                  M 1 Reply Last reply Reply Quote 0
                  • M
                    Maxtor62 @Ro75 last edited by

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

                    Ro75 1 Reply Last reply Reply Quote 0
                    • Ro75
                      Ro75 @Maxtor62 last edited by

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

                      1 Reply Last reply Reply Quote 0
                      • OliverIO
                        OliverIO last edited by

                        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.

                        1 Reply Last reply Reply Quote 0
                        • Rene55
                          Rene55 @Ro75 last edited by

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


                          <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 1 Reply Last reply Reply Quote 0
                          • Ro75
                            Ro75 @Rene55 last edited by

                            @rene55 als Datei ist nicht vorgesehen.

                            Ro75

                            Rene55 1 Reply Last reply Reply Quote 0
                            • Rene55
                              Rene55 @Ro75 last edited by

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

                              Ro75 1 Reply Last reply Reply Quote 0
                              • Ro75
                                Ro75 @Rene55 last edited by

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

                                Ro75

                                Rene55 1 Reply Last reply Reply Quote 0
                                • Rene55
                                  Rene55 @Ro75 last edited by

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

                                  W 1 Reply Last reply Reply Quote 0
                                  • W
                                    wolfi913 @Rene55 last edited by

                                    @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.

                                    1 Reply Last reply Reply Quote 0
                                    • Ro75
                                      Ro75 last edited by

                                      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.

                                      1 Reply Last reply Reply Quote 0
                                      • Ro75
                                        Ro75 last edited by

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

                                        Ro75.

                                        Ro75 1 Reply Last reply Reply Quote 0
                                        • Ro75
                                          Ro75 @Ro75 last edited by

                                          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.

                                          0c23d90d-60af-4125-a042-b0cd70863eed-image.png

                                          test3.svg test2.svg test1.svg

                                          Ro75.

                                          W Rene55 2 Replies Last reply Reply Quote 1
                                          • sigi234
                                            sigi234 Forum Testing Most Active @Ro75 last edited by 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!

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            802
                                            Online

                                            32.4k
                                            Users

                                            81.3k
                                            Topics

                                            1.3m
                                            Posts

                                            javascript monitoring
                                            8
                                            48
                                            794
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo