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. Skripten / Logik
  4. JavaScript
  5. Pittinis Workshop für mich

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

Pittinis Workshop für mich

Geplant Angeheftet Gesperrt Verschoben JavaScript
53 Beiträge 3 Kommentatoren 2.2k Aufrufe 12 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.
  • Dominik F.D Dominik F.

    @Pittini

    Haha ja das let und var Dingen 😄 Ich glaube ich hab mich einfach zu sehr an var vorher gewöhnt bei meinem gefährlichem Halbwissen^^
    Ich habe schon grundsätzlich eine Idee wie ich das ganze umsetzen kann. Habe auch schon angefangen und bin da denke ich schon auf einem ganz gutem Weg. Ich frage mich nun, ob es klug ist den Header noch so generieren zu lassen. Der erste Wert des Arrays beginnt ja mit der 0 und damit kommen bei mir die ersten "Probleme". Ich musste für mich da jetzt erst mal etwas "schummeln" damit es passt. Auch frage ich mich ob ich noch die verschachtelnte for Schleife anwenden sollte.
    Ich poste dir mal meinen ersten Versuch und dann erkennst du denke ich mein Problem. Ich habe nun einen leeren Wert bei den Arrays eingeführt damit es erst mal passt 😄 Du wirst jetzt wahrscheinlich gerade mit dem Kopf auf die Tastatur fallen wenn du das siehst 😄
    Da ich glaube ich schon einigermaßen nah an der Lösung bin würde ich noch dabei bleiben das ich es versuche selber zu lösen und würde erstmal nur die Frage mit dem Header geklärt haben wollen und wissen wollen, ob ich grundsätzlich den "richtigen" Weg eingeschlagen habe. Das würde mir schon reichen um weiter zu tüfteln.

    createState('javascript.0.Test.TestTable', { type: 'string' });
    
    const Stadt = ["","Hamburg", "München", "Berlin", "Bochum", "Dortmund"];
    const Fluss = ["","Rhein", "Ruhr", "Main", "Donau", "Elbe"];
    const Land = ["","Deutschland", "England", "Spanien", "Frankreich", "Italien"];
    const Header = ["Stadt", "Land", "Fluss"];
    
    function CreateTestTable(AnzZeilen, AnzSpalten) { //  Erzeugt tabellarische Übersicht als HTML Tabelle   
        let TestTable = "";
        TestTable = "<table border='1'>"; //Tabellenanfang
        for (let x = 0; x < AnzZeilen; x++) {
            TestTable += "<tr>";
            for (let y = 0; y < AnzSpalten; y++) {
                if (x == 0) {
                    TestTable += "<th>" + Header[y] + "</th>";
                }
                else {
                    TestTable += "<tr><td>" + Stadt[x] + "</td>" ;
                    TestTable += "<td>" + Land[x] + "</td>" ;
                    TestTable += "<td>" + Fluss[x] + "</td></tr>";
                }
            };
            TestTable += "</tr>";
        };
        TestTable += "</table>"; //Tabellenende
        setState('javascript.0.Test.TestTable', TestTable);
    }
    
    CreateTestTable(6, 3); //Skriptstart
    
    
    
    P Offline
    P Offline
    Pittini
    Developer
    schrieb am zuletzt editiert von
    #28

    @Dominik-F sagte in Pittinis Workshop für mich:

    Der erste Wert des Arrays beginnt ja mit der 0 und damit kommen bei mir die ersten "Probleme". Ich musste für mich da jetzt erst mal etwas "schummeln" damit es passt. Auch frage ich mich ob ich noch die verschachtelnte for Schleife anwenden sollte.

    Die Leerstrings gehen natürlich gar nicht, aber Du hast zumindest das Problem erkannt und bist ja auch nah dran an der Lösung, hier fehlts wieder nur an der Umsetzung. Warum sparst Dir das Headerarray nicht und schreibst anstelle der Leerstrings jeweils die Überschrift rein, was dann ja passend wieder an pos 0 ist? Und um die verschachtelte Schleife wirst nicht rumkommen, wie hattest Dir das denn gedacht?

    Dominik F.D 3 Antworten Letzte Antwort
    0
    • P Pittini

      @Dominik-F sagte in Pittinis Workshop für mich:

      Der erste Wert des Arrays beginnt ja mit der 0 und damit kommen bei mir die ersten "Probleme". Ich musste für mich da jetzt erst mal etwas "schummeln" damit es passt. Auch frage ich mich ob ich noch die verschachtelnte for Schleife anwenden sollte.

      Die Leerstrings gehen natürlich gar nicht, aber Du hast zumindest das Problem erkannt und bist ja auch nah dran an der Lösung, hier fehlts wieder nur an der Umsetzung. Warum sparst Dir das Headerarray nicht und schreibst anstelle der Leerstrings jeweils die Überschrift rein, was dann ja passend wieder an pos 0 ist? Und um die verschachtelte Schleife wirst nicht rumkommen, wie hattest Dir das denn gedacht?

      Dominik F.D Offline
      Dominik F.D Offline
      Dominik F.
      schrieb am zuletzt editiert von
      #29

      @Pittini

      Ja die Überschriften in die Arrays rein zu schreiben wäre zu einfach gewesen 😄 Ich hatte den Array mit den Überschriften erstellt da es ja irgendwann auch das Ziel sein wird, eine Variable zu erstellen, mit dem man die Überschriften erstellen kann bzw. ich dachte das das eines der nächsten Sachen sein wird und hatte eine Idee wie das umzusetzen ist^^ Es kann sein, dass ich in den nächsten Tagen nicht immer täglich die Lösung deiner Aufgaben haben werde. Hab zwar täglich Zeit dafür nur nicht 5 std. pro Tag wie in den letzten Tagen. Ich bleibe aber dran.

      1 Antwort Letzte Antwort
      0
      • P Pittini

        @Dominik-F sagte in Pittinis Workshop für mich:

        Der erste Wert des Arrays beginnt ja mit der 0 und damit kommen bei mir die ersten "Probleme". Ich musste für mich da jetzt erst mal etwas "schummeln" damit es passt. Auch frage ich mich ob ich noch die verschachtelnte for Schleife anwenden sollte.

        Die Leerstrings gehen natürlich gar nicht, aber Du hast zumindest das Problem erkannt und bist ja auch nah dran an der Lösung, hier fehlts wieder nur an der Umsetzung. Warum sparst Dir das Headerarray nicht und schreibst anstelle der Leerstrings jeweils die Überschrift rein, was dann ja passend wieder an pos 0 ist? Und um die verschachtelte Schleife wirst nicht rumkommen, wie hattest Dir das denn gedacht?

        Dominik F.D Offline
        Dominik F.D Offline
        Dominik F.
        schrieb am zuletzt editiert von Dominik F.
        #30

        @Pittini

        Habe jetzt eine Lösung, aber das ist nicht der Weg den ich eingehen sollte glaube ich 😄
        Ich werde noch einen 2ten Lösungsweg probieren

        Hier der erste:

        
        createState('javascript.0.Test.TestTable', { type: 'string' });
        
        var Stadt = ["Stadt", "Hamburg", "München", "Berlin", "Bochum", "Dortmund"];
        var Fluss = ["Fluss", "Rhein", "Ruhr", "Main", "Donau", "Elbe"];
        var Land = ["Land", "Deutschland", "England", "Spanien", "Frankreich", "Italien"];
        
        
        function CreateTestTable(AnzZeilen, AnzSpalten) { //  Erzeugt tabellarische Übersicht als HTML Tabelle   
            let TestTable = "";
            TestTable = "<table border='1'>"; //Tabellenanfang
            for (let x = 0; x <= AnzZeilen; x++) {
                TestTable += "<tr>";
                for (let y = 1; y <= AnzSpalten; y++) {
                    if (x == 0) {
                        TestTable += "<th>" + Stadt[x] + "</th>" + "<th>" + Land[x] + "</th>" + "<th>" + Fluss[x] + "</th>";
                    }
                    else {
                        TestTable += "<td> " + Stadt[x] + "</td>" + "<td> " + Land[x] + "</td>" + "<td> " + Fluss[x] + "</td>";
                    }
                };
                TestTable += "</tr>";
            };
            TestTable += "</table>"; //Tabellenende
            setState('javascript.0.Test.TestTable', TestTable);
        }
        
        CreateTestTable(5, 1); //Skriptstart
        
        
        1 Antwort Letzte Antwort
        0
        • P Pittini

          @Dominik-F sagte in Pittinis Workshop für mich:

          Der erste Wert des Arrays beginnt ja mit der 0 und damit kommen bei mir die ersten "Probleme". Ich musste für mich da jetzt erst mal etwas "schummeln" damit es passt. Auch frage ich mich ob ich noch die verschachtelnte for Schleife anwenden sollte.

          Die Leerstrings gehen natürlich gar nicht, aber Du hast zumindest das Problem erkannt und bist ja auch nah dran an der Lösung, hier fehlts wieder nur an der Umsetzung. Warum sparst Dir das Headerarray nicht und schreibst anstelle der Leerstrings jeweils die Überschrift rein, was dann ja passend wieder an pos 0 ist? Und um die verschachtelte Schleife wirst nicht rumkommen, wie hattest Dir das denn gedacht?

          Dominik F.D Offline
          Dominik F.D Offline
          Dominik F.
          schrieb am zuletzt editiert von
          #31

          @Pittini
          Okay, ich stehe gerade auf dem Schlauch. Ich weiß zwar wie ich in den Arrays weiterzähle, jedoch müsste ich ja irgendwie die Variablen weiterzählen damit ich die Spaltenanzahl weiter wählen kann. Wie ich das anstelle ist mir irgendwie nicht klar.

          P 1 Antwort Letzte Antwort
          0
          • Dominik F.D Dominik F.

            @Pittini
            Okay, ich stehe gerade auf dem Schlauch. Ich weiß zwar wie ich in den Arrays weiterzähle, jedoch müsste ich ja irgendwie die Variablen weiterzählen damit ich die Spaltenanzahl weiter wählen kann. Wie ich das anstelle ist mir irgendwie nicht klar.

            P Offline
            P Offline
            Pittini
            Developer
            schrieb am zuletzt editiert von Pittini
            #32

            @Dominik-F sagte in Pittinis Workshop für mich:

            Okay, ich stehe gerade auf dem Schlauch. Ich weiß zwar wie ich in den Arrays weiterzähle, jedoch müsste ich ja irgendwie die Variablen weiterzählen damit ich die Spaltenanzahl weiter wählen kann. Wie ich das anstelle ist mir irgendwie nicht klar.

            Ich weis auch gar nicht was Du anders machen willst, Deine erste Lösung ist ok, wollte Dich nur nicht ausbremsen wenn Du ne andere Idee hattest. Da die Spalten jetzt ja vorgegeben sind durch Stadt, Land, Fluss braucht man das aber natürlich der Funktion nimmer übergeben und läßt den Parameter weg in der Funktion. Und wo wir schon dabei sind ersetzen wir jetzt auch noch die Zeilenzahl. Hier die Infos dazu die Du brauchst https://www.w3schools.com/jsref/jsref_length_array.asp

            Dominik F.D 1 Antwort Letzte Antwort
            0
            • P Pittini

              @Dominik-F sagte in Pittinis Workshop für mich:

              Okay, ich stehe gerade auf dem Schlauch. Ich weiß zwar wie ich in den Arrays weiterzähle, jedoch müsste ich ja irgendwie die Variablen weiterzählen damit ich die Spaltenanzahl weiter wählen kann. Wie ich das anstelle ist mir irgendwie nicht klar.

              Ich weis auch gar nicht was Du anders machen willst, Deine erste Lösung ist ok, wollte Dich nur nicht ausbremsen wenn Du ne andere Idee hattest. Da die Spalten jetzt ja vorgegeben sind durch Stadt, Land, Fluss braucht man das aber natürlich der Funktion nimmer übergeben und läßt den Parameter weg in der Funktion. Und wo wir schon dabei sind ersetzen wir jetzt auch noch die Zeilenzahl. Hier die Infos dazu die Du brauchst https://www.w3schools.com/jsref/jsref_length_array.asp

              Dominik F.D Offline
              Dominik F.D Offline
              Dominik F.
              schrieb am zuletzt editiert von Dominik F.
              #33

              @Pittini

              Achsooooooo 🙂 So, habe nun die zweite Schleife entfernt weil mir die irgendwie überflüssig erschien. Hier meine neue Lösung:

              
              createState('javascript.0.Test.TestTable', { type: 'string' });
              
              const Stadt = ["Stadt", "Hamburg", "München", "Berlin", "Bochum", "Dortmund"];
              const Fluss = ["Fluss", "Rhein", "Ruhr", "Main", "Donau", "Elbe"];
              const Land = ["Land", "Deutschland", "England", "Spanien", "Frankreich", "Italien"];
              
              
              function CreateTestTable() { //  Erzeugt tabellarische Übersicht als HTML Tabelle   
                  let TestTable = "";
                  TestTable = "<table border='1'>"; //Tabellenanfang
                  for (let x = 0; x < Stadt.length; x++) {
                      TestTable += "<tr>";
                      if (x == 0) {
                          TestTable += "<th>" + Stadt[x] + "</th>" + "<th>" + Land[x] + "</th>" + "<th>" + Fluss[x] + "</th>";
                      }
                      else {
                          TestTable += "<td> " + Stadt[x] + "</td>" + "<td> " + Land[x] + "</td>" + "<td> " + Fluss[x] + "</td>";
                      }
                      TestTable += "</tr>";
                  };
                  TestTable += "</table>"; //Tabellenende
                  setState('javascript.0.Test.TestTable', TestTable);
              }
              
              CreateTestTable(); //Skriptstart
              
              
              P 1 Antwort Letzte Antwort
              0
              • Dominik F.D Dominik F.

                @Pittini

                Achsooooooo 🙂 So, habe nun die zweite Schleife entfernt weil mir die irgendwie überflüssig erschien. Hier meine neue Lösung:

                
                createState('javascript.0.Test.TestTable', { type: 'string' });
                
                const Stadt = ["Stadt", "Hamburg", "München", "Berlin", "Bochum", "Dortmund"];
                const Fluss = ["Fluss", "Rhein", "Ruhr", "Main", "Donau", "Elbe"];
                const Land = ["Land", "Deutschland", "England", "Spanien", "Frankreich", "Italien"];
                
                
                function CreateTestTable() { //  Erzeugt tabellarische Übersicht als HTML Tabelle   
                    let TestTable = "";
                    TestTable = "<table border='1'>"; //Tabellenanfang
                    for (let x = 0; x < Stadt.length; x++) {
                        TestTable += "<tr>";
                        if (x == 0) {
                            TestTable += "<th>" + Stadt[x] + "</th>" + "<th>" + Land[x] + "</th>" + "<th>" + Fluss[x] + "</th>";
                        }
                        else {
                            TestTable += "<td> " + Stadt[x] + "</td>" + "<td> " + Land[x] + "</td>" + "<td> " + Fluss[x] + "</td>";
                        }
                        TestTable += "</tr>";
                    };
                    TestTable += "</table>"; //Tabellenende
                    setState('javascript.0.Test.TestTable', TestTable);
                }
                
                CreateTestTable(); //Skriptstart
                
                
                P Offline
                P Offline
                Pittini
                Developer
                schrieb am zuletzt editiert von
                #34

                @Dominik-F sagte in Pittinis Workshop für mich:

                So, habe nun die zweite Schleife entfernt weil mir die irgendwie überflüssig erschien. Hier meine neue Lösung:

                Na geht doch 😉 . Is soweit korrekt, ich persönlich würde aber in der Zeile 15 statt x die 0 direkt reinschreiben, aber das ist Kosmetik. Heut kommt mal keine neue Übung, schau Dir das ganze noch mal an, die Grundsätze wie sone Tabelle aufgebaut wird sollteste jetzt haben. Jetzt sollteste Dir nen einfaches Projekt vornehmen ds Dich interessiert, selber damit loslegen und ich schau mir die Schritte an und korrigier bei Bedarf.

                Dominik F.D 2 Antworten Letzte Antwort
                0
                • P Pittini

                  @Dominik-F sagte in Pittinis Workshop für mich:

                  So, habe nun die zweite Schleife entfernt weil mir die irgendwie überflüssig erschien. Hier meine neue Lösung:

                  Na geht doch 😉 . Is soweit korrekt, ich persönlich würde aber in der Zeile 15 statt x die 0 direkt reinschreiben, aber das ist Kosmetik. Heut kommt mal keine neue Übung, schau Dir das ganze noch mal an, die Grundsätze wie sone Tabelle aufgebaut wird sollteste jetzt haben. Jetzt sollteste Dir nen einfaches Projekt vornehmen ds Dich interessiert, selber damit loslegen und ich schau mir die Schritte an und korrigier bei Bedarf.

                  Dominik F.D Offline
                  Dominik F.D Offline
                  Dominik F.
                  schrieb am zuletzt editiert von
                  #35

                  @Pittini

                  Super, dann danke ich dir schon mal für deine super Erklärungen!!
                  Und natürlich dafür, dass ich weiter Support bekomme.
                  Ich habe nicht nur was über HTML gelernt, sondern habe ein viel besseres Verständnis für javascript bekommen.
                  Ich werde nun versuchen, dass Skript etwas umzubauen. Header ein/ausschalten und ein paar Dinge die ich bei dir in deinen Scripten gesehen habe. Dann versuche ich mich an einer kleinen Tabelle zur Darstellung der Anwesenheit. Danach würde ich mich gerne damit beschäftigen, dass Aussehen der Tabelle auf CSS V2 zu bekommen. Das reicht denke ich erst mal für die nächste Zeit 🙂

                  1 Antwort Letzte Antwort
                  0
                  • P Pittini

                    @Dominik-F sagte in Pittinis Workshop für mich:

                    So, habe nun die zweite Schleife entfernt weil mir die irgendwie überflüssig erschien. Hier meine neue Lösung:

                    Na geht doch 😉 . Is soweit korrekt, ich persönlich würde aber in der Zeile 15 statt x die 0 direkt reinschreiben, aber das ist Kosmetik. Heut kommt mal keine neue Übung, schau Dir das ganze noch mal an, die Grundsätze wie sone Tabelle aufgebaut wird sollteste jetzt haben. Jetzt sollteste Dir nen einfaches Projekt vornehmen ds Dich interessiert, selber damit loslegen und ich schau mir die Schritte an und korrigier bei Bedarf.

                    Dominik F.D Offline
                    Dominik F.D Offline
                    Dominik F.
                    schrieb am zuletzt editiert von Dominik F.
                    #36

                    @Pittini

                    So, ich habe nun eine kleine Tabelle erstellt die mir die Anwesenheit von 2 Personen anhand der tr064 Daten ausgibt.
                    Das ganze ist extrem statisch geworden und natürlich kamen bei mir mehrere Fragen auf.
                    Kann ich das Auslesen der Datenpunkte und das eintragen dieser in die Tabelle eleganter lösen? Können die Datenpunkte auch in ein Array geschrieben werden damit ich wieder eine Schleife nutzen kann um die Zeilen und den Inhalt automatisch eintragen zu lassen? Gibt es eine bessere Lösung um auf die Veränderung der Datenpunkte zu reagieren als auf jeden Datenpunkt einzelnd zu triggern?

                    createState('javascript.0.Test.TestTable', { type: 'string' });
                    
                    //Tabelleneinstellungen
                    const ShowHead = true; //Überschrift ein/ausblenden
                    const Head = ["Status", "Person"]; //Hier Überschriften eingeben
                    
                    //Personen
                    const id_Dominik = 'tr-064.0.devices.Handy-Domi.active'/*active*/
                    var Dominik = getState(id_Dominik).val;
                    
                    const id_Nadja = 'tr-064.0.devices.Handy-Nadja.active'/*active*/
                    var Nadja = getState(id_Nadja).val;
                    
                    //  Erzeugt tabellarische Übersicht als HTML Tabelle
                    function CreateOverviewTable() {
                        let OverviewTable = "";
                        OverviewTable = "<table style='width:calc(100% - 40px)'; border =1px>"; //Tabellenanfang
                    
                        // Head
                        if (ShowHead) {
                            OverviewTable += "<tr><th>" + Head[0] + "</th>" + "<th>" + Head[1] + "</th></tr>";
                        };
                    
                        //Tabelle
                    
                        OverviewTable += "<tr><td> " + Nadja + "</td>" + "<td> " + "Nadja" + "</td></tr>";
                        OverviewTable += "<tr><td> " + Dominik + "</td>" + "<td> " + "Dominik" + "</td></tr>";
                        
                        //Tabellenende
                        OverviewTable += "</table>"; 
                        
                        setState('javascript.0.Test.TestTable', OverviewTable);
                    }
                    
                    CreateOverviewTable(); //Skriptstart
                    
                    on({ id: id_Nadja, change: "any" }, function (obj) {
                        Nadja = obj.state.val;
                        CreateOverviewTable();
                    });
                    
                    on({ id: id_Dominik, change: "any" }, function (obj) {
                        Dominik = obj.state.val;
                        CreateOverviewTable();
                    });
                    
                    
                    P 1 Antwort Letzte Antwort
                    0
                    • Dominik F.D Dominik F.

                      @Pittini

                      So, ich habe nun eine kleine Tabelle erstellt die mir die Anwesenheit von 2 Personen anhand der tr064 Daten ausgibt.
                      Das ganze ist extrem statisch geworden und natürlich kamen bei mir mehrere Fragen auf.
                      Kann ich das Auslesen der Datenpunkte und das eintragen dieser in die Tabelle eleganter lösen? Können die Datenpunkte auch in ein Array geschrieben werden damit ich wieder eine Schleife nutzen kann um die Zeilen und den Inhalt automatisch eintragen zu lassen? Gibt es eine bessere Lösung um auf die Veränderung der Datenpunkte zu reagieren als auf jeden Datenpunkt einzelnd zu triggern?

                      createState('javascript.0.Test.TestTable', { type: 'string' });
                      
                      //Tabelleneinstellungen
                      const ShowHead = true; //Überschrift ein/ausblenden
                      const Head = ["Status", "Person"]; //Hier Überschriften eingeben
                      
                      //Personen
                      const id_Dominik = 'tr-064.0.devices.Handy-Domi.active'/*active*/
                      var Dominik = getState(id_Dominik).val;
                      
                      const id_Nadja = 'tr-064.0.devices.Handy-Nadja.active'/*active*/
                      var Nadja = getState(id_Nadja).val;
                      
                      //  Erzeugt tabellarische Übersicht als HTML Tabelle
                      function CreateOverviewTable() {
                          let OverviewTable = "";
                          OverviewTable = "<table style='width:calc(100% - 40px)'; border =1px>"; //Tabellenanfang
                      
                          // Head
                          if (ShowHead) {
                              OverviewTable += "<tr><th>" + Head[0] + "</th>" + "<th>" + Head[1] + "</th></tr>";
                          };
                      
                          //Tabelle
                      
                          OverviewTable += "<tr><td> " + Nadja + "</td>" + "<td> " + "Nadja" + "</td></tr>";
                          OverviewTable += "<tr><td> " + Dominik + "</td>" + "<td> " + "Dominik" + "</td></tr>";
                          
                          //Tabellenende
                          OverviewTable += "</table>"; 
                          
                          setState('javascript.0.Test.TestTable', OverviewTable);
                      }
                      
                      CreateOverviewTable(); //Skriptstart
                      
                      on({ id: id_Nadja, change: "any" }, function (obj) {
                          Nadja = obj.state.val;
                          CreateOverviewTable();
                      });
                      
                      on({ id: id_Dominik, change: "any" }, function (obj) {
                          Dominik = obj.state.val;
                          CreateOverviewTable();
                      });
                      
                      
                      P Offline
                      P Offline
                      Pittini
                      Developer
                      schrieb am zuletzt editiert von Pittini
                      #37

                      @Dominik-F sagte in Pittinis Workshop für mich:

                      So, ich habe nun eine kleine Tabelle erstellt die mir die Anwesenheit von 2 Personen anhand der tr064 Daten ausgibt.
                      Das ganze ist extrem statisch geworden und natürlich kamen bei mir mehrere Fragen auf.
                      Kann ich das Auslesen der Datenpunkte und das eintragen dieser in die Tabelle eleganter lösen? Können die Datenpunkte auch in ein Array geschrieben werden damit ich wieder eine Schleife nutzen kann um die Zeilen und den Inhalt automatisch eintragen zu lassen? Gibt es eine bessere Lösung um auf die Veränderung der Datenpunkte zu reagieren als auf jeden Datenpunkt einzelnd zu triggern?

                      Ja sehr statisch, aber immerhin, es dürfte funktionieren. Was Du Dir aber abgewöhnen solltest sind Hochkommas für Strings zu nehmen, nimm da Anführungsstriche, die Hochkommas brauchste iwann wenn Du quasi nen String im String brauchst. (Siehste in meinen Skripten wenn ich HTML zusammenbau).

                      Zu Deinen Fragen: Ja, eleganter geht. Array, ja geht. Zeilen und Inhalt automatisch, ja geht. Trigger, ja da muß schon für jeden DP ein Trigger sein, aber auch die lassen sich in Schleife anlegen.
                      Ich hab Dir mal blind ne Lösung gebaut (blind weil ich die DPs ja nicht hab um testen zu können). Und weil Du elegant wolltest, hab ich was fieses neues verwendet, ein Array, aber ein zweidimensionales (Würde aber auch mit 3 normalen gehen). Der erste Arrayzähler läuft quasi durch die verschiedenen User. Der 2te Zähler durch die verschiedenen Daten des Users. Notfalls nachlesen. Und ruhig fragen wenn Du was nicht verstehst:

                      createState('javascript.0.Test.TestTable', { type: 'string' });
                      
                      //Tabelleneinstellungen
                      const ShowHead = true; //Überschrift ein/ausblenden
                      const Head = ["Status", "Person"]; //Hier Überschriften eingeben
                      
                      //Personen
                      const UserData = [];
                      
                      //            0= Name                   1= Id                                   2= Wert von Id
                      UserData[0] = ["Dominik", "tr-064.0.devices.Handy-Domi.active", getState("tr-064.0.devices.Handy-Domi.active").val];
                      UserData[1] = ["Nadja", "tr-064.0.devices.Handy-Nadja.active", getState("tr-064.0.devices.Handy-Nadja.active").val];
                      
                      //  Erzeugt tabellarische Übersicht als HTML Tabelle
                      function CreateOverviewTable() {
                          let OverviewTable = "";
                          OverviewTable = "<table style='width:calc(100% - 40px)'; border =1px>"; //Tabellenanfang
                      
                          // Head
                          if (ShowHead) {
                              OverviewTable += "<tr><th>" + Head[0] + "</th>" + "<th>" + Head[1] + "</th></tr>";
                          };
                      
                          //Tabelle
                          for (let x = 0; x < UserData.length; x++) {
                              OverviewTable += "<tr><td> " + UserData[x][2] + "</td>" + "<td> " + UserData[x][0] + "</td></tr>";
                          };
                          
                          //Tabellenende
                          OverviewTable += "</table>";
                      
                          setState('javascript.0.Test.TestTable', OverviewTable);
                      }
                      
                      CreateOverviewTable(); //Skriptstart
                      
                      for (let x = 0; x < UserData.length; x++) { //Trigger in Schleife erstellen
                          on(UserData[x][1], function (dp) { 
                              UserData[x][2] = dp.state.val;
                          });
                      };
                      
                      
                      
                      
                      
                      Dominik F.D 1 Antwort Letzte Antwort
                      0
                      • P Pittini

                        @Dominik-F sagte in Pittinis Workshop für mich:

                        So, ich habe nun eine kleine Tabelle erstellt die mir die Anwesenheit von 2 Personen anhand der tr064 Daten ausgibt.
                        Das ganze ist extrem statisch geworden und natürlich kamen bei mir mehrere Fragen auf.
                        Kann ich das Auslesen der Datenpunkte und das eintragen dieser in die Tabelle eleganter lösen? Können die Datenpunkte auch in ein Array geschrieben werden damit ich wieder eine Schleife nutzen kann um die Zeilen und den Inhalt automatisch eintragen zu lassen? Gibt es eine bessere Lösung um auf die Veränderung der Datenpunkte zu reagieren als auf jeden Datenpunkt einzelnd zu triggern?

                        Ja sehr statisch, aber immerhin, es dürfte funktionieren. Was Du Dir aber abgewöhnen solltest sind Hochkommas für Strings zu nehmen, nimm da Anführungsstriche, die Hochkommas brauchste iwann wenn Du quasi nen String im String brauchst. (Siehste in meinen Skripten wenn ich HTML zusammenbau).

                        Zu Deinen Fragen: Ja, eleganter geht. Array, ja geht. Zeilen und Inhalt automatisch, ja geht. Trigger, ja da muß schon für jeden DP ein Trigger sein, aber auch die lassen sich in Schleife anlegen.
                        Ich hab Dir mal blind ne Lösung gebaut (blind weil ich die DPs ja nicht hab um testen zu können). Und weil Du elegant wolltest, hab ich was fieses neues verwendet, ein Array, aber ein zweidimensionales (Würde aber auch mit 3 normalen gehen). Der erste Arrayzähler läuft quasi durch die verschiedenen User. Der 2te Zähler durch die verschiedenen Daten des Users. Notfalls nachlesen. Und ruhig fragen wenn Du was nicht verstehst:

                        createState('javascript.0.Test.TestTable', { type: 'string' });
                        
                        //Tabelleneinstellungen
                        const ShowHead = true; //Überschrift ein/ausblenden
                        const Head = ["Status", "Person"]; //Hier Überschriften eingeben
                        
                        //Personen
                        const UserData = [];
                        
                        //            0= Name                   1= Id                                   2= Wert von Id
                        UserData[0] = ["Dominik", "tr-064.0.devices.Handy-Domi.active", getState("tr-064.0.devices.Handy-Domi.active").val];
                        UserData[1] = ["Nadja", "tr-064.0.devices.Handy-Nadja.active", getState("tr-064.0.devices.Handy-Nadja.active").val];
                        
                        //  Erzeugt tabellarische Übersicht als HTML Tabelle
                        function CreateOverviewTable() {
                            let OverviewTable = "";
                            OverviewTable = "<table style='width:calc(100% - 40px)'; border =1px>"; //Tabellenanfang
                        
                            // Head
                            if (ShowHead) {
                                OverviewTable += "<tr><th>" + Head[0] + "</th>" + "<th>" + Head[1] + "</th></tr>";
                            };
                        
                            //Tabelle
                            for (let x = 0; x < UserData.length; x++) {
                                OverviewTable += "<tr><td> " + UserData[x][2] + "</td>" + "<td> " + UserData[x][0] + "</td></tr>";
                            };
                            
                            //Tabellenende
                            OverviewTable += "</table>";
                        
                            setState('javascript.0.Test.TestTable', OverviewTable);
                        }
                        
                        CreateOverviewTable(); //Skriptstart
                        
                        for (let x = 0; x < UserData.length; x++) { //Trigger in Schleife erstellen
                            on(UserData[x][1], function (dp) { 
                                UserData[x][2] = dp.state.val;
                            });
                        };
                        
                        
                        
                        
                        
                        Dominik F.D Offline
                        Dominik F.D Offline
                        Dominik F.
                        schrieb am zuletzt editiert von
                        #38

                        @Pittini

                        Wow, das sieht klasse aus und hat mich echt weitergebracht, ich wusste z.B. nicht das mit IDs und deren Werte auch in Arrays packen kann.

                        Ich verwende das teilweise schon, aber ich habs nie so richtig verstanden glaube ich. könntest du mir vielleicht erklären warum das dp bei function in die klammer muss?

                         function (dp) 
                        

                        Dann hab ich noch eine weitere Frage an dich. Je mehr ich in die Materie eintauche, desto mehr Umsetzungsideen habe ich und damit auch fragen.
                        Ich kann verstehen wenn dir das zu viel wird deshalb ist es kein Problem wenn du nein sagst.
                        Mir hat es sehr gut gefallen und sehr viel gebracht wie du mich an die Tabelle herangeführt hast.
                        Könnte ich dir z.B. ein Ziel vorschlagen und du führst mich da heran? Ich weiß, dass es dich Zeit und nerven kosten wird, daher habe ich Verständnis wenn du nein sagst.
                        Ziele könnten z.B. sein die Tabelle im mdui css v2 style umzuwandeln, einen Zähler einzubauen z.B. in meinem Beispiel wie viele Personen gerade Anwesend sind, functions wie bei deinem Fensterscript mit Verschluss einzubauen, eine mdui-list zusätzlich zu erstellen. Ich verspreche mir nicht nur das Programmieren weiter zu lernen, sondern auch die Werkzeuge die du mir an die Hand gibst zur richtigen Zeit anzuwenden.

                        P 1 Antwort Letzte Antwort
                        0
                        • Dominik F.D Dominik F.

                          @Pittini

                          Wow, das sieht klasse aus und hat mich echt weitergebracht, ich wusste z.B. nicht das mit IDs und deren Werte auch in Arrays packen kann.

                          Ich verwende das teilweise schon, aber ich habs nie so richtig verstanden glaube ich. könntest du mir vielleicht erklären warum das dp bei function in die klammer muss?

                           function (dp) 
                          

                          Dann hab ich noch eine weitere Frage an dich. Je mehr ich in die Materie eintauche, desto mehr Umsetzungsideen habe ich und damit auch fragen.
                          Ich kann verstehen wenn dir das zu viel wird deshalb ist es kein Problem wenn du nein sagst.
                          Mir hat es sehr gut gefallen und sehr viel gebracht wie du mich an die Tabelle herangeführt hast.
                          Könnte ich dir z.B. ein Ziel vorschlagen und du führst mich da heran? Ich weiß, dass es dich Zeit und nerven kosten wird, daher habe ich Verständnis wenn du nein sagst.
                          Ziele könnten z.B. sein die Tabelle im mdui css v2 style umzuwandeln, einen Zähler einzubauen z.B. in meinem Beispiel wie viele Personen gerade Anwesend sind, functions wie bei deinem Fensterscript mit Verschluss einzubauen, eine mdui-list zusätzlich zu erstellen. Ich verspreche mir nicht nur das Programmieren weiter zu lernen, sondern auch die Werkzeuge die du mir an die Hand gibst zur richtigen Zeit anzuwenden.

                          P Offline
                          P Offline
                          Pittini
                          Developer
                          schrieb am zuletzt editiert von Pittini
                          #39

                          @Dominik-F sagte in Pittinis Workshop für mich:

                          Ich verwende das teilweise schon, aber ich habs nie so richtig verstanden glaube ich. könntest du mir vielleicht erklären warum das dp bei function in die klammer muss?

                          Da muß ich auf die Doku verweisen, das is Iobroker spezifisch: https://github.com/ioBroker/ioBroker.javascript/blob/master/docs/en/javascript.md#on---subscribe-on-changes-or-updates-of-some-state

                          Könnte ich dir z.B. ein Ziel vorschlagen und du führst mich da heran?

                          Ja, aber nicht mehr so ausführlich wie bisher, fang an, zeig Zwischenschritte, ich schubs Dich dann wenn Du irrläufst in die richtige Richtung oder geb Stichworte. Alle Projekte die Du genannt hast, sind noch recht easy, such Dir eins aus und leg los. Alles was man dafür braucht kannst Du schon wissen, das is nur wieder ein Umsetzungsproblem.

                          Dominik F.D 2 Antworten Letzte Antwort
                          0
                          • P Pittini

                            @Dominik-F sagte in Pittinis Workshop für mich:

                            Ich verwende das teilweise schon, aber ich habs nie so richtig verstanden glaube ich. könntest du mir vielleicht erklären warum das dp bei function in die klammer muss?

                            Da muß ich auf die Doku verweisen, das is Iobroker spezifisch: https://github.com/ioBroker/ioBroker.javascript/blob/master/docs/en/javascript.md#on---subscribe-on-changes-or-updates-of-some-state

                            Könnte ich dir z.B. ein Ziel vorschlagen und du führst mich da heran?

                            Ja, aber nicht mehr so ausführlich wie bisher, fang an, zeig Zwischenschritte, ich schubs Dich dann wenn Du irrläufst in die richtige Richtung oder geb Stichworte. Alle Projekte die Du genannt hast, sind noch recht easy, such Dir eins aus und leg los. Alles was man dafür braucht kannst Du schon wissen, das is nur wieder ein Umsetzungsproblem.

                            Dominik F.D Offline
                            Dominik F.D Offline
                            Dominik F.
                            schrieb am zuletzt editiert von
                            #40

                            @Pittini

                            Das ist super, vielen Dank. Bin gerade schon fleißig am basteln und hab da schon die ersten Fragen bzw stellen wo ich nicht weiter komme. Werde aber erst noch dran arbeiten bis ich es einigermaßen fertig gestellt hab.

                            1 Antwort Letzte Antwort
                            0
                            • P Pittini

                              @Dominik-F sagte in Pittinis Workshop für mich:

                              Ich verwende das teilweise schon, aber ich habs nie so richtig verstanden glaube ich. könntest du mir vielleicht erklären warum das dp bei function in die klammer muss?

                              Da muß ich auf die Doku verweisen, das is Iobroker spezifisch: https://github.com/ioBroker/ioBroker.javascript/blob/master/docs/en/javascript.md#on---subscribe-on-changes-or-updates-of-some-state

                              Könnte ich dir z.B. ein Ziel vorschlagen und du führst mich da heran?

                              Ja, aber nicht mehr so ausführlich wie bisher, fang an, zeig Zwischenschritte, ich schubs Dich dann wenn Du irrläufst in die richtige Richtung oder geb Stichworte. Alle Projekte die Du genannt hast, sind noch recht easy, such Dir eins aus und leg los. Alles was man dafür braucht kannst Du schon wissen, das is nur wieder ein Umsetzungsproblem.

                              Dominik F.D Offline
                              Dominik F.D Offline
                              Dominik F.
                              schrieb am zuletzt editiert von Dominik F.
                              #41

                              @Pittini

                              So, hab nun das Skript um eine HTML List erweitert und in die HTML Tabelle ein Icon für true und false eingefügt. Klappt auch soweit ganz gut.

                              Als nächsten Schritt würde ich gerne die mdui-icons nutzen können (Bei True z.B. check_circle_outline, bei false remove_circle_outline) und auch deren Farbe auswählen können z.B. mit mdui-green für true und mdui-amber für false. Ich habs bisher nur hinbekommen eine ganze Zeile grün zu machen bei der Liste.

                              createState('javascript.0.Test.HtmlTable', { type: 'string' });
                              createState('javascript.0.Test.HtmlList', { type: 'string' });
                              
                              const PresenceTrue = "/icons-material-png/action/ic_check_circle_white_48dp.png";
                              const PresenceFalse = "/icons-material-png/action/ic_highlight_remove_white_48dp.png";
                              
                              //Tabelleneinstellungen
                              const ShowHead = true; //Überschrift ein/ausblenden
                              const Head = ["Icon","Status", "Person"]; //Hier Überschriften eingeben
                              
                              //Personen
                              const UserData = [];
                              
                              //            0= Name                   1= Id                                   2= Wert von Id
                              UserData[0] = ["Dominik", "tr-064.0.devices.Handy-Domi.active", getState("tr-064.0.devices.Handy-Domi.active").val];
                              UserData[1] = ["Nadja", "tr-064.0.devices.Handy-Nadja.active", getState("tr-064.0.devices.Handy-Nadja.active").val];
                              
                              //  Erzeugt tabellarische Übersicht als HTML Tabelle
                              function CreateHtmlTable() {
                                  let HtmlTable = "";
                                  HtmlTable = "<table>"; //Tabellenanfang
                              
                                  // Head
                                  if (ShowHead) {
                                      HtmlTable += "<thead<tr><th>" + Head[0] + "</th>" + "<th>" + Head[1] + "</th>" + "<th>" + Head[2] + "</th></tr></thead";
                                  };
                              
                                  //Tabelle
                                  for (let x = 0; x < UserData.length; x++) {
                                      HtmlTable += "<tr>";
                                      if (UserData[x][2] == true) {
                                          HtmlTable += "<td><img style='margin: auto; display: block; height: 30px;' src='" + PresenceTrue + "'></td>"
                                          HtmlTable += "<td> " + UserData[x][2] + "</td>";
                                          HtmlTable += "<td> " + UserData[x][0] + "</td>";
                                      }
                                      else {
                                          HtmlTable += "<td><img style='margin: auto; display: block; height: 30px;' src='" + PresenceFalse + "'></td>"
                                          HtmlTable += "<td> " + UserData[x][2] + "</td>";
                                          HtmlTable += "<td> " + UserData[x][0] + "</td>";
                                      }
                                      HtmlTable += "</tr>"
                                  }
                              
                                  //Tabellenende
                                  HtmlTable += "</table>";
                              
                                  setState('javascript.0.Test.HtmlTable', HtmlTable);
                              }
                              
                              // Erzeugt List
                              function CreateHtmlList() {
                                  let HtmlList = "";
                                  for (let x = 0; x < UserData.length; x++) {
                                      if (UserData[x][2] == true) {
                                          HtmlList += '<div class="mdui-listitem mdui-center-v mdui-green-bg" style="height:48px;"> <img height=30px mdui-green src="' + PresenceTrue + '"&nbsp</img>';
                                      }
                                      else {
                                          HtmlList += '<div class="mdui-listitem mdui-center-v" style="height:48px;"> <img height=30px src="' + PresenceFalse + '"&nbsp</img>';
                                      }
                                      HtmlList += '<div class="mdui-label">' + UserData[x][0] + '<div class="mdui-subtitle">' + UserData[x][2] + '</div></div></div>';
                                  }
                                  setState('javascript.0.Test.HtmlList', HtmlList);
                              }
                              
                              
                              CreateHtmlTable(); //Html Tabelle erzeugen
                              CreateHtmlList(); //Html Liste erzeugen
                              for (let x = 0; x < UserData.length; x++) { //Trigger in Schleife erstellen
                                  on(UserData[x][1], function (dp) {
                                      UserData[x][2] = dp.state.val;
                                  });
                              };
                              
                              
                              

                              Hab mir das mal in Uhulas Scripten angeschaut, nur das ist mir eindeutig zu hoch^^

                              P UhulaU 2 Antworten Letzte Antwort
                              0
                              • Dominik F.D Dominik F.

                                @Pittini

                                So, hab nun das Skript um eine HTML List erweitert und in die HTML Tabelle ein Icon für true und false eingefügt. Klappt auch soweit ganz gut.

                                Als nächsten Schritt würde ich gerne die mdui-icons nutzen können (Bei True z.B. check_circle_outline, bei false remove_circle_outline) und auch deren Farbe auswählen können z.B. mit mdui-green für true und mdui-amber für false. Ich habs bisher nur hinbekommen eine ganze Zeile grün zu machen bei der Liste.

                                createState('javascript.0.Test.HtmlTable', { type: 'string' });
                                createState('javascript.0.Test.HtmlList', { type: 'string' });
                                
                                const PresenceTrue = "/icons-material-png/action/ic_check_circle_white_48dp.png";
                                const PresenceFalse = "/icons-material-png/action/ic_highlight_remove_white_48dp.png";
                                
                                //Tabelleneinstellungen
                                const ShowHead = true; //Überschrift ein/ausblenden
                                const Head = ["Icon","Status", "Person"]; //Hier Überschriften eingeben
                                
                                //Personen
                                const UserData = [];
                                
                                //            0= Name                   1= Id                                   2= Wert von Id
                                UserData[0] = ["Dominik", "tr-064.0.devices.Handy-Domi.active", getState("tr-064.0.devices.Handy-Domi.active").val];
                                UserData[1] = ["Nadja", "tr-064.0.devices.Handy-Nadja.active", getState("tr-064.0.devices.Handy-Nadja.active").val];
                                
                                //  Erzeugt tabellarische Übersicht als HTML Tabelle
                                function CreateHtmlTable() {
                                    let HtmlTable = "";
                                    HtmlTable = "<table>"; //Tabellenanfang
                                
                                    // Head
                                    if (ShowHead) {
                                        HtmlTable += "<thead<tr><th>" + Head[0] + "</th>" + "<th>" + Head[1] + "</th>" + "<th>" + Head[2] + "</th></tr></thead";
                                    };
                                
                                    //Tabelle
                                    for (let x = 0; x < UserData.length; x++) {
                                        HtmlTable += "<tr>";
                                        if (UserData[x][2] == true) {
                                            HtmlTable += "<td><img style='margin: auto; display: block; height: 30px;' src='" + PresenceTrue + "'></td>"
                                            HtmlTable += "<td> " + UserData[x][2] + "</td>";
                                            HtmlTable += "<td> " + UserData[x][0] + "</td>";
                                        }
                                        else {
                                            HtmlTable += "<td><img style='margin: auto; display: block; height: 30px;' src='" + PresenceFalse + "'></td>"
                                            HtmlTable += "<td> " + UserData[x][2] + "</td>";
                                            HtmlTable += "<td> " + UserData[x][0] + "</td>";
                                        }
                                        HtmlTable += "</tr>"
                                    }
                                
                                    //Tabellenende
                                    HtmlTable += "</table>";
                                
                                    setState('javascript.0.Test.HtmlTable', HtmlTable);
                                }
                                
                                // Erzeugt List
                                function CreateHtmlList() {
                                    let HtmlList = "";
                                    for (let x = 0; x < UserData.length; x++) {
                                        if (UserData[x][2] == true) {
                                            HtmlList += '<div class="mdui-listitem mdui-center-v mdui-green-bg" style="height:48px;"> <img height=30px mdui-green src="' + PresenceTrue + '"&nbsp</img>';
                                        }
                                        else {
                                            HtmlList += '<div class="mdui-listitem mdui-center-v" style="height:48px;"> <img height=30px src="' + PresenceFalse + '"&nbsp</img>';
                                        }
                                        HtmlList += '<div class="mdui-label">' + UserData[x][0] + '<div class="mdui-subtitle">' + UserData[x][2] + '</div></div></div>';
                                    }
                                    setState('javascript.0.Test.HtmlList', HtmlList);
                                }
                                
                                
                                CreateHtmlTable(); //Html Tabelle erzeugen
                                CreateHtmlList(); //Html Liste erzeugen
                                for (let x = 0; x < UserData.length; x++) { //Trigger in Schleife erstellen
                                    on(UserData[x][1], function (dp) {
                                        UserData[x][2] = dp.state.val;
                                    });
                                };
                                
                                
                                

                                Hab mir das mal in Uhulas Scripten angeschaut, nur das ist mir eindeutig zu hoch^^

                                P Offline
                                P Offline
                                Pittini
                                Developer
                                schrieb am zuletzt editiert von
                                #42

                                @Dominik-F sagte in Pittinis Workshop für mich:

                                Als nächsten Schritt würde ich gerne die mdui-icons nutzen können (Bei True z.B. check_circle_outline, bei false remove_circle_outline) und auch deren Farbe auswählen können z.B. mit mdui-green für true und mdui-amber für false. Ich habs bisher nur hinbekommen eine ganze Zeile grün zu machen bei der Liste.

                                das mit den mdui icons kann ich Dir auch ned erklären, meine CSS Kenntnisse sind deutlich begrenzter als meine JS Kenntnisse. Ob Zeile oder Zelle farbig wird, hängt davon ab wo Du das setzt, in tr oder in td. Einzelne Teile einer Zelle wiederum kannste mit dem div Tag separieren und anders färben.

                                1 Antwort Letzte Antwort
                                0
                                • Dominik F.D Dominik F.

                                  @Pittini

                                  So, hab nun das Skript um eine HTML List erweitert und in die HTML Tabelle ein Icon für true und false eingefügt. Klappt auch soweit ganz gut.

                                  Als nächsten Schritt würde ich gerne die mdui-icons nutzen können (Bei True z.B. check_circle_outline, bei false remove_circle_outline) und auch deren Farbe auswählen können z.B. mit mdui-green für true und mdui-amber für false. Ich habs bisher nur hinbekommen eine ganze Zeile grün zu machen bei der Liste.

                                  createState('javascript.0.Test.HtmlTable', { type: 'string' });
                                  createState('javascript.0.Test.HtmlList', { type: 'string' });
                                  
                                  const PresenceTrue = "/icons-material-png/action/ic_check_circle_white_48dp.png";
                                  const PresenceFalse = "/icons-material-png/action/ic_highlight_remove_white_48dp.png";
                                  
                                  //Tabelleneinstellungen
                                  const ShowHead = true; //Überschrift ein/ausblenden
                                  const Head = ["Icon","Status", "Person"]; //Hier Überschriften eingeben
                                  
                                  //Personen
                                  const UserData = [];
                                  
                                  //            0= Name                   1= Id                                   2= Wert von Id
                                  UserData[0] = ["Dominik", "tr-064.0.devices.Handy-Domi.active", getState("tr-064.0.devices.Handy-Domi.active").val];
                                  UserData[1] = ["Nadja", "tr-064.0.devices.Handy-Nadja.active", getState("tr-064.0.devices.Handy-Nadja.active").val];
                                  
                                  //  Erzeugt tabellarische Übersicht als HTML Tabelle
                                  function CreateHtmlTable() {
                                      let HtmlTable = "";
                                      HtmlTable = "<table>"; //Tabellenanfang
                                  
                                      // Head
                                      if (ShowHead) {
                                          HtmlTable += "<thead<tr><th>" + Head[0] + "</th>" + "<th>" + Head[1] + "</th>" + "<th>" + Head[2] + "</th></tr></thead";
                                      };
                                  
                                      //Tabelle
                                      for (let x = 0; x < UserData.length; x++) {
                                          HtmlTable += "<tr>";
                                          if (UserData[x][2] == true) {
                                              HtmlTable += "<td><img style='margin: auto; display: block; height: 30px;' src='" + PresenceTrue + "'></td>"
                                              HtmlTable += "<td> " + UserData[x][2] + "</td>";
                                              HtmlTable += "<td> " + UserData[x][0] + "</td>";
                                          }
                                          else {
                                              HtmlTable += "<td><img style='margin: auto; display: block; height: 30px;' src='" + PresenceFalse + "'></td>"
                                              HtmlTable += "<td> " + UserData[x][2] + "</td>";
                                              HtmlTable += "<td> " + UserData[x][0] + "</td>";
                                          }
                                          HtmlTable += "</tr>"
                                      }
                                  
                                      //Tabellenende
                                      HtmlTable += "</table>";
                                  
                                      setState('javascript.0.Test.HtmlTable', HtmlTable);
                                  }
                                  
                                  // Erzeugt List
                                  function CreateHtmlList() {
                                      let HtmlList = "";
                                      for (let x = 0; x < UserData.length; x++) {
                                          if (UserData[x][2] == true) {
                                              HtmlList += '<div class="mdui-listitem mdui-center-v mdui-green-bg" style="height:48px;"> <img height=30px mdui-green src="' + PresenceTrue + '"&nbsp</img>';
                                          }
                                          else {
                                              HtmlList += '<div class="mdui-listitem mdui-center-v" style="height:48px;"> <img height=30px src="' + PresenceFalse + '"&nbsp</img>';
                                          }
                                          HtmlList += '<div class="mdui-label">' + UserData[x][0] + '<div class="mdui-subtitle">' + UserData[x][2] + '</div></div></div>';
                                      }
                                      setState('javascript.0.Test.HtmlList', HtmlList);
                                  }
                                  
                                  
                                  CreateHtmlTable(); //Html Tabelle erzeugen
                                  CreateHtmlList(); //Html Liste erzeugen
                                  for (let x = 0; x < UserData.length; x++) { //Trigger in Schleife erstellen
                                      on(UserData[x][1], function (dp) {
                                          UserData[x][2] = dp.state.val;
                                      });
                                  };
                                  
                                  
                                  

                                  Hab mir das mal in Uhulas Scripten angeschaut, nur das ist mir eindeutig zu hoch^^

                                  UhulaU Offline
                                  UhulaU Offline
                                  Uhula
                                  schrieb am zuletzt editiert von
                                  #43

                                  @Dominik-F sagte in Pittinis Workshop für mich:

                                  <img height=30px mdui-green src="' + PresenceTrue + '"&nbsp</img>

                                  Damit zeigst du offensichtlich deine Grafiken an. Wenn du stattdessen die mdui-icon verwenden möchtest, schreibst du stattdessen

                                  <i class="mdui-icon">check_circle_outline</i>
                                  

                                  und wenn es eingefärbt werden soll

                                  <i class="mdui-icon mdui-green">check_circle_outline</i>
                                  

                                  noch die Größe anpassen?

                                  <i class="mdui-icon mdui-green" style="font-size:32px;">check_circle_outline</i>
                                  

                                  Uhula - Leise und Weise
                                  Ex: ioBroker on Gigabyte NUC Proxmox

                                  Dominik F.D 1 Antwort Letzte Antwort
                                  0
                                  • UhulaU Uhula

                                    @Dominik-F sagte in Pittinis Workshop für mich:

                                    <img height=30px mdui-green src="' + PresenceTrue + '"&nbsp</img>

                                    Damit zeigst du offensichtlich deine Grafiken an. Wenn du stattdessen die mdui-icon verwenden möchtest, schreibst du stattdessen

                                    <i class="mdui-icon">check_circle_outline</i>
                                    

                                    und wenn es eingefärbt werden soll

                                    <i class="mdui-icon mdui-green">check_circle_outline</i>
                                    

                                    noch die Größe anpassen?

                                    <i class="mdui-icon mdui-green" style="font-size:32px;">check_circle_outline</i>
                                    
                                    Dominik F.D Offline
                                    Dominik F.D Offline
                                    Dominik F.
                                    schrieb am zuletzt editiert von Dominik F.
                                    #44

                                    @Uhula

                                    Vielen Dank. In der HTML List hat das funktioniert, in der HTML Tabelle bekomme ich Fehler. Kannst du mir da auch noch einen Tipp geben?

                                    Was ich auch nicht verstehe ist, dass die beiden Zeilen in der Liste anders angeordnet werden.

                                    Unbenannt.PNG

                                    Hier das geänderte Script:

                                    createState('javascript.0.Test.HtmlTable', { type: 'string' });
                                    createState('javascript.0.Test.HtmlList', { type: 'string' });
                                     
                                    const PresenceTrue = "/icons-material-png/action/ic_check_circle_white_48dp.png";
                                    const PresenceFalse = "/icons-material-png/action/ic_highlight_remove_white_48dp.png";
                                     
                                    //Tabelleneinstellungen
                                    const ShowHead = true; //Überschrift ein/ausblenden
                                    const Head = ["Icon","Status", "Person"]; //Hier Überschriften eingeben
                                     
                                    //Personen
                                    const UserData = [];
                                     
                                    //            0= Name                   1= Id                                   2= Wert von Id
                                    UserData[0] = ["Dominik", "tr-064.0.devices.Handy-Domi.active", getState("tr-064.0.devices.Handy-Domi.active").val];
                                    UserData[1] = ["Nadja", "tr-064.0.devices.Handy-Nadja.active", getState("tr-064.0.devices.Handy-Nadja.active").val];
                                     
                                    //  Erzeugt tabellarische Übersicht als HTML Tabelle
                                    function CreateHtmlTable() {
                                        let HtmlTable = "";
                                        HtmlTable = "<table>"; //Tabellenanfang
                                     
                                        // Head
                                        if (ShowHead) {
                                            HtmlTable += "<thead<tr><th>" + Head[0] + "</th>" + "<th>" + Head[1] + "</th>" + "<th>" + Head[2] + "</th></tr></thead";
                                        };
                                     
                                        //Tabelle
                                        for (let x = 0; x < UserData.length; x++) {
                                            HtmlTable += "<tr>";
                                            if (UserData[x][2] == true) {
                                                HtmlTable += "<td><img style='margin: auto; display: block; height: 30px;' src='" + PresenceTrue + "'></td>"
                                                HtmlTable += "<td> " + UserData[x][2] + "</td>";
                                                HtmlTable += "<td> " + UserData[x][0] + "</td>";
                                            }
                                            else {
                                                HtmlTable += "<td><img style='margin: auto; display: block; height: 30px;' src='" + PresenceFalse + "'></td>"
                                                HtmlTable += "<td> " + UserData[x][2] + "</td>";
                                                HtmlTable += "<td> " + UserData[x][0] + "</td>";
                                            }
                                            HtmlTable += "</tr>"
                                        }
                                     
                                        //Tabellenende
                                        HtmlTable += "</table>";
                                     
                                        setState('javascript.0.Test.HtmlTable', HtmlTable);
                                    }
                                     
                                    // Erzeugt List
                                    function CreateHtmlList() {
                                        let HtmlList = "";
                                        for (let x = 0; x < UserData.length; x++) {
                                            if (UserData[x][2] == true) {
                                                HtmlList += '<div class="mdui-listitem mdui-center-v" style="height:48px;"> <i class="mdui-icon mdui-green">check_circle_outline</i>';
                                            }
                                            else {
                                                HtmlList += '<div class="mdui-listitem mdui-center-v" style="height:48px;"> <i class="mdui-icon mdui-amber">remove_circle_outline</i>';
                                            }
                                            HtmlList += '<div class="mdui-label">' + UserData[x][0] + '<div class="mdui-subtitle">' + UserData[x][2] + '</div></div></div>';
                                        }
                                        setState('javascript.0.Test.HtmlList', HtmlList);
                                    }
                                     
                                     
                                    CreateHtmlTable(); //Html Tabelle erzeugen
                                    CreateHtmlList(); //Html Liste erzeugen
                                    for (let x = 0; x < UserData.length; x++) { //Trigger in Schleife erstellen
                                        on(UserData[x][1], function (dp) {
                                            UserData[x][2] = dp.state.val;
                                        });
                                    };
                                     
                                     
                                    
                                    
                                    UhulaU 1 Antwort Letzte Antwort
                                    0
                                    • Dominik F.D Dominik F.

                                      @Uhula

                                      Vielen Dank. In der HTML List hat das funktioniert, in der HTML Tabelle bekomme ich Fehler. Kannst du mir da auch noch einen Tipp geben?

                                      Was ich auch nicht verstehe ist, dass die beiden Zeilen in der Liste anders angeordnet werden.

                                      Unbenannt.PNG

                                      Hier das geänderte Script:

                                      createState('javascript.0.Test.HtmlTable', { type: 'string' });
                                      createState('javascript.0.Test.HtmlList', { type: 'string' });
                                       
                                      const PresenceTrue = "/icons-material-png/action/ic_check_circle_white_48dp.png";
                                      const PresenceFalse = "/icons-material-png/action/ic_highlight_remove_white_48dp.png";
                                       
                                      //Tabelleneinstellungen
                                      const ShowHead = true; //Überschrift ein/ausblenden
                                      const Head = ["Icon","Status", "Person"]; //Hier Überschriften eingeben
                                       
                                      //Personen
                                      const UserData = [];
                                       
                                      //            0= Name                   1= Id                                   2= Wert von Id
                                      UserData[0] = ["Dominik", "tr-064.0.devices.Handy-Domi.active", getState("tr-064.0.devices.Handy-Domi.active").val];
                                      UserData[1] = ["Nadja", "tr-064.0.devices.Handy-Nadja.active", getState("tr-064.0.devices.Handy-Nadja.active").val];
                                       
                                      //  Erzeugt tabellarische Übersicht als HTML Tabelle
                                      function CreateHtmlTable() {
                                          let HtmlTable = "";
                                          HtmlTable = "<table>"; //Tabellenanfang
                                       
                                          // Head
                                          if (ShowHead) {
                                              HtmlTable += "<thead<tr><th>" + Head[0] + "</th>" + "<th>" + Head[1] + "</th>" + "<th>" + Head[2] + "</th></tr></thead";
                                          };
                                       
                                          //Tabelle
                                          for (let x = 0; x < UserData.length; x++) {
                                              HtmlTable += "<tr>";
                                              if (UserData[x][2] == true) {
                                                  HtmlTable += "<td><img style='margin: auto; display: block; height: 30px;' src='" + PresenceTrue + "'></td>"
                                                  HtmlTable += "<td> " + UserData[x][2] + "</td>";
                                                  HtmlTable += "<td> " + UserData[x][0] + "</td>";
                                              }
                                              else {
                                                  HtmlTable += "<td><img style='margin: auto; display: block; height: 30px;' src='" + PresenceFalse + "'></td>"
                                                  HtmlTable += "<td> " + UserData[x][2] + "</td>";
                                                  HtmlTable += "<td> " + UserData[x][0] + "</td>";
                                              }
                                              HtmlTable += "</tr>"
                                          }
                                       
                                          //Tabellenende
                                          HtmlTable += "</table>";
                                       
                                          setState('javascript.0.Test.HtmlTable', HtmlTable);
                                      }
                                       
                                      // Erzeugt List
                                      function CreateHtmlList() {
                                          let HtmlList = "";
                                          for (let x = 0; x < UserData.length; x++) {
                                              if (UserData[x][2] == true) {
                                                  HtmlList += '<div class="mdui-listitem mdui-center-v" style="height:48px;"> <i class="mdui-icon mdui-green">check_circle_outline</i>';
                                              }
                                              else {
                                                  HtmlList += '<div class="mdui-listitem mdui-center-v" style="height:48px;"> <i class="mdui-icon mdui-amber">remove_circle_outline</i>';
                                              }
                                              HtmlList += '<div class="mdui-label">' + UserData[x][0] + '<div class="mdui-subtitle">' + UserData[x][2] + '</div></div></div>';
                                          }
                                          setState('javascript.0.Test.HtmlList', HtmlList);
                                      }
                                       
                                       
                                      CreateHtmlTable(); //Html Tabelle erzeugen
                                      CreateHtmlList(); //Html Liste erzeugen
                                      for (let x = 0; x < UserData.length; x++) { //Trigger in Schleife erstellen
                                          on(UserData[x][1], function (dp) {
                                              UserData[x][2] = dp.state.val;
                                          });
                                      };
                                       
                                       
                                      
                                      
                                      UhulaU Offline
                                      UhulaU Offline
                                      Uhula
                                      schrieb am zuletzt editiert von
                                      #45

                                      @Dominik-F Der List-Aufbau ist komplexer als der Table-Aufbau, da man hier praktisch keine Spalten mehr hat, sondern sich darum selbst kümmern muss. Üblicherweise durch die Verwendung von "display:flex" - aber ohne HTML/CSS Erfahrung ist das ein sehr harter Weg (und auch nicht mit ein paar Zeilen erläutert).


                                      HtmlTable += "<td><img style='margin: auto; display: block; height: 30px;' src='" + PresenceTrue + "'></td>"

                                      HtmlTable += "<td><i class='mdui-icon mdui-green'>check_circle_outline</i></td>"

                                      Uhula - Leise und Weise
                                      Ex: ioBroker on Gigabyte NUC Proxmox

                                      Dominik F.D 1 Antwort Letzte Antwort
                                      0
                                      • UhulaU Uhula

                                        @Dominik-F Der List-Aufbau ist komplexer als der Table-Aufbau, da man hier praktisch keine Spalten mehr hat, sondern sich darum selbst kümmern muss. Üblicherweise durch die Verwendung von "display:flex" - aber ohne HTML/CSS Erfahrung ist das ein sehr harter Weg (und auch nicht mit ein paar Zeilen erläutert).


                                        HtmlTable += "<td><img style='margin: auto; display: block; height: 30px;' src='" + PresenceTrue + "'></td>"

                                        HtmlTable += "<td><i class='mdui-icon mdui-green'>check_circle_outline</i></td>"

                                        Dominik F.D Offline
                                        Dominik F.D Offline
                                        Dominik F.
                                        schrieb am zuletzt editiert von
                                        #46

                                        @Uhula

                                        Vielen Dank, jetzt sieht es erstmal so aus wie ich es mir vorstelle 🙂

                                        Ich hab jetzt irgendwie mit vielem gerechnet aber nicht, dass man das " durch ' ersetzen muss ^^

                                        P 1 Antwort Letzte Antwort
                                        0
                                        • Dominik F.D Dominik F.

                                          @Uhula

                                          Vielen Dank, jetzt sieht es erstmal so aus wie ich es mir vorstelle 🙂

                                          Ich hab jetzt irgendwie mit vielem gerechnet aber nicht, dass man das " durch ' ersetzen muss ^^

                                          P Offline
                                          P Offline
                                          Pittini
                                          Developer
                                          schrieb am zuletzt editiert von
                                          #47

                                          @Dominik-F sagte in Pittinis Workshop für mich:

                                          Ich hab jetzt irgendwie mit vielem gerechnet aber nicht, dass man das " durch ' ersetzen muss ^^

                                          Genau das meinte ich da: https://forum.iobroker.net/topic/32358/pittinis-workshop-für-mich/37

                                          Dominik F.D 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

                                          758

                                          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