Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. HTML Tabelle für Shelly Device Übersicht

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.5k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.1k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    2.7k

HTML Tabelle für Shelly Device Übersicht

Geplant Angeheftet Gesperrt Verschoben Visualisierung
261 Beiträge 13 Kommentatoren 42.3k Aufrufe 16 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • liv-in-skyL 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_WoodyD Offline
    da_WoodyD Offline
    da_Woody
    schrieb am zuletzt editiert von
    #88

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

    gruß vom Woody
    HAPPINESS is not a DESTINATION, it's a WAY of LIFE!

    liv-in-skyL 1 Antwort Letzte Antwort
    0
    • da_WoodyD da_Woody

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

      liv-in-skyL Offline
      liv-in-skyL Offline
      liv-in-sky
      schrieb am zuletzt editiert von
      #89

      @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

      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

      da_WoodyD 1 Antwort Letzte Antwort
      0
      • liv-in-skyL liv-in-sky

        @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_WoodyD Offline
        da_WoodyD Offline
        da_Woody
        schrieb am zuletzt editiert von
        #90

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

        gruß vom Woody
        HAPPINESS is not a DESTINATION, it's a WAY of LIFE!

        liv-in-skyL StuebiS 2 Antworten Letzte Antwort
        1
        • da_WoodyD da_Woody

          @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-skyL Offline
          liv-in-skyL Offline
          liv-in-sky
          schrieb am zuletzt editiert von
          #91

          @da_woody

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

          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

          da_WoodyD 1 Antwort Letzte Antwort
          0
          • liv-in-skyL liv-in-sky

            @da_woody

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

            da_WoodyD Offline
            da_WoodyD Offline
            da_Woody
            schrieb am zuletzt editiert von da_Woody
            #92

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

            gruß vom Woody
            HAPPINESS is not a DESTINATION, it's a WAY of LIFE!

            liv-in-skyL 1 Antwort Letzte Antwort
            0
            • da_WoodyD 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-skyL Offline
              liv-in-skyL Offline
              liv-in-sky
              schrieb am zuletzt editiert von
              #93

              @da_woody

              bin gerade am spielen

              AApossis (22).gif

              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

              da_WoodyD 1 Antwort Letzte Antwort
              0
              • liv-in-skyL liv-in-sky

                @da_woody

                bin gerade am spielen

                AApossis (22).gif

                da_WoodyD Offline
                da_WoodyD Offline
                da_Woody
                schrieb am zuletzt editiert von
                #94

                @liv-in-sky :+1: sieht ja legger aus!

                gruß vom Woody
                HAPPINESS is not a DESTINATION, it's a WAY of LIFE!

                liv-in-skyL 1 Antwort Letzte Antwort
                0
                • da_WoodyD da_Woody

                  @liv-in-sky :+1: sieht ja legger aus!

                  liv-in-skyL Offline
                  liv-in-skyL Offline
                  liv-in-sky
                  schrieb am zuletzt editiert von liv-in-sky
                  #95

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

                  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

                  da_WoodyD 1 Antwort Letzte Antwort
                  1
                  • liv-in-skyL liv-in-sky

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

                    da_WoodyD Offline
                    da_WoodyD Offline
                    da_Woody
                    schrieb am zuletzt editiert von
                    #96

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

                    gruß vom Woody
                    HAPPINESS is not a DESTINATION, it's a WAY of LIFE!

                    liv-in-skyL 1 Antwort Letzte Antwort
                    0
                    • da_WoodyD da_Woody

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

                      liv-in-skyL Offline
                      liv-in-skyL Offline
                      liv-in-sky
                      schrieb am zuletzt editiert von
                      #97

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

                      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

                      da_WoodyD 1 Antwort Letzte Antwort
                      0
                      • liv-in-skyL liv-in-sky

                        @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_WoodyD Offline
                        da_WoodyD Offline
                        da_Woody
                        schrieb am zuletzt editiert von
                        #98

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

                        gruß vom Woody
                        HAPPINESS is not a DESTINATION, it's a WAY of LIFE!

                        liv-in-skyL 1 Antwort Letzte Antwort
                        0
                        • da_WoodyD da_Woody

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

                          liv-in-skyL Offline
                          liv-in-skyL Offline
                          liv-in-sky
                          schrieb am zuletzt editiert von liv-in-sky
                          #99

                          @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

                          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

                          da_WoodyD 1 Antwort Letzte Antwort
                          0
                          • da_WoodyD da_Woody

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

                            StuebiS Offline
                            StuebiS Offline
                            Stuebi
                            schrieb am zuletzt editiert von
                            #100

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

                            ioBroker auf Synology DS216+II im Docker Container

                            da_WoodyD 1 Antwort Letzte Antwort
                            1
                            • StuebiS Stuebi

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

                              da_WoodyD Offline
                              da_WoodyD Offline
                              da_Woody
                              schrieb am zuletzt editiert von
                              #101

                              @stuebi klar doch @Stuebi !

                              gruß vom Woody
                              HAPPINESS is not a DESTINATION, it's a WAY of LIFE!

                              1 Antwort Letzte Antwort
                              0
                              • liv-in-skyL 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_WoodyD Offline
                                da_WoodyD Offline
                                da_Woody
                                schrieb am zuletzt editiert von
                                #102

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

                                gruß vom Woody
                                HAPPINESS is not a DESTINATION, it's a WAY of LIFE!

                                liv-in-skyL 1 Antwort Letzte Antwort
                                0
                                • da_WoodyD da_Woody

                                  @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-skyL Offline
                                  liv-in-skyL Offline
                                  liv-in-sky
                                  schrieb am zuletzt editiert von liv-in-sky
                                  #103

                                  @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

                                  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

                                  da_WoodyD 1 Antwort Letzte Antwort
                                  0
                                  • liv-in-skyL 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_WoodyD Offline
                                    da_WoodyD Offline
                                    da_Woody
                                    schrieb am zuletzt editiert von
                                    #104

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

                                    gruß vom Woody
                                    HAPPINESS is not a DESTINATION, it's a WAY of LIFE!

                                    1 Antwort Letzte Antwort
                                    0
                                    • liv-in-skyL Offline
                                      liv-in-skyL Offline
                                      liv-in-sky
                                      schrieb am zuletzt editiert von
                                      #105

                                      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

                                      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

                                      D 1 Antwort Letzte Antwort
                                      0
                                      • liv-in-skyL liv-in-sky

                                        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 Offline
                                        D Offline
                                        dos1973
                                        schrieb am zuletzt editiert von
                                        #106

                                        @liv-in-sky
                                        ich habe eben das 13:00 Uhr script genommen - und es werden mir nur 2 shellys angezeigt

                                        liv-in-skyL 1 Antwort Letzte Antwort
                                        0
                                        • D dos1973

                                          @liv-in-sky
                                          ich habe eben das 13:00 Uhr script genommen - und es werden mir nur 2 shellys angezeigt

                                          liv-in-skyL Offline
                                          liv-in-skyL Offline
                                          liv-in-sky
                                          schrieb am zuletzt editiert von
                                          #107

                                          @dos1973

                                          prüfe mal bitte , ob du den datenpunkt online hast ?

                                          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

                                          D 1 Antwort Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          493

                                          Online

                                          32.4k

                                          Benutzer

                                          81.5k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Home
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe