Skip to content
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo
  1. ioBroker Community Home
  2. Deutsch
  3. Praktische Anwendungen (Showcase)
  4. Einfach mal zeigen will….. :-) - Teil 2

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.2k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    1.9k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    15
    1
    2.1k

Einfach mal zeigen will….. :-) - Teil 2

Geplant Angeheftet Gesperrt Verschoben Praktische Anwendungen (Showcase)
916 Beiträge 185 Kommentatoren 440.1k Aufrufe 68 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • F FloxD

    @Negalein

    Hi,
    was genau würde dich denn interessieren? Fronius-Adapter installiert? Dann findest du hier schon die meisten Datenpunkte:
    Bildschirmfoto 2019-04-28 um 14.48.28.png
    für meine Bedürfnisse habe ich dann noch weitere Datenpunkte ergänzt, welche ich z. T. auch über den History-Adapter (u.a. für die Verbrauchsgrafik) speichere (zu erkennen im Foto rechts am blau unterlegten Werkzeugzeichen):
    Bildschirmfoto 2019-04-28 um 14.45.51.png

    zur Berechnung der nicht direkt aus aus dem WR zu beziehenden Daten hier meine 4 Blockly-Scripte (bin da nicht so der Held, erfüllen aber ihren Zweck):
    Blockly Script 1.rtf
    Blockly Script 2.rtf
    Blockly Script 3.rtf
    Blockly Script 4.rtf

    Beste Grüße

    NegaleinN Offline
    NegaleinN Offline
    Negalein
    Global Moderator
    schrieb am zuletzt editiert von Negalein
    #864

    @FloxD sagte in Einfach mal zeigen will….. 🙂 - Teil 2:

    was genau würde dich denn interessieren? Fronius-Adapter installiert? Dann findest du hier schon die meisten Datenpunkte:

    Hi

    Ja, der Fronius-Adapter läuft bei mir schon seit längerem.
    Da greife ich für die VIS bereits auf Datenpunkte zu.

    Bei meinem Fronius hab ich "Meter" nicht.
    Nur "Inverter" und "Powerflow".
    Reicht dies zur Berechnung der anderen Sachen?
    objects - ioBroker.png

    Wenn ich bei unserem Fronius auf die Seite geh, seh ich nur die 0815 Sachen.
    Ich glaub der kann den Eigenverbrauch nicht anzeigen. 😞
    Fronius  Photovoltaik Max.png

    PS: Was ist eigentlich der Unterschied zwischen:
    Inverter: PAC
    Powerflow: P_PV

    Beide müssten doch den aktuellen Wert der Erzeugung anzeigen?
    Sind aber um ein paar Watt unterschiedlich

    ° Node.js: 20.17.0 NPM: 10.8.2
    ° Proxmox, Ubuntu 22.04.3 LTS
    ° Fixer ---> iob fix

    F 1 Antwort Letzte Antwort
    0
    • NegaleinN Negalein

      @FloxD sagte in Einfach mal zeigen will….. 🙂 - Teil 2:

      was genau würde dich denn interessieren? Fronius-Adapter installiert? Dann findest du hier schon die meisten Datenpunkte:

      Hi

      Ja, der Fronius-Adapter läuft bei mir schon seit längerem.
      Da greife ich für die VIS bereits auf Datenpunkte zu.

      Bei meinem Fronius hab ich "Meter" nicht.
      Nur "Inverter" und "Powerflow".
      Reicht dies zur Berechnung der anderen Sachen?
      objects - ioBroker.png

      Wenn ich bei unserem Fronius auf die Seite geh, seh ich nur die 0815 Sachen.
      Ich glaub der kann den Eigenverbrauch nicht anzeigen. 😞
      Fronius  Photovoltaik Max.png

      PS: Was ist eigentlich der Unterschied zwischen:
      Inverter: PAC
      Powerflow: P_PV

      Beide müssten doch den aktuellen Wert der Erzeugung anzeigen?
      Sind aber um ein paar Watt unterschiedlich

      F Offline
      F Offline
      FloxD
      schrieb am zuletzt editiert von
      #865

      @Negalein

      wenn du den:
      Bildschirmfoto 2019-04-28 um 17.26.48.png
      nicht im Sicherungskasten mit Anschaffung der PV-Anlage installiert hast (Kostenpunkt ca. 200 Euro, notwendiges CAT-Kabel vom WR zum Smartmeter, theoretisch auch Nachrüstung möglich (nur durch Elektriker, da alle 3 Phasen aufgelegt werden müssen!) dann hast du keine Verbrauchswerte und kannst auch die Einspeisung nicht auslesen. Ich hatte die PV-Anlage (erst letztes Jahr installiert) u.a. nach dem Kriterium der bestmöglichen Datenakquise ausgewählt/zusammengestellt 😎

      PAC und P_PV sollte das gleiche sein (die Werte werden bei mir immer leicht zeitverzögert aktualisiert, so dass die Werte je nach Sonneneinstrahlung leicht variieren).

      NegaleinN 1 Antwort Letzte Antwort
      0
      • F FloxD

        @Negalein

        wenn du den:
        Bildschirmfoto 2019-04-28 um 17.26.48.png
        nicht im Sicherungskasten mit Anschaffung der PV-Anlage installiert hast (Kostenpunkt ca. 200 Euro, notwendiges CAT-Kabel vom WR zum Smartmeter, theoretisch auch Nachrüstung möglich (nur durch Elektriker, da alle 3 Phasen aufgelegt werden müssen!) dann hast du keine Verbrauchswerte und kannst auch die Einspeisung nicht auslesen. Ich hatte die PV-Anlage (erst letztes Jahr installiert) u.a. nach dem Kriterium der bestmöglichen Datenakquise ausgewählt/zusammengestellt 😎

        PAC und P_PV sollte das gleiche sein (die Werte werden bei mir immer leicht zeitverzögert aktualisiert, so dass die Werte je nach Sonneneinstrahlung leicht variieren).

        NegaleinN Offline
        NegaleinN Offline
        Negalein
        Global Moderator
        schrieb am zuletzt editiert von
        #866

        @FloxD sagte in Einfach mal zeigen will….. 🙂 - Teil 2:

        nicht im Sicherungskasten mit Anschaffung der PV-Anlage installiert hast

        Gerade mit meinem PV-Fuzzi geschrieben.
        Bekomm eventuell einen sehr günstigen. 🙂

        Liest die Daten vom Smartmeter dann der Fronius-Adapter aus, oder muss ich mit Modbus da drann?

        ° Node.js: 20.17.0 NPM: 10.8.2
        ° Proxmox, Ubuntu 22.04.3 LTS
        ° Fixer ---> iob fix

        F 1 Antwort Letzte Antwort
        0
        • NegaleinN Negalein

          @FloxD sagte in Einfach mal zeigen will….. 🙂 - Teil 2:

          nicht im Sicherungskasten mit Anschaffung der PV-Anlage installiert hast

          Gerade mit meinem PV-Fuzzi geschrieben.
          Bekomm eventuell einen sehr günstigen. 🙂

          Liest die Daten vom Smartmeter dann der Fronius-Adapter aus, oder muss ich mit Modbus da drann?

          F Offline
          F Offline
          FloxD
          schrieb am zuletzt editiert von
          #867

          @Negalein
          der Fronius-Adapter liest (wenn der Smartmeter am WR richtig angeschlossen/eingerichtet ist) dann auch automatisch die Daten mit aus (s. mein erster Screenshot oben mit den Objekten unter "meter" u. "0"), kein weiteres frickeln notwendig 😊

          1 Antwort Letzte Antwort
          0
          • F FloxD

            @DerOstfriese
            gerne, habe meinen view die letzten Tage noch etwas aufgehübscht (u.a. die icons und den WR transparent gemacht (bin da allerdings nicht so der Experte 😔 ) und den View auf mein IphoneX angepasst:
            2019-04-28 13.43.15.png

            hier der exportierte view:
            View Photovoltaik letzte Version 28.04.2019.rtf

            (habe mich hier etwas "bedient" ☺ https://buanet.de/2018/02/integration-eines-e3-dc-hauskraftwerks-in-iobroker/4/)

            wenn du auch die icons möchtest oder Hilfe bei der Generierung der Datenpunkte aus dem WR (müssen z.T. berechnet werden), dann melde dich gerne!
            Beste Grüße

            dietlmanD Offline
            dietlmanD Offline
            dietlman
            schrieb am zuletzt editiert von
            #868

            @FloxD Hab versucht deine View zu implementieren, bekomme leider einen Syntax error wenn ich versuche zu importieren. Gefällt mir sehr gut! Kannst du vielleicht einen neuen Export machen?
            Danke

            F 1 Antwort Letzte Antwort
            0
            • dietlmanD dietlman

              @FloxD Hab versucht deine View zu implementieren, bekomme leider einen Syntax error wenn ich versuche zu importieren. Gefällt mir sehr gut! Kannst du vielleicht einen neuen Export machen?
              Danke

              F Offline
              F Offline
              FloxD
              schrieb am zuletzt editiert von
              #869

              @dietlman
              hmm, was für ein Syntax error kommt denn? Hier nochmals ein neuer View-export...
              Photovoltaik view.rtf
              Hast du den Flot-Adapter und diese widgets installiert (werden nicht alle verwendet, kann dir gerade aber nicht genau sagen welche):
              Bildschirmfoto 2019-04-29 um 19.53.08.png

              Das ist mein Flot-link für die Graphik (muss natürlich angepasst werden...):
              http://192.168.178.41:8082/flot/index.html?l[0][id]=fronius.0.powerflow.P_PV&l[0][instance]=history.0&l[0][offset]=0&l[0][aggregate]=average&l[0][color]=%236ca370&l[0][min]=0&l[0][thickness]=1&l[0][shadowsize]=1&l[0][points]=false&l[0][yaxe]=left&l[0][xaxe]=bottom&l[0][ignoreNull]=false&l[0][afterComma]=0&l[0][dashes]=false&l[0][dashLength]=10&l[0][spaceLength]=10&l[0][yOffset]=0&l[0][yticks]=6&l[0][fill]=1&l[0][chartType]=line&l[1][id]=javascript.0.Stromverbrauch_positiv_live&l[1][instance]=history.0&l[1][offset]=0&l[1][aggregate]=average&l[1][color]=%23d9d9d9&l[1][thickness]=1&l[1][shadowsize]=1&l[1][yaxe]=off&l[1][xaxe]=off&l[1][commonYAxis]=1&l[1][ignoreNull]=false&l[1][afterComma]=0&l[1][dashes]=false&l[1][dashLength]=10&l[1][spaceLength]=10&l[1][fill]=1&l[1][points]=false&timeType=relative&relativeEnd=today&range=1440&live=300&aggregateType=step&aggregateSpan=30&width=320&height=200&legBgOpacity=0&hoverDetail=false&timeFormat=%25H%3A%25M&useComma=false&zoom=false&noedit=true&animation=0&noBorder=noborder&x_labels_color=%23ffffff&y_labels_color=%23ffffff&border_color=%23000000&grid_color=rgba(0%2C+0%2C+255%2C+0)&border_width=0px

              dietlmanD 1 Antwort Letzte Antwort
              0
              • F FloxD

                @dietlman
                hmm, was für ein Syntax error kommt denn? Hier nochmals ein neuer View-export...
                Photovoltaik view.rtf
                Hast du den Flot-Adapter und diese widgets installiert (werden nicht alle verwendet, kann dir gerade aber nicht genau sagen welche):
                Bildschirmfoto 2019-04-29 um 19.53.08.png

                Das ist mein Flot-link für die Graphik (muss natürlich angepasst werden...):
                http://192.168.178.41:8082/flot/index.html?l[0][id]=fronius.0.powerflow.P_PV&l[0][instance]=history.0&l[0][offset]=0&l[0][aggregate]=average&l[0][color]=%236ca370&l[0][min]=0&l[0][thickness]=1&l[0][shadowsize]=1&l[0][points]=false&l[0][yaxe]=left&l[0][xaxe]=bottom&l[0][ignoreNull]=false&l[0][afterComma]=0&l[0][dashes]=false&l[0][dashLength]=10&l[0][spaceLength]=10&l[0][yOffset]=0&l[0][yticks]=6&l[0][fill]=1&l[0][chartType]=line&l[1][id]=javascript.0.Stromverbrauch_positiv_live&l[1][instance]=history.0&l[1][offset]=0&l[1][aggregate]=average&l[1][color]=%23d9d9d9&l[1][thickness]=1&l[1][shadowsize]=1&l[1][yaxe]=off&l[1][xaxe]=off&l[1][commonYAxis]=1&l[1][ignoreNull]=false&l[1][afterComma]=0&l[1][dashes]=false&l[1][dashLength]=10&l[1][spaceLength]=10&l[1][fill]=1&l[1][points]=false&timeType=relative&relativeEnd=today&range=1440&live=300&aggregateType=step&aggregateSpan=30&width=320&height=200&legBgOpacity=0&hoverDetail=false&timeFormat=%25H%3A%25M&useComma=false&zoom=false&noedit=true&animation=0&noBorder=noborder&x_labels_color=%23ffffff&y_labels_color=%23ffffff&border_color=%23000000&grid_color=rgba(0%2C+0%2C+255%2C+0)&border_width=0px

                dietlmanD Offline
                dietlmanD Offline
                dietlman
                schrieb am zuletzt editiert von
                #870

                @FloxD
                Hab jetzt deinen neuen Export genommen, dieser wurde ohne Probleme importiert, vielen Dank! Jetzt hab ich schon wieder etwas zu tun.. Werde mich mal mit deiner View beschäftigen und entsprechend anpassen.

                F 2 Antworten Letzte Antwort
                0
                • dietlmanD dietlman

                  @FloxD
                  Hab jetzt deinen neuen Export genommen, dieser wurde ohne Probleme importiert, vielen Dank! Jetzt hab ich schon wieder etwas zu tun.. Werde mich mal mit deiner View beschäftigen und entsprechend anpassen.

                  F Offline
                  F Offline
                  FloxD
                  schrieb am zuletzt editiert von FloxD
                  #871

                  PS: Was ist eigentlich der Unterschied zwischen:
                  Inverter: PAC
                  Powerflow: P_PV

                  Beide müssten doch den aktuellen Wert der Erzeugung anzeigen?
                  Sind aber um ein paar Watt unterschiedlich

                  ... ist wahrscheinlich doch nicht das selbe, ich glaube PAC (für Power AC = Gleichstrom) ist quasi der Input, der am Wechselrichter anliegt und P_PV ist die Wechselstromleistung (output). Da immer ein paar % verloren gehen, sollte der zweite Wert im Durchschnitt etwas niedriger sein. Würde also immer den P_PV loggen...
                  Gruß
                  Florian

                  R 1 Antwort Letzte Antwort
                  1
                  • dietlmanD dietlman

                    @FloxD
                    Hab jetzt deinen neuen Export genommen, dieser wurde ohne Probleme importiert, vielen Dank! Jetzt hab ich schon wieder etwas zu tun.. Werde mich mal mit deiner View beschäftigen und entsprechend anpassen.

                    F Offline
                    F Offline
                    FloxD
                    schrieb am zuletzt editiert von
                    #872

                    @dietlman

                    @dietlman sagte in Einfach mal zeigen will….. 🙂 - Teil 2:

                    @FloxD
                    Hab jetzt deinen neuen Export genommen, dieser wurde ohne Probleme importiert, vielen Dank! Jetzt hab ich schon wieder etwas zu tun.. Werde mich mal mit deiner View beschäftigen und entsprechend anpassen.

                    👍

                    1 Antwort Letzte Antwort
                    0
                    • F FloxD

                      PS: Was ist eigentlich der Unterschied zwischen:
                      Inverter: PAC
                      Powerflow: P_PV

                      Beide müssten doch den aktuellen Wert der Erzeugung anzeigen?
                      Sind aber um ein paar Watt unterschiedlich

                      ... ist wahrscheinlich doch nicht das selbe, ich glaube PAC (für Power AC = Gleichstrom) ist quasi der Input, der am Wechselrichter anliegt und P_PV ist die Wechselstromleistung (output). Da immer ein paar % verloren gehen, sollte der zweite Wert im Durchschnitt etwas niedriger sein. Würde also immer den P_PV loggen...
                      Gruß
                      Florian

                      R Offline
                      R Offline
                      RappiRN
                      Most Active
                      schrieb am zuletzt editiert von
                      #873

                      @FloxD sagte in Einfach mal zeigen will….. 🙂 - Teil 2:

                      PS: Was ist eigentlich der Unterschied zwischen:
                      Inverter: PAC
                      Powerflow: P_PV

                      Beide müssten doch den aktuellen Wert der Erzeugung anzeigen?
                      Sind aber um ein paar Watt unterschiedlich

                      ... ist wahrscheinlich doch nicht das selbe, ich glaube PAC (für Power AC = Gleichstrom) ist quasi der Input, der am Wechselrichter anliegt und P_PV ist die Wechselstromleistung (output). Da immer ein paar % verloren gehen, sollte der zweite Wert im Durchschnitt etwas niedriger sein. Würde also immer den P_PV loggen...
                      Gruß
                      Florian

                      Es sollte, der Bezeichnung nach, eigentlich AC= Wechselspannung (also Ausgang des WR) und PV=Spannung/Leistung der Module (also der Eingang des WR), sein! Ohne jetzt deine Geräte zu kennen!

                      Enrico

                      F 1 Antwort Letzte Antwort
                      2
                      • R RappiRN

                        @FloxD sagte in Einfach mal zeigen will….. 🙂 - Teil 2:

                        PS: Was ist eigentlich der Unterschied zwischen:
                        Inverter: PAC
                        Powerflow: P_PV

                        Beide müssten doch den aktuellen Wert der Erzeugung anzeigen?
                        Sind aber um ein paar Watt unterschiedlich

                        ... ist wahrscheinlich doch nicht das selbe, ich glaube PAC (für Power AC = Gleichstrom) ist quasi der Input, der am Wechselrichter anliegt und P_PV ist die Wechselstromleistung (output). Da immer ein paar % verloren gehen, sollte der zweite Wert im Durchschnitt etwas niedriger sein. Würde also immer den P_PV loggen...
                        Gruß
                        Florian

                        Es sollte, der Bezeichnung nach, eigentlich AC= Wechselspannung (also Ausgang des WR) und PV=Spannung/Leistung der Module (also der Eingang des WR), sein! Ohne jetzt deine Geräte zu kennen!

                        Enrico

                        F Offline
                        F Offline
                        FloxD
                        schrieb am zuletzt editiert von
                        #874

                        @RappiRN
                        ups, recht hast du natürlich- hatte ac/dc verwechselt. Vielen Dank ☺️

                        1 Antwort Letzte Antwort
                        0
                        • T Offline
                          T Offline
                          tiroler
                          schrieb am zuletzt editiert von
                          #875

                          hi FloxD

                          super arbeit, könntest du die icons auch bereit stellen, danke

                          1 Antwort Letzte Antwort
                          0
                          • M Marc_St

                            @Stefan-G:

                            Wie immer wenn man mal kurz was in ioBroker machen will: eben war noch morgens und schon ist der Tag vorbei. `

                            Ja, und die Regierung beschwert sich. Ich sage immer, es ist quasi meine Modelleisenbahn. Nur dass die Regierung von einer optimierte Heizung mehr als von einem neuen Abstellgleis hat.

                            @Stefan-G:

                            Code hat geholfen, ist ja auch schön dokumentiert ;). Hab eigentlich alles mal hinbekommen, Animation von Pumpe und Leitungen, Farbe von Leitungen, nur bisher nicht alles zusammen. Ich geb aber noch nicht auf, muss aber erstmal wieder "normal" arbeiten… Im Minimalbeispiel scheint die Pumpe an einem anderen Platz versetzt zu werden (im nicht sichtbaren Bereich, außerhalb der View Box?) wenn sie aktiv ist. `

                            Ja, dank meines schnellen Zusammenklöppelns war da ein Fehler dabei. Hier eine noch etwas klarere Version:

                             <svg>// Dies ist eine Leitung. Die grüne Farbe ist quasi nur Kontrolle. Bei korrektem Code
                            // wird die Leitung entsprechend der Temperatur koloriert.
                            
                            // Dies als Overlay. Die Grafik deutet einfach einen Fluss in der Leitung an. Es bietet sich
                            //  an, dies nach Bedarf ein oder auszublenden; dies erledigt der Code unten.
                            
                            // Hier jetzt die Labels. In dieser Form implementiert, führt es zum Flackern. Trotzdem lasse
                            // ich den Workaround weg. Denn ansonsten wird die Sache etwas unübersichtlich.
                            // Die Binding müssen natürlich angepasst werden. Ich lese meine UVR1611 per Modbus aus.  	
                              <text x="20" y="10" fill="#333" font-size="10" white-space="pre" id="temp">{modbus.0.holdingRegisters.16_Vorlauf_Heizung}</text>
                              <text x="30" y="35" fill="#333" font-size="10" white-space="pre" id="pumpenstatus">{modbus.0.coils.3_Heizungspumpe}</text> 
                            
                            // Dies ist einfach die Darstellung einer Pumpe; die wird durch den Code unten nach Bedarf gedreht (animiert) oder nicht</svg> 
                            

                            @Stefan-G:

                            Habe auch versucht, Dein "großes" Beispiel zum Laufen zu bekommen und leider reagiert das nicht bei mir auf die Variablen. Kommt jede Variable in ein extra Basic-HTML Widget (muss ja irgendwie)? `

                            Ja, und zwar mit der ID. Im Widget steht dann also````
                            {modbus.0.holdingRegisters.10_Kollektor} °C

                            
                            Das separate Widget ist der Workaround zur Flimmer-Vermeidung, Dafür musst Du dann mit der ID arbeiten, da ansonsten der Javascript-Code keine Change hat, der Wert so auszulesen:````
                            document.getElementById('kollektor_temp').innerHTML);
                            

                            Es ist so etwas wie ein indirektes Binding. Wenn Du dann auch Einheiten haben willst, muss sich die ID nur auf die Zahl beziehen und darf die Einheit nicht umfassen. Das zeigt alles der Einzeiler.

                            @Stefan-G:

                            Kommt es auf die Reihenfolge an, in der ich diese in die View einfüge? `

                            Nein.

                            @Stefan-G:

                            Die Variablen "triggerX" verstehe ich nicht bzw sehe nicht, wo diese im Code benutzt werden. `

                            Genau. Das ist noch ein Workaround. Aufgrund des "indirekten BIndings" triggert die iobroker-JS-Engine den Code bei einem geupdateten Wert nicht neu; das vermeidet das Flackern, etwa sobald sich nur ein Wert ändert - was bei mir dank ModBus ja in Echzeit passiert. Bei entsprechend vielen Werten ändert sich da pausenlos eine Zahl. Andererseits will ich aber den Code neu ausführen, wenn sich bspw. eine Pumpe in Bewegung setzt. Dafür dann der Trick mit der Variable. Es hängt keinerlei Funktion dran, aber die Engine startet den Code noch einmal neu.

                            @Stefan-G:

                            Du siehst, noch einiges an Fragen offen, aber ich wollte wenigstens zwischendurch mal Danke sagen. `

                            Gerne!

                            Viele Grüße

                            Marc

                            S Offline
                            S Offline
                            Spampunk
                            schrieb am zuletzt editiert von
                            #876

                            @Marc_St said in Einfach mal zeigen will….. 🙂 - Teil 2:

                            @Stefan-G:

                            Wie immer wenn man mal kurz was in ioBroker machen will: eben war noch morgens und schon ist der Tag vorbei. `

                            Ja, und die Regierung beschwert sich. Ich sage immer, es ist quasi meine Modelleisenbahn. Nur dass die Regierung von einer optimierte Heizung mehr als von einem neuen Abstellgleis hat.

                            @Stefan-G:

                            Code hat geholfen, ist ja auch schön dokumentiert ;). Hab eigentlich alles mal hinbekommen, Animation von Pumpe und Leitungen, Farbe von Leitungen, nur bisher nicht alles zusammen. Ich geb aber noch nicht auf, muss aber erstmal wieder "normal" arbeiten… Im Minimalbeispiel scheint die Pumpe an einem anderen Platz versetzt zu werden (im nicht sichtbaren Bereich, außerhalb der View Box?) wenn sie aktiv ist. `

                            Ja, dank meines schnellen Zusammenklöppelns war da ein Fehler dabei. Hier eine noch etwas klarere Version:

                             <svg>// Dies ist eine Leitung. Die grüne Farbe ist quasi nur Kontrolle. Bei korrektem Code
                            // wird die Leitung entsprechend der Temperatur koloriert.
                            
                            // Dies als Overlay. Die Grafik deutet einfach einen Fluss in der Leitung an. Es bietet sich
                            //  an, dies nach Bedarf ein oder auszublenden; dies erledigt der Code unten.
                            
                            // Hier jetzt die Labels. In dieser Form implementiert, führt es zum Flackern. Trotzdem lasse
                            // ich den Workaround weg. Denn ansonsten wird die Sache etwas unübersichtlich.
                            // Die Binding müssen natürlich angepasst werden. Ich lese meine UVR1611 per Modbus aus.  	
                              <text x="20" y="10" fill="#333" font-size="10" white-space="pre" id="temp">{modbus.0.holdingRegisters.16_Vorlauf_Heizung}</text>
                              <text x="30" y="35" fill="#333" font-size="10" white-space="pre" id="pumpenstatus">{modbus.0.coils.3_Heizungspumpe}</text> 
                            
                            // Dies ist einfach die Darstellung einer Pumpe; die wird durch den Code unten nach Bedarf gedreht (animiert) oder nicht</svg> 
                            

                            @Stefan-G:

                            Habe auch versucht, Dein "großes" Beispiel zum Laufen zu bekommen und leider reagiert das nicht bei mir auf die Variablen. Kommt jede Variable in ein extra Basic-HTML Widget (muss ja irgendwie)? `

                            Ja, und zwar mit der ID. Im Widget steht dann also````
                            {modbus.0.holdingRegisters.10_Kollektor} °C

                            
                            Das separate Widget ist der Workaround zur Flimmer-Vermeidung, Dafür musst Du dann mit der ID arbeiten, da ansonsten der Javascript-Code keine Change hat, der Wert so auszulesen:````
                            document.getElementById('kollektor_temp').innerHTML);
                            

                            Es ist so etwas wie ein indirektes Binding. Wenn Du dann auch Einheiten haben willst, muss sich die ID nur auf die Zahl beziehen und darf die Einheit nicht umfassen. Das zeigt alles der Einzeiler.

                            @Stefan-G:

                            Kommt es auf die Reihenfolge an, in der ich diese in die View einfüge? `

                            Nein.

                            @Stefan-G:

                            Die Variablen "triggerX" verstehe ich nicht bzw sehe nicht, wo diese im Code benutzt werden. `

                            Genau. Das ist noch ein Workaround. Aufgrund des "indirekten BIndings" triggert die iobroker-JS-Engine den Code bei einem geupdateten Wert nicht neu; das vermeidet das Flackern, etwa sobald sich nur ein Wert ändert - was bei mir dank ModBus ja in Echzeit passiert. Bei entsprechend vielen Werten ändert sich da pausenlos eine Zahl. Andererseits will ich aber den Code neu ausführen, wenn sich bspw. eine Pumpe in Bewegung setzt. Dafür dann der Trick mit der Variable. Es hängt keinerlei Funktion dran, aber die Engine startet den Code noch einmal neu.

                            @Stefan-G:

                            Du siehst, noch einiges an Fragen offen, aber ich wollte wenigstens zwischendurch mal Danke sagen. `

                            Gerne!

                            Viele Grüße

                            Marc

                            Hallo Marc,

                            ich bin stark daran interessiert, Deine Visualisierung zu adaptieren - sofern das kein Problem für Dich darstellt.

                            Ist Dein gesamtes Flussdiagramm ein einziges SVG, oder hast Du diverse SVGs im VIS zusammengefügt?

                            Kannst Du vielleicht hierzu den Code für eine Pumpe und ein Flussschema darstellen? Wie hast Du das Flussschema animiert bekommen? Und wie funktioniert das mit dem Binding?

                            Es wäre fast zu schön, darauf Antworten und Informationen zu bekommen.

                            Vielen Dank im Voraus und liebe Grüße,
                            Timo

                            S 1 Antwort Letzte Antwort
                            0
                            • S Spampunk

                              @Marc_St said in Einfach mal zeigen will….. 🙂 - Teil 2:

                              @Stefan-G:

                              Wie immer wenn man mal kurz was in ioBroker machen will: eben war noch morgens und schon ist der Tag vorbei. `

                              Ja, und die Regierung beschwert sich. Ich sage immer, es ist quasi meine Modelleisenbahn. Nur dass die Regierung von einer optimierte Heizung mehr als von einem neuen Abstellgleis hat.

                              @Stefan-G:

                              Code hat geholfen, ist ja auch schön dokumentiert ;). Hab eigentlich alles mal hinbekommen, Animation von Pumpe und Leitungen, Farbe von Leitungen, nur bisher nicht alles zusammen. Ich geb aber noch nicht auf, muss aber erstmal wieder "normal" arbeiten… Im Minimalbeispiel scheint die Pumpe an einem anderen Platz versetzt zu werden (im nicht sichtbaren Bereich, außerhalb der View Box?) wenn sie aktiv ist. `

                              Ja, dank meines schnellen Zusammenklöppelns war da ein Fehler dabei. Hier eine noch etwas klarere Version:

                               <svg>// Dies ist eine Leitung. Die grüne Farbe ist quasi nur Kontrolle. Bei korrektem Code
                              // wird die Leitung entsprechend der Temperatur koloriert.
                              
                              // Dies als Overlay. Die Grafik deutet einfach einen Fluss in der Leitung an. Es bietet sich
                              //  an, dies nach Bedarf ein oder auszublenden; dies erledigt der Code unten.
                              
                              // Hier jetzt die Labels. In dieser Form implementiert, führt es zum Flackern. Trotzdem lasse
                              // ich den Workaround weg. Denn ansonsten wird die Sache etwas unübersichtlich.
                              // Die Binding müssen natürlich angepasst werden. Ich lese meine UVR1611 per Modbus aus.  	
                                <text x="20" y="10" fill="#333" font-size="10" white-space="pre" id="temp">{modbus.0.holdingRegisters.16_Vorlauf_Heizung}</text>
                                <text x="30" y="35" fill="#333" font-size="10" white-space="pre" id="pumpenstatus">{modbus.0.coils.3_Heizungspumpe}</text> 
                              
                              // Dies ist einfach die Darstellung einer Pumpe; die wird durch den Code unten nach Bedarf gedreht (animiert) oder nicht</svg> 
                              

                              @Stefan-G:

                              Habe auch versucht, Dein "großes" Beispiel zum Laufen zu bekommen und leider reagiert das nicht bei mir auf die Variablen. Kommt jede Variable in ein extra Basic-HTML Widget (muss ja irgendwie)? `

                              Ja, und zwar mit der ID. Im Widget steht dann also````
                              {modbus.0.holdingRegisters.10_Kollektor} °C

                              
                              Das separate Widget ist der Workaround zur Flimmer-Vermeidung, Dafür musst Du dann mit der ID arbeiten, da ansonsten der Javascript-Code keine Change hat, der Wert so auszulesen:````
                              document.getElementById('kollektor_temp').innerHTML);
                              

                              Es ist so etwas wie ein indirektes Binding. Wenn Du dann auch Einheiten haben willst, muss sich die ID nur auf die Zahl beziehen und darf die Einheit nicht umfassen. Das zeigt alles der Einzeiler.

                              @Stefan-G:

                              Kommt es auf die Reihenfolge an, in der ich diese in die View einfüge? `

                              Nein.

                              @Stefan-G:

                              Die Variablen "triggerX" verstehe ich nicht bzw sehe nicht, wo diese im Code benutzt werden. `

                              Genau. Das ist noch ein Workaround. Aufgrund des "indirekten BIndings" triggert die iobroker-JS-Engine den Code bei einem geupdateten Wert nicht neu; das vermeidet das Flackern, etwa sobald sich nur ein Wert ändert - was bei mir dank ModBus ja in Echzeit passiert. Bei entsprechend vielen Werten ändert sich da pausenlos eine Zahl. Andererseits will ich aber den Code neu ausführen, wenn sich bspw. eine Pumpe in Bewegung setzt. Dafür dann der Trick mit der Variable. Es hängt keinerlei Funktion dran, aber die Engine startet den Code noch einmal neu.

                              @Stefan-G:

                              Du siehst, noch einiges an Fragen offen, aber ich wollte wenigstens zwischendurch mal Danke sagen. `

                              Gerne!

                              Viele Grüße

                              Marc

                              Hallo Marc,

                              ich bin stark daran interessiert, Deine Visualisierung zu adaptieren - sofern das kein Problem für Dich darstellt.

                              Ist Dein gesamtes Flussdiagramm ein einziges SVG, oder hast Du diverse SVGs im VIS zusammengefügt?

                              Kannst Du vielleicht hierzu den Code für eine Pumpe und ein Flussschema darstellen? Wie hast Du das Flussschema animiert bekommen? Und wie funktioniert das mit dem Binding?

                              Es wäre fast zu schön, darauf Antworten und Informationen zu bekommen.

                              Vielen Dank im Voraus und liebe Grüße,
                              Timo

                              S Offline
                              S Offline
                              Stefan-G
                              schrieb am zuletzt editiert von
                              #877

                              Hi Timo,

                              da mir Marc damals geholfen hat versuche ich mal ein paar von Deinen Fragen zu beantworten.

                              @Spampunk said in Einfach mal zeigen will….. 🙂 - Teil 2:

                              Ist Dein gesamtes Flussdiagramm ein einziges SVG, oder hast Du diverse SVGs im VIS zusammengefügt?

                              Wenn ich mich recht erinnere hatte Marc sein SVG mal hier gepostet und es war eines, das alles außer die Labels (externe Bindings) enthielt, hat aber leider die Forum-Umstellung nicht überlebt, glaub ich. Kann Dir nur anbieten, das zu posten, was ich daraus gemacht hab (auch wenn auf Grund von Zeitmangel noch nicht fertig und noch nicht voll funktionsfähig, aber einiges geht ja doch schon)

                              Heizungsanlage.png

                              Das wäre das zugehörige SVG enthält alles außer die Images (Kamin, Solarstation, Ausgleichsgefäße, etc.):

                              test16_noImages4IOB.svg

                              Womit ich (in meinem Bild) noch Probleme habe ist das animieren der Pumpen, die springen immer an eine andere Stelle im Bild (da ist wohl noch ein Fehler drin).

                              @Spampunk said in Einfach mal zeigen will….. 🙂 - Teil 2:

                              Kannst Du vielleicht hierzu den Code für eine Pumpe und ein Flussschema darstellen? Wie hast Du das Flussschema animiert bekommen? Und wie funktioniert das mit dem Binding?

                              Ich habe gerade noch mal das Minimalbeispiel von Marc ausgegraben dass ich damals ein bisschen angepasst hatte. Mit den folgenden Widgets (von denen das HTML-Image schon den SVG Code enthält) sollte eine Leitung und eine Pumpe gezeichnet werden:


                              [{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"<svg>\n // Dies ist eine CSS-Definition. Sie führt später zum "Fließen" in der Leitung\n <style> \n\t\t.flow {\n animation: dash 30s linear;\n animation-iteration-count: infinite;\n \t \t}\n </style>\n\n// Dies ist eine Leitung. Die grüne Farbe ist quasi nur Kontrolle. Bei korrektem Code\n// wird die Leitung entsprechend der Temperatur koloriert.\n <path id="leitung1" fill="none" stroke="green" stroke-width="11" d="M0 15h100v10H0z"/>\n \n// Dies als Overlay. Die Grafik deutet einfach einen Fluss in der Leitung an. Es bietet sich\n// an, dies nach Bedarf ein oder auszublenden; dies erledigt der Code unten.\n \t<g id="flussanimation1" fill="none" class="flow" stroke="#fff" stroke-dasharray="4" stroke-width="4" opacity=".5">\n\t\t<path d="M 5.058 20.093 L 108.785 19.427"/>\n \t</g>\n \t\n \n// Dies ist einfach die Darstellung einer Pumpe; die wird durch den Code unten nach Bedarf gedreht (animiert) oder nicht\n <g id="pumpe1" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel">\n <path fill="#fff" d="M72.2 19.756c0 6-5 11-11.2 11s-11-5-11-11c0-6.2 5-11.2 11-11.2s11.3 5 11.3 11.2z"/>\n <path stroke-width=".8" d="M66.5 10.156v19l-8.2-4.6-8.3-4.7 8.3-4.7z"/>\n </g>\n \n<script type="text/javascript">\nvar svgNS = "http://www.w3.org/2000/svg\";\nsetTimeout(function () {\n\nvar trigger1 = {javascript.0.TestSVGbool};\n \n// Auslesen der Temperatur und umrechnen über die Funktion unten in eine Farbe\n// 20 = blau; 90 = rot\n var leitungsfarbe = color(parseInt(document.getElementById('kollektor_temp').innerHTML));\n\n// Einfärben der Leitung entsprechend ihrer Temperatur\n document.getElementById("leitung1").setAttribute("stroke", leitungsfarbe);\n\n// Hier jetzt die Auswertung, ob die Pumpe läuft. Wenn ja, dann wird sie gedreht und\n// die Flussanimation wird eingeblendet.\n \n if ((document.getElementById('pumpe_solar').innerHTML) === 'true') {\n document.getElementById("flussanimation1").style.display = "block";\n\t\taddRotateTransform('pumpe1',5 ,1);\n }\n else {\n document.getElementById("flussanimation1").style.display = "none";\n\t\taddRotateTransform('pumpe1',0 ,1);\n }; \n}, 1);\n\n\tfunction addRotateTransform(target_id, speed, direction) {\n\t\tvar element_to_rotate = document.getElementById(target_id);\n\t\tvar my_transform = document.createElementNS(svgNS, "animateTransform");\n\t\tvar bb = element_to_rotate.getBBox();\n\t\tvar cx = bb.x + bb.width/2;\n\t\tvar cy = bb.y + bb.height/2;\n\t\tmy_transform.setAttributeNS(null, "attributeName", "transform");\n\t\tmy_transform.setAttributeNS(null, "attributeType", "XML");\n\t\tmy_transform.setAttributeNS(null, "type", "rotate");\n\t\tmy_transform.setAttributeNS(null, "dur", speed + "s");\n\t\tmy_transform.setAttributeNS(null, "repeatCount", "indefinite");\n\t\tmy_transform.setAttributeNS(null, "from", "0 "+cx+" "+cy);\n\t\tmy_transform.setAttributeNS(null, "to", 360direction+" "+cx+" "+cy);\t\t\n\t\telement_to_rotate.appendChild(my_transform);\n\t\tmy_transform.beginElement();\n\t}\n\t \n\tfunction color(value) {\n \tvar highColor = "#ff6060";\n \tvar lowColor = "#6060ff";\n \tvar highTemp = 90;\n \tvar lowTemp = 20;\n \tif(value > highTemp) {\n \t\treturn highColor;\n \t}\n \telse if(value < lowTemp) {\n \t\treturn lowColor;\n \t}\n \telse {\n \t\tvar lr = parseInt("0x"+lowColor.substring(1,3));\n \t\tvar lg = parseInt("0x"+lowColor.substring(3,5));\n \t\tvar lb = parseInt("0x"+lowColor.substring(5,7));\n \t\tvar hr = parseInt("0x"+highColor.substring(1,3));\n \t\tvar hg = parseInt("0x"+highColor.substring(3,5));\n \t\tvar hb = parseInt("0x"+highColor.substring(5,7));\n \t\tvar cr = parseInt(lr + (hr-lr)(value-lowTemp)/(highTemp-lowTemp)).toString(16);\n \t\tvar cg = parseInt(lg + (hg-lg)(value-lowTemp)/(highTemp-lowTemp)).toString(16);\n \t\tvar cb = parseInt(lb + (hb-lb)(value-lowTemp)/(highTemp-lowTemp)).toString(16);\n \t\tcr = cr.length == 1 ? "0"+cr: cr;\n \t\tcg = cg.length == 1 ? "0"+cg: cg;\n \t\tcb = cb.length == 1 ? "0"+cb: cb;\n \t\treturn "#"+cr+cg+cb;\n \t}\n }\n </script>\n</svg>","name":"_Bild"},"style":{"left":"3px","top":"158px","width":"500px","height":"500px"},"widgetSet":"basic"},{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"Kollektor: <span id="kollektor_temp">{javascript.0.vbus.values.Temperaturesensor1}</span>","name":"KollektorTemp"},"style":{"left":"471px","top":"51px","width":"536px","height":"26px","color":"#545454"},"widgetSet":"basic"},{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"<span id="pumpe_solar">{javascript.0.TestSVGbool}</span>"},"style":{"left":"592px","top":"24px","width":"334px","height":"26px","color":"#545454"},"widgetSet":"basic"}]

                              Die Variable "javascript.0.TestSVGbool" müsstest Du zum Schalten der Pumpe anlegen und die Variable "javascript.0.vbus.values.Temperaturesensor1" sollte die Temperatur für die Leitungsfarbe liefern (kannst natürlich anpassen).

                              Hoffe, das hilft erst mal.

                              Viele Grüße
                              Stefan

                              S 2 Antworten Letzte Antwort
                              0
                              • W Offline
                                W Offline
                                weimaraner
                                schrieb am zuletzt editiert von
                                #878

                                Na dann will ich mal meine Umsetzung zeigen. Wandeinbau war mit zu aufwendig und so habe ich mich für eine andere Art des Einbaus entschieden. Ein vorgesetzter Rahmen und dahinter ein xoro megapad.
                                In OG habe ich es sogar so lösen können, daß man gar keine Kabel sieht, da die Steckdose zur Stromversorgung genau von dem Rahmen abgedeckt wird.
                                Grüße Andreas IMG_20190503_201827.jpg IMG_20190503_201854.jpg

                                1 Antwort Letzte Antwort
                                2
                                • S Stefan-G

                                  Hi Timo,

                                  da mir Marc damals geholfen hat versuche ich mal ein paar von Deinen Fragen zu beantworten.

                                  @Spampunk said in Einfach mal zeigen will….. 🙂 - Teil 2:

                                  Ist Dein gesamtes Flussdiagramm ein einziges SVG, oder hast Du diverse SVGs im VIS zusammengefügt?

                                  Wenn ich mich recht erinnere hatte Marc sein SVG mal hier gepostet und es war eines, das alles außer die Labels (externe Bindings) enthielt, hat aber leider die Forum-Umstellung nicht überlebt, glaub ich. Kann Dir nur anbieten, das zu posten, was ich daraus gemacht hab (auch wenn auf Grund von Zeitmangel noch nicht fertig und noch nicht voll funktionsfähig, aber einiges geht ja doch schon)

                                  Heizungsanlage.png

                                  Das wäre das zugehörige SVG enthält alles außer die Images (Kamin, Solarstation, Ausgleichsgefäße, etc.):

                                  test16_noImages4IOB.svg

                                  Womit ich (in meinem Bild) noch Probleme habe ist das animieren der Pumpen, die springen immer an eine andere Stelle im Bild (da ist wohl noch ein Fehler drin).

                                  @Spampunk said in Einfach mal zeigen will….. 🙂 - Teil 2:

                                  Kannst Du vielleicht hierzu den Code für eine Pumpe und ein Flussschema darstellen? Wie hast Du das Flussschema animiert bekommen? Und wie funktioniert das mit dem Binding?

                                  Ich habe gerade noch mal das Minimalbeispiel von Marc ausgegraben dass ich damals ein bisschen angepasst hatte. Mit den folgenden Widgets (von denen das HTML-Image schon den SVG Code enthält) sollte eine Leitung und eine Pumpe gezeichnet werden:


                                  [{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"<svg>\n // Dies ist eine CSS-Definition. Sie führt später zum "Fließen" in der Leitung\n <style> \n\t\t.flow {\n animation: dash 30s linear;\n animation-iteration-count: infinite;\n \t \t}\n </style>\n\n// Dies ist eine Leitung. Die grüne Farbe ist quasi nur Kontrolle. Bei korrektem Code\n// wird die Leitung entsprechend der Temperatur koloriert.\n <path id="leitung1" fill="none" stroke="green" stroke-width="11" d="M0 15h100v10H0z"/>\n \n// Dies als Overlay. Die Grafik deutet einfach einen Fluss in der Leitung an. Es bietet sich\n// an, dies nach Bedarf ein oder auszublenden; dies erledigt der Code unten.\n \t<g id="flussanimation1" fill="none" class="flow" stroke="#fff" stroke-dasharray="4" stroke-width="4" opacity=".5">\n\t\t<path d="M 5.058 20.093 L 108.785 19.427"/>\n \t</g>\n \t\n \n// Dies ist einfach die Darstellung einer Pumpe; die wird durch den Code unten nach Bedarf gedreht (animiert) oder nicht\n <g id="pumpe1" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel">\n <path fill="#fff" d="M72.2 19.756c0 6-5 11-11.2 11s-11-5-11-11c0-6.2 5-11.2 11-11.2s11.3 5 11.3 11.2z"/>\n <path stroke-width=".8" d="M66.5 10.156v19l-8.2-4.6-8.3-4.7 8.3-4.7z"/>\n </g>\n \n<script type="text/javascript">\nvar svgNS = "http://www.w3.org/2000/svg\";\nsetTimeout(function () {\n\nvar trigger1 = {javascript.0.TestSVGbool};\n \n// Auslesen der Temperatur und umrechnen über die Funktion unten in eine Farbe\n// 20 = blau; 90 = rot\n var leitungsfarbe = color(parseInt(document.getElementById('kollektor_temp').innerHTML));\n\n// Einfärben der Leitung entsprechend ihrer Temperatur\n document.getElementById("leitung1").setAttribute("stroke", leitungsfarbe);\n\n// Hier jetzt die Auswertung, ob die Pumpe läuft. Wenn ja, dann wird sie gedreht und\n// die Flussanimation wird eingeblendet.\n \n if ((document.getElementById('pumpe_solar').innerHTML) === 'true') {\n document.getElementById("flussanimation1").style.display = "block";\n\t\taddRotateTransform('pumpe1',5 ,1);\n }\n else {\n document.getElementById("flussanimation1").style.display = "none";\n\t\taddRotateTransform('pumpe1',0 ,1);\n }; \n}, 1);\n\n\tfunction addRotateTransform(target_id, speed, direction) {\n\t\tvar element_to_rotate = document.getElementById(target_id);\n\t\tvar my_transform = document.createElementNS(svgNS, "animateTransform");\n\t\tvar bb = element_to_rotate.getBBox();\n\t\tvar cx = bb.x + bb.width/2;\n\t\tvar cy = bb.y + bb.height/2;\n\t\tmy_transform.setAttributeNS(null, "attributeName", "transform");\n\t\tmy_transform.setAttributeNS(null, "attributeType", "XML");\n\t\tmy_transform.setAttributeNS(null, "type", "rotate");\n\t\tmy_transform.setAttributeNS(null, "dur", speed + "s");\n\t\tmy_transform.setAttributeNS(null, "repeatCount", "indefinite");\n\t\tmy_transform.setAttributeNS(null, "from", "0 "+cx+" "+cy);\n\t\tmy_transform.setAttributeNS(null, "to", 360direction+" "+cx+" "+cy);\t\t\n\t\telement_to_rotate.appendChild(my_transform);\n\t\tmy_transform.beginElement();\n\t}\n\t \n\tfunction color(value) {\n \tvar highColor = "#ff6060";\n \tvar lowColor = "#6060ff";\n \tvar highTemp = 90;\n \tvar lowTemp = 20;\n \tif(value > highTemp) {\n \t\treturn highColor;\n \t}\n \telse if(value < lowTemp) {\n \t\treturn lowColor;\n \t}\n \telse {\n \t\tvar lr = parseInt("0x"+lowColor.substring(1,3));\n \t\tvar lg = parseInt("0x"+lowColor.substring(3,5));\n \t\tvar lb = parseInt("0x"+lowColor.substring(5,7));\n \t\tvar hr = parseInt("0x"+highColor.substring(1,3));\n \t\tvar hg = parseInt("0x"+highColor.substring(3,5));\n \t\tvar hb = parseInt("0x"+highColor.substring(5,7));\n \t\tvar cr = parseInt(lr + (hr-lr)(value-lowTemp)/(highTemp-lowTemp)).toString(16);\n \t\tvar cg = parseInt(lg + (hg-lg)(value-lowTemp)/(highTemp-lowTemp)).toString(16);\n \t\tvar cb = parseInt(lb + (hb-lb)(value-lowTemp)/(highTemp-lowTemp)).toString(16);\n \t\tcr = cr.length == 1 ? "0"+cr: cr;\n \t\tcg = cg.length == 1 ? "0"+cg: cg;\n \t\tcb = cb.length == 1 ? "0"+cb: cb;\n \t\treturn "#"+cr+cg+cb;\n \t}\n }\n </script>\n</svg>","name":"_Bild"},"style":{"left":"3px","top":"158px","width":"500px","height":"500px"},"widgetSet":"basic"},{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"Kollektor: <span id="kollektor_temp">{javascript.0.vbus.values.Temperaturesensor1}</span>","name":"KollektorTemp"},"style":{"left":"471px","top":"51px","width":"536px","height":"26px","color":"#545454"},"widgetSet":"basic"},{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"<span id="pumpe_solar">{javascript.0.TestSVGbool}</span>"},"style":{"left":"592px","top":"24px","width":"334px","height":"26px","color":"#545454"},"widgetSet":"basic"}]

                                  Die Variable "javascript.0.TestSVGbool" müsstest Du zum Schalten der Pumpe anlegen und die Variable "javascript.0.vbus.values.Temperaturesensor1" sollte die Temperatur für die Leitungsfarbe liefern (kannst natürlich anpassen).

                                  Hoffe, das hilft erst mal.

                                  Viele Grüße
                                  Stefan

                                  S Offline
                                  S Offline
                                  Spampunk
                                  schrieb am zuletzt editiert von
                                  #879

                                  @Stefan-G
                                  Hallo Stefan, 1.000 Dank! Ich werde deine Hinweise und Beispiele am WE ausprobieren und mein Ergebnis posten.

                                  Liebe Grüße,
                                  Timo

                                  1 Antwort Letzte Antwort
                                  0
                                  • B Offline
                                    B Offline
                                    blackplanet333
                                    schrieb am zuletzt editiert von
                                    #880

                                    Hallo zusammen,

                                    auch ich möchte euch mal meinen Tablet Wandeinbau zeigen.

                                    Wandkonsole habe ich von:
                                    https://steuerung-licht-ton.de/tablethalterungen/

                                    Ich hatte hier das Glück, besser gesagt ich habe den Platz absichtlich so gewählt, da ein Sicherungskasten gleich daneben war, hier wurde dann ein Leerrohr rübergezogen.
                                    Im Sicherungskasten ist dann ein USB Netzteil. Stromversorgung lasse ich einfach permanent angeschlossen.
                                    Das in "geführten Zugriff" geschaltete iPad 4 wird via Xiaomi Bewegungssensor/Pushbullet (wichtig, es muss wenn Apple gewählt wird, mind. ein iPad 4 sein!!!) aufgeweckt und die Visualisierung angezeigt. Das iPad geht nach 10 min wieder aus.

                                    Und ja ich habe teilweise die "LOXONE - Visualisierung" nachgebaut, da mir diese einfach am besten gefällt.

                                    IMG_2438.png
                                    IMG_9715.jpeg
                                    IMG_9717.jpeg
                                    IMG_9758.jpeg
                                    IMG_9741.jpeg
                                    IMG_9753.jpeg
                                    IMG_9727.jpeg

                                    Beste Grüße

                                    1 Antwort Letzte Antwort
                                    0
                                    • D Offline
                                      D Offline
                                      dos1973
                                      schrieb am zuletzt editiert von
                                      #881

                                      ich suche (mir eine Wolf) so kleine farbige batterie Bildchens also 5 png von 0-100%.

                                      Hat jemand ggfs. ein paar schicke und verlinkt mich.

                                      Danke

                                      liv-in-skyL 1 Antwort Letzte Antwort
                                      0
                                      • D dos1973

                                        ich suche (mir eine Wolf) so kleine farbige batterie Bildchens also 5 png von 0-100%.

                                        Hat jemand ggfs. ein paar schicke und verlinkt mich.

                                        Danke

                                        liv-in-skyL Offline
                                        liv-in-skyL Offline
                                        liv-in-sky
                                        schrieb am zuletzt editiert von
                                        #882

                                        @dos1973
                                        alterenative zu png:
                                        die hier verändern die farbe je nach wert - ist in widget - als adapter installieren (Mfd icons as PNG)

                                        zum import:

                                        Image 3.png

                                        [{"tpl":"tplMfdCustom10","data":{"oid":"iot.0.services.custom__batt_s7","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","asButton":false,"icon0":"/icons-mfd-svg/measure_battery_100.svg","icon1":"/icons-mfd-svg/measure_battery_100.svg","icon2":"/icons-mfd-svg/measure_battery_100.svg","icon3":"/icons-mfd-svg/measure_battery_100.svg","icon4":"/icons-mfd-svg/measure_battery_100.svg","icon5":"/icons-mfd-svg/measure_battery_100.svg","icon6":"/icons-mfd-svg/measure_battery_100.svg","icon7":"/icons-mfd-svg/measure_battery_100.svg","icon8":"/icons-mfd-svg/measure_battery_100.svg","icon9":"/icons-mfd-svg/measure_battery_100.svg","icon10":"/icons-mfd-svg/measure_battery_100.svg","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"min":"0","max":"100","name":"Wohnzimmer HK2","show_active":true,"invert_value":false,"iconColor10":"#0e861b","iconValue0":"0","iconColor0":"#da1010","iconValue1":"10","iconColor1":"#f76464","iconValue2":"20","iconValue3":"30","iconValue4":"40","iconValue5":"50","iconValue6":"60","iconValue7":"70","iconValue8":"80","iconValue9":"90","iconValue10":"100","iconColor2":"#fddede","iconColor3":"#f9cc39","iconColor4":"#f9cc39","iconColor5":"#f9cc39","iconColor6":"#f9cc39","iconColor7":"#fac46b","iconColor8":"#c3fbbb","iconColor9":"#95f9a3","lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0},"style":{"left":"532px","top":"207px","width":"35px","height":"35px","z-index":"2"},"widgetSet":"jqui-mfd"}]

                                        nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                                        D 1 Antwort Letzte Antwort
                                        0
                                        • liv-in-skyL liv-in-sky

                                          @dos1973
                                          alterenative zu png:
                                          die hier verändern die farbe je nach wert - ist in widget - als adapter installieren (Mfd icons as PNG)

                                          zum import:

                                          Image 3.png

                                          [{"tpl":"tplMfdCustom10","data":{"oid":"iot.0.services.custom__batt_s7","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","asButton":false,"icon0":"/icons-mfd-svg/measure_battery_100.svg","icon1":"/icons-mfd-svg/measure_battery_100.svg","icon2":"/icons-mfd-svg/measure_battery_100.svg","icon3":"/icons-mfd-svg/measure_battery_100.svg","icon4":"/icons-mfd-svg/measure_battery_100.svg","icon5":"/icons-mfd-svg/measure_battery_100.svg","icon6":"/icons-mfd-svg/measure_battery_100.svg","icon7":"/icons-mfd-svg/measure_battery_100.svg","icon8":"/icons-mfd-svg/measure_battery_100.svg","icon9":"/icons-mfd-svg/measure_battery_100.svg","icon10":"/icons-mfd-svg/measure_battery_100.svg","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"min":"0","max":"100","name":"Wohnzimmer HK2","show_active":true,"invert_value":false,"iconColor10":"#0e861b","iconValue0":"0","iconColor0":"#da1010","iconValue1":"10","iconColor1":"#f76464","iconValue2":"20","iconValue3":"30","iconValue4":"40","iconValue5":"50","iconValue6":"60","iconValue7":"70","iconValue8":"80","iconValue9":"90","iconValue10":"100","iconColor2":"#fddede","iconColor3":"#f9cc39","iconColor4":"#f9cc39","iconColor5":"#f9cc39","iconColor6":"#f9cc39","iconColor7":"#fac46b","iconColor8":"#c3fbbb","iconColor9":"#95f9a3","lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0},"style":{"left":"532px","top":"207px","width":"35px","height":"35px","z-index":"2"},"widgetSet":"jqui-mfd"}]

                                          D Offline
                                          D Offline
                                          dos1973
                                          schrieb am zuletzt editiert von dos1973
                                          #883

                                          @liv-in-sky
                                          versucht, aber ne passt nicht in mein view 🙂 trotzdem vielen Dank

                                          es muss aber Mfd icons as SVG installiert werde...

                                          1 Antwort Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          742

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe