Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. HTML Tabelle für Shelly Device Übersicht

    NEWS

    • [erledigt] 15. 05. Wartungsarbeiten am ioBroker Forum

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    HTML Tabelle für Shelly Device Übersicht

    This topic has been deleted. Only users with topic management privileges can see it.
    • da_Woody
      da_Woody @liv-in-sky last edited by

      @liv-in-sky highfive.gif bin ja auch nur draufgekommen weil ich da ja schon von 1px auf 2px geändert hab...

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

        @dos1973
        @ ALL

        suche tester

        • erste zeile ist fest
        • suchleiste

        AApossis (22).gif

         //@liv-in-sky 2021  14.3.-10:11
        
        // DAS WIDGET IN DER VIS
        // das Standard html-Widget wird genutzt in der VIS - dazu den DP javascript.x.Tabellen@Liv.TestTabelleVIS.HTMLTableVis als binding angeben d.h.
        // im html-teil des widgets wird dier daten punkt in geschweiften klammern angegeben z.B. {javascript.0.Tabellen@Liv.TestTabelleVIS.HTMLTableVis}
        
        // @ts-ignore
        let braucheEinVISWidget=true;                          // bei true wird ein html-tabelle in einen dp geschrieben - siehe nächste zeile
        let  dpVIS="ShellyTabelleVIS"                            // WICHTIG wenn braucheEinVISWidget auf true gesetzt !!  Ist der Name zum datenpunkt anlegen
        let braucheEinJSON=false;                               // bei true wird ein html-tabelle in einen dp geschrieben - siehe nächste zeile
        let  dpJSON="ShellyTabelleJSON"                          // WICHTIG wenn braucheEinJSON auf true gesetzt !!   Ist der Name zum datenpunkt anlegen
        let mySchedule="  */15 * * * * ";                         // jede minute  
        
        //ZUSÄTZLICH VARIABLEN
        
        let sortierenEIN=true;
        let farbeInaktiverShelly="#5590CA"
        let welcheSortierung=2;          // je nach spalte von 0 bis 6
        let geteiteVersionsAnzeige=true; // version in spalte 7 wird 2-zeilig
        const schalterUmrahmung="0"                              //wenn überschriften buttons sind , den rahmen mit 0 wegmachen 
        let mitSerch=true;
        
        
        //---------------------------------------
        
        //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 3 - es MÜSSEN in allen Arrays die GLEICHE Anzahl für die Werte sein
        let htmlFeld=        ["NAME","IP","ONLINE","UPTIME","RSSI","ID","VERSION"];              // GLEICHE ANZAHL !! NAME/ÜBERSCHRIFT DER SPALTE
        let val=             ["true","true","true","true","true","true","true"];                 // GLEICHE ANZAHL !! SPALTE ANZEIGEN/AUSBLENDEN UND HIER SIND DIE  WERTE, DIE IN DER SCHLEIFE GEFILTERET WERDEN -  jeder val[x] muss unten in der schleife gesetzt werden !!
        let Feld1lAlign=     ["left","center","center","center","center","left","left"];         // GLEICHE ANZAHL !! AUSRICHTUNG IN DER SPALTE
        let htmlSpalte1Weite=["0px","0px","0px","0px","0px","0px","0px"];                        // GLEICHE ANZAHL !! BREITE DER SPALTE, wenn "0px" auto
        let schalterInSpaltenUeberschrift=[true,true,true,true,true,true,true];                  // WENN BUTTONS INSTALLIERT WERDEN - sonst false
        let symbolSchalter=              ["na","✓","✗"];        //ONLINE SYMBOLE         // SYMBOLE DER BUTTONS - standardmäßig sind die spaltennamen (htmlFeld) genutzt - werden im standard nicht genutzt
        //-----------------------------------
        
        //Symbole für Tabelle z.b.: ⚪  ⚫ ⭕  🔴 🔵 ⏱ 💀 👍 👎 📑 💲 👀 🔹 ✅ ❌ ⚠️ mehr: https://emojiterra.com/de/ oder https://unicode-table.com/de/html-entities/
        
        //hier werden die styles für die tabelle definiert
        //ÜBERSCHRIFT ÜBER TABELLE
        const htmlUberschrift=true;                             // mit Überschrift über der tabelle
        const htmlSignature=true;                               // anstatt der Überscghrift eine signature: - kleiner - anliegend
        const htmlFeldUeber='Shelly Übersicht';                // für Überschrift und Signature falls htmlUberschrift und htmlSignature ist true
        const htmlFarbUber="white";                              // Farbe der Überschrift
        const htmlSchriftWeite="normal";                         // bold, normal - Fettschrift für Überschrift
        const htmlUEberFontGroesse="18px";                       // schriftgröße überschrift
        //SEITENLEISTE
        const ichWillSeitenLeiste=true;                          // links einblenden einer Seitenleiste
        const nameSeitenLeiste="SHELLY"
        const breiteSeitenleiste=35;
        const schriftGroesseSeitenleiste=18;
        const abstandSeitentextVonOben=4;
        const htmlFarbSeiteSchrift="white";
        const htmlBackgroundFarbeSeitenliste="blue";
        //BUTTON ÜBERSCHRIFT
        const htmlBackgroundButtonUeberschrift="transparent";
        //SUCHE
        const sucheEin=true;
        const sucheHoehe=30;
        //MEHRERE TABELLEN NEBENEINANDER
        let mehrfachTabelle=1;                                   // bis zu 3 Tabellen werden nebeneinander geschrieben-  verkürzt das Ganze, dafür etwas breiter - MÖGLICH 1,2,3 !!!
        const trennungsLinie=1;                                // extra trennungslinie bei mehrfachtabellen - evtl auf 0 stellen, wnn htmlRahmenLinien auf none sind
        const farbetrennungsLinie="#5590CA";                     // bei mehreren Tabellen nebeneinander wird ein Strich zw. den Tabellen gezogen
        const htmlFarbTableColorUber="white"                     // Spalten-Überschrift in der tabelle - für die einzelnen Spalten //"#BDBDBD"; 
        const htmlFarbZweiteTabelle="white";                     // Farbe der Spalten-Überschrift bei jeder 2.ten Tabelle        
        //ÜBERSCHRIFT SPALTEN - OBERSTE ZEILE IN TAB
        const UeberSchriftHoehe=40;                            // Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe
        const LinieUnterUeberschrift="1";                        // Liniehoehe nur unter Spaltenüberschrift  
        const farbeLinieUnterUeberschrift="blue";               // LinienFarbe unter Spaltenüberschrift
        const groesseUeberschrift=16; 
        const UeberschriftStyle="normal"                         // möglich "bold"
        const UeberschriftSpalten=true;                          // ein- oder ausblenden der spatlen-überschriften
        //GANZE TABELLE
        const abstandZelle="7";                                  // legt den abstand in den zellen zum rahmen fest
        const zeilenAbstand=40;                                   // legt den abstand zwischen den zeilen fest
        const farbeUngeradeZeilen="#2F2F2F";                     // Farbe für ungerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2 - bei "transparent" gewinnt htmlFarbTableColorGradient1
        const farbeGeradeZeilen="#3c3c3c"//"#151515";            // Farbe für gerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2   - bei "transparent" gewinnt htmlFarbTableColorGradient2
        let weite="1000";                                        // Weite der Tabelle - verhindert das dynamische breiter werden, wenn werte unterschiedliche werte haben
        let hoeheTabelle=387;
        const zentriert=true;                                    // ganze tabelle zentriert im html Widget - muss in pixel angegeben werden oder "auto"
        const backgroundAll="#000000";                           // Hintergrund für die ganze Seite - für direkten aufruf oder iqontrol sichtber - keine auswirkung auf vis-widget
        const htmlSchriftart="Ubuntu-Regular"                    // "Jura-DemiBold"   //"RobotoCondensed-Bold"   //"Helvetica"; .....
        const htmlSchriftgroesse="16px";                         // schriftgröße in den zellen
        const rahmenBreite="1px";                                //mit 0 ist äußerer rahmen weg
        //FELDER UND RAHMEN
        const htmlFarbFelderschrift="#CBCBCA";                   // SchriftFarbe der Felder
        const htmlFarbFelderschrift2="#CBCBCA";                  // SchriftFarbe der Felder für jede 2te Tabelle
        const htmlGragient=[150,30,70];                          // einstellung des gradienten
        const htmlFarbTableColorGradient1="#265686";             // Gradient - Hintergrund der Tabelle - Verlauffarbe
        const htmlFarbTableColorGradient2="#5590CA";              // Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf
        const htmlFarbTableBorderColor="grey";                   // Farbe des Rahmen - ist dieser gleich den gradienten, sind die rahmen unsichtbar
        let htmlRahmenLinien="none";                             // Format für Rahmen: MÖGLICH: "none" oder "all" oder "cols" oder "rows"
        
        // falls eine extra html datei gebraucht wird
        const path = "/htmlexample.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
        
        // AB HIER NICHTS  ÄNDERN -------------------------------------------------------------------------------------------------
        // AB HIER NICHTS  ÄNDERN -------------------------------------------------------------------------------------------------
        // AB HIER NICHTS  ÄNDERN ---------------------------------erst wieder ab Zeile 134----------------------------------------
        
        let borderHelpBottum;
        let borderHelpRight;
        let htmlcenterHelp;
        let htmlcenterHelp2;
        
        if(String(htmlRahmenLinien)=="rows") {borderHelpBottum=1;borderHelpRight=0;}
        if(String(htmlRahmenLinien)=="cols") {borderHelpBottum=0;borderHelpRight=1;}
        if(String(htmlRahmenLinien)=="none") {borderHelpBottum=0;borderHelpRight=0;}
        if(String(htmlRahmenLinien)=="all")  {borderHelpBottum=1;borderHelpRight=1;}
        zentriert ? htmlcenterHelp="auto" : htmlcenterHelp="left";
        zentriert ? htmlcenterHelp2="center" : htmlcenterHelp2="left";
        //px   
        let last
        let adad=0
        if(weite=="auto") {weite="100%"} // else{for (let i=0;i<htmlSpalte1Weite.length-1;i++){ adad=adad+Number(htmlSpalte1Weite[i].replace("px","")) ;log(" ### "+adad.toString())} 
                             //last= Number(weite) -adad  ; log(last.toString())          }  
        
        
        //let hoeheTabelle2=hoeheTabelle-Number(UeberSchriftHoehe)-Number(trennungsLinie)
        let hoeheTabelleKorrigiert=hoeheTabelle+22                                               //border-spacing:"+abstandZelle+"px; padding:"+zeilenAbstand+"px;
        
                                      let trHelperClass=" ";
        for (let jj=0;jj<Feld1lAlign.length;jj++) {  //"td:nth-child(1) {width: "+htmlSpalte1Weite[0]+"}"+"td:nth-child(2) {width:"+htmlSpalte1Weite[1]+"}"+
               trHelperClass= trHelperClass+ " .scrollContent"+dpVIS+" td"+":nth-of-type("+(jj+1)+") {width: "+htmlSpalte1Weite[jj]+"; text-align: "+Feld1lAlign[jj]+" }"
         }
         //log(trHelperClass)
        
        let bkgDiv=`background:
        radial-gradient(black 15%, transparent 16%) 0 0,
        radial-gradient(black 15%, transparent 16%) 8px 8px,
        radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
        radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
        background-color:#282828;
        background-size:16px 16px;`;
        
        let scrollBar=` .thescroller${dpVIS}::-webkit-scrollbar { width: 5px;}
        .thescroller${dpVIS}::-webkit-scrollbar-track {background: transparent; width: 5px;}
        .thescroller${dpVIS}::-webkit-scrollbar-thumb {border-radius: 40px; border: transparent ; background: ${htmlFarbTableColorGradient1}; }`
        
        let htmlZentriert=   "<style>"+
                   /*weite*/          " .divWeiten"+dpVIS+" {  width: "+weite+"px }"+
                   /*thead*/          " .fixedHeader"+dpVIS+" { position: sticky; top: 0px ; overflow-y:auto; overflow-x: hidden; width: 100%;  height: "+UeberSchriftHoehe+"px; border-bottom: "+LinieUnterUeberschrift+"px solid "+farbeLinieUnterUeberschrift+";"+
                                                      " font-family:"+htmlSchriftart+"\;  color:"+htmlFarbTableColorUber+"; "+  //  border-spacing:"+abstandZelle+"px;
                                                      " font-size: "+groesseUeberschrift+"px; font-weight: "+UeberschriftStyle+";  background-image: linear-gradient("+htmlGragient[0]+"deg,"+htmlFarbTableColorGradient2+" "+htmlGragient[1]+"%,"+htmlFarbTableColorGradient1+" "+htmlGragient[2]+"%); }"+ //
                   /*tbody */         " .scrollContent"+dpVIS+" { width: 100%;  overflow-y: scroll;   }"+ // height: "+hoeheTabelle2+"px; 
                   /*div*/            " .tableContainer"+dpVIS+" {  display: flex;  height: "+hoeheTabelle+"px; width: "+weite+"px; overflow-y:auto; overflow-x: hidden ; "
                                                                 +bkgDiv+" }"+  // position: sticky; top: 0; background-color: black;
                   /*seitenl*/        " .seitenleiste"+dpVIS+" { background-image: linear-gradient("+htmlGragient[0]+"deg,"+htmlFarbTableColorGradient2+" "+htmlGragient[1]+"%,"+htmlFarbTableColorGradient1+" "+htmlGragient[2]+"%); color: " //background-color: "+htmlBackgroundFarbeSeitenliste+";
                                                                 +htmlFarbSeiteSchrift+ ";font-size:"+schriftGroesseSeitenleiste+"px; vertical-align:top; text-align:center; width: "+breiteSeitenleiste+"px}"+  //margin-top: 30px;
                                      " .flexContainer"+dpJSON+" {display: flex; width: "+weite+"px}"+                        
                   /*table*/          " .tablezusatz"+dpVIS+" {  border:"+rahmenBreite+";  "+  //table-layout: fixed;
                                                     "width:100%; color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+";"+
                                                     "font-family:"+htmlSchriftart+"; background-image: linear-gradient("+htmlGragient[0]+"deg,"+htmlFarbTableColorGradient2+" "+htmlGragient[1]+"%,"+htmlFarbTableColorGradient1+" "+htmlGragient[2]+"%); }"+
                                      " .mythclass0"+dpVIS+" {    }"+  //text-align:"+Feld1lAlign[0]+"
                                      " .mythclass1"+dpVIS+" {   }"+
                                      " .mythclass2"+dpVIS+" {   }"+
                                      " .mythclass3"+dpVIS+" {  }"+
                                      " .mythclass4"+dpVIS+" {  }"+
                                      " .mythclass5"+dpVIS+" {  }"+
                                      " .mythclass6"+dpVIS+" {   }"+ //
                                    //  " table head tr {  position: sticky; top: 0px ;  }"+ // 
                                    //  " th {position: sticky; top: 0px ; height: "+UeberSchriftHoehe+"px; background-image: linear-gradient("+htmlGragient[0]+"deg,"+htmlFarbTableColorGradient2+" "+htmlGragient[1]+"%,"+htmlFarbTableColorGradient1+" "+htmlGragient[2]+"%); }"+  //position: sticky; top: 0px ;
                                      " .myclassueber_spalte_button     {color:"+htmlFarbTableColorUber+"}"+
                                      " .myclassueber_spalte_ohne_button{color:"+htmlFarbTableColorUber+"}"+
                                      " .scrollContent"+dpVIS+" td {padding: "+abstandZelle+"px;}"+
                                      " .myTHclass"+dpVIS+" {position: sticky; top: 0px ; height: "+UeberSchriftHoehe+"px; background-image: linear-gradient("+htmlGragient[0]+"deg,"+htmlFarbTableColorGradient2+" "+htmlGragient[1]+"%,"+htmlFarbTableColorGradient1+" "+htmlGragient[2]+"%);}"+
                                      " .myTRclass"+dpVIS+" {}"+
                                      " .myclasstr_gerade"+dpVIS+" { height:"+zeilenAbstand+"px; background-color:"+farbeGeradeZeilen+"}"+  //border-spacing:"+abstandZelle+"px; 
                                      " .myclasstr_ungerade"+dpVIS+" {  height:"+zeilenAbstand+"px;  background-color:"+farbeUngeradeZeilen+"}"+ //border-spacing:"+abstandZelle+"px;
                                      " .myclasstd_normal"+dpVIS+" {}"+
                                      " .myclasstd_trennungslinie"+dpVIS+" {}"+
                                      " .myinputclass"+dpVIS+" {width: "+weite+"px; border: 1px solid; border-color: "+htmlFarbTableColorGradient2+"; margin-bottom: 15px;  color: "+htmlFarbTableColorUber+
                                                               "; height: "+sucheHoehe+"px; background-image: linear-gradient("+htmlGragient[0]+"deg,"+htmlFarbTableColorGradient2+" "+htmlGragient[1]+"%,"+htmlFarbTableColorGradient1+" "+
                                                               htmlGragient[2]+"%); font-family:"+htmlSchriftart+"\; font-size: 110%; color: "+htmlFarbTableColorUber+"}"+
                                   trHelperClass+scrollBar+
                                 //     " .thescroller"+dpVIS+"::-webkit-scrollbar {width: 0px; }"+
                                      "</style>"+'<center>'
        
        
        
        
        
        const htmlStart=    "<!DOCTYPE html><html lang=\"de\"><head><title>Vorlage</title><meta http-equiv=\"content-type\" content=\"text/html;  http-equiv=\"refresh\" content=\"30\"; charset=utf-8\">"+
                           "<style> * {  margin: 0;} body {background-color: "+backgroundAll+"; margin: 0 auto;  }"+
                           " p {padding-top: 10px; padding-bottom: 10px; text-align: "+htmlcenterHelp2+"}"+
                          // " div { margin: 0 auto;  margin-left: auto; margin-right: auto;}"+
                           " td { padding:"+abstandZelle+"px; border:0px solid "+htmlFarbTableBorderColor+";  border-right:"+borderHelpRight+"px solid "+htmlFarbTableBorderColor+";border-bottom:"+borderHelpBottum+"px solid "+htmlFarbTableBorderColor+";}"+ 
                           " table { width: "+weite+";  margin: 0 "+htmlcenterHelp+"; border:1px solid "+htmlFarbTableBorderColor+"; border-spacing=\""+abstandZelle+"0px\" ; }"+   // margin macht center
                           "td:nth-child(1) {width: "+htmlSpalte1Weite[0]+"}"+"td:nth-child(2) {width:"+htmlSpalte1Weite[1]+"}"+
                           " </style></head><body> <div>";
        //const htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-weight: bold\">"+htmlFeldUeber+"</p>";   
        
          let einmalAbstand=`</br>
        `
         let seitenLeistenTest="";
         for (let f=0;f<abstandSeitentextVonOben;f++){ 
             seitenLeistenTest=seitenLeistenTest+`<br>
        `}
         for (let i=0;i<nameSeitenLeiste.length;i++){
             seitenLeistenTest=seitenLeistenTest+nameSeitenLeiste[i]+`<br>
        `
        }
        
         let htmlSeitenleiste="";
         if (ichWillSeitenLeiste) htmlSeitenleiste= "<div class=\"flexContainer"+dpJSON+"\"> <div class=\"seitenleiste"+dpVIS+"\">"+seitenLeistenTest+"</div>" ;// htmlTabUeber1=htmlTabUeber1+
        let searchMe="";
        sucheEin ? searchMe="<div class=\"divWeiten"+dpVIS+"\"><input class=\"myinputclass"+dpVIS+"\" type=\"search\" id=\"search"+dpVIS+"\" placeholder=\"Filter by Title\""+">"+"</div>" :
                   searchMe=""     
        searchMe=searchMe+htmlSeitenleiste
        let htmlTabStyle= "<div class=\"tableContainer"+dpVIS+" thescroller"+dpVIS+"\" >"+
                           "<table class=\"tablezusatz"+dpVIS+"\" rules=\""+htmlRahmenLinien+"\">"+
                           "<thead class=\"fixedHeader"+dpVIS+"\">"
                         //  "<table class=\"tablezusatz"+dpVIS+"\" bordercolor=\""+htmlFarbTableBorderColor+"\" border=\""+rahmenBreite+"\" cellspacing=\""+abstandZelle+"\" cellpadding=\""+zeilenAbstand+"\" width=\""+weite+"\" rules=\""+htmlRahmenLinien+"\" style=\"color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+
                         //     "; font-family:"+htmlSchriftart+";background-image: linear-gradient("+htmlGragient[0]+"deg,"+htmlFarbTableColorGradient2+" "+htmlGragient[1]+"%,"+htmlFarbTableColorGradient1+" "+htmlGragient[2]+"%);\"><thead class=\"fixedHeader"+dpVIS+"\">";
        
        let htmlTabUeber4="<tr class=\"myTRclass"+dpVIS+"\">";
        //let htmlTabUeber4="<tr cellspacing=\""+abstandZelle+"\" font-family:\""+htmlSchriftart+"\"  height:"+UeberSchriftHoehe+"px; color:"+htmlFarbTableColorUber+"; font-size: "+groesseUeberschrift+"px; font-weight: "+UeberschriftStyle+" ;  border-bottom: "+LinieUnterUeberschrift+"px solid "+farbeLinieUnterUeberschrift+" \">";
        const htmlTabUeber3="</tr></thead><tbody class=\"scrollContent"+dpVIS+"\" > ";
        
           let valSpalte=[] ;
           for(let kk=0;kk<val.length;kk++){
             valSpalte.push(val[kk])
           }
        
           let spaltenAnzeigeScript=`$(document).ready(function() { `
           let spaltenAnzeigeScriptEnd=` });` ;
        for (let ff=0;ff<valSpalte.length;ff++){
                                               // log(valSpalte[ff]); 
                                                if (valSpalte[ff]=="false") { 
                                                 ichWillSeitenLeiste?   spaltenAnzeigeScript=spaltenAnzeigeScript.concat(`$('td:nth-child(${(ff)+1}).toDel${dpVIS},th:nth-child(${(ff)+2}).toDel${dpVIS}').hide();`) :
                                                                        spaltenAnzeigeScript=spaltenAnzeigeScript.concat(`$('td:nth-child(${(ff)+1}).toDel${dpVIS},th:nth-child(${(ff)+1}).toDel${dpVIS}').hide();`) }
                                                }
        
        const buttonScript =   '<script> function setOnOtherValue(myval) {	var Self = this;	Self.servConn.getStates(myval, (error, states) => {  console.log(states); self.servConn.setState(myval, !states[myval].val);}  )}; '
                             +'$( "button" ).click(function() {  $( this ).slideUp() });' //'[class*="test"]' [class~="value"]   "[class~='gerade']"
                             + `var allRows = $("[class*='gerade${dpVIS}']");  $("input#search${dpVIS}").on("keydown keyup", function() {  allRows.hide();  $("tr:contains('" + $(this).val() + "')").show();});`
                             +   spaltenAnzeigeScript  +  spaltenAnzeigeScriptEnd  
                             +'</script>'
        
        let aktiv=0; let inaktiv=0;
        
        
        let  htmlTabUeber2_1=""
        for (let ue=0;ue<htmlSpalte1Weite.length;ue++) { htmlTabUeber2_1=htmlTabUeber2_1.concat("<td style=\"color:"+htmlFarbZweiteTabelle+"\">"+htmlFeld[ue]+"</td>")}
        
        //------------------------------------------------------
        if ( !(val.length == Feld1lAlign.length && htmlSpalte1Weite.length == htmlFeld.length && val.length == htmlFeld.length) || (mehrfachTabelle<1 || mehrfachTabelle>3) ) 
             { log("Anzahle der Definitions Arrays sind ungleich ODER mehrfachTabelle ist falsch - Script wurde gestoppt !!!","error");
                 // @ts-ignore
                 stopScript();}
        
        let langeGesamt=0; 
        let htmlTabUeber="";
        let htmlOut="";
        let mix;
        let counter;
        let makeJsonWidget;
        let myObject=[];
        
        let mitAlphabet=false;
        
        needDP();
        
        function writeHTML(){
            aktiv=0;  inaktiv=0;
        let seitenLeistenTest="";
        let htmlTabUeber1=htmlTabUeber4
        myObject=[]
        let helperLeerzeile=""
        let makeJsonWidget=[];
        htmlOut="";
        counter=-1;
        
        //--------------------------------------------------------------------------------------------------------------------------------------------------
        //---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------
        //---------alle val[x] werte müssen von euch bestimmt werden - val[0],val[1],val[2] !!!-------------------------------------------------------------
        //--------------------------------------------------------------------------------------------------------------------------------------------------
        
        let valueuptime
        
        $('shelly.*.*.name').each(function(id, i) {           // hier eigene schleife definieren und den wert counter++ nicht vergessen  !!!
             
        
        
                  var ida = id.split('.');
             
               //   if(existsState(id) && existsState(id.replace("alive","uptime"))) {
        
                  getState(id).val!=null &&  getState(id).val!="" && getState(id).val!=undefined ?val[0]=getState(id).val : val[0]=" --- ";
                 
                 if (existsState(id.replace("name","hostname"))) val[1]=getState(id.replace("name","hostname")).val;
                 if (existsState(id.replace("name","online"))) val[2]=getState(id.replace("name","online")).val;
                 if (existsState(id.replace("name","uptime"))) val[3]=getState(id.replace("name","uptime")).val;
                 valueuptime=(Number(val[3].replace(/.*?([0-9][0-9]?)\:.*/,"$1"))*60*60)+
                                  (Number(val[3].replace(/.*?[0-9][0-9]?\:([0-9][0-9]?)\:.*/,"$1"))*60)+
                                  (Number(val[3].replace(/.*?[0-9][0-9]?\:[0-9][0-9]?\:([0-9][0-9]?).*/,"$1")))
                               //   log(typeof val[3].replace(/^(.+)D.+/,"$1"))
                                  if( !val[3].replace(/^(.+)D.+/,"$1").includes(":")) valueuptime=valueuptime+Number(val[3].replace(/^(.+)D.+/,"$1"))*24*60*60
                                 // log(valueuptime.toString()+"  ----" +val[3].replace(/^(.+)D.+/,"$1"))
        
                 if (existsState(id.replace("name","rssi"))) val[4]=getState(id.replace("name","rssi")).val;
                 if (existsState(id.replace("name","id"))) val[5]=getState(id.replace("name","id")).val;
        
                 if (existsState(id.replace("name","version"))) val[6]=getState(id.replace("name","version")).val;                   
             
        
                myObject.push({                "value0" : val[0],            //  "INSTANCE"
                                               "value1" : val[1],            //  "SINCE"
                                               "value2" : val[2],            //  "STATUS"
                                               "value3" : val[3],            //  "INSTANCE"
                                               "value4" : val[4],            //  "SINCE"
                                               "value5" : val[5],
                                               "value6":  val[6],
                                               "valueuptime": valueuptime
                                                  //   ID
                                                               })
                       
                  makeJsonWidget.push({        [htmlFeld[0]] : val[0],  //  "INSTANCE"
                                               [htmlFeld[1]] : val[1],  //  "SINCE"
                                               [htmlFeld[2]] : val[2],   //  "STATUS"
                                               "vallly"      : getState(id).val
                                                               })  
                
                  
                 
                                                         // diese function muss als letztes in der eigenen schleife aufgerufen werden
           });                                            // Schleifen Ende - je nach schleifenart muss hier etwas geändert werden !!!!!!!!!
        
          // Sortierungen---------------------------------------------------------
          //welcheSortierung=3
          
         
          if( sortierenEIN && (welcheSortierung==3 || welcheSortierung==4 || welcheSortierung==1)    ) {
                     if(welcheSortierung==3) myObject.sort(function (alpha, beta) { return  Number(beta["value4"]) -Number(alpha["value4"]);   }); 
                     if(welcheSortierung==4) myObject.sort(function (alpha, beta) { /*log(beta.valueuptime+" --" +alpha.valueuptime);*/ return  beta.valueuptime -alpha.valueuptime;   });
                     if(welcheSortierung==1)   myObject.sort( function( a, b )   {
                                                 	a = a["value1"].split( '.' );
                                                 	b = b["value1"].split( '.' );
                                               	for( var i = 0; i < a.length; i++ )	{
           	                                 	if( ( a[i] = parseInt( a[i] ) ) < ( b[i] = parseInt( b[i] ) ) )
           	                         		return -1;	else if( a[i] > b[i] )
           	                            	return 1;}  	return 0;} );                                      
        
                     } else {
            switch (welcheSortierung) {
               case 0: sortMe("alpha","value0");break;  
               case 1: break;
               case 2: sortMe("bool","value2");break;  
               case 3: break;  
               case 4: break;  
               case 5: sortMe("alpha","value5");break; 
               case 6: sortMe("alpha","value6");break;
            }   }
        
           for(let zz=0;zz<myObject.length;zz++){
        
         // Unterüberschften ------------------------------------------------------       
                if (mitAlphabet){
                  if( myObject[zz].value0[0]!=helperLeerzeile){ tabelleAusbessern();
                                                                counter=-1;  for(let ic=0;ic<mehrfachTabelle;ic++ ) { for (let tt=0 ;tt<val.length;tt++) 
                                                                                                                          { tt==0 && ic==0 ? val[tt]=(myObject[zz].value0[0]).toUpperCase() : val[tt]="&ensp;"
                                                                                                                          }   
                                                                                                                      counter++;tabelleBind();langeGesamt++; }
                  helperLeerzeile=myObject[zz].value0[0] } ; sortierenEIN=false;}
        
         // Zuteilung der Tabellenspalten-------------------------------------------
        
            val[0]=myObject[zz].value0;
            val[1]=myObject[zz].value1;
            val[2]=myObject[zz].value2;
            let regH=myObject[zz].value3.trim().replace(/^(.+)[C-E].+?$/,"$1 d")
            if(regH.includes(":")) regH="";
            //log(myObject[zz].value3.replace(reg,"$1 d"))
            geteiteVersionsAnzeige ? val[3]=( (myObject[zz].value3.replace(/.+D(.+)/,"$1"))+"</br>"+regH)  :  val[3]=myObject[zz].value3.replace(/(.+D)(.*)/,"$2 +$1");
            val[4]=myObject[zz].value4+" dB";
            val[5]=myObject[zz].value5;
            geteiteVersionsAnzeige ? val[6]=myObject[zz].value6.replace(/^(.+?)\/(.+)/,"$1</br>$2")  : val[6]=myObject[zz].value6;  
            
        
            
           if (!myObject[zz].value2) {val[2]=symbolSchalter[2];inaktiv++}
            if (myObject[zz].value2)  {val[2]=symbolSchalter[1];aktiv++}
           //  if(getState("javascript." + instance +".Tabellen@Liv."+dpVIS+".Spalte2").val) { val[2]=myObject[zz].value2} 
            if (!myObject[zz].value2) {     val[0]="<font color=\""+farbeInaktiverShelly +"\">"+val[0]+"</font>";
                                           val[1]="<font color=\""+farbeInaktiverShelly +"\">"+val[1]+"</font>";
                                           val[2]="<font color=\""+farbeInaktiverShelly +"\">"+val[2]+"</font>";
                                           val[3]="<font color=\""+farbeInaktiverShelly +"\">"+val[3]+"</font>";
                                           val[4]="<font color=\""+farbeInaktiverShelly +"\">"+val[4]+"</font>";
                                           val[5]="<font color=\""+farbeInaktiverShelly +"\">"+val[5]+"</font>";
                                           val[6]="<font color=\""+farbeInaktiverShelly +"\">"+val[6]+"</font>";
        
                                      }  
             counter++;                                       // SEHR WICHTIG - MUSS IN JEDER SCHLEIFE INTEGRIERT SEIN
             tabelleBind();                                   // HIER NICHTS ÄNDERN : HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT  
             langeGesamt++;                                   // WICHTIG Seitenleiste
           }
        
        //-------------------------------------------------------------------------------------------------------------------------------------------------
        //--------------------------------------------------Ende der schleife------------------------------------------------------------------------------
        //-------------------------------------------------------------------------------------------------------------------------------------------------
        
        // Seitenleiste------------------------------------------------------------   
          let htmlTabUeber2=""
          
        let langeSpalten=htmlSpalte1Weite.length;
        for (let ue=0;ue<htmlSpalte1Weite.length;ue++) { if (!schalterInSpaltenUeberschrift[ue] ) { 
                           htmlTabUeber2=htmlTabUeber2.concat("<td  style=\"color:"+htmlFarbTableColorUber+"\">"+htmlFeld[ue]+"</td>")} 
                           else {let valButton="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte"+ue;
                            if(ue==htmlSpalte1Weite.length-1) {htmlTabUeber2=htmlTabUeber2.concat("<th class=\"myTHclass"+dpVIS+" toDel"+dpVIS+"\" >"+
                                                                          "<button class=\"myButt"+dpVIS+"\" style=\" border-radius: 4px; border:"+schalterUmrahmung+"px solid; background-color\: "+htmlBackgroundButtonUeberschrift+"\; color: "
                                                                          +htmlFarbTableColorUber+"; font-family: "+htmlSchriftart+"; font-size :"+groesseUeberschrift+"px; text\-align:left\" value=\"toggle\" onclick=\"setOnOtherValue\(\'"+valButton+"\')\">"
                                                                          +htmlFeld[ue]+"</button>"+" <font style=\"; font-weight: normal; font-size :"+groesseUeberschrift+"; color: "+htmlFarbTableColorUber+"; font-family: "+htmlSchriftart+";\" > &ensp;&ensp;&ensp;&ensp;("+aktiv+"\/"+(aktiv+inaktiv)+")</th>")} else{
                                               htmlTabUeber2=htmlTabUeber2.concat("<th class=\"myTHclass"+dpVIS+" toDel"+dpVIS+"\">"+""
                                                                           +"<button class=\"myButt"+dpVIS+"\" style\=\" border-radius: 4px; border:"+schalterUmrahmung+"px solid; background-color\: "+htmlBackgroundButtonUeberschrift+"\; color: "
                                                                           +htmlFarbTableColorUber+"; font-family: "+htmlSchriftart+"; font-size :"+groesseUeberschrift+"px; text-align:left\" value=\"toggle\" onclick=\"setOnOtherValue\(\'"+valButton+"\')\">"
                                                                           +htmlFeld[ue]+"</button></th>")} } //symbolSchalter[ue]   
                              }
        let testing="<td  style=\" background-color: "+htmlBackgroundButtonUeberschrift+"; margin-top: 200px; color: "+htmlFarbSeiteSchrift+ ";font-size:"+schriftGroesseSeitenleiste+"px; vertical-align:top; text-align:center \" width=\""+breiteSeitenleiste+"\" rowspan=\""+(langeGesamt+1)+"\">"+seitenLeistenTest+"</td>"
        let testing2="<td  style=\" background-color: "+htmlBackgroundButtonUeberschrift+"; margin-top: 200px; color: "+htmlFarbSeiteSchrift+ ";font-size:"+schriftGroesseSeitenleiste+"px; vertical-align:top; text-align:center \" width=\""+((((Number(breiteSeitenleiste))/8).toFixed(0)))+"\" rowspan=\""+(langeGesamt+1)+"\">"+seitenLeistenTest+"</td>"
        let  htmlTabUeber2_1=""
        for (let ue=0;ue<htmlSpalte1Weite.length;ue++) { let valButton="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte"+ue;
           if(ue==htmlSpalte1Weite.length-1) {htmlTabUeber2_1=htmlTabUeber2_1.concat("<td class=\""+"toDel"+dpVIS+"\">"+""
                                                                           +"<button class=\"myButt"+dpVIS+"\" style\=\" border-radius: 4px; border:"+schalterUmrahmung+"px solid; background-color\: "+htmlBackgroundButtonUeberschrift+"\; color: "
                                                                           +htmlFarbTableColorUber+"; font-family: "+htmlSchriftart+"; font-size :"+groesseUeberschrift+"px; text-align:left\" value=\"toggle\" onclick=\"setOnOtherValue\(\'"+valButton+"\')\">"
                                                                           +htmlFeld[ue]+"</button></td>"+testing)}
           else{ if(ue==0){htmlTabUeber2_1=htmlTabUeber2_1.concat(testing2+"<td class=\""+"toDel"+dpVIS+"\">"+""
                                                                           +"<button class=\"myButt"+dpVIS+"\" style\=\" border-radius: 4px; border:"+schalterUmrahmung+"px solid; background-color\: "+htmlBackgroundButtonUeberschrift+"\; color: "
                                                                           +htmlFarbTableColorUber+"; font-family: "+htmlSchriftart+"; font-size :"+groesseUeberschrift+"px; text-align:left\" value=\"toggle\" onclick=\"setOnOtherValue\(\'"+valButton+"\')\">"
                                                                           +htmlFeld[ue]+"</button></td>")
        
        
           } else{
            htmlTabUeber2_1=htmlTabUeber2_1.concat("<td class=\"myButt"+dpVIS+"\">"+""
                                                                           +"<button class=\"myButt"+dpVIS+"\" style\=\" border-radius: 4px; border:"+schalterUmrahmung+"px solid; background-color\: "+htmlBackgroundFarbeSeitenliste+"\; color: "
                                                                           +htmlFarbTableColorUber+"; font-family: "+htmlSchriftart+"; font-size :"+groesseUeberschrift+"px; text-align:left\" value=\"toggle\" onclick=\"setOnOtherValue\(\'"+valButton+"\')\">"
                                                                           +htmlFeld[ue]+"</button></td>")}}  }
        
         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_1+htmlTabUeber3; break;
           case 4: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
          };   
          if (!UeberschriftSpalten) {htmlTabUeber=""}
        
              tabelleFinish(); 
              if (braucheEinJSON ) {setStateDelayed("javascript." + instance + ".Tabellen@Liv."+dpVIS+".JSONVis",JSON.stringify(makeJsonWidget),1000 )}
             
        } // function ende
        
        //MAIN:
         
        schedule(mySchedule,  function () { 
         writeHTML();
         if (braucheEinFile) {writeFile(home, path ,htmlOut, function (error) { /* log('file written');*/  });}
        }); 
        setTimeout(function () {writeHTML();  }, 2050);                                 
        
         function tabelleBind(){
          
           switch (mehrfachTabelle) { 
        
           case 1: if(counter%2==0)   {htmlOut=htmlOut+"<tr class=\"myclasstr_gerade"+dpVIS+" \">";
                                       for(let u=0;u<val.length;u++){ htmlOut=htmlOut.concat("<td class=\"myclasstd_normal"+dpVIS+" toDel"+dpVIS+"\">"+val[u]+"</td>"); // style=\"width:"+htmlSpalte1Weite[u]+"\" 
                                                                    }  htmlOut=htmlOut.concat("</tr>");   break;
        
                                       } else   {htmlOut=htmlOut+"<tr class=\"myclasstr_ungerade"+dpVIS+" \">";
                                                 for(let u=0;u<val.length;u++){ htmlOut=htmlOut.concat("<td class=\"myclasstd_normal"+dpVIS+" toDel"+dpVIS+"\">"+val[u]+"</td>"); //style=\"width:"+htmlSpalte1Weite[u]+"\" 
                                                                              }  htmlOut=htmlOut.concat("</tr>");   break;
                                       }
           
           case 2: if(counter%4==0){  if(counter%2==0)  {htmlOut = htmlOut+"<tr class=\"myclasstr_gerade"+dpVIS+" \">";
                                                         for(let u=0;u<val.length;u++){ if(u<val.length-1) {htmlOut=htmlOut.concat("<td class=\"myclasstd_normal"+dpVIS+" toDel"+dpVIS+"\">"+val[u]+"</td>");} else
                                                                                      {htmlOut=htmlOut.concat("<td class=\"myclasstd_trennungslinie"+dpVIS+"\" style=\" border-right:"+trennungsLinie+"px solid "+farbetrennungsLinie+ ";\">"+val[u]+"</td>")}
                                                                                      }  
                                                                                   
                                        } else { for(let u=0;u<val.length;u++){ htmlOut=htmlOut.concat("<td class=\"myclasstd_normal"+dpVIS+" toDel"+dpVIS+" toDel"+dpVIS+"\" style=\"color:"+htmlFarbFelderschrift2+"\">"+val[u]+"</td>");
                                                                              }  htmlOut=htmlOut.concat("</tr>");  } break;
                                   } else {
                                     if(counter%2==0)  {htmlOut=htmlOut+"<tr class=\"myclasstr_ungerade"+dpVIS+" \">";
                                                        for(let u=0;u<val.length;u++){  if(u<val.length-1) {htmlOut=htmlOut.concat("<td class=\"myclasstd_normal"+dpVIS+" toDel"+dpVIS+"\">"+val[u]+"</td>");} else
                                                                                     {htmlOut=htmlOut.concat("<td class=\"myclasstd_trennungslinie"+dpVIS+" toDel"+dpVIS+"\" style=\" border-right:"+trennungsLinie+"px solid "+farbetrennungsLinie+ ";\">"+val[u]+"</td>")}
                                                                                     }  
                                        } else {        for(let u=0;u<val.length;u++){ htmlOut=htmlOut.concat("<td class=\"myclasstd_normal"+dpVIS+" toDel"+dpVIS+"\" style=\"color:"+htmlFarbFelderschrift2+"\">"+val[u]+"</td>");
                                                                                     }  htmlOut=htmlOut.concat("</tr>");  }  break;}
        
           case 3: if(counter%2==0)  {  if(counter%3==0 ) {htmlOut = htmlOut+"<tr class=\"myclasstr_gerade"+dpVIS+" \">";
                                                           for(let u=0;u<val.length;u++){if(u<val.length-1) {htmlOut=htmlOut.concat("<td class=\"myclasstd_normal"+dpVIS+" toDel"+dpVIS+"\">"+val[u]+"</td>");} else
                                                                                        {htmlOut=htmlOut.concat("<td class=\"myclasstd_trennungslinie"+dpVIS+" toDel"+dpVIS+"\" style=\" border-right:"+trennungsLinie+"px solid "+farbetrennungsLinie+ ";\">"+val[u]+"</td>")}
                                                                                                                }  
                                       } else { if(counter%3==1)  {for(let u=0;u<val.length;u++){  if(u<val.length-1) {htmlOut=htmlOut.concat("<td class=\"myclasstd_normal"+dpVIS+" toDel"+dpVIS+"\" style=\"color:"+htmlFarbFelderschrift2+"\">"+val[u]+"</td>");} else
                                                                                                                      {htmlOut=htmlOut.concat("<td  style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+ "; color:"+htmlFarbFelderschrift2+"\">"+val[u]+"</td>")}
                                                                                                                }  
                                                                  } else  { for(let u=0;u<val.length;u++){  htmlOut=htmlOut.concat("<td class=\"myclasstd_normal"+dpVIS+" toDel"+dpVIS+"\">"+val[u]+"</td>");
                                                                                                         }  htmlOut=htmlOut.concat("</tr>");  } }  break;
                                     } 
                                     else {
                                        if(counter%3==0 )  {htmlOut = htmlOut+"<tr class=\"myclasstr_ungerade"+dpVIS+" \">";
                                                           for(let u=0;u<val.length;u++){ if(u<val.length-1) {htmlOut=htmlOut.concat("<td class=\"myclasstd_normal"+dpVIS+" toDel"+dpVIS+" toDel"+dpVIS+"\">"+val[u]+"</td>");} else
                                                                                                             {htmlOut=htmlOut.concat("<td class=\"myclasstd_trennungslinie"+dpVIS+" toDel"+dpVIS+" toDel"+dpVIS+"\" style=\" border-right:"+trennungsLinie+"px solid "+farbetrennungsLinie+ ";\">"+val[u]+"</td>")}
                                                                                                                }  
                                                                                                                
                                     } else{ if(counter%3==1 )  { for(let u=0;u<val.length;u++){ if(u<val.length-1) {htmlOut=htmlOut.concat("<td class=\"myclasstd_normal"+dpVIS+" toDel"+dpVIS+"\" style=\"color:"+htmlFarbFelderschrift2+"\">"+val[u]+"</td>");} else
                                                                                                                    {htmlOut=htmlOut.concat("<td  style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+ "; color:"+htmlFarbFelderschrift2+"\">"+val[u]+"</td>")}
                                                                                                                }  
                                                                 } else {        for(let u=0;u<val.length;u++){ htmlOut=htmlOut.concat("<td class=\"myclasstd_normal"+dpVIS+" toDel"+dpVIS+"\">"+val[u]+"</td>");
                                                                                                              }  htmlOut=htmlOut.concat("</tr>"); } } break;
                                     }                                        
        
        
                                        
                } //switch ende
        
        }
        
         function tabelleAusbessern() {         // bessert mei mehrfachtabellen die nicht vollen zeilenn aus - bevor die unterüberschriften kommen
        
        switch (mehrfachTabelle) {
                
               case 1:    break;
               case 2:    let helpMehrfach="</td>";
                          for(let w=0;w<val.length;w++){helpMehrfach=helpMehrfach.concat("<td>&ensp;</td>")};helpMehrfach=helpMehrfach.concat("</tr>")
                          if(counter%2==0)  htmlOut = htmlOut.replace(/<\/td>$/, helpMehrfach);
                          break;
               case 3:   let helpMehrfach2="</td>";
                         for(let w=0;w<val.length;w++){helpMehrfach2=helpMehrfach2.concat("<td>&ensp;</td>")};helpMehrfach2=helpMehrfach2.concat("</tr>")
                         if(counter%3==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");
                         if(counter%3==1)  htmlOut = htmlOut.replace(/<\/td>$/, helpMehrfach2);
                         let helpMehrfach3="</td>";
                         let helpMehrfach31="";for(let w=0;w<val.length;w++){helpMehrfach31=helpMehrfach31.concat("<td>&ensp;</td>")}
                         for(let w=0;w<val.length;w++){if(w<val.length-1) {helpMehrfach3=helpMehrfach3.concat("<td>&ensp;</td>")} else
                                                                 {helpMehrfach3=helpMehrfach3.concat("<td class=\"myclasstd_trennungslinie"+dpVIS+"\" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td>"+helpMehrfach31)}
                                                           };helpMehrfach3=helpMehrfach3.concat("</tr>")        
                         if(counter%3==0)  htmlOut = htmlOut.replace(/<\/td>$/, helpMehrfach3);  break; }}
        
         function tabelleFinish() {
        
        switch (mehrfachTabelle) {
                
               case 1:    break;
               case 2:    let helpMehrfach="</td>";
                          for(let w=0;w<val.length;w++){helpMehrfach=helpMehrfach.concat("<td>&ensp;</td>")};helpMehrfach=helpMehrfach.concat("</tr>")
                          if(counter%2==0)  htmlOut = htmlOut.replace(/<\/td>$/, helpMehrfach);
                          break;
               case 3:   let helpMehrfach2="</td>";
                         for(let w=0;w<val.length;w++){helpMehrfach2=helpMehrfach2.concat("<td>&ensp;</td>")};helpMehrfach2=helpMehrfach2.concat("</tr>")
                         if(counter%3==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");
                         if(counter%3==1)  htmlOut = htmlOut.replace(/<\/td>$/, helpMehrfach2);
                         let helpMehrfach3="</td>";
                         let helpMehrfach31="";for(let w=0;w<val.length;w++){helpMehrfach31=helpMehrfach31.concat("<td>&ensp;</td>")}
                         for(let w=0;w<val.length;w++){if(w<val.length-1) {helpMehrfach3=helpMehrfach3.concat("<td>&ensp;</td>")} else
                                                                 {helpMehrfach3=helpMehrfach3.concat("<td class=\"myclasstd_trennungslinie"+dpVIS+"\" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td>"+helpMehrfach31)}
                                                           };helpMehrfach3=helpMehrfach3.concat("</tr>")        
                         if(counter%3==0)  htmlOut = htmlOut.replace(/<\/td>$/, helpMehrfach3);  break; }
             
                var htmlUeber=    "<p  class=\"divWeiten"+dpVIS+"\" style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: "+htmlUEberFontGroesse+"; font-weight:"+htmlSchriftWeite+ "\">"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((new Date().getTime())), 'SS:mm:ss')+"</p>"; 
                if(mitSerch) htmlUeber=htmlUeber+searchMe
                var htmlUnter= "<div class=\"divWeiten"+dpVIS+"\" style=\"margin-top: 10px; color:"+htmlFarbUber+"; height: 30px; font-family:"+htmlSchriftart+"; font-size: 85%; text-align: center;\" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((new Date().getTime())), "SS:mm:ss");"</div>";
                
                if (!htmlSignature) htmlUnter="";
                     var htmlOutVIS="";
                     if (htmlUberschrift) 
                        { zentriert ? htmlOutVIS=htmlZentriert+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</tbody></table></div></div>"+htmlUnter+"</center>"+ buttonScript : htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</tbody></table></div></div>"+htmlUnter+"</center>"+ buttonScript ;
                    } else {
                       zentriert ?  htmlOutVIS=htmlZentriert+htmlTabStyle+htmlTabUeber+htmlOut+"</tbody></table></div></div>"+htmlUnter+"</center>"+ buttonScript :  htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</tbody></table></div></div>"+htmlUnter+"</center>"+ buttonScript;
                    }
                        
        
          // log("bin raus aus tabelleBind");
                   if (braucheEinVISWidget)  setStateDelayed("javascript." + instance + ".Tabellen@Liv."+dpVIS+".HTMLTableVis", htmlOutVIS ,1000);
        
         var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; height: 30px; font-size: 80%;  text-align: center; \" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((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 : htmlOut=htmlStart+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd;
         //log(htmlOut);
        
        
        }
        
        async function needDP(){
           for(let s=0;s<schalterInSpaltenUeberschrift.length;s++){ if(schalterInSpaltenUeberschrift[s]){
           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte"+s))) {
               await createStateAsync("Tabellen@Liv."+dpVIS+".Spalte"+s, false,{type: "boolean", name: "Schalter_Spalte"+s, role: "value", read: true, write: true, } ); } 
             }}
        
           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVIS+".HTMLTableVis"))) {
               await createStateAsync("Tabellen@Liv."+dpVIS+".HTMLTableVis", "empty",{type: "string", name: "HTML_Standard_Widget_mit_Binding", role: "value", read: true, write: true, } ); } 
            if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVIS+".JSONVis"))) {
               await createStateAsync("Tabellen@Liv."+dpVIS+".JSONVis", "",{type: "string", name: "JSON Format", role: "value", read: true, write: true, } ); }   
           
        
        
        
        }
          setTimeout(function () { 
        
           let arrTriggerSchalter=[]
           $("javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte*").each(function(id, i) {  
                  arrTriggerSchalter.push(id) 
           });
         //  log(arrTriggerSchalter.toString())
           on({id: arrTriggerSchalter, ack: false, change: "any"}, function (obj) { 
             //  log(obj.id)
             if (obj.id=="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte0") welcheSortierung=0;
             if (obj.id=="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte1" )  welcheSortierung=1 ;
             if (obj.id=="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte2" )  welcheSortierung=2; 
             if (obj.id=="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte4")  welcheSortierung=3;
             if (obj.id=="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte3" )  welcheSortierung=4;
             if (obj.id=="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte5") welcheSortierung=5;
             if (obj.id=="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte6" )  welcheSortierung=6; 
             
           //  log(String(mehrfachTabelle))
          setTimeout(function () {  
               writeHTML();
               if (braucheEinFile) {writeFile(home, path ,htmlOut, function (error) { /* log('file written');*/  });}
        }, 900);
            
        
             
           });}, 5050);
        
        
        //SORTIEREN
        function sortMe(myType,value){
        
        if(myType=="alpha" ){ myObject.sort(function (alpha, beta) {
                    if ((alpha[value].toString().toUpperCase()).trim() > (beta[value].toString().toUpperCase()).trim())
                       return 1;
                    if ((beta[value].toString().toUpperCase()).trim()> (alpha[value].toUpperCase().toString()).trim())
                       return -1;
                    return 0;
                   });}
        if(myType=="bool" ) {
             
          myObject .sort(function(x, y) { return x[value] - y[value] }); }       
        
        
          if(myType=="num" )   { myObject.sort(function (alpha, beta) {
                             return  beta[value] -alpha[value];   });}
        
        }
        
        
        
        
        

        wenn ihr dieses script zusätlich laufen lassen wollt, muss dpVIS geändert werden - einfach eine "2" anfügen - oder das alte script stoppen
        ansonsten werden die datenpunkte überschrieben

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

          @liv-in-sky gilt das nur für vis, oder auch für iqontrol?

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

            @da_woody du hast doch ein eigenes 🙂

            ich versuche gerade dieses script als template vorzubereiten - daher suche ich tester mit vis.

            aber du kannst ja mal versuchen, ob es funktioniert - du musst aber wieder das script mit dem sortieren ändern - ist nicht drin

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

              @liv-in-sky noe.png genug zu tun! lolo.gif
              bin grad am testen für @Stuebi die 1.10.0-rc5 von shelly

              liv-in-sky Stuebi 2 Replies Last reply Reply Quote 1
              • liv-in-sky
                liv-in-sky @da_Woody last edited by

                @da_woody

                kein problem - ich hoffe, da werden die datenpunkte nicht unbenannt oder anders ausgegeben

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

                  @liv-in-sky nope, bis jetzt nichts auffälliges...
                  bis jetzt mal test mit 1PM, dimmer1, 2.5. morgen werd ich mal produktiv die werksatt umstellen...

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

                    @da_woody

                    bin gerade am spielen

                    AApossis (22).gif

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

                      @liv-in-sky 👍 sieht ja legger aus!

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

                        @da_woody man muss ja was machen - scrounger schläft nicht mit seinen material design sachen 🙂

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

                          @liv-in-sky was mich irgendwie stört, daß bei der laufzeit die tage eine eigene zeile und erst danach kommen

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

                            @da_woody du siehst ja den "erl-könig" der tabelle - bin froh , dass die struktur soweit funktioniert - will ja auch noch bildchen integrieren usw...

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

                              @liv-in-sky schon klar, das ist mir aber schon bei meiner version aufgefallen...
                              45317998-301e-4df6-8c1d-eacf0ca0f99b-grafik.png

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

                                @da_woody das kommt daher, dass man, wenn man die version auf 2 zeilen macht , an dieser stelle dann etwas platz sparen kann

                                2 zeilen sind es dann ja eh - bei "geteiteVersionsAnzeige=false" ist das nicht so

                                Image 3.png

                                da_Woody 1 Reply Last reply Reply Quote 0
                                • Stuebi
                                  Stuebi @da_Woody last edited by

                                  @da_woody , super Danke fürs Testen der 1.10 Firmware! Das hilft mir extrem!!!

                                  da_Woody 1 Reply Last reply Reply Quote 1
                                  • da_Woody
                                    da_Woody @Stuebi last edited by

                                    @stuebi klar doch @Stuebi !

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

                                      @liv-in-sky brauchst dich nicht rechtfertigen! sind meine befindlichkeiten...
                                      für mein auge wäre das einzig logische 2D+01:13:59 oder statt + halt -

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

                                        @da_woody hatte ich auch probiert - aber dann ist die spalte nicht schön sortiert, weil es welche ohne D gibt. daher das D am ende, damit die zeile immer mit stunden anfängt

                                        schaut besser aus

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

                                          @liv-in-sky achso, deswegen... tja, der progger bischt du! 😉

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

                                            ich habe noch ein kleines problem festgestellt

                                            deshalb habe ich die abfrage aller shelly's geändert und plötzlich mehr geräte gefunden. im ersten post ist ein script, welches nun - hoffentlich - alle shellys aufzeigt.

                                            das design hat sich auch etwa geändert

                                            wenn ihr eurer altes script behalten wollt mußt ihr im neuen script den namen unter dpVIS ändern - sonnst nutzen beide scripte die selben datenpunkte

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            730
                                            Online

                                            31.6k
                                            Users

                                            79.5k
                                            Topics

                                            1.3m
                                            Posts

                                            13
                                            261
                                            27302
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo