Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Skripten / Logik
    4. JavaScript
    5. HTML-Table für VIS oder Iqontrol (js und blockly)

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    HTML-Table für VIS oder Iqontrol (js und blockly)

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

      @hartmut

      das file zu schreiben, kannst du wieder deaktivieren. das braucht man für iqontrol nicht mehr - man kann dort ein icon anlegen (wert) und darin den datenpunkt direkt angeben

      ob das auch upgedatet wird weiß ich nicht - da müßtest du mal im iqontrol thread nachfragen - ich nutze das momentan nicht mehr.

      das letzte mal habe ich mit jemanden die trashschedule tabelle eingebunden

      bei mir scheint es schon upzudaten - habe es nur mal schnell und dirty probiert - sieht dann so aus

      Image 2.png

      die einstellungen dafür sind:

      Image 3.png

      Image 4.png

      Image 5.png

      man kann das sicher noch besser einstellen

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

        @hartmut

        hab noch ein wenig angepaßt:

        Image 6.png

        nutze mal dieses script - da wurden ein paar setiings angelichen - du musst aber im setting wieder deine datenpunkte eintragen.

        //@liv-in-sky 2021  22.1.-11:55 für iqontrol
         // dank an @sveni_lee - hat vorlage für das script gemacht
        
        //HIER WIRD PFAD UND FILENAME DEFINIERT
        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
        let   braucheEinVISWidget=true;                     // bei true wird ein html-tabelle in einen dp geschrieben - siehe nächste zeile
        let dpVIS="controll-own.0.TABELLEN.TankerKoenig"         //WICHTIG wenn "braucheEinVISWidget" auf true gesetzt !!  dp zusätzlich für VIS-HTML-Basic-Widget
        let   braucheEinMDWidget=true;                     // bei true wird ein json in einen dp geschrieben - siehe nächste zeile
        let dpMDWidget="controll-own.0.TABELLEN.TankerKoenigMDWidget"
        let   braucheEinMDWidgetList=true;                     // bei true wird ein json in einen dp geschrieben - siehe nächste zeile
        let dpMDWidgetList="controll-own.0.TABELLEN.TankerKoenigMDWidgetList"
        //let mySchedule=" */20 * * * * * ";                       //änderung des JSON ist trigger
        let benzinArt="e10";    //  für material design widget only - diesel, e5 oder e10 möglich
        var station_png = {"6a567d36-fe56-4118-a3e0-45a2b77dc584" : "/vis.0/armin/img/tankstellen/erstewahl.jpg",  
                           "ba57cc7a-aa15-4fe8-87d4-180fcd1cc8a4" : "/vis.0/armin/img/tankstellen/esso.jpg",
                           "2cca550a-5be0-4099-bc16-f2a85550d949" : "/vis.0/armin/img/tankstellen/oil.png",
                           "76c28b9b-44d7-4286-bf64-75a055973544" : "/vis.0/armin/img/tankstellen/vmarkt.png",
                           "d558326f-37b9-4c0f-3eb9-693c23a03705" : "/vis.0/armin/img/tankstellen/avia.png"
                           };
        let bildergröße=20
        let farbeCheapestHTML="#41A9DC"                             // Farbe der zeile wenn unter einem tag:
        let styleCheapestHTML="b"                                  // style der zeile wenn unter einem tag:  möglich b fett; i kursiv; span normal
        let braucheUhrzeit=true;
        
        //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 5
        var htmlFeld1='';       var Feld1lAlign="left";                     // überschrift Tabellen Spalte1 und  Ausrichtung left,right or center
        var htmlFeld2='Tankstelle';        var Feld2lAlign="left";                      // überschrift Tabellen Spalte2 und  Ausrichtung left,right or center
        var htmlFeld3='Diesel';         var Feld3lAlign="center";                    // überschrift Tabellen Spalte3 und  Ausrichtung left,right or center
        var htmlFeld4='E5';        var Feld4lAlign="center";                    // überschrift Tabellen Spalte4 und  Ausrichtung left,right or center
        var htmlFeld5='E10';        var Feld5lAlign="center";                    // überschrift Tabellen Spalte5 und  Ausrichtung left,right or center
        var htmlFeld6='Status';        var Feld6lAlign="center";                    // überschrift Tabellen Spalte5 und  Ausrichtung left,right or center
        
        
        //-----------------------------------
        
        
        
        //ÜBERSCHRIFT ÜBER TABELLE
        let   htmlUberschrift=false;                           // mit Überschrift über der tabelle
        let   htmlSignature=false;                              // anstatt der Überscghrift eine signature: - kleiner - anliegend
        const htmlFeldUeber='Tankerkönig Tabelle';              // Überschrift und Signature
        const htmlFarbUber="black";                         // Farbe der Überschrift
        const htmlSchriftWeite="normal";                       // bold, normal - Fettschrift für Überschrift
        const htmlÜberFontGroesse="18px";                       // schriftgröße überschrift
        //MEHRERE TABELLEN NEBENEINANDER
        let   mehrfachTabelle=1;                              // bis zu 4 Tabellen werden nebeneinander geschrieben-  verkürzt das Ganze, dafür etwas breiter - MÖGLICH 1,2,3,oder 4 !!!
        const trennungsLinie="2";                             //extra trennungslinie bei mehrfachtabellen - evtl auf 0 stellen, wnn htmlRahmenLinien auf none sind
        const htmlFarbZweiteTabelle="black";                // Farbe der Überschrift bei jeder 2.ten Tabelle
        const htmlFarbTableColorUber="black";               // Überschrift in der tabelle - der einzelnen Spalten BDBDBD
        //ÜBERSCHRIFT SPALTEN
        const UeberSchriftHöhe=25;                          //Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe
        const LinieUnterUeberschrift="2";                   // Linie nur unter Spaltenüberschrift - 
        const farbetrennungsLinie="white";
        const farbeLinieUnterUeberschrift="black";
        const groesseUeberschrift=16;
        const UeberschriftStyle="normal"                     // möglich "bold"
        //GANZE TABELLE
        let abstandZelle="1";
        let farbeUngeradeZeilen="transparent"//"#1C1C1C";                     //Farbe für ungerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
        let farbeGeradeZeilen="transparent"//"black";                        //Farbe für gerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
        let weite="auto";                                     //Weite der Tabelle
        let zentriert=true;                                   //ganze tabelle zentriert
        const backgroundAll="transparent";                        //Hintergrund für die ganze Seite - für direkten aufruf oder iqontrol sichtber - keine auswirkung auf vis-widget
        const htmlSchriftart=""     //"Jura-DemiBold"   //"RobotoCondensed-Bold"   //"Helvetica";
        const htmlSchriftgroesse="16px";
        //FELDER UND RAHMEN
        let   UeberschriftSpalten=true;                // ein- oder ausblenden der spatlen-überschriften
        const htmlFarbFelderschrift="black";                  // SchriftFarbe der Felder
        const htmlFarbFelderschrift2="black";                 // SchriftFarbe der Felder für jede 2te Tabelle
        const htmlFarbTableColorGradient1="transparent";          //  Gradient - Hintergrund der Tabelle - Verlauffarbe
        const htmlFarbTableColorGradient2="transparent";          //  Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf
        const htmlFarbTableBorderColor="transparent";             // Farbe des Rahmen - is tdieser gleich den gradienten, sind die rahmen unsichtbar
        let htmlRahmenLinien="none";                            // Format für Rahmen: MÖGLICH: "none" oder "all" oder "cols" oder "rows"
        const htmlSpalte1Weite="auto";                   //  Weite der ersten beiden  Spalten oder z.b. 115px
        // HIER NICHTS  ÄNDERN
        
        let borderHelpBottum;
        let borderHelpRight;
        let htmlcenterHelp;
        let htmlcenterHelp2;
        
        if(htmlRahmenLinien=="rows") {borderHelpBottum=1;borderHelpRight=0;}
        if(htmlRahmenLinien=="cols") {borderHelpBottum=0;borderHelpRight=1;}
        if(htmlRahmenLinien=="none") {borderHelpBottum=0;borderHelpRight=0;}
        if(htmlRahmenLinien=="all")  {borderHelpBottum=1;borderHelpRight=1;}
        zentriert ? htmlcenterHelp="auto" : htmlcenterHelp="left";
        zentriert ? htmlcenterHelp2="center" : htmlcenterHelp2="left";
        
        
        const htmlZentriert='<center>'
        const htmlStart=    "<!DOCTYPE html><html lang=\"de\"><head><title>Vorlage</title><meta http-equiv=\"content-type\" content=\"text/html; 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+"}"+"td:nth-child(2) {width:"+htmlSpalte1Weite+"}"+
                           " </style></head><body> <div>";
        //const htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-weight: bold\">"+htmlFeldUeber+"</p>";                    
        const htmlTabStyle= "<table bordercolor=\""+htmlFarbTableBorderColor+"\" border=\"2px\" cellspacing=\""+abstandZelle+"\" cellpadding=\""+abstandZelle+"\" width=\""+weite+"\" rules=\""+htmlRahmenLinien+"\" style=\"color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+
                              "; font-family:"+htmlSchriftart+";background-image: linear-gradient(42deg,"+htmlFarbTableColorGradient2+","+htmlFarbTableColorGradient1+");\">";
        const htmlTabUeber1="<tr height=\""+UeberSchriftHöhe+"\" style=\"color:"+htmlFarbTableColorUber+"; font-size: "+groesseUeberschrift+"px; font-weight: "+UeberschriftStyle+" ;  border-bottom: "+LinieUnterUeberschrift+"px solid "+farbeLinieUnterUeberschrift+" \">";
        const htmlTabUeber3="</tr>";
        
        
        //NICHTS ÄNDERN - abhängig von den oben definierten _Spalten - in diesem Beispiel sind es 5
        
        
        var htmlTabUeber2="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+">&ensp;"+htmlFeld1+"&ensp;</td><td width="+htmlSpalte1Weite+" align="+Feld2lAlign+">&ensp;"+htmlFeld2+"&ensp;</td><td  align="+Feld3lAlign+">&ensp;"+htmlFeld3+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+htmlFeld4+"&ensp;</td><td  align="+Feld5lAlign+">&ensp;"+htmlFeld5+"&ensp;</td><td  align="+Feld6lAlign+">&ensp;"+htmlFeld6+"&ensp;</td>";
        var htmlTabUeber2_1="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld1+"&ensp;</td><td width="+htmlSpalte1Weite+" align="+Feld2lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld2+
                           "&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld3+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld4+
                           "&ensp;</td><td align="+Feld5lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld5+"&ensp;</td><td align="+Feld6lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld6+"&ensp;</td>";
                               //------------------------------------------------------
        
        
        
        var htmlOut="";
        var mix;
        var counter;
        var val1; var val2; var val0; var val3; var val4; var val5; 
        var htmlTabUeber="";
        function writeHTML(){
        
        braucheUhrzeit ? htmlFeld1=formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm") : htmlFeld1="";
        htmlTabUeber2="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+">&ensp;"+htmlFeld1+"&ensp;</td><td width="+htmlSpalte1Weite+" align="+Feld2lAlign+">&ensp;"+htmlFeld2+"&ensp;</td><td  align="+Feld3lAlign+">&ensp;"+htmlFeld3+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+htmlFeld4+"&ensp;</td><td  align="+Feld5lAlign+">&ensp;"+htmlFeld5+"&ensp;</td><td  align="+Feld6lAlign+">&ensp;"+htmlFeld6+"&ensp;</td>";
        htmlTabUeber2_1="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld1+"&ensp;</td><td width="+htmlSpalte1Weite+" align="+Feld2lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld2+
                           "&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld3+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld4+
                           "&ensp;</td><td align="+Feld5lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld5+"&ensp;</td><td align="+Feld6lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld6+"&ensp;</td>";
                               //------------------------------------------------------
        
        htmlOut="";
        
        counter=-1;
        htmlTabUeber="";
        switch (mehrfachTabelle) { 
           case 1: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber3;  break;
           case 2: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
           case 3: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2+htmlTabUeber2+htmlTabUeber3; break;
           case 4: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
        }; 
        if (!UeberschriftSpalten) {htmlTabUeber=""}  
        
        //--------------------------------------------------------------------------------------------------------------------------------------------------
        //---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------
        //---------alle valx werte müssen von euch bestimmt werden - val0,val1,val2,val3,val4!!!------------------------------------------------------------
        //--------------------------------------------------------------------------------------------------------------------------------------------------
        
        let   json_tank = [];  
        let   json_tank2 = [];
        
        let myStations = getObject('system.adapter.tankerkoenig.0').native.stationsarray;
        
        let json = JSON.parse(getState('tankerkoenig.0.json').val);
        
        let stations = Object.keys(json.prices);
        
        
        
        
        
        stations.forEach((station,i) => {
        
           myStations.forEach((arr, j) => {
        
               if(arr[0] == station) {
                   if(json.prices[station].status=="open") {
               val0=  "<img src="+station_png[station]+" height=\""+bildergröße+"\" width=\""+bildergröße+"\">"
               val1=arr[1]
               json.prices[station].diesel!=false ? val2=json.prices[station].diesel.toFixed(2)+" €" : val2=0
               json.prices[station].e5!=false ? val3=json.prices[station].e5.toFixed(2)+" €" :val3=0
               json.prices[station].e10!=false ? val4=json.prices[station].e10.toFixed(2)+" €" :val4=0
               val5=json.prices[station].status
               if (getState("tankerkoenig.0.stations.cheapest.diesel.station_id").val == station) {
                    val2="<font color=\""+farbeCheapestHTML +"\"><"+styleCheapestHTML+">"+val2;
                    }
               if (getState("tankerkoenig.0.stations.cheapest.e5.station_id").val == station) {
                    val3="<font color=\""+farbeCheapestHTML +"\"><"+styleCheapestHTML+">"+val3;
                   }
               
               if (getState("tankerkoenig.0.stations.cheapest.e10.station_id").val == station) {
                    val4="<font color=\""+farbeCheapestHTML +"\"><"+styleCheapestHTML+">"+val4;
                  }     
        
               counter++;
               tabelleBind();
               let helper;
               //log(json.prices[station][benzinArt])
                   json.prices[station][benzinArt]!=false ? helper=json.prices[station][benzinArt].toFixed(2)+" € ("+benzinArt+")" : helper="0"
                  // log(helper)
                   let mysubText = `<div style="display: flex; flex-direction: row; line-height: 1.3; padding-left: 1px; padding-right: 8px; align-items: center;">
                        <div style="flex: 1;">${helper}</div>
                        <div style="color: black; font-size: 18px; font-family: RobotoCondensed-LightItalic; text-align: right;">${json.prices[station].status}</div>
                        </div>`
                        let vax5="";
                        let helpi="tankerkoenig.0.stations.cheapest."+benzinArt+".station_id"
                        if(getState(helpi).val == station)   vax5=farbeCheapestHTML            
             
             json_tank2.push({
                       text: arr[1] ,
                       subText: mysubText,
                       statusBarColor: vax5,
                       image:station_png[station],
                       imageColor: "",
                       listType: "text",
                       showValueLabel: false,
                       name: " ",
                       status: " ",
                       Wert : " ",
                       Hersteller : " "
                   });
                       json.prices[station][benzinArt]!=false ? helper=json.prices[station][benzinArt].toFixed(2)+" € ("+benzinArt+")" : helper="0"
                       json_tank.push(
                       {
                           "img": station_png[station],
                           "name": arr[1],
                           "preis": helper,
                           "status": json.prices[station].status
                       }) 
        
              } else { val0=  "<img src="+station_png[station]+" height=\""+bildergröße+"\" width=\""+bildergröße+"\">"
               val1=arr[1];
               val2="-"
               val3="-"
               val4="-"
               val5=json.prices[station].status
               counter++;
               tabelleBind();
        
              let mysubText = `<div style="display: flex; flex-direction: row; line-height: 1.3; padding-left: 1px; padding-right: 8px; align-items: center;">
                        <div style="flex: 1;"> - </div>
                        <div style="color: black; font-size: 18px; font-family: RobotoCondensed-LightItalic; text-align: right;">${json.prices[station].status}</div>
                        </div>`
                        let vax5="";
                        let helpi="tankerkoenig.0.stations.cheapest."+benzinArt+".station_id"
                        if(getState(helpi).val == station)   vax5=farbeCheapestHTML            
             
             json_tank2.push({
                       text: arr[1] ,
                       subText: mysubText,
                       statusBarColor: vax5,
                       image:station_png[station],
                       imageColor: "",
                       listType: "text",
                       showValueLabel: false,
                       name: " ",
                       status: " ",
                       Wert : " ",
                       Hersteller : " "
                   });
        
        
        
        
               json_tank.push(
                       {
                           "img": station_png[station],
                           "name": arr[1],
                           "preis": "-",
                           "status": json.prices[station].status
                       })
              }
              
                }
           });
           
        })
        
           json_tank.sort(function (a, b) {
        
               return a.preis == b.preis ? 0 : +(a.preis > b.preis) || -1;
              
        
           }); 
            if (braucheEinMDWidget) setState(dpMDWidget, JSON.stringify(json_tank), true);//Schleifen Ende - je nach schleifenart muss hier etwas geändert werden !!!!!!!!!
            if (braucheEinMDWidgetList) setState(dpMDWidgetList, JSON.stringify(json_tank2), true);
        
        //-------------------------------------------------------------------------------------------------------------------------------------------------
        //--------------------------------------------------Ende der schleife------------------------------------------------------------------------------
        //-------------------------------------------------------------------------------------------------------------------------------------------------
        
              tabelleFinish(); // AB HIER NICHTS ÄNDERN - tabelle fertigstellen
             
        } // function ende
        
        //MAIN:
         
         on({id:'tankerkoenig.0.json'}, function (obj) {  
             setTimeout(function () {
               writeHTML();
        }, 5000);
         
         if (braucheEinFile) {writeFile(home, path ,htmlOut, function (error) { /* log('file written');*/  });}
        }); 
         writeHTML();
        
           				 function tabelleBind(){
             //HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT - hat man oben 5 Felder definiert, braucht man hier 5 Werte
           
               switch (mehrfachTabelle) {  
                case 1:  if(counter%2==0) {  htmlOut=htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td></tr>"; break; } else
                                          {  htmlOut=htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td></tr>"; break;}
               
                case 2:  if(counter%4==0){
                        if(counter%2==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td>"; } 
                                      else {htmlOut = htmlOut+"<td align="+Feld1lAlign+"  style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val5+"&ensp;</td></tr>";} break;
                           }else{
                         if(counter%2==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td>"; } 
                                      else {htmlOut = htmlOut+"<td align="+Feld1lAlign+"  style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val5+"&ensp;</td></tr>";} break;}
                                           
                case 3:  if(counter%2==0)   {
                          if(counter%3==0 )  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td>"; } 
                                      else { if(counter%3==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+"  style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"; color:"+htmlFarbFelderschrift2+"\">&ensp;"+val5+"&ensp;</td>";} 
                                                       else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td></tr>";}
                                                 } break;}else{
                         if(counter%3==0 )  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td>"; } 
                                      else { if(counter%3==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+"  style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"; color:"+htmlFarbFelderschrift2+"\">&ensp;"+val5+"&ensp;</td>";} 
                                                       else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td></tr>";}
                                                 } break;}
        
        
                case 4:   if(counter%8==0)   {
                          if(counter%4==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val4+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val3+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td>"; } 
                                          else {if(counter%4==1 )  { htmlOut = htmlOut+"<td  align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"; color:"+htmlFarbFelderschrift2+"\">&ensp;"+val5+"&ensp;</td>";} 
                                                       else    {if(counter%4==3)  { htmlOut= htmlOut+"<td align="+Feld1lAlign+"  style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+" >&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+" style=\" color:"+htmlFarbFelderschrift2+"\">&ensp;"+val5+"&ensp;</td></tr>";} 
                                                                         else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td>&ensp;"+val1+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val4+"&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td>";}}
                                                 } break;}else{
                          if(counter%4==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val4+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val3+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td>"; } 
                                          else {if(counter%4==1 )  { htmlOut = htmlOut+"<td  align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+" style=\"  border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"; color:"+htmlFarbFelderschrift2+"\">&ensp;"+val5+"&ensp;</td>";} 
                                                       else    {if(counter%4==3)  { htmlOut= htmlOut+"<td align="+Feld1lAlign+"  style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+" style=\" color:"+htmlFarbFelderschrift2+"\">&ensp;"+val5+"&ensp;</td></tr>";} 
                                                                         else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td>&ensp;"+val1+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val4+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td>";}}
                                                 } break;}                       
        
             } //switch ende
        
        
        
        }
        
        function tabelleFinish() {
        
              // tabelle fertigstellen
        switch (mehrfachTabelle) {  
               case 1:    break;
        
               case 2:    
                          if(counter%2==0)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');
                        
                          break;
        
               case 3:   if(counter%3==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");
                         if(counter%3==1)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");        
                         if(counter%3==0)      htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");
                       
                          break;
               case 4:   if(counter%4==3)  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");
                         if(counter%4==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");
                         if(counter%4==1)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");    
                         if(counter%4==0)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");      
                         break; }
             
                            var htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: "+htmlÜberFontGroesse+"; font-weight:"+htmlSchriftWeite+ "\">"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</p>"; 
               var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 70%; text-align: right;\" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>"
                
                if (!htmlSignature) htmlUnter="";
                  //Ausgabe über VIS html widget - tabelle in datenpunkt schreiben - html tabelle ohne html header und body
                   var htmlOutVIS="";
                 //  htmlUberschrift ? htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>" : htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>";
                    if (htmlUberschrift) 
                        { zentriert ? htmlOutVIS=htmlZentriert+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter : htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter ;
        
                      } else {
                       zentriert ?  htmlOutVIS=htmlZentriert+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter :  htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter;
        
                         }
        
        // log("bin raus aus tabelleBind");
                   if (braucheEinVISWidget) setState(dpVIS, htmlOutVIS );
        
         var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 80%;  text-align: center; \" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>"
         
         if (!htmlSignature) htmlUnter="";
        var htmlEnd="</table>"+htmlUnter+"</div></body>";
         //mit oder ohne überschrift - zentriert oder links
        htmlUberschrift ? htmlOut=htmlStart+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd : htmlOut=htmlStart+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd;
         //log(htmlOut);
         
        
        
        }
        
        
        
        

        hartmut 2 Replies Last reply Reply Quote 0
        • hartmut
          hartmut @liv-in-sky last edited by

          @liv-in-sky
          Danke für die Mühe, kann es leider erst Montag testen.
          (Bin gerade am Enkel hüten)
          Werde dan berichten.
          Schönes Wochenende.

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

            @liv-in-sky
            funktioniert bestens, Danke nochmals.

            1 Reply Last reply Reply Quote 0
            • S
              stenmic last edited by

              Hallo,
              ich nutze das Script für 4-Spalten vom ersten Post.
              Ist es damit möglich die Zeilen nach einem Kriterium alphabetisch zu sortieren? ich habe bis jetzt keine Möglichkeit gefunden.

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

                @stenmic

                was für eine schleife nutzt du - - du musst eine sortierung einbauen

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

                  @liv-in-sky das ist meine Schleife

                  //--------------------------------------------------------------------------------------------------------------------------------------------------
                  
                  //---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------
                  
                  //---------alle valx werte müssen von euch bestimmt werden - val0,val1,val2,val3 !!!---------------------------------------------------------------------
                  
                  //--------------------------------------------------------------------------------------------------------------------------------------------------
                  
                   
                  
                  $('unifi.0.default.clients.*.is_online').each(function(id, i) {           // hier eigene schleife definieren
                  
                          var ida = id.split('.');
                  
                          if( !(id.includes("xyz"))){
                  
                            counter++;                                       // SEHR WICHTIG - MUSS IN JEDER SCHLEIFE INTEGRIERT SEIN
                  
                            val0=getState(id.replace("is_online","name")).val;
                  
                            val1=getState(id.replace("is_online","ip")).val;
                  
                            val2help=getState(id.replace("is_online","satisfaction")).val;
                  
                            val2=val2help+" %"
                                      
                            if (getState(id).val==null) {val3="🔴"}; //log(id)}; 
                            if (getState(id).val==false) {val3="🔵"} else{val3="🟢"}         
                  
                   
                  
                   
                  
                     
                  
                       tabelleBind(); //HIER NICHTS ÄNDERN : HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT  - diese function muss als letztes in der eigenen schleife aufgerufen werden
                  
                      
                  
                     }}); //Schleifen Ende - je nach schleifenart muss hier etwas geändert werden !!!!!!!!!
                  

                  Ich würde gerne nach "ip" sortieren, weiß aber nicht wie.

                  liv-in-sky 3 Replies Last reply Reply Quote 0
                  • liv-in-sky
                    liv-in-sky @stenmic last edited by

                    @stenmic

                    das problem dabei ist. du musst zuerst die daten sammeln und anstatt die val-werte zu schreiben werden sie in ein json-object gepush - dann wird dieses object sortiert und es kommt wieder eine schleife, bei der es in die val werte geschrieben wird - ich versuche mal ein script zu finden, wo ich das gemacht habe - und poste es - dann wird es klarer

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

                      @stenmic

                      dieses script ist für unifi clients --kannst du das nicht brauchen

                      https://forum.iobroker.net/topic/34491/htmltabelle-unificlients-newadapter - dort kann man sortieren in der tabelle (überschriften zeile - die icons)

                      dort drin wird gezeigt, wie die daten gesammelt werden und am schluss sortiert und ausgegeben

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

                        @liv-in-sky das unifi-script ist für meine Zwecke zu aufgebläht und ich wollte die Funtion der "Basis-Scripte" verstehen. Zudem fehlt mir die uptime Ansicht. Bevor es aber zu umständlich wird, ich bin auch ohne Sortierung zufrieden 🙂

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

                          @stenmic sagte in HTML-Table für VIS oder Iqontrol (js und blockly):

                          ich habe es nicht getestet - aber das wäre das vorgehen für eine soortierung nach namen

                          //--------------------------------------------------------------------------------------------------------------------------------------------------
                           
                          //---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------
                           
                          //---------alle valx werte müssen von euch bestimmt werden - val0,val1,val2,val3 !!!---------------------------------------------------------------------
                           
                          //--------------------------------------------------------------------------------------------------------------------------------------------------
                           
                           let myObj=[]
                           
                          $('unifi.0.default.clients.*.is_online').each(function(id, i) {           // hier eigene schleife definieren
                           
                                  var ida = id.split('.');
                           
                                  //if( !(id.includes("xyz"))){
                           
                                                                          // SEHR WICHTIG - MUSS IN JEDER SCHLEIFE INTEGRIERT SEIN
                           
                                    val0=getState(id.replace("is_online","name")).val;
                           
                                    val1=getState(id.replace("is_online","ip")).val;
                           
                                    val2help=getState(id.replace("is_online","satisfaction")).val;
                           
                                    val2=val2help+" %"
                                              
                                    if (getState(id).val==null) {val3="🔴"}; //log(id)}; 
                                    if (getState(id).val==false) {val3="🔵"} else{val3="🟢"}         
                           
                           //zwischenspeicher für sortierung
                                  myObj.push({
                                     wert1:val1,
                                     wert2:val2,
                                     wert3: val2,
                                     wert4: val3
                                  })
                                  })
                          
                                  //SORTIERUNG
                           myObj.sort(function (alpha, beta) {
                                       if (alpha.wert1.toUpperCase().trim() > beta.wert1.toUpperCase().trim())
                                          return 1;
                                       if (beta.wert1.toUpperCase().trim() > alpha.wert1.toUpperCase().trim())
                                          return -1;
                                       return 0;
                                      });
                            // jetzt html erstellen     
                           
                           for (let i=0;i<myObj.length;i++){
                           counter++; 
                             
                           val1=myObj[i].wert1
                           val2=myObj[i].wert2
                           val3=myObj[i].wert3
                           val4=myObj[i].wert4
                          
                               tabelleBind(); //HIER NICHTS ÄNDERN : HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT  - diese function muss als letztes in der eigenen schleife aufgerufen werden
                           
                              
                           
                             } //Schleifen Ende - je nach schleifenart muss hier etwas geändert werden !!!!!!!!!
                          
                          
                          1 Reply Last reply Reply Quote 0
                          • liv-in-sky
                            liv-in-sky @stenmic last edited by

                            @stenmic

                            habe was im post darüber geändert - ich glaube , in der sort gehört kein [0]

                            S 2 Replies Last reply Reply Quote 0
                            • S
                              stenmic @liv-in-sky last edited by

                              @liv-in-sky du bist der Hammer. Danke!
                              Ich werde es morgen früh gleich testen

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

                                @liv-in-sky guten Morgen, fuktioniert leider noch nicht.
                                Ohne Sortierung:
                                IMG_0096.PNG
                                Mit der Anpassung:
                                IMG_0097.PNG

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

                                  @stenmic

                                  teste mal das - da waren noch variablendreher drin (aber es war doch schön nach namen sortiert - ga bja nur einen 🙂 )

                                   
                                   //zwischenspeicher für sortierung
                                          myObj.push({
                                             wert1:val0,
                                             wert2:val1,
                                             wert3: val2,
                                             wert4: val3
                                          })
                                          })
                                  
                                          //SORTIERUNG
                                   myObj.sort(function (alpha, beta) {
                                               if (alpha[0].wert1.toUpperCase().trim() > beta[0].wert1.toUpperCase().trim())
                                                  return 1;
                                               if (beta[0].wert1.toUpperCase().trim() > alpha[0].wert1.toUpperCase().trim())
                                                  return -1;
                                               return 0;
                                              });
                                    // jetzt html erstellen     
                                   
                                   for (let i=0;i<myObj.length;i++){
                                   counter++; 
                                     
                                   val0=myObj[i].wert1
                                   val1=myObj[i].wert2
                                   val2=myObj[i].wert3
                                   val3=myObj[i].wert4
                                       tabelleBind(); //HIER NICHTS ÄNDERN : HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT  - diese function muss als letztes in der eigenen schleife aufgerufen werden
                                  
                                   
                                  
                                     } //Schleifen Ende - je nach schleifenart muss hier etwas geändert werden !!!!!!!!!
                                  
                                  S 1 Reply Last reply Reply Quote 0
                                  • S
                                    stenmic @liv-in-sky last edited by

                                    @liv-in-sky sagte in HTML-Table für VIS oder Iqontrol (js und blockly):

                                    @stenmic
                                    teste mal das - da waren noch variablendreher drin (aber es war doch schön nach namen sortiert - ga bja nur einen 🙂 )
                                    😅

                                    Leider kommt mit dem zweiten Teil ein Fehler im Log.
                                    Image 061.jpg

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

                                      @stenmic

                                      poste bitte mal dein ganzes script - dann kann ich testen und bessere aus - ist schneller

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

                                        @liv-in-sky gerne... und danke

                                        
                                        
                                            //@liv-in-sky 2020  4.2.-18:42
                                        
                                         
                                        
                                         
                                        
                                        //HIER WIRD PFAD UND FILENAME DEFINIERT
                                        
                                        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
                                        
                                        let   braucheEinVISWidget=true;                     // bei true wird ein html-tabelle in einen dp geschrieben - siehe nächste zeile
                                        
                                        let dpVIS="javascript.0.Tabellen.UniFi.HTML"         //WICHTIG wenn "braucheEinVISWidget" auf true gesetzt !!  dp zusätzlich für VIS-HTML-Basic-Widget
                                        
                                        let mySchedule=" */20 * * * * * ";                   //jede minute  
                                        
                                        let abwesendZeit=172800000                           // in millisekunden für länger abwesende clients
                                        
                                        //---------------------------------------
                                        
                                         
                                        
                                        //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 4
                                        
                                        var htmlFeld1='Name';       var Feld1lAlign="center";                     // überschrift Tabellen Spalte1 und  Ausrichtung left,right or center
                                        
                                        var htmlFeld2='IP';        var Feld2lAlign="center";                      // überschrift Tabellen Spalte2 und  Ausrichtung left,right or center
                                        
                                        var htmlFeld3='Satisfaction';         var Feld3lAlign="center";                    // überschrift Tabellen Spalte3 und  Ausrichtung left,right or center
                                        
                                        var htmlFeld4='ON';        var Feld4lAlign="center";                    // überschrift Tabellen Spalte4 und  Ausrichtung left,right or center
                                        
                                        //-----------------------------------
                                        
                                         
                                        
                                         //hier werden die styles für die tabelle definiert
                                        
                                        //ÜBERSCHRIFT ÜBER TABELLE
                                        
                                        let   htmlUberschrift=false;                           // mit Überschrift über der tabelle
                                        
                                        let   htmlSignature=false;                              // anstatt der Überscghrift eine signature: - kleiner - anliegend
                                        
                                        const htmlFeldUeber='Batterie Zustand Sensoren';              // Überschrift und Signature
                                        
                                        const htmlFarbUber="red";                         // Farbe der Überschrift
                                        
                                        const htmlSchriftWeite="normal";                       // bold, normal - Fettschrift für Überschrift
                                        
                                        const htmlÜberFontGroesse="18px";                       // schriftgröße überschrift
                                        
                                        //MEHRERE TABELLEN NEBENEINANDER
                                        
                                        let   mehrfachTabelle=1;                              // bis zu 4 Tabellen werden nebeneinander geschrieben-  verkürzt das Ganze, dafür etwas breiter - MÖGLICH 1,2,3,oder 4 !!!
                                        
                                        const trennungsLinie="0";                             //extra trennungslinie bei mehrfachtabellen - evtl auf 0 stellen, wnn htmlRahmenLinien auf none sind
                                        
                                        const farbetrennungsLinie="red";
                                        
                                        const htmlFarbZweiteTabelle="red";                // Farbe der Überschrift bei jeder 2.ten Tabelle
                                        
                                        const htmlFarbTableColorUber="#ffd914";               // Überschrift in der tabelle - der einzelnen Spalten
                                        
                                        //ÜBERSCHRIFT SPALTEN
                                        
                                        const UeberSchriftHöhe="46";                          //Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe
                                        
                                        const LinieUnterUeberschrift="0";                   // Linie nur unter Spaltenüberschrift - 
                                        
                                        const farbeLinieUnterUeberschrift="#5a5a5a";
                                        
                                        const groesseUeberschrift=26;
                                        
                                        const UeberschriftStyle="bold"                     // möglich "bold"
                                        
                                        //GANZE TABELLE
                                        
                                        let abstandZelle="2";
                                        
                                        let farbeUngeradeZeilen="#000000";                     //Farbe für ungerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
                                        
                                        let farbeGeradeZeilen="#000000";                        //Farbe für gerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
                                        
                                        let weite="976px";                                     //Weite der Tabelle
                                        
                                        let zentriert=true;                                   //ganze tabelle zentriert
                                        
                                        const backgroundAll="#000000";                        //Hintergrund für die ganze Seite - für direkten aufruf oder iqontrol sichtber - keine auswirkung auf vis-widget
                                        
                                        const htmlSchriftart="Segoeui";
                                        
                                        const htmlSchriftgroesse="24px";
                                        
                                        //FELDER UND RAHMEN
                                        
                                        let   UeberschriftSpalten=true;                // ein- oder ausblenden der spatlen-überschriften
                                        
                                        const htmlFarbFelderschrift="#dedede";                  // SchriftFarbe der Felder
                                        
                                        const htmlFarbFelderschrift2="#dedede";                 // SchriftFarbe der Felder für jede 2te Tabelle
                                        
                                        const htmlFarbTableColorGradient1="#000000";          //  Gradient - Hintergrund der Tabelle - Verlauffarbe
                                        
                                        const htmlFarbTableColorGradient2="#000000";          //  Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf
                                        
                                        const htmlFarbTableBorderColor="#5a5a5a";             // Farbe des Rahmen - is tdieser gleich den gradienten, sind die rahmen unsichtbar
                                        
                                        let htmlRahmenLinien="rows";                            // Format für Rahmen: MÖGLICH: "none" oder "all" oder "cols" oder "rows"
                                        
                                        const htmlSpalte1Weite="auto";                   //  Weite der ersten beiden  Spalten oder z.b. 115px
                                        
                                         
                                        
                                        // HIER NICHTS  ÄNDERN
                                        
                                         
                                        
                                        let borderHelpBottum;
                                        
                                        let borderHelpRight;
                                        
                                        let htmlcenterHelp;
                                        
                                        let htmlcenterHelp2;
                                        
                                         
                                        
                                        if(htmlRahmenLinien=="rows") {borderHelpBottum=1;borderHelpRight=0;}
                                        
                                        if(htmlRahmenLinien=="cols") {borderHelpBottum=0;borderHelpRight=1;}
                                        
                                        if(htmlRahmenLinien=="none") {borderHelpBottum=0;borderHelpRight=0;}
                                        
                                        if(htmlRahmenLinien=="all")  {borderHelpBottum=1;borderHelpRight=1;}
                                        
                                        zentriert ? htmlcenterHelp="auto" : htmlcenterHelp="left";
                                        
                                        zentriert ? htmlcenterHelp2="center" : htmlcenterHelp2="left";
                                        
                                         
                                        
                                         
                                        
                                        const htmlZentriert='<center>'
                                        
                                        const htmlStart=    "<!DOCTYPE html><html lang=\"de\"><head><title>Vorlage</title><meta http-equiv=\"content-type\" content=\"text/html; 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:2px solid "+htmlFarbTableBorderColor+"; border-spacing=\""+abstandZelle+"0px\" ; }"+   // margin macht center
                                        
                                                         "td:nth-child(1) {width: "+htmlSpalte1Weite+"}"+"td:nth-child(2) {width:"+htmlSpalte1Weite+"}"+
                                        
                                                         " </style></head><body> <div>";
                                        
                                        //const htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-weight: bold\">"+htmlFeldUeber+"</p>";                    
                                        
                                        const htmlTabStyle= "<table bordercolor=\""+htmlFarbTableBorderColor+"\" border=\"3px\" cellspacing=\""+abstandZelle+"\" cellpadding=\""+abstandZelle+"\" width=\""+weite+"\" rules=\""+htmlRahmenLinien+"\" style=\"color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+
                                        
                                                            "; font-family:"+htmlSchriftart+";background-image: linear-gradient(42deg,"+htmlFarbTableColorGradient2+","+htmlFarbTableColorGradient1+");\">";
                                        
                                        const htmlTabUeber1="<tr height=\""+UeberSchriftHöhe+"\" style=\"color:"+htmlFarbTableColorUber+"; font-size: "+groesseUeberschrift+"px; font-weight: "+UeberschriftStyle+" ;  border-bottom: "+LinieUnterUeberschrift+"px solid "+farbeLinieUnterUeberschrift+" \">";
                                        
                                        const htmlTabUeber3="</tr>";
                                        
                                         
                                        
                                         
                                        
                                         
                                        
                                         
                                        
                                        //NICHTS ÄNDERN - abhängig von den oben definierten _Spalten - in diesem Beispiel sind es 4
                                        
                                         
                                        
                                        var htmlTabUeber2="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+">&ensp;"+htmlFeld1+"&ensp;</td><td width="+htmlSpalte1Weite+" align="+Feld2lAlign+">&ensp;"+htmlFeld2+"&ensp;</td><td  align="+Feld3lAlign+">&ensp;"+htmlFeld3+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+htmlFeld4+"&ensp;</td>";
                                        
                                        var htmlTabUeber2_1="<td width="+htmlSpalte1Weite+" align=="+Feld1lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld1+"&ensp;</td><td width="+htmlSpalte1Weite+"  align="+Feld2lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld2+
                                        
                                                           "&ensp;</td><td  align=="+Feld3lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld3+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld4+
                                        
                                                           "&ensp;</td>";
                                        
                                        //------------------------------------------------------
                                        
                                         
                                        
                                         
                                        
                                        var htmlOut="";
                                        
                                        var mix;
                                        
                                        var counter;
                                        
                                        var val1; var val2; var val0; var val3;
                                        
                                        var htmlTabUeber="";
                                        
                                         
                                        
                                        function writeHTML(){
                                        
                                         
                                        
                                         
                                        
                                        htmlOut="";
                                        
                                         
                                        
                                         
                                        
                                         
                                        
                                        counter=-1;
                                        
                                        htmlTabUeber="";
                                        
                                        switch (mehrfachTabelle) { 
                                        
                                           case 1: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber3;  break;
                                        
                                           case 2: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
                                        
                                           case 3: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2+htmlTabUeber2+htmlTabUeber3; break;
                                        
                                           case 4: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
                                        
                                        }; 
                                        
                                        if (!UeberschriftSpalten) {htmlTabUeber=""} 
                                        
                                         
                                        
                                        //--------------------------------------------------------------------------------------------------------------------------------------------------
                                        
                                        //---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------
                                        
                                        //---------alle valx werte müssen von euch bestimmt werden - val0,val1,val2,val3 !!!---------------------------------------------------------------------
                                        
                                        //--------------------------------------------------------------------------------------------------------------------------------------------------
                                        
                                        let jetzt=new Date().getTime()
                                         
                                        
                                        $('unifi.0.default.clients.*.is_online').each(function(id, i) {           // hier eigene schleife definieren
                                        
                                            var ida = id.split('.');
                                        
                                            if( !(id.includes("xyz"))){
                                        
                                                counter++;                                       // SEHR WICHTIG - MUSS IN JEDER SCHLEIFE INTEGRIERT SEIN
                                        
                                                val0=getState(id.replace("is_online","name")).val;
                                        
                                                val1=getState(id.replace("is_online","ip")).val;
                                        
                                                val2=getState(id.replace("is_online","satisfaction")).val+"%" 
                                        
                                                if(jetzt-Date.parse(getState(id.replace("is_online","last_seen_by_uap")).val)>abwesendZeit) {
                                         
                                                    val3="🔴";
                                        
                                                    } else {
                                         
                                                    if (getState(id).val==null) {val3="🔴"}; 
                                         
                                                    if (getState(id).val==false) {val3="🔵"} else {val3="🟢"}         
                                         
                                                }
                                        
                                             tabelleBind(); //HIER NICHTS ÄNDERN : HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT  - diese function muss als letztes in der eigenen schleife aufgerufen werden
                                        
                                           }}); //Schleifen Ende - je nach schleifenart muss hier etwas geändert werden !!!!!!!!!
                                        
                                         
                                        
                                        //-------------------------------------------------------------------------------------------------------------------------------------------------
                                        
                                        //--------------------------------------------------Ende der schleife------------------------------------------------------------------------------
                                        
                                        //-------------------------------------------------------------------------------------------------------------------------------------------------
                                        
                                         
                                        
                                              tabelleFinish(); // AB HIER NICHTS ÄNDERN - tabelle fertigstellen
                                        
                                             
                                        
                                        } // function ende
                                        
                                         
                                        
                                        //MAIN:
                                        
                                         
                                        
                                         
                                        
                                        schedule(mySchedule,  function () {
                                        
                                         writeHTML();
                                        
                                         if (braucheEinFile) {writeFile(home, path ,htmlOut, function (error) { /* log('file written');*/  });}
                                        
                                        }); 
                                        
                                        writeHTML();
                                        
                                         
                                        
                                         
                                        
                                        function tabelleBind(){
                                        
                                             //HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT - hat man oben 4 Felder definiert, braucht man hier 4 Werte 
                                        
                                           
                                        
                                               switch (mehrfachTabelle) {  
                                        
                                                case 1:  if(counter%2==0){  htmlOut=htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td></tr>"; break;} else
                                        
                                                                         {  htmlOut=htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td></tr>"; break;}
                                        
                                                case 2: if(counter%4==0){ 
                                        
                                                         if(counter%2==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                        
                                                                            ";\"align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td>"; } 
                                        
                                                                      else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td></tr>";} break;
                                        
                                                            }else{
                                        
                                                         if(counter%2==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                        
                                                                            ";\" align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td>"; } 
                                        
                                                                      else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td></tr>";} break;}                  
                                        
                                                case 3:  if(counter%2==0)   {
                                        
                                                          if(counter%3==0 )  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                        
                                                                                                ";\" align=left>&ensp;"+val3+"&ensp;</td>"; } 
                                        
                                                                      else { if(counter%3==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                        
                                                                                                ";color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td>";} 
                                        
                                                                                       else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td></tr>";}
                                        
                                                                                 } break;}else{
                                        
                                                          if(counter%3==0 )  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                        
                                                                                                ";\" align=left>&ensp;"+val3+"&ensp;</td>"; } 
                                        
                                                                      else { if(counter%3==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                        
                                                                                                ";color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td>";} 
                                        
                                                                                       else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td></tr>";}
                                        
                                                                                 } break;}
                                        
                                         
                                        
                                                case 4:  if(counter%8==0)   {
                                        
                                                         if(counter%4==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+ ";\" align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td>"; } 
                                        
                                                                          else {if(counter%4==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"; color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td>";} 
                                        
                                                                                       else    {if(counter%4==3)  { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"&ensp;>"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+ "color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td></tr>";} 
                                        
                                                                                                         else    {htmlOut  = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\"align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td>";}}
                                        
                                                                                 } break;}else{
                                        
                                                         if(counter%4==0)   {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+ ";\" align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td>"; } 
                                        
                                                                          else {if(counter%4==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+ ";color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td>";} 
                                        
                                                                                       else    {if(counter%4==3)  { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"&ensp;>"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+"  color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td></tr>";} 
                                        
                                                                                                         else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\"align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td>";}}
                                        
                                                                                 } break;     }                   
                                        
                                         
                                        
                                             } //switch ende
                                        
                                         
                                        
                                        }
                                        
                                         
                                        
                                         
                                        
                                        function tabelleFinish() {
                                        
                                         
                                        
                                             // tabelle fertigstellen
                                        
                                         
                                        
                                         
                                        
                                               switch (mehrfachTabelle) {  
                                        
                                               case 1:    break;
                                        
                                         
                                        
                                               case 2:    
                                        
                                                          if(counter%2==0)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');   
                                        
                                                        
                                        
                                                          break;
                                        
                                         
                                        
                                               case 3:   if(counter%3==1)  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");
                                        
                                                         if(counter%3==2)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');      
                                        
                                                         if(counter%3==0)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");
                                        
                                                       
                                        
                                                          break;
                                        
                                               case 4:   if(counter%4==3) { log(htmlOut); htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>"); log(htmlOut)}
                                        
                                                         if(counter%4==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");
                                        
                                                         if(counter%4==1)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");    
                                        
                                                         if(counter%4==0)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");      
                                        
                                                         break; } 
                                        
                                         
                                        
                                         
                                        
                                                 var htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: "+htmlÜberFontGroesse+"; font-weight:"+htmlSchriftWeite+ "\">"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</p>"; 
                                        
                                               var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 70%; text-align: right;\" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>";
                                        
                                                
                                        
                                                if (!htmlSignature) htmlUnter="";
                                        
                                                  //Ausgabe über VIS html widget - tabelle in datenpunkt schreiben - html tabelle ohne html header und body
                                        
                                                   var htmlOutVIS="";
                                        
                                                 //  htmlUberschrift ? htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>" : htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>";
                                        
                                                    if (htmlUberschrift) 
                                        
                                                        { zentriert ? htmlOutVIS=htmlZentriert+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter : htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter ;
                                        
                                         
                                        
                                                      } else {
                                        
                                                       zentriert ?  htmlOutVIS=htmlZentriert+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter :  htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter;
                                        
                                         
                                        
                                                         }
                                        
                                         
                                        
                                          // log("bin raus aus tabelleBind");
                                        
                                                   if (braucheEinVISWidget) setState(dpVIS, htmlOutVIS );
                                        
                                         
                                        
                                         var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 80%;  text-align: center; \" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>"
                                        
                                         var htmlEnd="</table>"+htmlUnter+"</div></body>";
                                        
                                         if (!htmlSignature) htmlUnter="";
                                        
                                         
                                        
                                         //mit oder ohne überschrift - zentriert oder links
                                        
                                        htmlUberschrift ? htmlOut=htmlStart+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd : htmlOut=htmlStart+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd;
                                        
                                         //log(htmlOut);
                                        
                                         
                                        
                                         
                                        
                                        }
                                        
                                         
                                        
                                         
                                        
                                         
                                        
                                         
                                        
                                         
                                        
                                         
                                        
                                         
                                        
                                         
                                        
                                        
                                         
                                        
                                         
                                        
                                         
                                        
                                        
                                        liv-in-sky 2 Replies Last reply Reply Quote 0
                                        • liv-in-sky
                                          liv-in-sky @stenmic last edited by

                                          @stenmic

                                          kannst du das bitte mit chrome browser machen - firefox geht da nicht richtig - siehst du an den vielen leerzeilen

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

                                            @stenmic

                                            habe es nachgebaut:

                                            Image 6.png

                                            hier kannst du den teil rauskopieren - da mir name und satisfaction oft fehlt, sind da noch abfragen dazugekommen

                                             //@liv-in-sky 2020  4.2.-18:42
                                            
                                            
                                            //HIER WIRD PFAD UND FILENAME DEFINIERT
                                            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
                                            let   braucheEinVISWidget=true;                     // bei true wird ein html-tabelle in einen dp geschrieben - siehe nächste zeile
                                            let dpVIS="controll-own.0.AAATEST.TestHTML"         //WICHTIG wenn "braucheEinVISWidget" auf true gesetzt !!  dp zusätzlich für VIS-HTML-Basic-Widget
                                            let mySchedule=" */20 * * * * * ";                       //jede minute  
                                            
                                            //---------------------------------------
                                            
                                            //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 4
                                            var htmlFeld1='Instanz';       var Feld1lAlign="left";                     // überschrift Tabellen Spalte1 und  Ausrichtung left,right or center
                                            var htmlFeld2='Alive';        var Feld2lAlign="right";                      // überschrift Tabellen Spalte2 und  Ausrichtung left,right or center
                                            var htmlFeld3='MemHeap';         var Feld3lAlign="right";                    // überschrift Tabellen Spalte3 und  Ausrichtung left,right or center
                                            var htmlFeld4='Status';        var Feld4lAlign="left";                    // überschrift Tabellen Spalte4 und  Ausrichtung left,right or center
                                            //-----------------------------------
                                            
                                            
                                            
                                            //ÜBERSCHRIFT ÜBER TABELLE
                                            let   htmlUberschrift=false;                           // mit Überschrift über der tabelle
                                            let   htmlSignature=false;                              // anstatt der Überscghrift eine signature: - kleiner - anliegend
                                            const htmlFeldUeber='Batterie Zustand Sensoren';              // Überschrift und Signature
                                            const htmlFarbUber="white";                         // Farbe der Überschrift
                                            const htmlSchriftWeite="normal";                       // bold, normal - Fettschrift für Überschrift
                                            const htmlÜberFontGroesse="18px";                       // schriftgröße überschrift
                                            //MEHRERE TABELLEN NEBENEINANDER
                                            let   mehrfachTabelle=2;                              // bis zu 4 Tabellen werden nebeneinander geschrieben-  verkürzt das Ganze, dafür etwas breiter - MÖGLICH 1,2,3,oder 4 !!!
                                            const trennungsLinie="2";                             //extra trennungslinie bei mehrfachtabellen - evtl auf 0 stellen, wnn htmlRahmenLinien auf none sind
                                            const farbetrennungsLinie="white";
                                            const htmlFarbZweiteTabelle="white";                // Farbe der Überschrift bei jeder 2.ten Tabelle
                                            const htmlFarbTableColorUber="#BDBDBD";               // Überschrift in der tabelle - der einzelnen Spalten
                                            //ÜBERSCHRIFT SPALTEN
                                            const UeberSchriftHöhe="35";                          //Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe
                                            const LinieUnterUeberschrift="3";                   // Linie nur unter Spaltenüberschrift - 
                                            const farbeLinieUnterUeberschrift="white";
                                            const groesseUeberschrift=16;
                                            const UeberschriftStyle="normal"                     // möglich "bold"
                                            //GANZE TABELLE
                                            let abstandZelle="1";
                                            let farbeUngeradeZeilen="#000000";                     //Farbe für ungerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
                                            let farbeGeradeZeilen="#151515";                        //Farbe für gerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
                                            let weite="auto";                                     //Weite der Tabelle
                                            let zentriert=true;                                   //ganze tabelle zentriert
                                            const backgroundAll="#000000";                        //Hintergrund für die ganze Seite - für direkten aufruf oder iqontrol sichtber - keine auswirkung auf vis-widget
                                            const htmlSchriftart="Helvetica";
                                            const htmlSchriftgroesse="14px";
                                            //FELDER UND RAHMEN
                                            let   UeberschriftSpalten=true;                // ein- oder ausblenden der spatlen-überschriften
                                            const htmlFarbFelderschrift="#BDBDBD";                  // SchriftFarbe der Felder
                                            const htmlFarbFelderschrift2="#D8D8D8";                 // SchriftFarbe der Felder für jede 2te Tabelle
                                            const htmlFarbTableColorGradient1="#424242";          //  Gradient - Hintergrund der Tabelle - Verlauffarbe
                                            const htmlFarbTableColorGradient2="#424242";          //  Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf
                                            const htmlFarbTableBorderColor="grey";             // Farbe des Rahmen - is tdieser gleich den gradienten, sind die rahmen unsichtbar
                                            let htmlRahmenLinien="none";                            // Format für Rahmen: MÖGLICH: "none" oder "all" oder "cols" oder "rows"
                                            const htmlSpalte1Weite="auto";                   //  Weite der ersten beiden  Spalten oder z.b. 115px
                                            
                                            // HIER NICHTS  ÄNDERN
                                            
                                            let borderHelpBottum;
                                            let borderHelpRight;
                                            let htmlcenterHelp;
                                            let htmlcenterHelp2;
                                            
                                            if(htmlRahmenLinien=="rows") {borderHelpBottum=1;borderHelpRight=0;}
                                            if(htmlRahmenLinien=="cols") {borderHelpBottum=0;borderHelpRight=1;}
                                            if(htmlRahmenLinien=="none") {borderHelpBottum=0;borderHelpRight=0;}
                                            if(htmlRahmenLinien=="all")  {borderHelpBottum=1;borderHelpRight=1;}
                                            zentriert ? htmlcenterHelp="auto" : htmlcenterHelp="left";
                                            zentriert ? htmlcenterHelp2="center" : htmlcenterHelp2="left";
                                            
                                            
                                            const htmlZentriert='<center>'
                                            const htmlStart=    "<!DOCTYPE html><html lang=\"de\"><head><title>Vorlage</title><meta http-equiv=\"content-type\" content=\"text/html; 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+"}"+"td:nth-child(2) {width:"+htmlSpalte1Weite+"}"+
                                                             " </style></head><body> <div>";
                                            //const htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-weight: bold\">"+htmlFeldUeber+"</p>";                    
                                            const htmlTabStyle= "<table bordercolor=\""+htmlFarbTableBorderColor+"\" border=\"2px\" cellspacing=\""+abstandZelle+"\" cellpadding=\""+abstandZelle+"\" width=\""+weite+"\" rules=\""+htmlRahmenLinien+"\" style=\"color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+
                                                                "; font-family:"+htmlSchriftart+";background-image: linear-gradient(42deg,"+htmlFarbTableColorGradient2+","+htmlFarbTableColorGradient1+");\">";
                                            const htmlTabUeber1="<tr height=\""+UeberSchriftHöhe+"\" style=\"color:"+htmlFarbTableColorUber+"; font-size: "+groesseUeberschrift+"px; font-weight: "+UeberschriftStyle+" ;  border-bottom: "+LinieUnterUeberschrift+"px solid "+farbeLinieUnterUeberschrift+" \">";
                                            const htmlTabUeber3="</tr>";
                                            
                                            
                                            
                                            
                                            //NICHTS ÄNDERN - abhängig von den oben definierten _Spalten - in diesem Beispiel sind es 4
                                            
                                            var htmlTabUeber2="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+">&ensp;"+htmlFeld1+"&ensp;</td><td width="+htmlSpalte1Weite+" align="+Feld2lAlign+">&ensp;"+htmlFeld2+"&ensp;</td><td  align="+Feld3lAlign+">&ensp;"+htmlFeld3+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+htmlFeld4+"&ensp;</td>";
                                            var htmlTabUeber2_1="<td width="+htmlSpalte1Weite+" align=="+Feld1lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld1+"&ensp;</td><td width="+htmlSpalte1Weite+"  align="+Feld2lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld2+
                                                               "&ensp;</td><td  align=="+Feld3lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld3+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld4+
                                                               "&ensp;</td>";
                                            //------------------------------------------------------
                                            
                                            
                                            var htmlOut="";
                                            var mix;
                                            var counter;
                                            var val1; var val2; var val0; var val3;
                                            var htmlTabUeber="";
                                            
                                            function writeHTML(){
                                            
                                            
                                            htmlOut="";
                                            
                                            
                                            
                                            counter=-1;
                                            htmlTabUeber="";
                                            switch (mehrfachTabelle) { 
                                               case 1: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber3;  break;
                                               case 2: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
                                               case 3: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2+htmlTabUeber2+htmlTabUeber3; break;
                                               case 4: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
                                            }; 
                                            if (!UeberschriftSpalten) {htmlTabUeber=""} 
                                            
                                            //--------------------------------------------------------------------------------------------------------------------------------------------------
                                            //---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------
                                            //---------alle valx werte müssen von euch bestimmt werden - val0,val1,val2,val3 !!!---------------------------------------------------------------------
                                            //--------------------------------------------------------------------------------------------------------------------------------------------------
                                            
                                            let myObj=[]
                                            
                                            $('unifi.0.default.clients.*.is_online').each(function(id, i) {           // hier eigene schleife definieren
                                            
                                                   var ida = id.split('.');
                                            
                                                   //if( !(id.includes("xyz"))){
                                            
                                                                                           // SEHR WICHTIG - MUSS IN JEDER SCHLEIFE INTEGRIERT SEIN
                                            
                                                  getState(id.replace("is_online","name")).val !=null ? val0=getState(id.replace("is_online","name")).val : val0="not available"  
                                                     // val0=getState(id.replace("is_online","name")).val;
                                            
                                                     val1=getState(id.replace("is_online","ip")).val;
                                                     let val2help
                                                      if (existsState(id.replace("is_online","satisfaction"))) {val2help=getState(id.replace("is_online","satisfaction")).val;} else {val2help="na"}
                                                    
                                                     val2=val2help+" %"
                                                               
                                                     if (getState(id).val==null) {val3="🔴"}; //log(id)}; 
                                                     if (getState(id).val==false) {val3="🔵"} else{val3="🟢"}         
                                            
                                            //zwischenspeicher für sortierung
                                                   myObj.push({
                                                      wert1:val0,
                                                      wert2:val1,
                                                      wert3: val2,
                                                      wert4: val3
                                                   }); //ende array
                                                  
                                                   }); //ende schleife
                                            
                                            //for(let o=0;o<myObj.length;o++) {log(myObj[o].wert1)}
                                            
                                                   //SORTIERUNG
                                            myObj.sort(function (alpha, beta) {
                                                        if (alpha.wert1.toUpperCase().trim() > beta.wert1.toUpperCase().trim())
                                                           return 1;
                                                        if (beta.wert1.toUpperCase().trim() > alpha.wert1.toUpperCase().trim())
                                                           return -1;
                                                        return 0;
                                                       });
                                             // jetzt html erstellen     
                                            
                                            for (let i=0;i<myObj.length;i++){
                                            counter++; 
                                              
                                            val0=myObj[i].wert1
                                            val1=myObj[i].wert2
                                            val2=myObj[i].wert3
                                            val3=myObj[i].wert4
                                            
                                                tabelleBind(); //HIER NICHTS ÄNDERN : HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT  - diese function muss als letztes in der eigenen schleife aufgerufen werden
                                                
                                            }; //Schleifen Ende - je nach schleifenart muss hier etwas geändert werden !!!!!!!!!
                                            
                                            //-------------------------------------------------------------------------------------------------------------------------------------------------
                                            //--------------------------------------------------Ende der schleife------------------------------------------------------------------------------
                                            //-------------------------------------------------------------------------------------------------------------------------------------------------
                                            
                                                  tabelleFinish(); // AB HIER NICHTS ÄNDERN - tabelle fertigstellen
                                                 
                                            } // function ende
                                            
                                            //MAIN:
                                            
                                             
                                            schedule(mySchedule,  function () {
                                             writeHTML();
                                             if (braucheEinFile) {writeFile(home, path ,htmlOut, function (error) { /* log('file written');*/  });}
                                            }); 
                                            writeHTML();
                                            
                                            
                                            function tabelleBind(){
                                                 //HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT - hat man oben 4 Felder definiert, braucht man hier 4 Werte 
                                               
                                                   switch (mehrfachTabelle) {  
                                                    case 1:  if(counter%2==0){  htmlOut=htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td></tr>"; break;} else
                                                                             {  htmlOut=htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td></tr>"; break;}
                                                    case 2: if(counter%4==0){ 
                                                             if(counter%2==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                                                ";\"align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td>"; } 
                                                                          else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td></tr>";} break;
                                                                }else{
                                                             if(counter%2==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                                                ";\" align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td>"; } 
                                                                          else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td></tr>";} break;}                  
                                                    case 3:  if(counter%2==0)   {
                                                              if(counter%3==0 )  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                                                                    ";\" align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td>"; } 
                                                                          else { if(counter%3==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                                                                    ";color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td>";} 
                                                                                           else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td></tr>";}
                                                                                     } break;}else{
                                                              if(counter%3==0 )  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                                                                    ";\" align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td>"; } 
                                                                          else { if(counter%3==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                                                                    ";color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td>";} 
                                                                                           else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td></tr>";}
                                                                                     } break;}
                                            
                                                    case 4:  if(counter%8==0)   {
                                                             if(counter%4==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+ ";\" align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td>"; } 
                                                                              else {if(counter%4==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"; color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td>";} 
                                                                                           else    {if(counter%4==3)  { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"&ensp;>"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+ "color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td></tr>";} 
                                                                                                             else    {htmlOut  = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\"align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td>";}}
                                                                                     } break;}else{
                                                             if(counter%4==0)   {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+ ";\" align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td>"; } 
                                                                              else {if(counter%4==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+ ";color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td>";} 
                                                                                           else    {if(counter%4==3)  { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\"&ensp;>"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+"  color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td></tr>";} 
                                                                                                             else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\"align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td>";}}
                                                                                     } break;     }                   
                                            
                                                 } //switch ende
                                            
                                            }
                                            
                                            
                                            function tabelleFinish() {
                                            
                                                 // tabelle fertigstellen
                                            
                                            
                                                   switch (mehrfachTabelle) {  
                                                   case 1:    break;
                                            
                                                   case 2:    
                                                              if(counter%2==0)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');   
                                                            
                                                              break;
                                            
                                                   case 3:   if(counter%3==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");
                                                             if(counter%3==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');      
                                                             if(counter%3==0)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");
                                                           
                                                              break;
                                                   case 4:   if(counter%4==3) {  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");}
                                                             if(counter%4==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");
                                                             if(counter%4==1)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");    
                                                             if(counter%4==0)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");      
                                                             break; } 
                                            
                                            
                                                     var htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: "+htmlÜberFontGroesse+"; font-weight:"+htmlSchriftWeite+ "\">"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</p>"; 
                                                   var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 70%; text-align: right;\" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>";
                                                    
                                                    if (!htmlSignature) htmlUnter="";
                                                      //Ausgabe über VIS html widget - tabelle in datenpunkt schreiben - html tabelle ohne html header und body
                                                       var htmlOutVIS="";
                                                     //  htmlUberschrift ? htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>" : htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>";
                                                        if (htmlUberschrift) 
                                                            { zentriert ? htmlOutVIS=htmlZentriert+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter : htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter ;
                                            
                                                          } else {
                                                           zentriert ?  htmlOutVIS=htmlZentriert+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter :  htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter;
                                            
                                                             }
                                            
                                              // log("bin raus aus tabelleBind");
                                                       if (braucheEinVISWidget) setState(dpVIS, htmlOutVIS );
                                            
                                             var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 80%;  text-align: center; \" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>"
                                            
                                             if (!htmlSignature) htmlUnter="";
                                             var htmlEnd="</table>"+htmlUnter+"</div></body>";
                                             //mit oder ohne überschrift - zentriert oder links
                                            htmlUberschrift ? htmlOut=htmlStart+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd : htmlOut=htmlStart+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd;
                                             //log(htmlOut);
                                            
                                            
                                            }
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            

                                            S 1 Reply Last reply Reply Quote 1
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            674
                                            Online

                                            31.7k
                                            Users

                                            79.9k
                                            Topics

                                            1.3m
                                            Posts

                                            blockly javascript template
                                            19
                                            295
                                            50062
                                            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