Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. [Gelöst] ID oder Name eines State in Vis anzeigen

    NEWS

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    SOLVED [Gelöst] ID oder Name eines State in Vis anzeigen

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

      @Negalein ich schau mir das mal an - du könntest mal einen stündlichen neustart des ping adapters einrichten - vielleicht wird er dann stabiler

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

        @Dolomiti
        @Oliver-Böhm
        hier mal mein vorschlag:

        habe in blockly folgendes angelegt:Image 1.png

        inhalt ist:

        var obj = getObject("ping.0.raspberry3.192_168_178_157");
        console.log(obj.common.name)
        

        damit bekomme ich den namen - diesen speichere ich dann in einen extra datenpunkt

        (wahrscheinlich gehts auch anders - aber ich glaube, blockly direct unterstützt das nicht - https://forum.iobroker.net/post/240879)

        O 1 Reply Last reply Reply Quote 2
        • Negalein
          Negalein Global Moderator @liv-in-sky last edited by

          @liv-in-sky sagte in [Gelöst] ID oder Name eines State in Vis anzeigen:

          ich schau mir das mal an - du könntest mal einen stündlichen neustart des ping adapters einrichten - vielleicht wird er dann stabiler

          Danke

          Den Neustart mach ich seit ca. 1 Woche alle 2 Stunden.
          Keine Änderung.

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

            @Negalein bitte noch die spalten, die du haben willst - mach ich morgen

            Negalein 1 Reply Last reply Reply Quote 0
            • Negalein
              Negalein Global Moderator @liv-in-sky last edited by

              @liv-in-sky sagte in [Gelöst] ID oder Name eines State in Vis anzeigen:

              bitte noch die spalten, die du haben willst

              Name
              IP
              Status

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

                @Negalein

                teste mal das:

                Image 2.png

                • in zeile 134: trage dort deine tr064 version ein - ich habe noch tr-064-community im script - bei dir wohl ohne "-community"
                $('tr-064.*.devices.*.lastMAC-address').each(function(id, i) {  
                
                • wie immer - die datenpunte im script ganz oben definieren und bei dir anlegen (dpVIS)
                • andere einstellungen (farben, schriftgröße, symbole,...) können auch verändert werden
                • nur eine tabelle - statt 2 nebeneiander - ändere "let mehrfachTabelle=1;"

                
                
                
                //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=" */30 * * * * * ";                       //jede minute  
                
                var symbolOK="🟢";     // auch möglich: ="✅"  
                var symbolKO="⭕";     //z.b. auch "<font color=\"red\"><b>X</b>" für ein rotes kreuz  oder : ="❌"  ⚪  ⚫ ⭕  🔴 🔵 ⏱ 💀 👍 👎 📑 💲 👀
                var symbolWARN="⚠️";   
                //---------------------------------------
                
                //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 3
                var htmlFeld1='Name';      var Feld1lAlign="left";                     // ü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='Status';         var Feld3lAlign="center";                    // überschrift Tabellen Spalte3 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='Meisterschaft 2020';              // Ü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=2;                              // bis zu 4 Tabellen werden nebeneinander geschrieben-  verkürzt das Ganze, dafür etwas breiter - MÖGLICH 1,2,3,oder 4 !!!
                const htmlFarbZweiteTabelle="white";                // Farbe der Überschrift bei jeder 2.ten Tabelle
                const htmlFarbTableColorUber="white";               // Überschrift in der tabelle - der einzelnen Spalten
                //ÜBERSCHRIFT SPALTEN
                const UeberSchriftHöhe="40";                          //Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe
                const LinieUnterUeberschrift="0";                   // Linie nur unter Spaltenüberschrift - 
                const farbeLinieUnterUeberschrift="white";
                const groesseUeberschrift=16;
                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="#1C1C1C";                        //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="#FFFFFF";                  // SchriftFarbe der Felder
                const htmlFarbFelderschrift2="#FFFFFF";                 // SchriftFarbe der Felder für jede 2te Tabelle
                const htmlFarbTableColorGradient1="black";          //  Gradient - Hintergrund der Tabelle - Verlauffarbe
                const htmlFarbTableColorGradient2="black";          //  Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf
                const htmlFarbTableBorderColor="black";             // 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>";
                /*
                table td:first-child {}  //1
                table td:nth-child(2) {} //2
                table td:nth-child(3) {} //3
                table td:last-child {}   //4
                */
                
                //NICHTS ÄNDERN - abhängig von den oben definierten _Spalten - in diesem Beispiel sind es 3
                
                   	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>";
                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>";
                //------------------------------------------------------
                
                
                var htmlTabUeber="";
                var htmlOut="";
                var mix;
                var counter;
                //HIER SIND DIE  WERTE, DIE IN DER SCHLEIFE GEFILTERET WER%DEN - Jede spalte einen wert - jeder valx muss in dieser schleife gesetzt werden !!
                var val1; var val0; var val2;
                
                function writeHTML(){
                var sortArr=[];
                
                
                htmlOut="";
                
                counter=-1;
                htmlTabUeber="";
                switch (mehrfachTabelle) { 
                   case 1: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber3;  break;
                   case 2: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
                   case 3: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber3; break;
                   case 4: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
                };   
                if (!UeberschriftSpalten) {htmlTabUeber=""}
                
                
                //--------------------------------------------------------------------------------------------------------------------------------------------------
                //---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------
                //---------alle valx werte müssen von euch bestimmt werden - val0,val1,val2 !!!---------------------------------------------------------------------
                //--------------------------------------------------------------------------------------------------------------------------------------------------
                
                $('tr-064-community.*.devices.*.lastMAC-address').each(function(id, i) {           // hier eigenen hostnamen eintragen
                        var ida = id.split('.');
                      
                                                                 // SEHR WICHTIG - MUSS IN JEDER SCHLEIFE INTEGRIERT SEIN
                          let val0help=getObject(ida[0]+"."+ida[1]+"."+ida[2]+"."+ida[3]).common.name;
                          val0=val0help.replace(/(.+) \(.+\)/,"$1")
                          val1=(getState(id.replace("lastMAC-address","lastIP")).val);
                      
                          if (getState(id).val==false) {val2=symbolKO} else{val2=symbolOK}         
                
                       let help = [val0,val1,val2,];
                                sortArr.push(help);
                
                   
                     //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 !!!!!!!!!
                
                         sortArr.sort(function (alpha, beta) {
                             if (alpha[0].toUpperCase() > beta[0].toUpperCase())
                                return 1;
                             if (beta[0].toUpperCase() > alpha[0].toUpperCase())
                                return -11;
                             return 0;
                            });
                
                
                   for(var i=0;i<sortArr.length;i++) {
                       counter++;
                      val0=sortArr[i][0];
                      val1=sortArr[i][1];
                      val2=sortArr[i][2];
                      
                      tabelleBind();
                   }
                
                
                //-------------------------------------------------------------------------------------------------------------------------------------------------
                //--------------------------------------------------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();                                   //     <tdalign
                function tabelleBind(){
                       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></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></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>"; } 
                                               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></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>"; } 
                                               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></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>"; } 
                                               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>";} 
                                                                else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&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>"; } 
                                               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>";} 
                                                                else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&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>"; } 
                                                   else {if(counter%2==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>";} 
                                                                else    {if(counter%2==1 && 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></tr>";} 
                                                                                  else    {htmlOut = htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&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>"; } 
                                                   else {if(counter%2==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>";} 
                                                                else    {if(counter%2==1 && 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></tr>";} 
                                                                                  else    {htmlOut = htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>";}}
                                                          } break;}                                    
                        } //switch ende
                
                }
                
                function tabelleFinish() {
                
                 switch (mehrfachTabelle) {  
                         case 1:    break;
                         case 2:    mix=Math.abs(((counter+1)%2)-mehrfachTabelle);  
                                    if(mix==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');       
                                    break;
                         case 3:    mix =Math.abs(((counter+1)%3)-mehrfachTabelle);
                                    if(mix==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');       
                                    if(mix==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>');   
                                    break;
                         case 4:    mix=Math.abs(((counter+1)%4)-mehrfachTabelle);
                                    if(mix==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');
                                    if(mix==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(mix==3)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&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>"
                 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);
                
                
                }
                
                
                
                
                

                oder jede 2te zeile in anderer farbe

                Image 3.png

                Negalein 1 Reply Last reply Reply Quote 0
                • Negalein
                  Negalein Global Moderator @liv-in-sky last edited by Negalein

                  @liv-in-sky sagte in [Gelöst] ID oder Name eines State in Vis anzeigen:

                  teste mal das:

                  Danke, schaut schonmal gut aus.
                  Ein paar Änderungen hätte ich noch.

                  let farbeUngeradeZeilen="#000000";                     //Farbe für ungerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
                  let farbeGeradeZeilen="#1C1C1C";                        //Farbe für gerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
                  

                  //ÜBERSCHRIFT SPALTEN
                  const UeberSchriftHöhe="40";                          //Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe
                  const LinieUnterUeberschrift="0";                   // Linie nur unter Spaltenüberschrift - 
                  const farbeLinieUnterUeberschrift="white";
                  const groesseUeberschrift=16;
                  const UeberschriftStyle="bold"                     // möglich "bold"
                  

                  Leider ist es mir nicht möglich, das Fritz-Script so zu ändern, dass es gleich wie Ping-Script ausschaut.

                  
                  
                  
                  //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="0_userdata.0.Tabellen.Ping"         //WICHTIG wenn braucheEinVISWidget auf true gesetzt !!  dp zusätzlich für VIS-HTML-Basic-Widget
                  let mySchedule=" */1 * * * * ";                       //jede minute  
                  
                  //---------------------------------------
                  
                  //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 3
                  var htmlFeld1='Name';       var Feld1lAlign="left";                     // überschrift Tabellen Spalte1 und  Ausrichtung left,right or center
                  var htmlFeld2='IP';        var Feld2lAlign="left";                      // überschrift Tabellen Spalte2 und  Ausrichtung left,right or center
                  var htmlFeld3='Status';         var Feld3lAlign="center";                    // überschrift Tabellen Spalte3 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='Ping Adapter';              // Überschrift und Signature
                  const htmlFarbUber="white";                         // Farbe der Überschrift
                  const htmlSchriftWeite="bold";                       // 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 htmlFarbZweiteTabelle="white";                // Farbe der Überschrift bei jeder 2.ten Tabelle
                  const htmlFarbTableColorUber="white";               // Überschrift in der tabelle - der einzelnen Spalten
                  //GANZE TABELLE
                  let abstandZelle="1";
                  let weite="auto";                                     //Weite der Tabelle
                  let zentriert=false;                                   //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="RobotoCondensed-Light";
                  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="white";             // Farbe des Rahmen - is tdieser gleich den gradienten, sind die rahmen unsichtbar
                  let htmlRahmenLinien="all";                            // Format für Rahmen: MÖGLICH: "none" oder "all" oder "cols" oder "rows"
                  const htmlSpalte1Weite="auto";                   //  Weite der ersten beiden  Spalten oder z.b. 115px
                  
                  // HIER NICHTS  ÄNDERN
                  
                  let borderHelpBottum;
                  let borderHelpRight;
                  let htmlcenterHelp;
                  let htmlcenterHelp2;
                  
                  if(htmlRahmenLinien=="rows") {borderHelpBottum=1;borderHelpRight=0;}
                  if(htmlRahmenLinien=="cols") {borderHelpBottum=0;borderHelpRight=1;}
                  if(htmlRahmenLinien=="none") {borderHelpBottum=0;borderHelpRight=0;}
                  if(htmlRahmenLinien=="all")  {borderHelpBottum=1;borderHelpRight=1;}
                  zentriert ? htmlcenterHelp="auto" : htmlcenterHelp="left";
                  zentriert ? htmlcenterHelp2="center" : htmlcenterHelp2="left";
                  
                  
                  const htmlZentriert='<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 style=\"color:"+htmlFarbTableColorUber+"; font-weight: bold\">";
                  const htmlTabUeber3="</tr>";
                  /*
                  table td:first-child {}  //1
                  table td:nth-child(2) {} //2
                  table td:nth-child(3) {} //3
                  table td:last-child {}   //4
                  */
                  
                  //NICHTS ÄNDERN - abhängig von den oben definierten _Spalten - in diesem Beispiel sind es 3
                  
                     	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>";
                  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>";
                  //------------------------------------------------------
                  
                  
                  var htmlTabUeber="";
                  var htmlOut="";
                  var mix;
                  var counter;
                  //HIER SIND DIE  WERTE, DIE IN DER SCHLEIFE GEFILTERET WER%DEN - Jede spalte einen wert - jeder valx muss in dieser schleife gesetzt werden !!
                  var val1; var val0; var val2;var val3;
                  
                  function writeHTML(){
                  
                  
                  htmlOut="";
                  var sortArr=[];
                  
                  counter=-1;
                  htmlTabUeber="";
                  switch (mehrfachTabelle) { 
                     case 1: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber3;  break;
                     case 2: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
                     case 3: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber3; break;
                     case 4: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
                  };   
                  if (!UeberschriftSpalten) {htmlTabUeber=""}
                  
                  
                  //--------------------------------------------------------------------------------------------------------------------------------------------------
                  //---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------
                  //---------alle valx werte müssen von euch bestimmt werden - val0,val1,val2 !!!---------------------------------------------------------------------
                  //--------------------------------------------------------------------------------------------------------------------------------------------------
                  
                  $('ping.0.iobroker.*').each(function(id, i) {           // hier eigenen hostnamen eintragen
                          var ida = id.split('.');
                          if( !(id.includes("vis") || id.includes("devices") ||  id.includes("sss"))){
                                                                   // SEHR WICHTIG - MUSS IN JEDER SCHLEIFE INTEGRIERT SEIN
                            val0=getObject(ida[0]+"."+ida[1]+"."+ida[2]+"."+ida[3]).common.name;
                            val1=(getObject(ida[0]+"."+ida[1]+"."+ida[2]+"."+ida[3])._id).replace(/.+\.(\d\d.+$)/,"$1");
                            val1=val1.replace(/_/g,"."); val1=val1.replace("ping.0.iobroker","")
                            val3= formatDate(getDateObject(getState(id).lc), "DD.MM.YYYY SS:mm:ss")
                  
                           
                         //   val2=getState(id.replace("alive","memHeapUsed")).val;
                           // val1=Math.floor( ((val1help)/60/60/24) )+"d "+ Math.floor(((val1help)/60/60) % 24) +"h "+ Math.floor( ((val1help)/60) % 60 )+" m" ;
                  
                            if (getState(id).val==null) {val3="never used"}; //log(id)}; 
                       
                            if (getState(id).val==false) {val2="❌"} else{val2="✅"}         
                  
                         let help = [val0,val1,val2,val3];
                                  sortArr.push(help);
                  
                     
                       //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 !!!!!!!!!
                  
                           sortArr.sort(function (alpha, beta) {
                               if (alpha[0].toUpperCase() > beta[0].toUpperCase())
                                  return 1;
                               if (beta[0].toUpperCase() > alpha[0].toUpperCase())
                                  return -11;
                               return 0;
                              });
                  
                     tabelleAusbessern();
                        counter=0;
                        val0=""; val1=""; val2="";val3="";
                        tabelleBind(); //HIER NICHTS ÄNDERN : HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT  - diese function muss als letztes in der eigenen schleife aufgerufen werden
                        tabelleAusbessern();
                        counter=-1;
                  
                     for(var i=0;i<sortArr.length;i++) {
                         counter++;
                        val0=sortArr[i][0];
                        val1=sortArr[i][1];
                        val2=sortArr[i][2];
                        val3=sortArr[i][3];
                        tabelleBind();
                     }
                  
                  
                  //-------------------------------------------------------------------------------------------------------------------------------------------------
                  //--------------------------------------------------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();                                   //     <tdalign
                  
                  function tabelleAusbessern() {
                  
                   switch (mehrfachTabelle) {  
                           case 1:    break;
                           case 2:    mix=Math.abs(((counter+1)%2)-mehrfachTabelle);  
                                      if(mix==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');       
                                      break;
                           case 3:    mix =Math.abs(((counter+1)%3)-mehrfachTabelle);
                                      if(mix==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');       
                                      if(mix==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>');   
                                      break;
                           case 4:    mix=Math.abs(((counter+1)%4)-mehrfachTabelle);
                                      if(mix==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');
                                      if(mix==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(mix==3)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');      
                                      break; }
                  
                  
                  
                  }
                  function tabelleBind(){
                         switch (mehrfachTabelle) {  
                           case 1:                    htmlOut=htmlOut+"<tr><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td></tr>"; break;
                           case 2:  if(counter%2==0)  {htmlOut = htmlOut+"<tr><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&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></tr>";} break;
                                                      
                           case 3: if(counter%3==0 )  {htmlOut = htmlOut+"<tr><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&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>";} 
                                                                  else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td></tr>";}
                                                            } break;
                  
                  
                           case 4: if(counter%4==0)  {htmlOut = htmlOut+"<tr><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } 
                                                     else {if(counter%2==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>";} 
                                                                  else    {if(counter%2==1 && 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></tr>";} 
                                                                                    else    {htmlOut = htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>";}}
                                                            } break; } //switch ende
                  
                  }
                  
                  function tabelleFinish() {
                  
                   switch (mehrfachTabelle) {  
                           case 1:    break;
                           case 2:    mix=Math.abs(((counter+1)%2)-mehrfachTabelle);  
                                      if(mix==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');       
                                      break;
                           case 3:    mix =Math.abs(((counter+1)%3)-mehrfachTabelle);
                                      if(mix==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');       
                                      if(mix==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>');   
                                      break;
                           case 4:    mix=Math.abs(((counter+1)%4)-mehrfachTabelle);
                                      if(mix==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');
                                      if(mix==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(mix==3)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&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>"
                   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);
                  
                  
                  }
                  
                  
                  
                  
                  

                  
                  
                  
                  //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="0_userdata.0.Tabellen.Fritzgeraete"         //WICHTIG wenn braucheEinVISWidget auf true gesetzt !!  dp zusätzlich für VIS-HTML-Basic-Widget
                  let mySchedule=" */30 * * * * * ";                       //jede minute  
                  
                  var symbolOK="✅";     // auch möglich: ="✅"  
                  var symbolKO="❌";     //z.b. auch "<font color=\"red\"><b>X</b>" für ein rotes kreuz  oder : ="❌"  ⚪  ⚫ ⭕  🔴 🔵 ⏱ 💀 👍 👎 📑 💲 👀
                  var symbolWARN="⚠️";   
                  //---------------------------------------
                  
                  //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 3
                  var htmlFeld1='Name';      var Feld1lAlign="left";                     // ü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='Status';         var Feld3lAlign="center";                    // überschrift Tabellen Spalte3 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='Meisterschaft 2020';              // Ü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=2;                              // bis zu 4 Tabellen werden nebeneinander geschrieben-  verkürzt das Ganze, dafür etwas breiter - MÖGLICH 1,2,3,oder 4 !!!
                  const htmlFarbZweiteTabelle="white";                // Farbe der Überschrift bei jeder 2.ten Tabelle
                  const htmlFarbTableColorUber="white";               // Überschrift in der tabelle - der einzelnen Spalten
                  //ÜBERSCHRIFT SPALTEN
                  const UeberSchriftHöhe="40";                          //Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe
                  const LinieUnterUeberschrift="0";                   // Linie nur unter Spaltenüberschrift - 
                  const farbeLinieUnterUeberschrift="white";
                  const groesseUeberschrift=16;
                  const UeberschriftStyle="bold"                     // 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="#1C1C1C";                        //Farbe für gerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
                  let weite="auto";                                     //Weite der Tabelle
                  let zentriert=false;                                   //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="RobotoCondensed-Light";
                  const htmlSchriftgroesse="14px";
                  //FELDER UND RAHMEN
                  let   UeberschriftSpalten=true;                // ein- oder ausblenden der spatlen-überschriften
                  const htmlFarbFelderschrift="#FFFFFF";                  // SchriftFarbe der Felder
                  const htmlFarbFelderschrift2="#FFFFFF";                 // SchriftFarbe der Felder für jede 2te Tabelle
                  const htmlFarbTableColorGradient1="black";          //  Gradient - Hintergrund der Tabelle - Verlauffarbe
                  const htmlFarbTableColorGradient2="black";          //  Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf
                  const htmlFarbTableBorderColor="black";             // 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>";
                  /*
                  table td:first-child {}  //1
                  table td:nth-child(2) {} //2
                  table td:nth-child(3) {} //3
                  table td:last-child {}   //4
                  */
                  
                  //NICHTS ÄNDERN - abhängig von den oben definierten _Spalten - in diesem Beispiel sind es 3
                  
                     	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>";
                  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>";
                  //------------------------------------------------------
                  
                  
                  var htmlTabUeber="";
                  var htmlOut="";
                  var mix;
                  var counter;
                  //HIER SIND DIE  WERTE, DIE IN DER SCHLEIFE GEFILTERET WER%DEN - Jede spalte einen wert - jeder valx muss in dieser schleife gesetzt werden !!
                  var val1; var val0; var val2;
                  
                  function writeHTML(){
                  var sortArr=[];
                  
                  
                  htmlOut="";
                  
                  counter=-1;
                  htmlTabUeber="";
                  switch (mehrfachTabelle) { 
                     case 1: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber3;  break;
                     case 2: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
                     case 3: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber3; break;
                     case 4: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
                  };   
                  if (!UeberschriftSpalten) {htmlTabUeber=""}
                  
                  
                  //--------------------------------------------------------------------------------------------------------------------------------------------------
                  //---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------
                  //---------alle valx werte müssen von euch bestimmt werden - val0,val1,val2 !!!---------------------------------------------------------------------
                  //--------------------------------------------------------------------------------------------------------------------------------------------------
                  
                  $('tr-064.*.devices.*.lastMAC-address').each(function(id, i) {           // hier eigenen hostnamen eintragen
                          var ida = id.split('.');
                        
                                                                   // SEHR WICHTIG - MUSS IN JEDER SCHLEIFE INTEGRIERT SEIN
                            let val0help=getObject(ida[0]+"."+ida[1]+"."+ida[2]+"."+ida[3]).common.name;
                            val0=val0help.replace(/(.+) \(.+\)/,"$1")
                            val1=(getState(id.replace("lastMAC-address","lastIP")).val);
                        
                            if (getState(id).val==false) {val2=symbolKO} else{val2=symbolOK}         
                  
                         let help = [val0,val1,val2,];
                                  sortArr.push(help);
                  
                     
                       //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 !!!!!!!!!
                  
                           sortArr.sort(function (alpha, beta) {
                               if (alpha[0].toUpperCase() > beta[0].toUpperCase())
                                  return 1;
                               if (beta[0].toUpperCase() > alpha[0].toUpperCase())
                                  return -11;
                               return 0;
                              });
                  
                  
                     for(var i=0;i<sortArr.length;i++) {
                         counter++;
                        val0=sortArr[i][0];
                        val1=sortArr[i][1];
                        val2=sortArr[i][2];
                        
                        tabelleBind();
                     }
                  
                  
                  //-------------------------------------------------------------------------------------------------------------------------------------------------
                  //--------------------------------------------------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();                                   //     <tdalign
                  function tabelleBind(){
                         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></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></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>"; } 
                                                 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></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>"; } 
                                                 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></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>"; } 
                                                 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>";} 
                                                                  else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&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>"; } 
                                                 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>";} 
                                                                  else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&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>"; } 
                                                     else {if(counter%2==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>";} 
                                                                  else    {if(counter%2==1 && 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></tr>";} 
                                                                                    else    {htmlOut = htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&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>"; } 
                                                     else {if(counter%2==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>";} 
                                                                  else    {if(counter%2==1 && 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></tr>";} 
                                                                                    else    {htmlOut = htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>";}}
                                                            } break;}                                    
                          } //switch ende
                  
                  }
                  
                  function tabelleFinish() {
                  
                   switch (mehrfachTabelle) {  
                           case 1:    break;
                           case 2:    mix=Math.abs(((counter+1)%2)-mehrfachTabelle);  
                                      if(mix==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');       
                                      break;
                           case 3:    mix =Math.abs(((counter+1)%3)-mehrfachTabelle);
                                      if(mix==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');       
                                      if(mix==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>');   
                                      break;
                           case 4:    mix=Math.abs(((counter+1)%4)-mehrfachTabelle);
                                      if(mix==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');
                                      if(mix==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(mix==3)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&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>"
                   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);
                  
                  
                  }
                  
                  
                  
                  
                  

                  Links = Fritz
                  Rechts = Ping
                  vis.png

                  liv-in-sky sigi234 dirk1962 4 Replies Last reply Reply Quote 0
                  • liv-in-sky
                    liv-in-sky @Negalein last edited by

                    @Negalein das fritzscript ist auch mit css formatiert worden - kam nicht von mir - ist in css widget konfig

                    die farben, die du brauchst musst du in den beiden ändern - bei fritz schwarz und 1C1C1C und das andere aus dem css entnehmen und einsetzen

                    let farbeUngeradeZeilen="#000000";                     //Farbe für ungerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
                    let farbeGeradeZeilen="#1C1C1C";  
                    

                    was passiert, wenn du das css auf diese tabelle anwendest ? wird das dann nicht genommen ?

                    das fritzfile braucht noch etwas mehr breite (im widget setting), dann sollte die überschrift in einer reihe sein

                    die höhe der ersen zeile (mit den überschriften) kannst du hier einstellen:

                    const UeberSchriftHöhe="40";  
                    
                    Negalein 1 Reply Last reply Reply Quote 0
                    • sigi234
                      sigi234 Forum Testing Most Active @Negalein last edited by

                      @Negalein

                      Hinweis:

                      htmlFeldUeber='Meisterschaft 2020';

                      Negalein 1 Reply Last reply Reply Quote 0
                      • Negalein
                        Negalein Global Moderator @liv-in-sky last edited by

                        @liv-in-sky sagte in [Gelöst] ID oder Name eines State in Vis anzeigen:

                        die farben, die du brauchst musst du in den beiden ändern

                        Danke, muss die Farben noch rausfinden.

                        was passiert, wenn du das css auf diese tabelle anwendest ? wird das dann nicht genommen ?

                        Beim Ping-Script verwende ich im VIS-Editor unter "Generell---CSS Klasse" mdui-table mdui-table-ascard-r250-l mdui-table-striped noSwipe, das wird aber beim Fritz-Script im VIS-Editor unter CSS-Klasse nicht übernommen.

                        das fritzfile braucht noch etwas mehr breite (im widget setting), dann sollte die überschrift in einer reihe sein

                        funktioniert
                        DANKE
                        vis (1).png

                        1 Reply Last reply Reply Quote 0
                        • sigi234
                          sigi234 Forum Testing Most Active @Negalein last edited by

                          @Negalein sagte in [Gelöst] ID oder Name eines State in Vis anzeigen:

                          Links = Fritz

                          Bei mir werden nur 2 angezeigt.
                          Bezieht sich das Skript nur auf Geräte oder auf Alle in der FB?

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

                            @sigi234 es müßten die geräte sein , die unter geräte im setting der instanz stehen

                            Image 9.png

                            sigi234 1 Reply Last reply Reply Quote 0
                            • sigi234
                              sigi234 Forum Testing Most Active @liv-in-sky last edited by

                              @liv-in-sky sagte in [Gelöst] ID oder Name eines State in Vis anzeigen:

                              @sigi234 es müßten die geräte sein , die unter geräte im setting der instanz stehen

                              Jupp das stimmt.
                              Ein auslesen Aller in der FB ist das möglich?

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

                                @sigi234 ich denke nicht - zumindest weiß ich nicht, ob der adapter die im netzwerk angemeldeten clients anzeigt (apollon fragen ?)- es gibt aber ein script, indem über exec ein befehl ausgeführt wird, der das ganze netzwerk durch pingt und die namen auflöst - der befehl lautet nmap
                                https://forum.iobroker.net/post/278079

                                das problem - du hast ja windows - da gibt es den befehl auch (kann man installieren) aber die auswertung sieht anders aus, da die linux befehle auch nicht da sind, die dazu genutzt werden - man müßte dann über javascript eine auswertung machen

                                sigi234 1 Reply Last reply Reply Quote 0
                                • sigi234
                                  sigi234 Forum Testing Most Active @liv-in-sky last edited by

                                  @liv-in-sky sagte in [Gelöst] ID oder Name eines State in Vis anzeigen:

                                  das problem - du hast ja windows

                                  Jupp

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

                                    @sigi234 so sieht das aus, wenn mit admin rechten auf windows 10 der befehl ausgeführt wird - es werden alle geräte aufgeführt - in java könnte man das analysieren und herausfiltern, was man braucht

                                    Image 10.png

                                    aber ein problem ist noch: die nicht eingeschalteten tauchen nicht mehr auf. d.h man müßte eine eigene datenbank (datenpunkt) pflegen, um anzuzeigen, ob ein gerät aktiv oder inaktiv ist - den der befehl zeigt ja nur die, die da sind

                                    sigi234 1 Reply Last reply Reply Quote 0
                                    • sigi234
                                      sigi234 Forum Testing Most Active @liv-in-sky last edited by

                                      @liv-in-sky sagte in [Gelöst] ID oder Name eines State in Vis anzeigen:

                                      den der befehl zeigt ja nur die, die da sind

                                      Würde mir genügen.

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

                                        @sigi234 bin momentan eingespannt in den andern scripts - aber vielleicht kannst du den nmap für windows finden und installieren, es über exec (blockly) aufrufen und das ergebnis in einen datenpunkt schreiben - das würde schon helfen - das script würde ich dann später machen - habe noch andere tabellen versprochen

                                        1 Reply Last reply Reply Quote 0
                                        • Negalein
                                          Negalein Global Moderator @sigi234 last edited by

                                          @sigi234 sagte in [Gelöst] ID oder Name eines State in Vis anzeigen:

                                          Hinweis:
                                          htmlFeldUeber='Meisterschaft 2020';

                                          hab ich so im Script gelassen, da ich die Überschrift sowieso ausgeschaltet habe

                                          1 Reply Last reply Reply Quote 0
                                          • Negalein
                                            Negalein Global Moderator last edited by

                                            @liv-in-sky

                                            Ist es möglich, nach IP zu sortieren?

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

                                              @Negalein

                                              damit müßte es funktionierne - sortierung nach ip

                                              du kannst das setting oben alles wieder reinkopieren in das neue script und anschliessend (nach dem ersetzen des settings) mußt du die zeile 11 wieder reinkopieren

                                               let sortiereClient=false;                            //true nach client false nach ip
                                              

                                              
                                              
                                              
                                              //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=" */30 * * * * * ";                       //jede minute  
                                              let sortiereClient=false;                            //true nach client false nach ip
                                              
                                              var symbolOK="🟢";     // auch möglich: ="✅"  
                                              var symbolKO="⭕";     //z.b. auch "<font color=\"red\"><b>X</b>" für ein rotes kreuz  oder : ="❌"  ⚪  ⚫ ⭕  🔴 🔵 ⏱ 💀 👍 👎 📑 💲 👀
                                              var symbolWARN="⚠️";   
                                              //---------------------------------------
                                              
                                              //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 3
                                              var htmlFeld1='Name';      var Feld1lAlign="left";                     // ü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='Status';         var Feld3lAlign="center";                    // überschrift Tabellen Spalte3 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='Fritzbox - Geräte';              // Ü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 htmlFarbZweiteTabelle="white";                // Farbe der Überschrift bei jeder 2.ten Tabelle
                                              const htmlFarbTableColorUber="white";               // Überschrift in der tabelle - der einzelnen Spalten
                                              //ÜBERSCHRIFT SPALTEN
                                              const UeberSchriftHöhe="40";                          //Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe
                                              const LinieUnterUeberschrift="0";                   // Linie nur unter Spaltenüberschrift - 
                                              const farbeLinieUnterUeberschrift="white";
                                              const groesseUeberschrift=16;
                                              const UeberschriftStyle="bold"                     // möglich "bold"
                                              //GANZE TABELLE
                                              let abstandZelle="2";
                                              let farbeUngeradeZeilen="#585858";                     //Farbe für ungerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
                                              let farbeGeradeZeilen="#1C1C1C";                        //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="#FFFFFF";                  // SchriftFarbe der Felder
                                              const htmlFarbFelderschrift2="#FFFFFF";                 // SchriftFarbe der Felder für jede 2te Tabelle
                                              const htmlFarbTableColorGradient1="black";          //  Gradient - Hintergrund der Tabelle - Verlauffarbe
                                              const htmlFarbTableColorGradient2="black";          //  Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf
                                              const htmlFarbTableBorderColor="black";             // 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>";
                                              /*
                                              table td:first-child {}  //1
                                              table td:nth-child(2) {} //2
                                              table td:nth-child(3) {} //3
                                              table td:last-child {}   //4
                                              */
                                              
                                              //NICHTS ÄNDERN - abhängig von den oben definierten _Spalten - in diesem Beispiel sind es 3
                                              
                                                 	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>";
                                              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>";
                                              //------------------------------------------------------
                                              
                                              
                                              var htmlTabUeber="";
                                              var htmlOut="";
                                              var mix;
                                              var counter;
                                              //HIER SIND DIE  WERTE, DIE IN DER SCHLEIFE GEFILTERET WER%DEN - Jede spalte einen wert - jeder valx muss in dieser schleife gesetzt werden !!
                                              var val1; var val0; var val2;
                                              
                                              function writeHTML(){
                                              var sortArr=[];
                                              
                                              
                                              htmlOut="";
                                              
                                              counter=-1;
                                              htmlTabUeber="";
                                              switch (mehrfachTabelle) { 
                                                 case 1: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber3;  break;
                                                 case 2: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
                                                 case 3: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber3; break;
                                                 case 4: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
                                              };   
                                              if (!UeberschriftSpalten) {htmlTabUeber=""}
                                              
                                              
                                              //--------------------------------------------------------------------------------------------------------------------------------------------------
                                              //---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------
                                              //---------alle valx werte müssen von euch bestimmt werden - val0,val1,val2 !!!---------------------------------------------------------------------
                                              //--------------------------------------------------------------------------------------------------------------------------------------------------
                                              
                                              $('tr-064-community.*.devices.*.lastMAC-address').each(function(id, i) {           // hier eigenen hostnamen eintragen
                                                      var ida = id.split('.');
                                                    
                                                                                               // SEHR WICHTIG - MUSS IN JEDER SCHLEIFE INTEGRIERT SEIN
                                                        let val0help=getObject(ida[0]+"."+ida[1]+"."+ida[2]+"."+ida[3]).common.name;
                                                        val0=val0help.replace(/(.+) \(.+\)/,"$1")
                                                        val1=(getState(id.replace("lastMAC-address","lastIP")).val);
                                                    
                                                        if (getState(id).val==false) {val2=symbolKO} else{val2=symbolOK}         
                                              
                                                     let help = [val0,val1,val2,];
                                                              sortArr.push(help);
                                              
                                                 
                                                   //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 !!!!!!!!!
                                              
                                                 if (sortiereClient){
                                              
                                                       sortArr.sort(function (alpha, beta) {
                                                           if (alpha[0].toUpperCase() > beta[0].toUpperCase())
                                                              return 1;
                                                           if (beta[0].toUpperCase() > alpha[0].toUpperCase())
                                                              return -1;
                                                           return 0;
                                                          });} else {
                                              
                                                          sortArr.sort(function (alpha, beta) {
                                                              if (parseFloat(beta[1].replace(/.+\.(.+)$/,"$1")) > parseFloat(alpha[1].replace(/.+\.(.+)$/,"$1")))
                                                                  return -1;
                                                              if (parseFloat(alpha[1].replace(/.+\.(.+)$/,"$1")) > parseFloat(beta[1].replace(/.+\.(.+)$/,"$1")))
                                                                  return 1;
                                                           return 0;
                                                          });  
                                                          }
                                              
                                              
                                                 for(var i=0;i<sortArr.length;i++) {
                                                     counter++;
                                                    val0=sortArr[i][0];
                                                    val1=sortArr[i][1];
                                                    val2=sortArr[i][2];
                                                    
                                                    tabelleBind();
                                                 }
                                              
                                              
                                              //-------------------------------------------------------------------------------------------------------------------------------------------------
                                              //--------------------------------------------------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();                                   //     <tdalign
                                              function tabelleBind(){
                                                     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></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></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>"; } 
                                                                             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></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>"; } 
                                                                             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></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>"; } 
                                                                             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>";} 
                                                                                              else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&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>"; } 
                                                                             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>";} 
                                                                                              else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&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>"; } 
                                                                                 else {if(counter%2==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>";} 
                                                                                              else    {if(counter%2==1 && 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></tr>";} 
                                                                                                                else    {htmlOut = htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&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>"; } 
                                                                                 else {if(counter%2==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>";} 
                                                                                              else    {if(counter%2==1 && 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></tr>";} 
                                                                                                                else    {htmlOut = htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>";}}
                                                                                        } break;}                                    
                                                      } //switch ende
                                              
                                              }
                                              
                                              function tabelleFinish() {
                                              
                                               switch (mehrfachTabelle) {  
                                                       case 1:    break;
                                                       case 2:    mix=Math.abs(((counter+1)%2)-mehrfachTabelle);  
                                                                  if(mix==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');       
                                                                  break;
                                                       case 3:    mix =Math.abs(((counter+1)%3)-mehrfachTabelle);
                                                                  if(mix==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');       
                                                                  if(mix==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>');   
                                                                  break;
                                                       case 4:    mix=Math.abs(((counter+1)%4)-mehrfachTabelle);
                                                                  if(mix==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');
                                                                  if(mix==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(mix==3)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&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>"
                                               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);
                                              
                                              
                                              }
                                              
                                              
                                              
                                              
                                              

                                              Negalein Agria4800 2 Replies Last reply Reply Quote 0
                                              • First post
                                                Last post

                                              Support us

                                              ioBroker
                                              Community Adapters
                                              Donate

                                              556
                                              Online

                                              31.7k
                                              Users

                                              79.8k
                                              Topics

                                              1.3m
                                              Posts

                                              vis
                                              16
                                              201
                                              20437
                                              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