Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Bindings in einem HTML Widget [gelöst]

    NEWS

    • Wir empfehlen: Node.js 22.x

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker goes Matter ... Matter Adapter in Stable

    Bindings in einem HTML Widget [gelöst]

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

      war durch die vielen datenpunkte verwirrt und hatte hier nur einen vermeintlichen fehler aufgeschrieben. bitte überspringen

      1 Reply Last reply Reply Quote 0
      • G
        GombersIOB @hotshot14167 last edited by

        @hotshot14167 said in Bindings in einem HTML Widget:

        Ich möchte mehrere Werte von Datenpunkten (Shellys) zusammen rechnen Plus

        Ganz offen. Selbst wenn man das mit VIS hinbekommt, finde ich den Ansatz maximal unhandlich. Besonders, wenn man das systematisch, für alle möglichen Anzeigen, machen will. Es widerspricht auch dem objektorientierten Ansatz: "Jede Methode hat nur eine Aufgabe"!
        Warum nicht einen eigenen Datenpunkt darstellen, der per JavaScript berechnet wird?

        H 2 Replies Last reply Reply Quote 0
        • H
          hotshot14167 @liv-in-sky last edited by

          @liv-in-sky Stimmt das ist es!
          erster Wert: {value1:shelly.0.SHPLG-S#C8C9A3890BCB#1.Relay0.Power; value1} <br/>
          erster Wert: {value1:shelly.0.SHPLG-S#C8C9A3890BCB#1.Relay0.Power; typeof(value1)} <br/>
          zweiter Wert: {value2:0_userdata.0.Textstrings.Ein-shelly-test; value2} <br/>
          zweiter Wert: {value2:0_userdata.0.Textstrings.Ein-shelly-test; typeof(value2)} <br/>
          erster Wert: Umwandlung: {value1:shelly.0.SHPLG-S#C8C9A3890BCB#1.Relay0.Power;parseFloat(value1)} <br/>
          zweiter Wert: Umwandlung: {value2:0_userdata.0.Textstrings.Ein-shelly-test;parseFloat(value2)} <br/>
          Ausgabe1: {value1:shelly.0.SHPLG-S#C8C9A3890BCB#1.Relay0.Power; value2:0_userdata.0.Textstrings.Ein-shelly-test;value1} <br/>
          Ausgabe2: {value1:shelly.0.SHPLG-S#C8C9A3890BCB#1.Relay0.Power; value2:0_userdata.0.Textstrings.Ein-shelly-test;value2} <br/>
          Berechnung: {value1:shelly.0.SHPLG-S#C8C9A3890BCB#1.Relay0.Power; value2:0_userdata.0.Textstrings.Ein-shelly-test;parseFloat(value1)+parseFloat(value2)} <br/>

          erster Wert: 10.29
          erster Wert: string
          zweiter Wert: 12.3
          zweiter Wert: string
          erster Wert: Umwandlung: 10.29
          zweiter Wert: Umwandlung: 12.3
          Ausgabe1: 10.29
          Ausgabe2: 12.3
          Berechnung: 22.59

          Aber wie kann ich das lösen?

          OliverIO 1 Reply Last reply Reply Quote 0
          • liv-in-sky
            liv-in-sky @hotshot14167 last edited by

            @hotshot14167

            @gombersiob sagte in Bindings in einem HTML Widget:

            Warum nicht einen eigenen Datenpunkt darstellen, der per JavaScript berechnet wird

            mit anderen worten - du machst dir eine html tabelle deiner werte mit einem kleinen script und nutzt das html widget zur anzeige

            wenn du das nicht machen willst, müßtest du dir aliase der dp anlegen, die diese zeichen nicht haben

            H 1 Reply Last reply Reply Quote 0
            • H
              hotshot14167 @liv-in-sky last edited by

              @liv-in-sky Ja ok gibt es dafür ein Beispiel wie ich das machen könnte. Mit alias möchte ich nicht arbeite.

              liv-in-sky 1 Reply Last reply Reply Quote 0
              • liv-in-sky
                liv-in-sky @hotshot14167 last edited by

                @hotshot14167

                letztlich muss das z.b. so aussehen:

                <table>
                  <tr>
                
                <td style="border: 3px solid #e8eede; font color :#000000 font size=4">&nbsp;&nbsp;&nbsp;&nbsp; Stromstärke Phase (1):</td><td style="border: 3px solid #e8eede; font color :#000000 font size=4"><b>&nbsp;&nbsp;&nbsp;{modbus.0.inputRegisters.30007_Phase_1}&nbsp;A</b></td>
                
                </tr>
                
                <tr>
                
                <td style="border: 3px solid #e8eede; font color :#000000 font size=4">&nbsp;&nbsp;&nbsp;&nbsp; Stromstärke Phase (2):</td><td style="border: 3px solid #e8eede; font color :#000000 font size=4"><b>&nbsp;&nbsp;&nbsp;{modbus.0.inputRegisters.30009_Phase_2}&nbsp;A</b></td>
                
                </tr>
                
                <tr>
                <td style="border: 3px solid #e8eede; font color :#000000 font size=4">&nbsp;&nbsp;&nbsp;&nbsp; Stromstärke Phase (3):</td><td style="border: 3px solid #e8eede; font color :#000000 font size=4"><b>&nbsp;&nbsp;&nbsp;{modbus.0.inputRegisters.30011_Phase_3}>&nbsp;A</b></td>
                
                </tr>
                
                </table>
                
                

                du kannst dir deine tabelle erstellen und diese tabell als variable erstellen - dann fügst du die datenpunkte in diese tabellen variable ein - also die bindings in dem beispiel werden ersetzt - am ende des scriptes schreibst du das ganze in einen extra-dp und den nimmst du im html widget als binding wert zur anzeige

                hift dir das weiter

                H 1 Reply Last reply Reply Quote 0
                • H
                  hotshot14167 @GombersIOB last edited by

                  @gombersiob Ja gerne ich weiß aber nicht wie. Gibt es da ein Beispiel?

                  1 Reply Last reply Reply Quote 0
                  • H
                    hotshot14167 @liv-in-sky last edited by

                    @liv-in-sky Ja ok und wo erstelle ich die Tabelle. Sicher nicht in Vis.

                    liv-in-sky 3 Replies Last reply Reply Quote 0
                    • liv-in-sky
                      liv-in-sky @hotshot14167 last edited by liv-in-sky

                      @hotshot14167 nee- in einem javascript oder blockly im scripte tab

                      aber evtl lkannst du das mal versuchen

                      https://forum.iobroker.net/post/682815

                      1 Reply Last reply Reply Quote 0
                      • liv-in-sky
                        liv-in-sky @hotshot14167 last edited by liv-in-sky

                        @hotshot14167

                        sorry - mein fehler - mit dieser tabelle geht das nicht - braucht auch bindings

                        1 Reply Last reply Reply Quote 0
                        • liv-in-sky
                          liv-in-sky @hotshot14167 last edited by liv-in-sky

                          @hotshot14167

                          was nutzt du blockly oder javascript

                          H 1 Reply Last reply Reply Quote 0
                          • H
                            hotshot14167 @liv-in-sky last edited by

                            @liv-in-sky bisher noch gar nichts

                            liv-in-sky 2 Replies Last reply Reply Quote 0
                            • liv-in-sky
                              liv-in-sky @hotshot14167 last edited by

                              @hotshot14167

                              das ist nicht viel 🙂

                              1 Reply Last reply Reply Quote 0
                              • liv-in-sky
                                liv-in-sky @hotshot14167 last edited by

                                @hotshot14167

                                dann sollten wir wohl eher einfach anfangen - das wird aber jetzt nicht mehr zeitlich möglich sein

                                hast du noch kein blockly in anwendung ? oder evtl den script adapter noch nie genutzt ?

                                H 1 Reply Last reply Reply Quote 0
                                • H
                                  hotshot14167 @liv-in-sky last edited by

                                  @liv-in-sky Nein habe ich nicht aber ich bin ja auch erst 2 Wochen dabei. Ich weiß ja jetzt den Weg und werde es schon rausfinden.

                                  liv-in-sky 1 Reply Last reply Reply Quote 0
                                  • liv-in-sky
                                    liv-in-sky @hotshot14167 last edited by

                                    @hotshot14167

                                    hier mal super einfaches beispiel, wie man das dann theoretisch aufbaut

                                    Image 034.png

                                    H 1 Reply Last reply Reply Quote 0
                                    • H
                                      hotshot14167 @liv-in-sky last edited by hotshot14167

                                      @liv-in-sky So ich habe es geschafft mit einem Java Script jedoch werden die Daten nur beim Neustart des Skriptes aktualisiert. Warum?

                                      Screenshot 2023-03-21 191539.jpg

                                      1 Reply Last reply Reply Quote 0
                                      • H
                                        hotshot14167 @GombersIOB last edited by

                                        @gombersiob Ja habe ich hin bekommen:
                                        Screenshot 2023-03-21 191539.jpg

                                        Leider werden die Daten aber nur beim Neustart aktualisierte. Warum?

                                        G 1 Reply Last reply Reply Quote 0
                                        • G
                                          GombersIOB @hotshot14167 last edited by GombersIOB

                                          @hotshot14167 said in Bindings in einem HTML Widget:

                                          Leider werden die Daten aber nur beim Neustart aktualisierte. Warum?

                                          Da fehlt ein Trigger:

                                          Meine Lösung sähe so aus:

                                          schedule("* * * * *", async function () {
                                          	let shelly1Path:string="shelly.0.SHPLG-S#C8C9A3890BCB#1.Relay0.";
                                          	let shelly2Path:string="shelly.0.SHPLG-S#5A6DB5#1.Relay0.";
                                          	let userDataPath:string="0_userdata.0.Datenpunkt.Messwerte_Wohnzimmer.";
                                          
                                          	let shelly1Power:number=Number(getState(shelly1Path+"Power").val);
                                          	let shelly2Power:number=Number(getState(shelly2Path+"Power").val);
                                          	let sum:number=shelly1Power+shelly2Power;
                                          
                                          	setState(userDataPath+"Verbrauch-summe", sum, true);
                                          });
                                          

                                          Die "schedule"-Anweisung lässt über die CRON-Parameter das Script jede Minute anlaufen.

                                          Noch eins: Bitte Code nicht als Bild, sondern als echten anzeigen.
                                          Man klickt dazu das entprechende Editor-Zeichen an
                                          05095bfd-4ff7-4bbb-9882-14d4b55b4c97-grafik.png

                                          Es werden dann an die Stelle, wo der Cursor steht, diese drei Zeilen erzeugt:
                                          c63c7c2b-9329-4808-9206-13026f3e8d6e-grafik.png .
                                          Und den Code fügt man dann anstelle des Wortes "code_text" ein.

                                          Noch eine Anmerkung kann ich mir nicht verkneifen.
                                          Es geht mir um die Namensgebung des neuen Datenpunktes.

                                          1. Das Wort "Datenpunkt" würde ich im Namen weglassen. Das macht den String nur lang und gibt null Information. Was soll es den anders sein als ein Datenpunkt?
                                          2. Ich würde vermutlich nicht ein Verzeichnis "Messwerte_Wohnzimmer" anlegen. Sondern ein Verzeichnis "Messwerte" und darunter ein Verzeichnis "Wohnzimmer". Also "Messwerte.Wohnzimmer". Und fürs Schlafzimmer wäre es dann ein Pfad "0_userdata.0.Messwerte.Schlafzimmer.". Unter Objekten findet sich dann die Strukur
                                          0_userdata
                                             0
                                                Messwerte
                                                   Schlafzimmer
                                                      Verbraucher-X
                                                   Wohnzimmer
                                                      Verbraucher-Y 
                                          
                                          H 1 Reply Last reply Reply Quote 0
                                          • OliverIO
                                            OliverIO @hotshot14167 last edited by OliverIO

                                            @hotshot14167

                                            ich will evtl auch mal noch auf die folgende rein client-seitige technik hinweisen.
                                            das folgende skript in ein html-widget kopiert funktioniert ebenfalls.

                                            <div id="val1" style="display:none">{0_userdata.0.test.test1}</div>
                                            <div id="val2" style="display:none">{0_userdata.0.test.test2}</div>
                                            <script>
                                                debugger;
                                                var val1 = parseFloat($("#val1").html());
                                                var val2 = parseFloat($("#val2").html());
                                            
                                                $("#meineID").html(val1+val2);
                                            
                                            </script> 
                                            
                                            <div id="meineID"></div>
                                            
                                            

                                            In Zeile 1 und 2 werden die datenpunkte per binding in versteckte html-elemente geschrieben und von vis auch regelmäßig aktualisiert
                                            Zeile 4 habe ich mal das debugger statement eingefügt, mit dem man im edit (aber da wird das binding nicht eingetragen) wie auch im runtime durch sein skript debuggen kann
                                            In zeile 5+6 werden dann die Werte mit jquery aus den elementen geholt und entsprechend typ geparset
                                            zeile 8 wird zusammengerechnet und das ergebnis wieder per jquery in ein anderes element geschrieben.
                                            Zeile 12 enthält das sichtbare Platzhalterelement, in das dann das Ergebnis geschrieben wird.

                                            Man kann auch den Umweg über die versteckten html-elemente sparen und das binding direkt in den skriptteil schreiben:

                                            var val1 = {0_userdata.0.test.test1};
                                            

                                            allerdings wird dann das browser log mit fehlermeldungen zugespammt, da im edit modus keine gültige anweisung ist.
                                            im runtime modus funktioniert es aber.
                                            Als workaround könnte man es noch als String notieren

                                            <script>
                                            debugger;
                                                var val1 = parseFloat("{0_userdata.0.test.test1}");
                                                var val2 = parseFloat("{0_userdata.0.test.test2}");
                                            
                                                $("#meineID").html(val1+val2);
                                            
                                            </script> 
                                            test
                                            <div id="meineID"></div>
                                            
                                            

                                            wer es genauer verstehen will, schaut sich den html inhalt des widgets in der runtime an.

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            434
                                            Online

                                            32.0k
                                            Users

                                            80.3k
                                            Topics

                                            1.3m
                                            Posts

                                            4
                                            27
                                            937
                                            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