Pittinis Workshop für mich

[Pittini]

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

So, diesmal hat es ganz gut geklappt finde ich.

Das schaut doch schon ganz gut aus. Die einzige "Änderung" die vorschlagen würde, wär, nicht x<1 abzufragen sondern x==0, wir haben ja ganz klar definierte Zustände, die sollte man auch klar abfragen.
Und ich würde es rein optisch etwas anders aufbauen, spätestens wenn mehrere Anweisungen innerhalb der if sind wirds sonst unübersichtlich. Kleiner Tipp, im Editor die rechte Maustaste und "Dokument formattieren" spart viel Arbeit und machts gleich hübscher. Hier zum Vergleich meine Lösung:

createState('javascript.0.Test.TestTable', { type: 'string' });

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>Überschrift" + y + "</th>";
            }
            else {
                TestTable += "<td>Zeile " + x + " Spalte " + y + "</td>";
            }
        };
        TestTable += "</tr>";
    };
    TestTable += "</table>"; //Tabellenende
    setState('javascript.0.Test.TestTable', TestTable);
}

CreateTestTable(7, 4); //Skriptstart

Nachdem wir jetzt die Tabelle schon dynamisch mit Zeilen und Spalten erstellen können, fehlt noch das wichtigste, die eigentlichen darzustellenden Daten da rein zu kriegen. An der Stelle kommen wir zum Punkt Arrays. Arbeite Dich dazu bitte erstmal durch die Basisinfos.
Dann erstellst Du drei Arrays unter den Namen "Stadt", "Land", "Fluss" und trägst jeweils 5 Einträge in jedes Array ein. Das ganze erstmal noch ohne jede Verbindung zu unserer Tabelle.

[Dominik F.]

@Pittini

Ist jetzt eher unwichtig, aber ich habe mich gefragt wie man die Funktion Testtable sowie die Variable Testtable am Besten benennen sollte? Ich denke, dass ich das Script am Ende als eine Art "Vorlage" nehmen kann um Tabellen zu erstellen und ich werde mir bestimmt oft die verschiedenen Schritte anschauen. Da wäre es vielleicht ganz gut ab dem jetzigen Zeitpunkt wo noch alles sehr "übersichtlich" ist es direkt richtig zu benennen.

createState('javascript.0.Test.TestTable', { type: 'string' });

var Stadt = ["Hamburg", "München", "Berlin", "Bochum", "Dortmund"];
var Fluss = ["Rhein", "Ruhr", "Main", "Donau", "Elbe"];
var 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>Überschrift" + y + "</th>";
            }
            else {
                TestTable += "<td>Zeile " + x + " Spalte " + y + "</td>";
            }
        };
        TestTable += "</tr>";
    };
    TestTable += "</table>"; //Tabellenende
    setState('javascript.0.Test.TestTable', TestTable);
}

CreateTestTable(7, 4); //Skriptstart

[Pittini]

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

Da wäre es vielleicht ganz gut ab dem jetzigen Zeitpunkt wo noch alles sehr "übersichtlich" ist es direkt richtig zu benennen.

Da gibts kein richtig oder falsch im eigentlichen Sinne. Da hat jeder so sein System, der eine deutsch, der andere englisch. Ich persönlich verwende gern die gleichen Bezeichnugen für Datenpunkte und die Variablen die dessen Werte speichern wegen Übersichtlichkeit. Eigentlich ist nicht wichtig wie Du es machst, nur dass Du es immer gleich machst, sonst verstehst nen halbes Jahr später Dein eigenes Skript nimmer. Würd sagen wir bleiben bei TestTable sagt ja genau das aus wasses ist.

Zu Deiner Lösung der Arrays.
Soweit richtig, nen Ohrenschnalzer gibts aber dafür dass Du wieder mit var daherkommst, wir hatten uns auf let geeinigt .
An dieser Stelle kommt aber ohnehin ne Besonderheit von Arrays ins Spiel, diese deklariert man meist mit const. Const steht für Konstante, also Werte die sich im Skript nicht mehr ändern (naja eigentlich ist es etwas komplexer, siehe hier, aber für unsere Anwendung gehen wir mal von Konstanten Werten aus), z.B. siehe die ganzen Einstellungen in meinen Skripten. Und warum const bei Arrays, wir wollen doch die Werte ändern, wirst Du Dich jetzt fragen. Ich sags mal (etwas unpräzise) so, Wenn Du den Inhalt eines Arrays änderst, änderst Du nicht das Array an sich. Genau, siehe wieder obigen Link.

Die nächste Aufgabe ist nun, die Werte der Arrays in die Tabelle zu kriegen. Dazu brauchen wir jetzt eine Tabelle mit 5 Zeilen (+Header) und drei Spalten. Versuchs mal, wenn nicht klappt nicht verzagen jetzt wirds langsam etwas komplexer, dann lösen wirs heut abend auf.

[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

[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.]

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

[Dominik F.]

@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

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

[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.]

@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

[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.]

@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

[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();
});

[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.]

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

[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.]

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

[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^^

[Pittini]

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

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