NEWS
Blockly optimieren -Tabelle erstellen
Blockly
39
Beiträge
4
Kommentatoren
5.3k
Aufrufe
10
Watching
-
hier mal die settings für die tabelle für deine vis
- weite(breite) der tabelle - damit sie immer gleich breit wird
- überschriften - hintergrundfarbe
- schriftgröße für hochauflösende
Ich weiss garnicht wie ich dir danken soll
Es funktioniert perfektAber eine Frage habe ich noch (zumindest bist jetzt :grin: )
Die Reihenfolge
So ist Sie im Blockly
und so in der VIS
Warum ist das so?
Meine Hard- & Software:
- MSI Cubi 5 10M-049DE mit Proxmox
- CC2652P Zigbee Stick
- Steckdosen mit Tasmota und Zigbee
- Lichtschalter mit Tasmota
- IKEA TRÅDFRI Glühbirnen
- Aqara Sensoren
-
Ich weiss garnicht wie ich dir danken soll
Es funktioniert perfektAber eine Frage habe ich noch (zumindest bist jetzt :grin: )
Die Reihenfolge
So ist Sie im Blockly
und so in der VIS
Warum ist das so?
oh - die sortierung habe ich auch noch vergessen.
die "umdrehung" - an roten pfeilen anpassen
teste mal das:
-
Ich weiss garnicht wie ich dir danken soll
Es funktioniert perfektAber eine Frage habe ich noch (zumindest bist jetzt :grin: )
Die Reihenfolge
So ist Sie im Blockly
und so in der VIS
Warum ist das so?
@wszene (sorry hat etwas gedauert - blockly muss ich erst wieder lernen :-( - mache schleifen und so eigentlich nur in js)
die "umdrehung"
teste mal das, da stimmt die reihenfolge:
nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html
-
@wszene (sorry hat etwas gedauert - blockly muss ich erst wieder lernen :-( - mache schleifen und so eigentlich nur in js)
die "umdrehung"
teste mal das, da stimmt die reihenfolge:
@liv-in-sky
Kein Problem
Du bist ja nicht nur für mich daWenn ich "füge als" mit "setzte als" tusche dann nimmt er mir die Zeile Esstisch weg
Meine Hard- & Software:
- MSI Cubi 5 10M-049DE mit Proxmox
- CC2652P Zigbee Stick
- Steckdosen mit Tasmota und Zigbee
- Lichtschalter mit Tasmota
- IKEA TRÅDFRI Glühbirnen
- Aqara Sensoren
-
@liv-in-sky
Kein Problem
Du bist ja nicht nur für mich daWenn ich "füge als" mit "setzte als" tusche dann nimmt er mir die Zeile Esstisch weg
hast du alles ausgetauscht die "i+1" sind wichtig
nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html
-
hast du alles ausgetauscht die "i+1" sind wichtig
@liv-in-sky
so habe ich das gemacht?
Habe ich da etwas übersehen?
Meine Hard- & Software:
- MSI Cubi 5 10M-049DE mit Proxmox
- CC2652P Zigbee Stick
- Steckdosen mit Tasmota und Zigbee
- Lichtschalter mit Tasmota
- IKEA TRÅDFRI Glühbirnen
- Aqara Sensoren
-
@liv-in-sky
so habe ich das gemacht?
Habe ich da etwas übersehen?
nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html
-
Ahhhhhhh
genau das war es
Jetzt ist es richtigIch sollte vielleicht doch erstmal vom Bildschirm weg damit die Konzentration wieder da ist
Meine Hard- & Software:
- MSI Cubi 5 10M-049DE mit Proxmox
- CC2652P Zigbee Stick
- Steckdosen mit Tasmota und Zigbee
- Lichtschalter mit Tasmota
- IKEA TRÅDFRI Glühbirnen
- Aqara Sensoren
-
Ahhhhhhh
genau das war es
Jetzt ist es richtigIch sollte vielleicht doch erstmal vom Bildschirm weg damit die Konzentration wieder da ist
@wszene sehr gut - gute nachrichten bevor es in die träumewelt geht
kannst du bitte deine lampen und steckdosen bilder hier posten - hätte ich gerne
und wenn das ganze fertig ist, vielleicht ein bild von der vis mit den tabellen posten ?
nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html
-
@wszene sehr gut - gute nachrichten bevor es in die träumewelt geht
kannst du bitte deine lampen und steckdosen bilder hier posten - hätte ich gerne
und wenn das ganze fertig ist, vielleicht ein bild von der vis mit den tabellen posten ?
@liv-in-sky
Aber sicher doch
hier erstmal die Icons
ws-icons.zipDie VIS wird leider noch etwas dauern
Da ist noch viel zu tun
Wenn die Startseite fertig ist (denke das könnte spätestens Dienstag sein) werde ich diese mal hier postenEDIT:
Ich sehe gerade das mit Dienstag ist sehr sportlich
Ich muss leider erstmal in deinem Script die hart reingeschriebenen Style-Werte rauspicken
Problem ist das ich unterschiedliche VIS nutzen und diese unterschiedliche Größen und Farben haben daher muss ich CSS-Klassen einfügen um diese dann direkt im Projekt anzusprechenMeine Hard- & Software:
- MSI Cubi 5 10M-049DE mit Proxmox
- CC2652P Zigbee Stick
- Steckdosen mit Tasmota und Zigbee
- Lichtschalter mit Tasmota
- IKEA TRÅDFRI Glühbirnen
- Aqara Sensoren
-
@liv-in-sky
Aber sicher doch
hier erstmal die Icons
ws-icons.zipDie VIS wird leider noch etwas dauern
Da ist noch viel zu tun
Wenn die Startseite fertig ist (denke das könnte spätestens Dienstag sein) werde ich diese mal hier postenEDIT:
Ich sehe gerade das mit Dienstag ist sehr sportlich
Ich muss leider erstmal in deinem Script die hart reingeschriebenen Style-Werte rauspicken
Problem ist das ich unterschiedliche VIS nutzen und diese unterschiedliche Größen und Farben haben daher muss ich CSS-Klassen einfügen um diese dann direkt im Projekt anzusprechenmoin - ein kleiner schönheitsfehler - die lampen sind nicht 100% untereinander angeordnet
im script zeile 140 und 141 ganz am ende das leerzeichen löschen -. dann paßt es
nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html
-
moin - ein kleiner schönheitsfehler - die lampen sind nicht 100% untereinander angeordnet
im script zeile 140 und 141 ganz am ende das leerzeichen löschen -. dann paßt es
@liv-in-sky
Ich habe jetzt dein Script soweit verpfuscht das der Output so aussieht<table class="ws_tabelle_lampen"> <tr bgcolor="#151515"> <td class="ws_tabelle_lampen_name" align=left> Esstisch </td> <td align=center> <button style="border:none; background-color:transparent; value=" toggle" onclick="setOnDblClickCustom('alias.0.01_Stube.01_Schalter.Schalter-Esstisch')"><img src=/vis.0/WS-Icons/Lampen/bulb-on.png height="35" width="35"></button> </td> </tr> <tr bgcolor="#000000"> <td class="ws_tabelle_lampen_name" align=left> Sofatisch </td> <td align=center> <button style="border:none; background-color:transparent; value=" toggle" onclick="setOnDblClickCustom('alias.0.01_Stube.01_Schalter.Schalter-Sofatisch')"><img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"></button> </td> </tr> <tr bgcolor="#151515"> <td class="ws_tabelle_lampen_name" align=left> Stehlampe klein </td> <td align=center> <img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"> </td> </tr> <tr bgcolor="#000000"> <td class="ws_tabelle_lampen_name" align=left> Stehlampe groß </td> <td align=center> <img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"> </td> </tr> <tr bgcolor="#151515"> <td class="ws_tabelle_lampen_name" align=left> Schlafzimmer-Lampe </td> <td align=center> <button style="border:none; background-color:transparent; value=" toggle" onclick="setOnDblClickCustom('alias.0.02_Schlafzimmer.01_Schalter.Schalter-Schlafzimmerlampe')"><img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"></button> </td> </tr> <tr bgcolor="#000000"> <td class="ws_tabelle_lampen_name" align=left> Abstellkammer-Lampe </td> <td align=center> <img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"> </td> </tr> </table> <script> function setOnDblClickCustom(myvalue) { var Self = this; var objID = myvalue; Self.servConn.getStates(objID, (error, states) => { console.log(states); Self.servConn.setState(objID, !states[objID].val); }); } </script>Was ich leider nicht finde (da fehlt mir sie Erfahrung) sind die "bgcolor" und die ganzen Lehrzeichen
Ich hätte es gern das der Output so aussieht<table class="ws_tabelle_lampen"> <tr class="ws_zeile1_bgcolor"> <td class="ws_tabelle_lampen_name" align=left> Esstisch </td> <td align=center> <button style="border:none; background-color:transparent; value=" toggle" onclick="setOnDblClickCustom('alias.0.01_Stube.01_Schalter.Schalter-Esstisch')"><img src=/vis.0/WS-Icons/Lampen/bulb-on.png height="35" width="35"></button> </td> </tr> <tr class="ws_zeile2_bgcolor"> <td class="ws_tabelle_lampen_name" align=left> Sofatisch </td> <td align=center> <button style="border:none; background-color:transparent; value=" toggle" onclick="setOnDblClickCustom('alias.0.01_Stube.01_Schalter.Schalter-Sofatisch')"><img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"></button> </td> </tr> <tr class="ws_zeile1_bgcolor"> <td class="ws_tabelle_lampen_name" align=left> Stehlampe klein </td> <td align=center> <img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"> </td> </tr> <tr class="ws_zeile2_bgcolor"> <td class="ws_tabelle_lampen_name" align=left> Stehlampe groß </td> <td align=center> <img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"> </td> </tr> <tr class="ws_zeile1_bgcolor"> <td class="ws_tabelle_lampen_name" align=left> Schlafzimmer-Lampe </td> <td align=center> <button style="border:none; background-color:transparent; value=" toggle" onclick="setOnDblClickCustom('alias.0.02_Schlafzimmer.01_Schalter.Schalter-Schlafzimmerlampe')"><img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"></button> </td> </tr> <tr class="ws_zeile2_bgcolor"> <td class="ws_tabelle_lampen_name" align=left> Abstellkammer-Lampe </td> <td align=center> <img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"> </td> </tr> </table> <script> function setOnDblClickCustom(myvalue) { var Self = this; var objID = myvalue; Self.servConn.getStates(objID, (error, states) => { console.log(states); Self.servConn.setState(objID, !states[objID].val); }); } </script>Ideal wäre noch wenn die "img" eine Class bekommen könnten dann könnte ich deren Größe auch in jedem Projekt via CSS anpassen
Hier nochmal das Script wie es jetzt bei mir aussieht
//@liv-in-sky 2020 4.2.-18:42 //HIER WIRD PFAD UND FILENAME DEFINIERT const path = "/htmlexamplesetting.html"; //FIlenamen definieren const home ='vis.0' //wo soll das file im iobroker-file-system liegen ? (oder z.b auch iqontrol.meta) let braucheEinFile=false; // bei true wird ein file geschrieben let braucheEinVISWidget=true; // bei true wird ein html-tabelle in einen dp geschrieben - siehe nächste zeile //let dpVIS="controll-own.0.AAATEST.TestHTML" //WICHTIG wenn braucheEinVISWidget auf true gesetzt !! dp zusätzlich für VIS-HTML-Basic-Widget const farbeSchalterON="lightblue" // farbe des schalters für ON const farbeSchalterOFF="grey" // farbe des schalters für OFF //let mySchedule=" */20 * * * * * "; //jede minute //--------------------------------------- //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 2 var htmlFeld1='Standort'; var Feld1lAlign="left"; // überschrift Tabellen Spalte1 und Ausrichtung left,right or center var htmlFeld2='Status'; var Feld2lAlign="center"; // überschrift Tabellen Spalte2 und Ausrichtung left,right or center //----------------------------------- //hier werden die styles für die tabelle definiert //ÜBERSCHRIFT ÜBER TABELLE let htmlUberschrift=false; // mit Überschrift über der tabelle let htmlSignature=false; // anstatt der Überscghrift eine signature: - kleiner - anliegend const htmlFeldUeber='Batterie Zustand Sensoren'; // Überschrift und Signature const htmlFarbUber="black"; // Farbe der Überschrift const htmlSchriftWeite="normal"; // bold, normal - Fettschrift für Überschrift const htmlÜberFontGroesse="18px"; // schriftgröße überschrift //MEHRERE TABELLEN NEBENEINANDER let mehrfachTabelle=1; // bis zu 4 Tabellen werden nebeneinander geschrieben- verkürzt das Ganze, dafür etwas breiter - MÖGLICH 1,2,3,oder 4 !!! const trennungsLinie="2"; //extra trennungslinie bei mehrfachtabellen - evtl auf 0 stellen, wnn htmlRahmenLinien auf none sind const farbetrennungsLinie="white"; const htmlFarbZweiteTabelle="white"; // Farbe der Überschrift bei jeder 2.ten Tabelle const htmlFarbTableColorUber="#000000"; // Überschrift in der tabelle - der einzelnen Spalten //ÜBERSCHRIFT SPALTEN const UeberSchriftHöhe="35"; //Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe const LinieUnterUeberschrift="3"; // Linie nur unter Spaltenüberschrift - const farbeLinieUnterUeberschrift="white"; const groesseUeberschrift=16; const UeberschriftStyle="normal" // möglich "bold" //GANZE TABELLE let abstandZelle="1"; let farbeUngeradeZeilen="#000000"; //Farbe für ungerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2 let farbeGeradeZeilen="#151515"; //Farbe für gerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2 let weite="100%"; //Weite der Tabelle let zentriert=true; //ganze tabelle zentriert const backgroundAll="#000000"; //Hintergrund für die ganze Seite - für direkten aufruf oder iqontrol sichtber - keine auswirkung auf vis-widget const htmlSchriftart="Play-Regular"; //const htmlSchriftgroesse="22px"; //FELDER UND RAHMEN let UeberschriftSpalten=false; // ein- oder ausblenden der spatlen-überschriften const htmlFarbFelderschrift="#BDBDBD"; // SchriftFarbe der Felder const htmlFarbFelderschrift2="#D8D8D8"; // SchriftFarbe der Felder für jede 2te Tabelle const htmlFarbTableColorGradient1="#CDD163"; // Gradient - Hintergrund der Tabelle - Verlauffarbe const htmlFarbTableColorGradient2="#CDD163"; // Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf const htmlFarbTableBorderColor="acaa20"; // Farbe des Rahmen - is tdieser gleich den gradienten, sind die rahmen unsichtbar let htmlRahmenLinien="all"; // Format für Rahmen: MÖGLICH: "none" oder "all" oder "cols" oder "rows" const htmlSpalte1Weite="auto"; // Weite der ersten beiden Spalten oder z.b. 115px // HIER NICHTS ÄNDERN let borderHelpBottum; let borderHelpRight; let htmlcenterHelp; let htmlcenterHelp2; if(htmlRahmenLinien=="rows") {borderHelpBottum=1;borderHelpRight=0;} if(htmlRahmenLinien=="cols") {borderHelpBottum=0;borderHelpRight=1;} if(htmlRahmenLinien=="none") {borderHelpBottum=0;borderHelpRight=0;} if(htmlRahmenLinien=="all") {borderHelpBottum=1;borderHelpRight=1;} zentriert ? htmlcenterHelp="auto" : htmlcenterHelp="left"; zentriert ? htmlcenterHelp2="center" : htmlcenterHelp2="left"; const htmlZentriert='' const htmlStart= ""; //const htmlUeber= "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-weight: bold\">"+htmlFeldUeber+"</p>"; const htmlTabStyle= "<table class=\""+tabelleClass+"\">"; const htmlTabUeber1="<tr height=\""+UeberSchriftHöhe+"\" style=\"color:"+htmlFarbTableColorUber+"; font-size: "+groesseUeberschrift+"px; font-weight: "+UeberschriftStyle+" ; border-bottom: "+LinieUnterUeberschrift+"px solid "+farbeLinieUnterUeberschrift+" \">"; const htmlTabUeber3="</tr>"; const buttonScript = '<script> function setOnDblClickCustom( myvalue ) { var Self = this; var objID = myvalue; Self.servConn.getStates(objID, (error, states) => { console.log(states); Self.servConn.setState(objID, !states[objID].val); }); } </script>' ////NICHTS ÄNDERN - abhängig von den oben definierten _Spalten - in diesem Beispiel sind es 2 var htmlTabUeber2="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+"> "+htmlFeld1+" </td><td width="+htmlSpalte1Weite+" align="+Feld2lAlign+"> "+htmlFeld2+" </td>"; var htmlTabUeber2_1="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\"> "+htmlFeld1+" </td><td width="+htmlSpalte1Weite+" align="+Feld2lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\"> "+htmlFeld2+ " </td>"; //------------------------------------------------------ var htmlOut=""; var mix; var counter; var val1; var val0; var htmlTabUeber=""; function writeHTML(){ htmlOut=""; counter=-1; htmlTabUeber=""; switch (mehrfachTabelle) { case 1: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber3; break; case 2: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break; case 3: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber3; break; case 4: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break; }; if (!UeberschriftSpalten) {htmlTabUeber=""} //-------------------------------------------------------------------------------------------------------------------------------------------------- //---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------ //---------alle valx werte müssen von euch bestimmt werden - val0,val1 !!!--------------------------------------------------------------------- //-------------------------------------------------------------------------------------------------------------------------------------------------- for (var x=0;x<myList.length;x++){ counter++; if(myList[x][1]!=null){ val0 = myList[x][0]; val1 = myList[x][1] // log(val0) let valButton=myList[x][2] if (myList[x][3]){ val1 ? val1="<button style\=\"border:none\; background-color\:transparent\; value=\"toggle\" onclick=\"setOnDblClickCustom\(\'"+valButton+"\')\">"+"<img src="+symbolSwitchON +" height=\""+symbolHoehe+"\" width=\""+symbolBreite+"\">"+"</button>": val1="<button style\=\"border:none\; background-color\:transparent\; value=\"toggle\" onclick=\"setOnDblClickCustom\(\'"+valButton+"\')\">"+"<img src="+symbolSwitchOFF +" height=\""+symbolHoehe+"\" width=\""+symbolBreite+"\">"+"</button>"; } else{ val1 ? val1="<img src="+symbolSwitchON +" height=\""+symbolHoehe+"\" width=\""+symbolBreite+"\">" : val1="<img src="+symbolSwitchOFF +" height=\""+symbolHoehe+"\" width=\""+symbolBreite+"\">" } // if (val1==false) {val1="❌"} else{val1="✅"} tabelleBind() }; //Schleifen Ende - je nach schleifenart muss hier etwas geändert werden !!!!!!!!! } tabelleFinish(); //------------------------------------------------------------ //------------------------------------------------------------ //------------------------------------------------------------ // AB HIER NICHTS ÄNDERN - tabelle fertigstellen } // function ende //MAIN: writeHTML(); function tabelleBind(){ switch (mehrfachTabelle) { case 1: if(counter%2==0) { htmlOut=htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td class=\""+tabelleClassSpalte1+"\" align="+Feld1lAlign+"> "+val0+" </td><td align="+Feld2lAlign+"> "+val1+" </td></tr>"; break; } else { htmlOut=htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td class=\""+tabelleClassSpalte1+"\" align="+Feld1lAlign+"> "+val0+" </td><td align="+Feld2lAlign+"> "+val1+" </td></tr>"; break; } //------------------------------------- case 2: if(counter%4==0){ if(counter%2==0) {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\" ><td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+ ";\"align="+Feld2lAlign+"> "+val1+" </td>"; } else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+Feld2lAlign+" style=\"color:"+ htmlFarbFelderschrift2+"\"> "+val1+" </td></tr>";} break; }else{ if(counter%2==0) {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+ "px solid "+farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>"; } else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\" color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+Feld2lAlign+ " style=\"color:"+htmlFarbFelderschrift2+"\"> "+val1+" </td></tr>";} break;} //------------------------------------- case 3: if(counter%2==0) { if(counter%3==0 ) {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>"; } else { if(counter%3==1 ) { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+Feld2lAlign+ " style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\"> "+val1+" </td>";} else {htmlOut = htmlOut+"<td align="+Feld1lAlign+"> "+val0+" </td><td align="+Feld2lAlign+"> "+val1+" </td></tr>";} } break; }else{ if(counter%3==0 ) {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>"; } else { if(counter%3==1 ) { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+Feld2lAlign+ " style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\"> "+val1+" </td>";} else {htmlOut = htmlOut+"<td align="+Feld1lAlign+"> "+val0+" </td><td align="+Feld2lAlign+"> "+val1+" </td></tr>";} } break; } //------------------------------------- case 4: //counter=counter+8 if(counter%8==0) { if(counter%4==0) {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>"; } else {if(counter%4==1 ) { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+Feld2lAlign+ " style=\"color:"+htmlFarbFelderschrift2+"\"> "+val1+" </td>";} else {if(counter%4==3) { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+ Feld2lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"; color:"+htmlFarbFelderschrift2+ "\"> "+val1+" </td></tr>";} else {htmlOut = htmlOut = htmlOut+"<td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid " +farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>";}} } break;}else{ if(counter%4==0) {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>"; } else {if(counter%4==1 ) { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+Feld2lAlign+ " style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\"> "+val1+" </td>";} else {if(counter%4==3) { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align=" +Feld2lAlign+" style=\" color:"+htmlFarbFelderschrift2+"\"> "+val1+" </td></tr>";} else {htmlOut = htmlOut = htmlOut+"<td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>";}} } break; } } //switch ende } function tabelleFinish() { switch (mehrfachTabelle) { case 1: break; case 2: if(counter%2==0) htmlOut = htmlOut.replace(/<\/td>$/, '</td><td> </td><td> </td></tr>'); break; case 3: if(counter%3==2) htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>"); if(counter%3==1) htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>test </td><td> </td></tr>'); if(counter%3==0) htmlOut = htmlOut.replace(/<\/td>$/, "</td><td> </td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\"> </td><td> </td><td> </td></tr>"); break; case 4: if(counter%4==3) htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>"); if(counter%4==2) htmlOut = htmlOut.replace(/<\/td>$/, "</td><td> </td><td> </td></tr>"); if(counter%4==1) htmlOut = htmlOut.replace(/<\/td>$/, "</td><td> </td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\"> </td><td> </td><td> </td></tr>"); if(counter%4==0) htmlOut = htmlOut.replace(/<\/td>$/, "</td><td> </td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\"> </td><td> </td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\"> </td><td> </td><td> </td></tr>"); break; } var htmlUeber= "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: "+htmlÜberFontGroesse+"; font-weight:"+htmlSchriftWeite+ "\">"+htmlFeldUeber+"  Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</p>"; var htmlUnter= "<div style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 70%; text-align: right;\" >"+htmlFeldUeber+"  Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>" if (!htmlSignature) htmlUnter=""; //Ausgabe über VIS html widget - tabelle in datenpunkt schreiben - html tabelle ohne html header und body var htmlOutVIS=""; // htmlUberschrift ? htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>" : htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>"; if (htmlUberschrift) { zentriert ? htmlOutVIS=htmlZentriert+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript : htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript ; } else { zentriert ? htmlOutVIS=htmlZentriert+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript : htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript; } // log("bin raus aus tabelleBind"); if (braucheEinVISWidget) setState(dpVIS, htmlOutVIS ); var htmlUnter= "<div style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 80%; text-align: center; \" >"+htmlFeldUeber+"  Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>" if (!htmlSignature) htmlUnter=""; var htmlEnd="</table>"+htmlUnter+"</div></body>"; //mit oder ohne überschrift - zentriert oder links htmlUberschrift ? htmlOut=htmlStart+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd + buttonScript: htmlOut=htmlStart+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd+ buttonScript; //log(htmlOut); }Ich wäre dir sehr Dankbar wenn du dir das nochmal ansehen könntest
PS:
Wie kann ich hier im Forum eigentlich den Spoiler-Tag nutzenMeine Hard- & Software:
- MSI Cubi 5 10M-049DE mit Proxmox
- CC2652P Zigbee Stick
- Steckdosen mit Tasmota und Zigbee
- Lichtschalter mit Tasmota
- IKEA TRÅDFRI Glühbirnen
- Aqara Sensoren
-
@liv-in-sky
Ich habe jetzt dein Script soweit verpfuscht das der Output so aussieht<table class="ws_tabelle_lampen"> <tr bgcolor="#151515"> <td class="ws_tabelle_lampen_name" align=left> Esstisch </td> <td align=center> <button style="border:none; background-color:transparent; value=" toggle" onclick="setOnDblClickCustom('alias.0.01_Stube.01_Schalter.Schalter-Esstisch')"><img src=/vis.0/WS-Icons/Lampen/bulb-on.png height="35" width="35"></button> </td> </tr> <tr bgcolor="#000000"> <td class="ws_tabelle_lampen_name" align=left> Sofatisch </td> <td align=center> <button style="border:none; background-color:transparent; value=" toggle" onclick="setOnDblClickCustom('alias.0.01_Stube.01_Schalter.Schalter-Sofatisch')"><img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"></button> </td> </tr> <tr bgcolor="#151515"> <td class="ws_tabelle_lampen_name" align=left> Stehlampe klein </td> <td align=center> <img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"> </td> </tr> <tr bgcolor="#000000"> <td class="ws_tabelle_lampen_name" align=left> Stehlampe groß </td> <td align=center> <img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"> </td> </tr> <tr bgcolor="#151515"> <td class="ws_tabelle_lampen_name" align=left> Schlafzimmer-Lampe </td> <td align=center> <button style="border:none; background-color:transparent; value=" toggle" onclick="setOnDblClickCustom('alias.0.02_Schlafzimmer.01_Schalter.Schalter-Schlafzimmerlampe')"><img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"></button> </td> </tr> <tr bgcolor="#000000"> <td class="ws_tabelle_lampen_name" align=left> Abstellkammer-Lampe </td> <td align=center> <img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"> </td> </tr> </table> <script> function setOnDblClickCustom(myvalue) { var Self = this; var objID = myvalue; Self.servConn.getStates(objID, (error, states) => { console.log(states); Self.servConn.setState(objID, !states[objID].val); }); } </script>Was ich leider nicht finde (da fehlt mir sie Erfahrung) sind die "bgcolor" und die ganzen Lehrzeichen
Ich hätte es gern das der Output so aussieht<table class="ws_tabelle_lampen"> <tr class="ws_zeile1_bgcolor"> <td class="ws_tabelle_lampen_name" align=left> Esstisch </td> <td align=center> <button style="border:none; background-color:transparent; value=" toggle" onclick="setOnDblClickCustom('alias.0.01_Stube.01_Schalter.Schalter-Esstisch')"><img src=/vis.0/WS-Icons/Lampen/bulb-on.png height="35" width="35"></button> </td> </tr> <tr class="ws_zeile2_bgcolor"> <td class="ws_tabelle_lampen_name" align=left> Sofatisch </td> <td align=center> <button style="border:none; background-color:transparent; value=" toggle" onclick="setOnDblClickCustom('alias.0.01_Stube.01_Schalter.Schalter-Sofatisch')"><img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"></button> </td> </tr> <tr class="ws_zeile1_bgcolor"> <td class="ws_tabelle_lampen_name" align=left> Stehlampe klein </td> <td align=center> <img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"> </td> </tr> <tr class="ws_zeile2_bgcolor"> <td class="ws_tabelle_lampen_name" align=left> Stehlampe groß </td> <td align=center> <img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"> </td> </tr> <tr class="ws_zeile1_bgcolor"> <td class="ws_tabelle_lampen_name" align=left> Schlafzimmer-Lampe </td> <td align=center> <button style="border:none; background-color:transparent; value=" toggle" onclick="setOnDblClickCustom('alias.0.02_Schlafzimmer.01_Schalter.Schalter-Schlafzimmerlampe')"><img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"></button> </td> </tr> <tr class="ws_zeile2_bgcolor"> <td class="ws_tabelle_lampen_name" align=left> Abstellkammer-Lampe </td> <td align=center> <img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"> </td> </tr> </table> <script> function setOnDblClickCustom(myvalue) { var Self = this; var objID = myvalue; Self.servConn.getStates(objID, (error, states) => { console.log(states); Self.servConn.setState(objID, !states[objID].val); }); } </script>Ideal wäre noch wenn die "img" eine Class bekommen könnten dann könnte ich deren Größe auch in jedem Projekt via CSS anpassen
Hier nochmal das Script wie es jetzt bei mir aussieht
//@liv-in-sky 2020 4.2.-18:42 //HIER WIRD PFAD UND FILENAME DEFINIERT const path = "/htmlexamplesetting.html"; //FIlenamen definieren const home ='vis.0' //wo soll das file im iobroker-file-system liegen ? (oder z.b auch iqontrol.meta) let braucheEinFile=false; // bei true wird ein file geschrieben let braucheEinVISWidget=true; // bei true wird ein html-tabelle in einen dp geschrieben - siehe nächste zeile //let dpVIS="controll-own.0.AAATEST.TestHTML" //WICHTIG wenn braucheEinVISWidget auf true gesetzt !! dp zusätzlich für VIS-HTML-Basic-Widget const farbeSchalterON="lightblue" // farbe des schalters für ON const farbeSchalterOFF="grey" // farbe des schalters für OFF //let mySchedule=" */20 * * * * * "; //jede minute //--------------------------------------- //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 2 var htmlFeld1='Standort'; var Feld1lAlign="left"; // überschrift Tabellen Spalte1 und Ausrichtung left,right or center var htmlFeld2='Status'; var Feld2lAlign="center"; // überschrift Tabellen Spalte2 und Ausrichtung left,right or center //----------------------------------- //hier werden die styles für die tabelle definiert //ÜBERSCHRIFT ÜBER TABELLE let htmlUberschrift=false; // mit Überschrift über der tabelle let htmlSignature=false; // anstatt der Überscghrift eine signature: - kleiner - anliegend const htmlFeldUeber='Batterie Zustand Sensoren'; // Überschrift und Signature const htmlFarbUber="black"; // Farbe der Überschrift const htmlSchriftWeite="normal"; // bold, normal - Fettschrift für Überschrift const htmlÜberFontGroesse="18px"; // schriftgröße überschrift //MEHRERE TABELLEN NEBENEINANDER let mehrfachTabelle=1; // bis zu 4 Tabellen werden nebeneinander geschrieben- verkürzt das Ganze, dafür etwas breiter - MÖGLICH 1,2,3,oder 4 !!! const trennungsLinie="2"; //extra trennungslinie bei mehrfachtabellen - evtl auf 0 stellen, wnn htmlRahmenLinien auf none sind const farbetrennungsLinie="white"; const htmlFarbZweiteTabelle="white"; // Farbe der Überschrift bei jeder 2.ten Tabelle const htmlFarbTableColorUber="#000000"; // Überschrift in der tabelle - der einzelnen Spalten //ÜBERSCHRIFT SPALTEN const UeberSchriftHöhe="35"; //Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe const LinieUnterUeberschrift="3"; // Linie nur unter Spaltenüberschrift - const farbeLinieUnterUeberschrift="white"; const groesseUeberschrift=16; const UeberschriftStyle="normal" // möglich "bold" //GANZE TABELLE let abstandZelle="1"; let farbeUngeradeZeilen="#000000"; //Farbe für ungerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2 let farbeGeradeZeilen="#151515"; //Farbe für gerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2 let weite="100%"; //Weite der Tabelle let zentriert=true; //ganze tabelle zentriert const backgroundAll="#000000"; //Hintergrund für die ganze Seite - für direkten aufruf oder iqontrol sichtber - keine auswirkung auf vis-widget const htmlSchriftart="Play-Regular"; //const htmlSchriftgroesse="22px"; //FELDER UND RAHMEN let UeberschriftSpalten=false; // ein- oder ausblenden der spatlen-überschriften const htmlFarbFelderschrift="#BDBDBD"; // SchriftFarbe der Felder const htmlFarbFelderschrift2="#D8D8D8"; // SchriftFarbe der Felder für jede 2te Tabelle const htmlFarbTableColorGradient1="#CDD163"; // Gradient - Hintergrund der Tabelle - Verlauffarbe const htmlFarbTableColorGradient2="#CDD163"; // Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf const htmlFarbTableBorderColor="acaa20"; // Farbe des Rahmen - is tdieser gleich den gradienten, sind die rahmen unsichtbar let htmlRahmenLinien="all"; // Format für Rahmen: MÖGLICH: "none" oder "all" oder "cols" oder "rows" const htmlSpalte1Weite="auto"; // Weite der ersten beiden Spalten oder z.b. 115px // HIER NICHTS ÄNDERN let borderHelpBottum; let borderHelpRight; let htmlcenterHelp; let htmlcenterHelp2; if(htmlRahmenLinien=="rows") {borderHelpBottum=1;borderHelpRight=0;} if(htmlRahmenLinien=="cols") {borderHelpBottum=0;borderHelpRight=1;} if(htmlRahmenLinien=="none") {borderHelpBottum=0;borderHelpRight=0;} if(htmlRahmenLinien=="all") {borderHelpBottum=1;borderHelpRight=1;} zentriert ? htmlcenterHelp="auto" : htmlcenterHelp="left"; zentriert ? htmlcenterHelp2="center" : htmlcenterHelp2="left"; const htmlZentriert='' const htmlStart= ""; //const htmlUeber= "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-weight: bold\">"+htmlFeldUeber+"</p>"; const htmlTabStyle= "<table class=\""+tabelleClass+"\">"; const htmlTabUeber1="<tr height=\""+UeberSchriftHöhe+"\" style=\"color:"+htmlFarbTableColorUber+"; font-size: "+groesseUeberschrift+"px; font-weight: "+UeberschriftStyle+" ; border-bottom: "+LinieUnterUeberschrift+"px solid "+farbeLinieUnterUeberschrift+" \">"; const htmlTabUeber3="</tr>"; const buttonScript = '<script> function setOnDblClickCustom( myvalue ) { var Self = this; var objID = myvalue; Self.servConn.getStates(objID, (error, states) => { console.log(states); Self.servConn.setState(objID, !states[objID].val); }); } </script>' ////NICHTS ÄNDERN - abhängig von den oben definierten _Spalten - in diesem Beispiel sind es 2 var htmlTabUeber2="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+"> "+htmlFeld1+" </td><td width="+htmlSpalte1Weite+" align="+Feld2lAlign+"> "+htmlFeld2+" </td>"; var htmlTabUeber2_1="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\"> "+htmlFeld1+" </td><td width="+htmlSpalte1Weite+" align="+Feld2lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\"> "+htmlFeld2+ " </td>"; //------------------------------------------------------ var htmlOut=""; var mix; var counter; var val1; var val0; var htmlTabUeber=""; function writeHTML(){ htmlOut=""; counter=-1; htmlTabUeber=""; switch (mehrfachTabelle) { case 1: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber3; break; case 2: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break; case 3: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber3; break; case 4: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break; }; if (!UeberschriftSpalten) {htmlTabUeber=""} //-------------------------------------------------------------------------------------------------------------------------------------------------- //---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------ //---------alle valx werte müssen von euch bestimmt werden - val0,val1 !!!--------------------------------------------------------------------- //-------------------------------------------------------------------------------------------------------------------------------------------------- for (var x=0;x<myList.length;x++){ counter++; if(myList[x][1]!=null){ val0 = myList[x][0]; val1 = myList[x][1] // log(val0) let valButton=myList[x][2] if (myList[x][3]){ val1 ? val1="<button style\=\"border:none\; background-color\:transparent\; value=\"toggle\" onclick=\"setOnDblClickCustom\(\'"+valButton+"\')\">"+"<img src="+symbolSwitchON +" height=\""+symbolHoehe+"\" width=\""+symbolBreite+"\">"+"</button>": val1="<button style\=\"border:none\; background-color\:transparent\; value=\"toggle\" onclick=\"setOnDblClickCustom\(\'"+valButton+"\')\">"+"<img src="+symbolSwitchOFF +" height=\""+symbolHoehe+"\" width=\""+symbolBreite+"\">"+"</button>"; } else{ val1 ? val1="<img src="+symbolSwitchON +" height=\""+symbolHoehe+"\" width=\""+symbolBreite+"\">" : val1="<img src="+symbolSwitchOFF +" height=\""+symbolHoehe+"\" width=\""+symbolBreite+"\">" } // if (val1==false) {val1="❌"} else{val1="✅"} tabelleBind() }; //Schleifen Ende - je nach schleifenart muss hier etwas geändert werden !!!!!!!!! } tabelleFinish(); //------------------------------------------------------------ //------------------------------------------------------------ //------------------------------------------------------------ // AB HIER NICHTS ÄNDERN - tabelle fertigstellen } // function ende //MAIN: writeHTML(); function tabelleBind(){ switch (mehrfachTabelle) { case 1: if(counter%2==0) { htmlOut=htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td class=\""+tabelleClassSpalte1+"\" align="+Feld1lAlign+"> "+val0+" </td><td align="+Feld2lAlign+"> "+val1+" </td></tr>"; break; } else { htmlOut=htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td class=\""+tabelleClassSpalte1+"\" align="+Feld1lAlign+"> "+val0+" </td><td align="+Feld2lAlign+"> "+val1+" </td></tr>"; break; } //------------------------------------- case 2: if(counter%4==0){ if(counter%2==0) {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\" ><td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+ ";\"align="+Feld2lAlign+"> "+val1+" </td>"; } else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+Feld2lAlign+" style=\"color:"+ htmlFarbFelderschrift2+"\"> "+val1+" </td></tr>";} break; }else{ if(counter%2==0) {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+ "px solid "+farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>"; } else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\" color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+Feld2lAlign+ " style=\"color:"+htmlFarbFelderschrift2+"\"> "+val1+" </td></tr>";} break;} //------------------------------------- case 3: if(counter%2==0) { if(counter%3==0 ) {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>"; } else { if(counter%3==1 ) { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+Feld2lAlign+ " style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\"> "+val1+" </td>";} else {htmlOut = htmlOut+"<td align="+Feld1lAlign+"> "+val0+" </td><td align="+Feld2lAlign+"> "+val1+" </td></tr>";} } break; }else{ if(counter%3==0 ) {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>"; } else { if(counter%3==1 ) { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+Feld2lAlign+ " style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\"> "+val1+" </td>";} else {htmlOut = htmlOut+"<td align="+Feld1lAlign+"> "+val0+" </td><td align="+Feld2lAlign+"> "+val1+" </td></tr>";} } break; } //------------------------------------- case 4: //counter=counter+8 if(counter%8==0) { if(counter%4==0) {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>"; } else {if(counter%4==1 ) { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+Feld2lAlign+ " style=\"color:"+htmlFarbFelderschrift2+"\"> "+val1+" </td>";} else {if(counter%4==3) { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+ Feld2lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"; color:"+htmlFarbFelderschrift2+ "\"> "+val1+" </td></tr>";} else {htmlOut = htmlOut = htmlOut+"<td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid " +farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>";}} } break;}else{ if(counter%4==0) {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>"; } else {if(counter%4==1 ) { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+Feld2lAlign+ " style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\"> "+val1+" </td>";} else {if(counter%4==3) { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align=" +Feld2lAlign+" style=\" color:"+htmlFarbFelderschrift2+"\"> "+val1+" </td></tr>";} else {htmlOut = htmlOut = htmlOut+"<td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>";}} } break; } } //switch ende } function tabelleFinish() { switch (mehrfachTabelle) { case 1: break; case 2: if(counter%2==0) htmlOut = htmlOut.replace(/<\/td>$/, '</td><td> </td><td> </td></tr>'); break; case 3: if(counter%3==2) htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>"); if(counter%3==1) htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>test </td><td> </td></tr>'); if(counter%3==0) htmlOut = htmlOut.replace(/<\/td>$/, "</td><td> </td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\"> </td><td> </td><td> </td></tr>"); break; case 4: if(counter%4==3) htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>"); if(counter%4==2) htmlOut = htmlOut.replace(/<\/td>$/, "</td><td> </td><td> </td></tr>"); if(counter%4==1) htmlOut = htmlOut.replace(/<\/td>$/, "</td><td> </td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\"> </td><td> </td><td> </td></tr>"); if(counter%4==0) htmlOut = htmlOut.replace(/<\/td>$/, "</td><td> </td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\"> </td><td> </td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\"> </td><td> </td><td> </td></tr>"); break; } var htmlUeber= "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: "+htmlÜberFontGroesse+"; font-weight:"+htmlSchriftWeite+ "\">"+htmlFeldUeber+"  Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</p>"; var htmlUnter= "<div style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 70%; text-align: right;\" >"+htmlFeldUeber+"  Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>" if (!htmlSignature) htmlUnter=""; //Ausgabe über VIS html widget - tabelle in datenpunkt schreiben - html tabelle ohne html header und body var htmlOutVIS=""; // htmlUberschrift ? htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>" : htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>"; if (htmlUberschrift) { zentriert ? htmlOutVIS=htmlZentriert+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript : htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript ; } else { zentriert ? htmlOutVIS=htmlZentriert+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript : htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript; } // log("bin raus aus tabelleBind"); if (braucheEinVISWidget) setState(dpVIS, htmlOutVIS ); var htmlUnter= "<div style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 80%; text-align: center; \" >"+htmlFeldUeber+"  Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>" if (!htmlSignature) htmlUnter=""; var htmlEnd="</table>"+htmlUnter+"</div></body>"; //mit oder ohne überschrift - zentriert oder links htmlUberschrift ? htmlOut=htmlStart+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd + buttonScript: htmlOut=htmlStart+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd+ buttonScript; //log(htmlOut); }Ich wäre dir sehr Dankbar wenn du dir das nochmal ansehen könntest
PS:
Wie kann ich hier im Forum eigentlich den Spoiler-Tag nutzen -
@liv-in-sky
Ich habe jetzt dein Script soweit verpfuscht das der Output so aussieht<table class="ws_tabelle_lampen"> <tr bgcolor="#151515"> <td class="ws_tabelle_lampen_name" align=left> Esstisch </td> <td align=center> <button style="border:none; background-color:transparent; value=" toggle" onclick="setOnDblClickCustom('alias.0.01_Stube.01_Schalter.Schalter-Esstisch')"><img src=/vis.0/WS-Icons/Lampen/bulb-on.png height="35" width="35"></button> </td> </tr> <tr bgcolor="#000000"> <td class="ws_tabelle_lampen_name" align=left> Sofatisch </td> <td align=center> <button style="border:none; background-color:transparent; value=" toggle" onclick="setOnDblClickCustom('alias.0.01_Stube.01_Schalter.Schalter-Sofatisch')"><img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"></button> </td> </tr> <tr bgcolor="#151515"> <td class="ws_tabelle_lampen_name" align=left> Stehlampe klein </td> <td align=center> <img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"> </td> </tr> <tr bgcolor="#000000"> <td class="ws_tabelle_lampen_name" align=left> Stehlampe groß </td> <td align=center> <img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"> </td> </tr> <tr bgcolor="#151515"> <td class="ws_tabelle_lampen_name" align=left> Schlafzimmer-Lampe </td> <td align=center> <button style="border:none; background-color:transparent; value=" toggle" onclick="setOnDblClickCustom('alias.0.02_Schlafzimmer.01_Schalter.Schalter-Schlafzimmerlampe')"><img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"></button> </td> </tr> <tr bgcolor="#000000"> <td class="ws_tabelle_lampen_name" align=left> Abstellkammer-Lampe </td> <td align=center> <img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"> </td> </tr> </table> <script> function setOnDblClickCustom(myvalue) { var Self = this; var objID = myvalue; Self.servConn.getStates(objID, (error, states) => { console.log(states); Self.servConn.setState(objID, !states[objID].val); }); } </script>Was ich leider nicht finde (da fehlt mir sie Erfahrung) sind die "bgcolor" und die ganzen Lehrzeichen
Ich hätte es gern das der Output so aussieht<table class="ws_tabelle_lampen"> <tr class="ws_zeile1_bgcolor"> <td class="ws_tabelle_lampen_name" align=left> Esstisch </td> <td align=center> <button style="border:none; background-color:transparent; value=" toggle" onclick="setOnDblClickCustom('alias.0.01_Stube.01_Schalter.Schalter-Esstisch')"><img src=/vis.0/WS-Icons/Lampen/bulb-on.png height="35" width="35"></button> </td> </tr> <tr class="ws_zeile2_bgcolor"> <td class="ws_tabelle_lampen_name" align=left> Sofatisch </td> <td align=center> <button style="border:none; background-color:transparent; value=" toggle" onclick="setOnDblClickCustom('alias.0.01_Stube.01_Schalter.Schalter-Sofatisch')"><img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"></button> </td> </tr> <tr class="ws_zeile1_bgcolor"> <td class="ws_tabelle_lampen_name" align=left> Stehlampe klein </td> <td align=center> <img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"> </td> </tr> <tr class="ws_zeile2_bgcolor"> <td class="ws_tabelle_lampen_name" align=left> Stehlampe groß </td> <td align=center> <img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"> </td> </tr> <tr class="ws_zeile1_bgcolor"> <td class="ws_tabelle_lampen_name" align=left> Schlafzimmer-Lampe </td> <td align=center> <button style="border:none; background-color:transparent; value=" toggle" onclick="setOnDblClickCustom('alias.0.02_Schlafzimmer.01_Schalter.Schalter-Schlafzimmerlampe')"><img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"></button> </td> </tr> <tr class="ws_zeile2_bgcolor"> <td class="ws_tabelle_lampen_name" align=left> Abstellkammer-Lampe </td> <td align=center> <img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"> </td> </tr> </table> <script> function setOnDblClickCustom(myvalue) { var Self = this; var objID = myvalue; Self.servConn.getStates(objID, (error, states) => { console.log(states); Self.servConn.setState(objID, !states[objID].val); }); } </script>Ideal wäre noch wenn die "img" eine Class bekommen könnten dann könnte ich deren Größe auch in jedem Projekt via CSS anpassen
Hier nochmal das Script wie es jetzt bei mir aussieht
//@liv-in-sky 2020 4.2.-18:42 //HIER WIRD PFAD UND FILENAME DEFINIERT const path = "/htmlexamplesetting.html"; //FIlenamen definieren const home ='vis.0' //wo soll das file im iobroker-file-system liegen ? (oder z.b auch iqontrol.meta) let braucheEinFile=false; // bei true wird ein file geschrieben let braucheEinVISWidget=true; // bei true wird ein html-tabelle in einen dp geschrieben - siehe nächste zeile //let dpVIS="controll-own.0.AAATEST.TestHTML" //WICHTIG wenn braucheEinVISWidget auf true gesetzt !! dp zusätzlich für VIS-HTML-Basic-Widget const farbeSchalterON="lightblue" // farbe des schalters für ON const farbeSchalterOFF="grey" // farbe des schalters für OFF //let mySchedule=" */20 * * * * * "; //jede minute //--------------------------------------- //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 2 var htmlFeld1='Standort'; var Feld1lAlign="left"; // überschrift Tabellen Spalte1 und Ausrichtung left,right or center var htmlFeld2='Status'; var Feld2lAlign="center"; // überschrift Tabellen Spalte2 und Ausrichtung left,right or center //----------------------------------- //hier werden die styles für die tabelle definiert //ÜBERSCHRIFT ÜBER TABELLE let htmlUberschrift=false; // mit Überschrift über der tabelle let htmlSignature=false; // anstatt der Überscghrift eine signature: - kleiner - anliegend const htmlFeldUeber='Batterie Zustand Sensoren'; // Überschrift und Signature const htmlFarbUber="black"; // Farbe der Überschrift const htmlSchriftWeite="normal"; // bold, normal - Fettschrift für Überschrift const htmlÜberFontGroesse="18px"; // schriftgröße überschrift //MEHRERE TABELLEN NEBENEINANDER let mehrfachTabelle=1; // bis zu 4 Tabellen werden nebeneinander geschrieben- verkürzt das Ganze, dafür etwas breiter - MÖGLICH 1,2,3,oder 4 !!! const trennungsLinie="2"; //extra trennungslinie bei mehrfachtabellen - evtl auf 0 stellen, wnn htmlRahmenLinien auf none sind const farbetrennungsLinie="white"; const htmlFarbZweiteTabelle="white"; // Farbe der Überschrift bei jeder 2.ten Tabelle const htmlFarbTableColorUber="#000000"; // Überschrift in der tabelle - der einzelnen Spalten //ÜBERSCHRIFT SPALTEN const UeberSchriftHöhe="35"; //Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe const LinieUnterUeberschrift="3"; // Linie nur unter Spaltenüberschrift - const farbeLinieUnterUeberschrift="white"; const groesseUeberschrift=16; const UeberschriftStyle="normal" // möglich "bold" //GANZE TABELLE let abstandZelle="1"; let farbeUngeradeZeilen="#000000"; //Farbe für ungerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2 let farbeGeradeZeilen="#151515"; //Farbe für gerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2 let weite="100%"; //Weite der Tabelle let zentriert=true; //ganze tabelle zentriert const backgroundAll="#000000"; //Hintergrund für die ganze Seite - für direkten aufruf oder iqontrol sichtber - keine auswirkung auf vis-widget const htmlSchriftart="Play-Regular"; //const htmlSchriftgroesse="22px"; //FELDER UND RAHMEN let UeberschriftSpalten=false; // ein- oder ausblenden der spatlen-überschriften const htmlFarbFelderschrift="#BDBDBD"; // SchriftFarbe der Felder const htmlFarbFelderschrift2="#D8D8D8"; // SchriftFarbe der Felder für jede 2te Tabelle const htmlFarbTableColorGradient1="#CDD163"; // Gradient - Hintergrund der Tabelle - Verlauffarbe const htmlFarbTableColorGradient2="#CDD163"; // Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf const htmlFarbTableBorderColor="acaa20"; // Farbe des Rahmen - is tdieser gleich den gradienten, sind die rahmen unsichtbar let htmlRahmenLinien="all"; // Format für Rahmen: MÖGLICH: "none" oder "all" oder "cols" oder "rows" const htmlSpalte1Weite="auto"; // Weite der ersten beiden Spalten oder z.b. 115px // HIER NICHTS ÄNDERN let borderHelpBottum; let borderHelpRight; let htmlcenterHelp; let htmlcenterHelp2; if(htmlRahmenLinien=="rows") {borderHelpBottum=1;borderHelpRight=0;} if(htmlRahmenLinien=="cols") {borderHelpBottum=0;borderHelpRight=1;} if(htmlRahmenLinien=="none") {borderHelpBottum=0;borderHelpRight=0;} if(htmlRahmenLinien=="all") {borderHelpBottum=1;borderHelpRight=1;} zentriert ? htmlcenterHelp="auto" : htmlcenterHelp="left"; zentriert ? htmlcenterHelp2="center" : htmlcenterHelp2="left"; const htmlZentriert='' const htmlStart= ""; //const htmlUeber= "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-weight: bold\">"+htmlFeldUeber+"</p>"; const htmlTabStyle= "<table class=\""+tabelleClass+"\">"; const htmlTabUeber1="<tr height=\""+UeberSchriftHöhe+"\" style=\"color:"+htmlFarbTableColorUber+"; font-size: "+groesseUeberschrift+"px; font-weight: "+UeberschriftStyle+" ; border-bottom: "+LinieUnterUeberschrift+"px solid "+farbeLinieUnterUeberschrift+" \">"; const htmlTabUeber3="</tr>"; const buttonScript = '<script> function setOnDblClickCustom( myvalue ) { var Self = this; var objID = myvalue; Self.servConn.getStates(objID, (error, states) => { console.log(states); Self.servConn.setState(objID, !states[objID].val); }); } </script>' ////NICHTS ÄNDERN - abhängig von den oben definierten _Spalten - in diesem Beispiel sind es 2 var htmlTabUeber2="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+"> "+htmlFeld1+" </td><td width="+htmlSpalte1Weite+" align="+Feld2lAlign+"> "+htmlFeld2+" </td>"; var htmlTabUeber2_1="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\"> "+htmlFeld1+" </td><td width="+htmlSpalte1Weite+" align="+Feld2lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\"> "+htmlFeld2+ " </td>"; //------------------------------------------------------ var htmlOut=""; var mix; var counter; var val1; var val0; var htmlTabUeber=""; function writeHTML(){ htmlOut=""; counter=-1; htmlTabUeber=""; switch (mehrfachTabelle) { case 1: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber3; break; case 2: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break; case 3: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber3; break; case 4: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break; }; if (!UeberschriftSpalten) {htmlTabUeber=""} //-------------------------------------------------------------------------------------------------------------------------------------------------- //---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------ //---------alle valx werte müssen von euch bestimmt werden - val0,val1 !!!--------------------------------------------------------------------- //-------------------------------------------------------------------------------------------------------------------------------------------------- for (var x=0;x<myList.length;x++){ counter++; if(myList[x][1]!=null){ val0 = myList[x][0]; val1 = myList[x][1] // log(val0) let valButton=myList[x][2] if (myList[x][3]){ val1 ? val1="<button style\=\"border:none\; background-color\:transparent\; value=\"toggle\" onclick=\"setOnDblClickCustom\(\'"+valButton+"\')\">"+"<img src="+symbolSwitchON +" height=\""+symbolHoehe+"\" width=\""+symbolBreite+"\">"+"</button>": val1="<button style\=\"border:none\; background-color\:transparent\; value=\"toggle\" onclick=\"setOnDblClickCustom\(\'"+valButton+"\')\">"+"<img src="+symbolSwitchOFF +" height=\""+symbolHoehe+"\" width=\""+symbolBreite+"\">"+"</button>"; } else{ val1 ? val1="<img src="+symbolSwitchON +" height=\""+symbolHoehe+"\" width=\""+symbolBreite+"\">" : val1="<img src="+symbolSwitchOFF +" height=\""+symbolHoehe+"\" width=\""+symbolBreite+"\">" } // if (val1==false) {val1="❌"} else{val1="✅"} tabelleBind() }; //Schleifen Ende - je nach schleifenart muss hier etwas geändert werden !!!!!!!!! } tabelleFinish(); //------------------------------------------------------------ //------------------------------------------------------------ //------------------------------------------------------------ // AB HIER NICHTS ÄNDERN - tabelle fertigstellen } // function ende //MAIN: writeHTML(); function tabelleBind(){ switch (mehrfachTabelle) { case 1: if(counter%2==0) { htmlOut=htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td class=\""+tabelleClassSpalte1+"\" align="+Feld1lAlign+"> "+val0+" </td><td align="+Feld2lAlign+"> "+val1+" </td></tr>"; break; } else { htmlOut=htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td class=\""+tabelleClassSpalte1+"\" align="+Feld1lAlign+"> "+val0+" </td><td align="+Feld2lAlign+"> "+val1+" </td></tr>"; break; } //------------------------------------- case 2: if(counter%4==0){ if(counter%2==0) {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\" ><td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+ ";\"align="+Feld2lAlign+"> "+val1+" </td>"; } else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+Feld2lAlign+" style=\"color:"+ htmlFarbFelderschrift2+"\"> "+val1+" </td></tr>";} break; }else{ if(counter%2==0) {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+ "px solid "+farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>"; } else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\" color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+Feld2lAlign+ " style=\"color:"+htmlFarbFelderschrift2+"\"> "+val1+" </td></tr>";} break;} //------------------------------------- case 3: if(counter%2==0) { if(counter%3==0 ) {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>"; } else { if(counter%3==1 ) { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+Feld2lAlign+ " style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\"> "+val1+" </td>";} else {htmlOut = htmlOut+"<td align="+Feld1lAlign+"> "+val0+" </td><td align="+Feld2lAlign+"> "+val1+" </td></tr>";} } break; }else{ if(counter%3==0 ) {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>"; } else { if(counter%3==1 ) { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+Feld2lAlign+ " style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\"> "+val1+" </td>";} else {htmlOut = htmlOut+"<td align="+Feld1lAlign+"> "+val0+" </td><td align="+Feld2lAlign+"> "+val1+" </td></tr>";} } break; } //------------------------------------- case 4: //counter=counter+8 if(counter%8==0) { if(counter%4==0) {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>"; } else {if(counter%4==1 ) { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+Feld2lAlign+ " style=\"color:"+htmlFarbFelderschrift2+"\"> "+val1+" </td>";} else {if(counter%4==3) { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+ Feld2lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"; color:"+htmlFarbFelderschrift2+ "\"> "+val1+" </td></tr>";} else {htmlOut = htmlOut = htmlOut+"<td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid " +farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>";}} } break;}else{ if(counter%4==0) {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>"; } else {if(counter%4==1 ) { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+Feld2lAlign+ " style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\"> "+val1+" </td>";} else {if(counter%4==3) { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align=" +Feld2lAlign+" style=\" color:"+htmlFarbFelderschrift2+"\"> "+val1+" </td></tr>";} else {htmlOut = htmlOut = htmlOut+"<td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>";}} } break; } } //switch ende } function tabelleFinish() { switch (mehrfachTabelle) { case 1: break; case 2: if(counter%2==0) htmlOut = htmlOut.replace(/<\/td>$/, '</td><td> </td><td> </td></tr>'); break; case 3: if(counter%3==2) htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>"); if(counter%3==1) htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>test </td><td> </td></tr>'); if(counter%3==0) htmlOut = htmlOut.replace(/<\/td>$/, "</td><td> </td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\"> </td><td> </td><td> </td></tr>"); break; case 4: if(counter%4==3) htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>"); if(counter%4==2) htmlOut = htmlOut.replace(/<\/td>$/, "</td><td> </td><td> </td></tr>"); if(counter%4==1) htmlOut = htmlOut.replace(/<\/td>$/, "</td><td> </td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\"> </td><td> </td><td> </td></tr>"); if(counter%4==0) htmlOut = htmlOut.replace(/<\/td>$/, "</td><td> </td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\"> </td><td> </td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\"> </td><td> </td><td> </td></tr>"); break; } var htmlUeber= "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: "+htmlÜberFontGroesse+"; font-weight:"+htmlSchriftWeite+ "\">"+htmlFeldUeber+"  Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</p>"; var htmlUnter= "<div style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 70%; text-align: right;\" >"+htmlFeldUeber+"  Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>" if (!htmlSignature) htmlUnter=""; //Ausgabe über VIS html widget - tabelle in datenpunkt schreiben - html tabelle ohne html header und body var htmlOutVIS=""; // htmlUberschrift ? htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>" : htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>"; if (htmlUberschrift) { zentriert ? htmlOutVIS=htmlZentriert+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript : htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript ; } else { zentriert ? htmlOutVIS=htmlZentriert+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript : htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript; } // log("bin raus aus tabelleBind"); if (braucheEinVISWidget) setState(dpVIS, htmlOutVIS ); var htmlUnter= "<div style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 80%; text-align: center; \" >"+htmlFeldUeber+"  Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>" if (!htmlSignature) htmlUnter=""; var htmlEnd="</table>"+htmlUnter+"</div></body>"; //mit oder ohne überschrift - zentriert oder links htmlUberschrift ? htmlOut=htmlStart+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd + buttonScript: htmlOut=htmlStart+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd+ buttonScript; //log(htmlOut); }Ich wäre dir sehr Dankbar wenn du dir das nochmal ansehen könntest
PS:
Wie kann ich hier im Forum eigentlich den Spoiler-Tag nutzeneine css klasse für image wäre möglich - aber reicht dir weite und höhe nicht aus? was brauchst du noch ?
die tableclass hast du als variable eingefügt - diese aber nie deklariert - aber eigentlich braucht man bei diesen tabellen keine klassen definieren , sondern man stellt ein, was man braucht
lass und nochmal anydesken - im moment ist mir völlig unklar, was du eigentlich einstellen möchtest - werden wir schon hinbekommen
-
@liv-in-sky
Ich habe jetzt dein Script soweit verpfuscht das der Output so aussieht<table class="ws_tabelle_lampen"> <tr bgcolor="#151515"> <td class="ws_tabelle_lampen_name" align=left> Esstisch </td> <td align=center> <button style="border:none; background-color:transparent; value=" toggle" onclick="setOnDblClickCustom('alias.0.01_Stube.01_Schalter.Schalter-Esstisch')"><img src=/vis.0/WS-Icons/Lampen/bulb-on.png height="35" width="35"></button> </td> </tr> <tr bgcolor="#000000"> <td class="ws_tabelle_lampen_name" align=left> Sofatisch </td> <td align=center> <button style="border:none; background-color:transparent; value=" toggle" onclick="setOnDblClickCustom('alias.0.01_Stube.01_Schalter.Schalter-Sofatisch')"><img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"></button> </td> </tr> <tr bgcolor="#151515"> <td class="ws_tabelle_lampen_name" align=left> Stehlampe klein </td> <td align=center> <img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"> </td> </tr> <tr bgcolor="#000000"> <td class="ws_tabelle_lampen_name" align=left> Stehlampe groß </td> <td align=center> <img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"> </td> </tr> <tr bgcolor="#151515"> <td class="ws_tabelle_lampen_name" align=left> Schlafzimmer-Lampe </td> <td align=center> <button style="border:none; background-color:transparent; value=" toggle" onclick="setOnDblClickCustom('alias.0.02_Schlafzimmer.01_Schalter.Schalter-Schlafzimmerlampe')"><img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"></button> </td> </tr> <tr bgcolor="#000000"> <td class="ws_tabelle_lampen_name" align=left> Abstellkammer-Lampe </td> <td align=center> <img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"> </td> </tr> </table> <script> function setOnDblClickCustom(myvalue) { var Self = this; var objID = myvalue; Self.servConn.getStates(objID, (error, states) => { console.log(states); Self.servConn.setState(objID, !states[objID].val); }); } </script>Was ich leider nicht finde (da fehlt mir sie Erfahrung) sind die "bgcolor" und die ganzen Lehrzeichen
Ich hätte es gern das der Output so aussieht<table class="ws_tabelle_lampen"> <tr class="ws_zeile1_bgcolor"> <td class="ws_tabelle_lampen_name" align=left> Esstisch </td> <td align=center> <button style="border:none; background-color:transparent; value=" toggle" onclick="setOnDblClickCustom('alias.0.01_Stube.01_Schalter.Schalter-Esstisch')"><img src=/vis.0/WS-Icons/Lampen/bulb-on.png height="35" width="35"></button> </td> </tr> <tr class="ws_zeile2_bgcolor"> <td class="ws_tabelle_lampen_name" align=left> Sofatisch </td> <td align=center> <button style="border:none; background-color:transparent; value=" toggle" onclick="setOnDblClickCustom('alias.0.01_Stube.01_Schalter.Schalter-Sofatisch')"><img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"></button> </td> </tr> <tr class="ws_zeile1_bgcolor"> <td class="ws_tabelle_lampen_name" align=left> Stehlampe klein </td> <td align=center> <img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"> </td> </tr> <tr class="ws_zeile2_bgcolor"> <td class="ws_tabelle_lampen_name" align=left> Stehlampe groß </td> <td align=center> <img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"> </td> </tr> <tr class="ws_zeile1_bgcolor"> <td class="ws_tabelle_lampen_name" align=left> Schlafzimmer-Lampe </td> <td align=center> <button style="border:none; background-color:transparent; value=" toggle" onclick="setOnDblClickCustom('alias.0.02_Schlafzimmer.01_Schalter.Schalter-Schlafzimmerlampe')"><img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"></button> </td> </tr> <tr class="ws_zeile2_bgcolor"> <td class="ws_tabelle_lampen_name" align=left> Abstellkammer-Lampe </td> <td align=center> <img src=/vis.0/WS-Icons/Lampen/bulb-off.png height="35" width="35"> </td> </tr> </table> <script> function setOnDblClickCustom(myvalue) { var Self = this; var objID = myvalue; Self.servConn.getStates(objID, (error, states) => { console.log(states); Self.servConn.setState(objID, !states[objID].val); }); } </script>Ideal wäre noch wenn die "img" eine Class bekommen könnten dann könnte ich deren Größe auch in jedem Projekt via CSS anpassen
Hier nochmal das Script wie es jetzt bei mir aussieht
//@liv-in-sky 2020 4.2.-18:42 //HIER WIRD PFAD UND FILENAME DEFINIERT const path = "/htmlexamplesetting.html"; //FIlenamen definieren const home ='vis.0' //wo soll das file im iobroker-file-system liegen ? (oder z.b auch iqontrol.meta) let braucheEinFile=false; // bei true wird ein file geschrieben let braucheEinVISWidget=true; // bei true wird ein html-tabelle in einen dp geschrieben - siehe nächste zeile //let dpVIS="controll-own.0.AAATEST.TestHTML" //WICHTIG wenn braucheEinVISWidget auf true gesetzt !! dp zusätzlich für VIS-HTML-Basic-Widget const farbeSchalterON="lightblue" // farbe des schalters für ON const farbeSchalterOFF="grey" // farbe des schalters für OFF //let mySchedule=" */20 * * * * * "; //jede minute //--------------------------------------- //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 2 var htmlFeld1='Standort'; var Feld1lAlign="left"; // überschrift Tabellen Spalte1 und Ausrichtung left,right or center var htmlFeld2='Status'; var Feld2lAlign="center"; // überschrift Tabellen Spalte2 und Ausrichtung left,right or center //----------------------------------- //hier werden die styles für die tabelle definiert //ÜBERSCHRIFT ÜBER TABELLE let htmlUberschrift=false; // mit Überschrift über der tabelle let htmlSignature=false; // anstatt der Überscghrift eine signature: - kleiner - anliegend const htmlFeldUeber='Batterie Zustand Sensoren'; // Überschrift und Signature const htmlFarbUber="black"; // Farbe der Überschrift const htmlSchriftWeite="normal"; // bold, normal - Fettschrift für Überschrift const htmlÜberFontGroesse="18px"; // schriftgröße überschrift //MEHRERE TABELLEN NEBENEINANDER let mehrfachTabelle=1; // bis zu 4 Tabellen werden nebeneinander geschrieben- verkürzt das Ganze, dafür etwas breiter - MÖGLICH 1,2,3,oder 4 !!! const trennungsLinie="2"; //extra trennungslinie bei mehrfachtabellen - evtl auf 0 stellen, wnn htmlRahmenLinien auf none sind const farbetrennungsLinie="white"; const htmlFarbZweiteTabelle="white"; // Farbe der Überschrift bei jeder 2.ten Tabelle const htmlFarbTableColorUber="#000000"; // Überschrift in der tabelle - der einzelnen Spalten //ÜBERSCHRIFT SPALTEN const UeberSchriftHöhe="35"; //Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe const LinieUnterUeberschrift="3"; // Linie nur unter Spaltenüberschrift - const farbeLinieUnterUeberschrift="white"; const groesseUeberschrift=16; const UeberschriftStyle="normal" // möglich "bold" //GANZE TABELLE let abstandZelle="1"; let farbeUngeradeZeilen="#000000"; //Farbe für ungerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2 let farbeGeradeZeilen="#151515"; //Farbe für gerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2 let weite="100%"; //Weite der Tabelle let zentriert=true; //ganze tabelle zentriert const backgroundAll="#000000"; //Hintergrund für die ganze Seite - für direkten aufruf oder iqontrol sichtber - keine auswirkung auf vis-widget const htmlSchriftart="Play-Regular"; //const htmlSchriftgroesse="22px"; //FELDER UND RAHMEN let UeberschriftSpalten=false; // ein- oder ausblenden der spatlen-überschriften const htmlFarbFelderschrift="#BDBDBD"; // SchriftFarbe der Felder const htmlFarbFelderschrift2="#D8D8D8"; // SchriftFarbe der Felder für jede 2te Tabelle const htmlFarbTableColorGradient1="#CDD163"; // Gradient - Hintergrund der Tabelle - Verlauffarbe const htmlFarbTableColorGradient2="#CDD163"; // Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf const htmlFarbTableBorderColor="acaa20"; // Farbe des Rahmen - is tdieser gleich den gradienten, sind die rahmen unsichtbar let htmlRahmenLinien="all"; // Format für Rahmen: MÖGLICH: "none" oder "all" oder "cols" oder "rows" const htmlSpalte1Weite="auto"; // Weite der ersten beiden Spalten oder z.b. 115px // HIER NICHTS ÄNDERN let borderHelpBottum; let borderHelpRight; let htmlcenterHelp; let htmlcenterHelp2; if(htmlRahmenLinien=="rows") {borderHelpBottum=1;borderHelpRight=0;} if(htmlRahmenLinien=="cols") {borderHelpBottum=0;borderHelpRight=1;} if(htmlRahmenLinien=="none") {borderHelpBottum=0;borderHelpRight=0;} if(htmlRahmenLinien=="all") {borderHelpBottum=1;borderHelpRight=1;} zentriert ? htmlcenterHelp="auto" : htmlcenterHelp="left"; zentriert ? htmlcenterHelp2="center" : htmlcenterHelp2="left"; const htmlZentriert='' const htmlStart= ""; //const htmlUeber= "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-weight: bold\">"+htmlFeldUeber+"</p>"; const htmlTabStyle= "<table class=\""+tabelleClass+"\">"; const htmlTabUeber1="<tr height=\""+UeberSchriftHöhe+"\" style=\"color:"+htmlFarbTableColorUber+"; font-size: "+groesseUeberschrift+"px; font-weight: "+UeberschriftStyle+" ; border-bottom: "+LinieUnterUeberschrift+"px solid "+farbeLinieUnterUeberschrift+" \">"; const htmlTabUeber3="</tr>"; const buttonScript = '<script> function setOnDblClickCustom( myvalue ) { var Self = this; var objID = myvalue; Self.servConn.getStates(objID, (error, states) => { console.log(states); Self.servConn.setState(objID, !states[objID].val); }); } </script>' ////NICHTS ÄNDERN - abhängig von den oben definierten _Spalten - in diesem Beispiel sind es 2 var htmlTabUeber2="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+"> "+htmlFeld1+" </td><td width="+htmlSpalte1Weite+" align="+Feld2lAlign+"> "+htmlFeld2+" </td>"; var htmlTabUeber2_1="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\"> "+htmlFeld1+" </td><td width="+htmlSpalte1Weite+" align="+Feld2lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\"> "+htmlFeld2+ " </td>"; //------------------------------------------------------ var htmlOut=""; var mix; var counter; var val1; var val0; var htmlTabUeber=""; function writeHTML(){ htmlOut=""; counter=-1; htmlTabUeber=""; switch (mehrfachTabelle) { case 1: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber3; break; case 2: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break; case 3: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber3; break; case 4: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break; }; if (!UeberschriftSpalten) {htmlTabUeber=""} //-------------------------------------------------------------------------------------------------------------------------------------------------- //---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------ //---------alle valx werte müssen von euch bestimmt werden - val0,val1 !!!--------------------------------------------------------------------- //-------------------------------------------------------------------------------------------------------------------------------------------------- for (var x=0;x<myList.length;x++){ counter++; if(myList[x][1]!=null){ val0 = myList[x][0]; val1 = myList[x][1] // log(val0) let valButton=myList[x][2] if (myList[x][3]){ val1 ? val1="<button style\=\"border:none\; background-color\:transparent\; value=\"toggle\" onclick=\"setOnDblClickCustom\(\'"+valButton+"\')\">"+"<img src="+symbolSwitchON +" height=\""+symbolHoehe+"\" width=\""+symbolBreite+"\">"+"</button>": val1="<button style\=\"border:none\; background-color\:transparent\; value=\"toggle\" onclick=\"setOnDblClickCustom\(\'"+valButton+"\')\">"+"<img src="+symbolSwitchOFF +" height=\""+symbolHoehe+"\" width=\""+symbolBreite+"\">"+"</button>"; } else{ val1 ? val1="<img src="+symbolSwitchON +" height=\""+symbolHoehe+"\" width=\""+symbolBreite+"\">" : val1="<img src="+symbolSwitchOFF +" height=\""+symbolHoehe+"\" width=\""+symbolBreite+"\">" } // if (val1==false) {val1="❌"} else{val1="✅"} tabelleBind() }; //Schleifen Ende - je nach schleifenart muss hier etwas geändert werden !!!!!!!!! } tabelleFinish(); //------------------------------------------------------------ //------------------------------------------------------------ //------------------------------------------------------------ // AB HIER NICHTS ÄNDERN - tabelle fertigstellen } // function ende //MAIN: writeHTML(); function tabelleBind(){ switch (mehrfachTabelle) { case 1: if(counter%2==0) { htmlOut=htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td class=\""+tabelleClassSpalte1+"\" align="+Feld1lAlign+"> "+val0+" </td><td align="+Feld2lAlign+"> "+val1+" </td></tr>"; break; } else { htmlOut=htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td class=\""+tabelleClassSpalte1+"\" align="+Feld1lAlign+"> "+val0+" </td><td align="+Feld2lAlign+"> "+val1+" </td></tr>"; break; } //------------------------------------- case 2: if(counter%4==0){ if(counter%2==0) {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\" ><td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+ ";\"align="+Feld2lAlign+"> "+val1+" </td>"; } else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+Feld2lAlign+" style=\"color:"+ htmlFarbFelderschrift2+"\"> "+val1+" </td></tr>";} break; }else{ if(counter%2==0) {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+ "px solid "+farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>"; } else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\" color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+Feld2lAlign+ " style=\"color:"+htmlFarbFelderschrift2+"\"> "+val1+" </td></tr>";} break;} //------------------------------------- case 3: if(counter%2==0) { if(counter%3==0 ) {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>"; } else { if(counter%3==1 ) { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+Feld2lAlign+ " style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\"> "+val1+" </td>";} else {htmlOut = htmlOut+"<td align="+Feld1lAlign+"> "+val0+" </td><td align="+Feld2lAlign+"> "+val1+" </td></tr>";} } break; }else{ if(counter%3==0 ) {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>"; } else { if(counter%3==1 ) { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+Feld2lAlign+ " style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\"> "+val1+" </td>";} else {htmlOut = htmlOut+"<td align="+Feld1lAlign+"> "+val0+" </td><td align="+Feld2lAlign+"> "+val1+" </td></tr>";} } break; } //------------------------------------- case 4: //counter=counter+8 if(counter%8==0) { if(counter%4==0) {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>"; } else {if(counter%4==1 ) { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+Feld2lAlign+ " style=\"color:"+htmlFarbFelderschrift2+"\"> "+val1+" </td>";} else {if(counter%4==3) { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+ Feld2lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"; color:"+htmlFarbFelderschrift2+ "\"> "+val1+" </td></tr>";} else {htmlOut = htmlOut = htmlOut+"<td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid " +farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>";}} } break;}else{ if(counter%4==0) {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>"; } else {if(counter%4==1 ) { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align="+Feld2lAlign+ " style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\"> "+val1+" </td>";} else {if(counter%4==3) { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"> "+val0+" </td><td align=" +Feld2lAlign+" style=\" color:"+htmlFarbFelderschrift2+"\"> "+val1+" </td></tr>";} else {htmlOut = htmlOut = htmlOut+"<td align="+Feld1lAlign+"> "+val0+" </td><td style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld2lAlign+"> "+val1+" </td>";}} } break; } } //switch ende } function tabelleFinish() { switch (mehrfachTabelle) { case 1: break; case 2: if(counter%2==0) htmlOut = htmlOut.replace(/<\/td>$/, '</td><td> </td><td> </td></tr>'); break; case 3: if(counter%3==2) htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>"); if(counter%3==1) htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>test </td><td> </td></tr>'); if(counter%3==0) htmlOut = htmlOut.replace(/<\/td>$/, "</td><td> </td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\"> </td><td> </td><td> </td></tr>"); break; case 4: if(counter%4==3) htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>"); if(counter%4==2) htmlOut = htmlOut.replace(/<\/td>$/, "</td><td> </td><td> </td></tr>"); if(counter%4==1) htmlOut = htmlOut.replace(/<\/td>$/, "</td><td> </td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\"> </td><td> </td><td> </td></tr>"); if(counter%4==0) htmlOut = htmlOut.replace(/<\/td>$/, "</td><td> </td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\"> </td><td> </td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\"> </td><td> </td><td> </td></tr>"); break; } var htmlUeber= "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: "+htmlÜberFontGroesse+"; font-weight:"+htmlSchriftWeite+ "\">"+htmlFeldUeber+"  Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</p>"; var htmlUnter= "<div style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 70%; text-align: right;\" >"+htmlFeldUeber+"  Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>" if (!htmlSignature) htmlUnter=""; //Ausgabe über VIS html widget - tabelle in datenpunkt schreiben - html tabelle ohne html header und body var htmlOutVIS=""; // htmlUberschrift ? htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>" : htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>"; if (htmlUberschrift) { zentriert ? htmlOutVIS=htmlZentriert+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript : htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript ; } else { zentriert ? htmlOutVIS=htmlZentriert+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript : htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript; } // log("bin raus aus tabelleBind"); if (braucheEinVISWidget) setState(dpVIS, htmlOutVIS ); var htmlUnter= "<div style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 80%; text-align: center; \" >"+htmlFeldUeber+"  Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>" if (!htmlSignature) htmlUnter=""; var htmlEnd="</table>"+htmlUnter+"</div></body>"; //mit oder ohne überschrift - zentriert oder links htmlUberschrift ? htmlOut=htmlStart+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd + buttonScript: htmlOut=htmlStart+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd+ buttonScript; //log(htmlOut); }Ich wäre dir sehr Dankbar wenn du dir das nochmal ansehen könntest
PS:
Wie kann ich hier im Forum eigentlich den Spoiler-Tag nutzenoh - ich glaube, ich habe etwas vergessen zu posten - daher kannst du nicht wissen, dass du die bilder verändern kannst
mein blockly sieht so aus:
ganzes blockly als import zum rauskopieren:
nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html
-
oh - ich glaube, ich habe etwas vergessen zu posten - daher kannst du nicht wissen, dass du die bilder verändern kannst
mein blockly sieht so aus:
ganzes blockly als import zum rauskopieren:
@liv-in-sky
Doch das hast du bei mir schon mit eingebautDas problem ist das ich da die Größe fix eingebe
Das heist überall wo ich die Tabelle dann einfüge habe ich den gleichen WertDa ich aber unterschiedliche Projekte für unterschiedliche Geräte habe ist das nicht so gut
z.B. auf dem iPad habe ich eine Icongröße von 45x45
und auf dem Smartphone nur 30x30Daher die Frage mit den Klassen
Meine Hard- & Software:
- MSI Cubi 5 10M-049DE mit Proxmox
- CC2652P Zigbee Stick
- Steckdosen mit Tasmota und Zigbee
- Lichtschalter mit Tasmota
- IKEA TRÅDFRI Glühbirnen
- Aqara Sensoren
-
@liv-in-sky
Doch das hast du bei mir schon mit eingebautDas problem ist das ich da die Größe fix eingebe
Das heist überall wo ich die Tabelle dann einfüge habe ich den gleichen WertDa ich aber unterschiedliche Projekte für unterschiedliche Geräte habe ist das nicht so gut
z.B. auf dem iPad habe ich eine Icongröße von 45x45
und auf dem Smartphone nur 30x30Daher die Frage mit den Klassen
@wszene wie siehts aus mit einer session - ist schneller und einfacher
nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html
-
@wszene wie siehts aus mit einer session - ist schneller und einfacher
Können wir machen gebe mir mal bitte noch 15min
-
@wszene wie siehts aus mit einer session - ist schneller und einfacher
Support us
444
Online32.4k
Benutzer81.5k
Themen1.3m
Beiträge