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

  • Default (No Skin)
  • No Skin
Collapse
Logo
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. HTML Tabelle für Shelly Device Übersicht

NEWS

  • Wartung am 15.11. – Forum ab 22:00 Uhr nicht erreichbar
    BluefoxB
    Bluefox
    11
    2
    209

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

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

HTML Tabelle für Shelly Device Übersicht

HTML Tabelle für Shelly Device Übersicht

Scheduled Pinned Locked Moved Visualisierung
261 Posts 13 Posters 41.9k Views 16 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • da_WoodyD da_Woody

    @liv-in-sky said in HTML Tabelle für Shelly Device Übersicht:

    hatte gehofft, das es keine user mit einem solchen netz, wie du es hast

    flach.gif
    die hoffnung stürbt zuletzt...
    das mit iqontrol is klar, thnx. hab heute bißchen knoten in den hirnwindungen. vor 3 tagen den broker zerballert, backup der VM eingespielt und latürnich keine sicherung von iqontrol-config gehabt. 2 tage des komplett umstylens in A....! wutb.gif

    würde das eigentlich auch für sonoff/tasmota dingens funktionieren? hmm, da könnte ich ja eigentlich auch den TasmoAdmin in iqontrol reintackern...

    liv-in-skyL Offline
    liv-in-skyL Offline
    liv-in-sky
    wrote on last edited by
    #39

    @da_woody das sonoff script kann sogar noch viel mehr - da kannst du auch schalten mit (weiß nicht,o das auch in iqontrol funk. ) 🙂

    https://forum.iobroker.net/topic/28953/sonoff-geräte-als-html-tabelle-vis-iqontrol

    tasmo admin brauch ich für die anzeige nicht

    Image 5.png

    nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

    1 Reply Last reply
    0
    • liv-in-skyL liv-in-sky

      @da_woody

      teste bitte mal dieses file - kann das nach IP richtig sortieren ??

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

      da_WoodyD Offline
      da_WoodyD Offline
      da_Woody
      wrote on last edited by da_Woody
      #40

      @liv-in-sky hmm, hab das jetzt als wert definiert, DP eingebunden, voller bildschirm, sortieren funzt nicht.
      85327276-19b7-4d1a-b7a2-26b88d4f928b-grafik.png
      örgs, das mit sem sonoff script schau ich mich an! bin ja vorher erst über das da gestolpert... 😄

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

      liv-in-skyL 2 Replies Last reply
      0
      • da_WoodyD da_Woody

        @liv-in-sky hmm, hab das jetzt als wert definiert, DP eingebunden, voller bildschirm, sortieren funzt nicht.
        85327276-19b7-4d1a-b7a2-26b88d4f928b-grafik.png
        örgs, das mit sem sonoff script schau ich mich an! bin ja vorher erst über das da gestolpert... 😄

        liv-in-skyL Offline
        liv-in-skyL Offline
        liv-in-sky
        wrote on last edited by
        #41

        @da_woody in icontrol wird das auch nicht funktionieren - da laufen interne scripte , die werden von iqontrol gesperrt

        das kann ich auch nicht ändern - umsetzen könnte man das nur, indem man einene eigenen schalter (button) in iqontrol definiert und mein script umschreibt, dass es sich die sortierung von einem datenpunkt holt. d.h. du hättest dann zwei icons/kacheln für die tabelle

        warum die buttons nicht funktionieren, müßte man im iqontrol thread nachfragen

        nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

        1 Reply Last reply
        0
        • da_WoodyD da_Woody

          @liv-in-sky hmm, hab das jetzt als wert definiert, DP eingebunden, voller bildschirm, sortieren funzt nicht.
          85327276-19b7-4d1a-b7a2-26b88d4f928b-grafik.png
          örgs, das mit sem sonoff script schau ich mich an! bin ja vorher erst über das da gestolpert... 😄

          liv-in-skyL Offline
          liv-in-skyL Offline
          liv-in-sky
          wrote on last edited by
          #42

          @da_woody versuche mal im script

          ca. zeile 51

          let mehrfachTabelle=2;   
          

          viellicht bekommst du dann mehr info auf die seite

          nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

          da_WoodyD 1 Reply Last reply
          0
          • liv-in-skyL liv-in-sky

            @da_woody versuche mal im script

            ca. zeile 51

            let mehrfachTabelle=2;   
            

            viellicht bekommst du dann mehr info auf die seite

            da_WoodyD Offline
            da_WoodyD Offline
            da_Woody
            wrote on last edited by
            #43

            @liv-in-sky

            //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 3 - es MÜSSEN in allen Arrays die GLEICHE Anzahl für die Werte sein
            
            let val=             ["dummy1","dummy2","dummy3","dummy4","dummy5","dummy6","dummy7"];             // GLEICHE ANZAHL !! HIER SIND DIE  WERTE, DIE IN DER SCHLEIFE GEFILTERET WERDEN -  jeder val[x] muss unten in der schleife gesetzt werden !!
            
            let Feld1lAlign=     ["left","center","center","left","center","left","left"];                     // GLEICHE ANZAHL !! AUSRICHTUNG IN DER SPALTE
            
            let htmlSpalte1Weite=["auto","auto","67","auto","auto","auto","auto"];                             // GLEICHE ANZAHL !! BREITE DER SPALTE, wenn nicht auto
            
            let htmlFeld=        ["NAME","IP","ONLINE","UPTIME","RSSI","ID","VERSION"];                        // GLEICHE ANZAHL !! NAME/ÜBERSCHRIFT DER SPALTE
            
            let schalterInSpaltenUeberschrift=[true,true,true,true,true,true,true];                            // WENN BUTTONS INSTALLIERT WERDEN - sonst false
            
            let symbolSchalter=               ["na","&#8644;","&#8644;"];   // SYMBOLE DER BUTTONS - standardmäßig sind die spaltennamen (htmlFeld) genutzt - werden im standard nicht genutzt
            
            
            

            zeile5 ist deine angesprochene zeile 51...

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

            liv-in-skyL 1 Reply Last reply
            0
            • da_WoodyD da_Woody

              @liv-in-sky

              //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 3 - es MÜSSEN in allen Arrays die GLEICHE Anzahl für die Werte sein
              
              let val=             ["dummy1","dummy2","dummy3","dummy4","dummy5","dummy6","dummy7"];             // GLEICHE ANZAHL !! HIER SIND DIE  WERTE, DIE IN DER SCHLEIFE GEFILTERET WERDEN -  jeder val[x] muss unten in der schleife gesetzt werden !!
              
              let Feld1lAlign=     ["left","center","center","left","center","left","left"];                     // GLEICHE ANZAHL !! AUSRICHTUNG IN DER SPALTE
              
              let htmlSpalte1Weite=["auto","auto","67","auto","auto","auto","auto"];                             // GLEICHE ANZAHL !! BREITE DER SPALTE, wenn nicht auto
              
              let htmlFeld=        ["NAME","IP","ONLINE","UPTIME","RSSI","ID","VERSION"];                        // GLEICHE ANZAHL !! NAME/ÜBERSCHRIFT DER SPALTE
              
              let schalterInSpaltenUeberschrift=[true,true,true,true,true,true,true];                            // WENN BUTTONS INSTALLIERT WERDEN - sonst false
              
              let symbolSchalter=               ["na","&#8644;","&#8644;"];   // SYMBOLE DER BUTTONS - standardmäßig sind die spaltennamen (htmlFeld) genutzt - werden im standard nicht genutzt
              
              
              

              zeile5 ist deine angesprochene zeile 51...

              liv-in-skyL Offline
              liv-in-skyL Offline
              liv-in-sky
              wrote on last edited by
              #44

              @da_woody

              ich meine zeile 51

              aber du solltest erstmal chrome zum kopieren verwenden - firefox fügt immer zeilen ein !!!!!!!!!!!!!!

              nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

              da_WoodyD 1 Reply Last reply
              0
              • liv-in-skyL liv-in-sky

                @da_woody

                ich meine zeile 51

                aber du solltest erstmal chrome zum kopieren verwenden - firefox fügt immer zeilen ein !!!!!!!!!!!!!!

                da_WoodyD Offline
                da_WoodyD Offline
                da_Woody
                wrote on last edited by
                #45

                @liv-in-sky hrnz, der browserwixx geht mir schon ... 😄
                ok, sieht besser aus. obwohl, auf der moni geht sich die breite nicht ganz aus...
                4240a14a-6985-4281-9808-d5522c965a08-grafik.png
                muss kurz weg, c ya l8er... thnx inzwischen...

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

                D 1 Reply Last reply
                0
                • da_WoodyD da_Woody

                  @liv-in-sky hrnz, der browserwixx geht mir schon ... 😄
                  ok, sieht besser aus. obwohl, auf der moni geht sich die breite nicht ganz aus...
                  4240a14a-6985-4281-9808-d5522c965a08-grafik.png
                  muss kurz weg, c ya l8er... thnx inzwischen...

                  D Offline
                  D Offline
                  dos1973
                  wrote on last edited by
                  #46

                  @liv-in-sky
                  Nochmals ein Herzliches Danke, ist Klasse geworden.

                  ich hätte noch 2-3 Wünsche, wenn das noch machbar wäre 😉

                  fully-screenshot-5.png

                  Überschrift: Könntest du für die Überschrift auch den Font einstellen oder dass er den Font der Tabelle nimmt, dann wäre es einheitlich.

                  Überschrift: Muss diese Umrandung in der Überschrift sein?

                  Überschrift ganz rechts bei (Version): könntest du die Shelly zählen und anzeigen, da würde mir gefallen (32/8)- soll heissen 32 online und 8 offline. Schriftfarbe wie die online und Offline konfigurierte Farbe?

                  Tabelle: kannst du für die erste Spalte (Name) einen Padding-Left einstellen. Dann kann ich die Tabelle auf die ganze Breite setzen, aber es wirkt links nicht so gequetscht.

                  Danke Dir.

                  liv-in-skyL 3 Replies Last reply
                  0
                  • N Nordischerjung

                    @liv-in-sky funktioniert, danke schön. Ich dachte nur, dass du das ja nicht extra meinetwegen so aufwendig machen musst.

                    6575cf2a-875c-41e3-a206-8f1c18b4adb8-grafik.png

                    D Offline
                    D Offline
                    dos1973
                    wrote on last edited by
                    #47

                    @nordischerjung

                    wie hast du denn die Farbigen icons beim Online Staus gemacht? - also das rote X und den grünen Haken?

                    1 Reply Last reply
                    0
                    • D dos1973

                      @liv-in-sky
                      Nochmals ein Herzliches Danke, ist Klasse geworden.

                      ich hätte noch 2-3 Wünsche, wenn das noch machbar wäre 😉

                      fully-screenshot-5.png

                      Überschrift: Könntest du für die Überschrift auch den Font einstellen oder dass er den Font der Tabelle nimmt, dann wäre es einheitlich.

                      Überschrift: Muss diese Umrandung in der Überschrift sein?

                      Überschrift ganz rechts bei (Version): könntest du die Shelly zählen und anzeigen, da würde mir gefallen (32/8)- soll heissen 32 online und 8 offline. Schriftfarbe wie die online und Offline konfigurierte Farbe?

                      Tabelle: kannst du für die erste Spalte (Name) einen Padding-Left einstellen. Dann kann ich die Tabelle auf die ganze Breite setzen, aber es wirkt links nicht so gequetscht.

                      Danke Dir.

                      liv-in-skyL Offline
                      liv-in-skyL Offline
                      liv-in-sky
                      wrote on last edited by
                      #48

                      @dos1973 das mit den symbolen bau ich ein - die kannst du dann oben definieren

                      nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                      1 Reply Last reply
                      1
                      • D dos1973

                        @liv-in-sky
                        Nochmals ein Herzliches Danke, ist Klasse geworden.

                        ich hätte noch 2-3 Wünsche, wenn das noch machbar wäre 😉

                        fully-screenshot-5.png

                        Überschrift: Könntest du für die Überschrift auch den Font einstellen oder dass er den Font der Tabelle nimmt, dann wäre es einheitlich.

                        Überschrift: Muss diese Umrandung in der Überschrift sein?

                        Überschrift ganz rechts bei (Version): könntest du die Shelly zählen und anzeigen, da würde mir gefallen (32/8)- soll heissen 32 online und 8 offline. Schriftfarbe wie die online und Offline konfigurierte Farbe?

                        Tabelle: kannst du für die erste Spalte (Name) einen Padding-Left einstellen. Dann kann ich die Tabelle auf die ganze Breite setzen, aber es wirkt links nicht so gequetscht.

                        Danke Dir.

                        liv-in-skyL Offline
                        liv-in-skyL Offline
                        liv-in-sky
                        wrote on last edited by
                        #49

                        @dos1973 sagte in HTML Tabelle für Shelly Device Übersicht:

                        Überschrift: Könntest du für die Überschrift auch den Font einstellen oder dass er den Font der Tabelle nimmt, dann wäre es einheitlich.
                        Überschrift: Muss diese Umrandung in der Überschrift sein?
                        Überschrift ganz rechts bei (Version): könntest du die Shelly zählen und anzeigen, da würde mir gefallen (32/8)- soll heissen 32 online und 8 offline. Schriftfarbe wie die online und Offline konfigurierte Farbe?
                        Tabelle: kannst du für die erste Spalte (Name) einen Padding-Left einstellen. Dann kann ich die Tabelle auf die ganze Breite setzen, aber es wirkt links nicht so gequetscht.

                        1:geht klar (sollte eigentlich so sein - da war ein fehler drin)
                        2: das sind buttons - daher dacht ich, es soll sichtbar sein - kann aber im nächsten update im setting eingestellt werden
                        3: muß ich nachsehen - das erstellen der überschriften ist schon vorbei, wenn die anzahl feststellt - da muss ich das script umbauen - ist komplizierter, als man denken möchte
                        4: muss ich mal überlegen - das sind tiefe einstellungen des tabellenaufbaus - da würde ich ungern wieder etwas ändern

                        mal sehen was am wochenende alles geht

                        nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                        1 Reply Last reply
                        1
                        • D dos1973

                          @liv-in-sky

                          Ich glaube das geht nicht, Frage aber trotzdem... ich muss scrollen aufgrund der Anzahl.

                          Lässt sich die oberste Zeile / Überschrift irgendwie fixieren?

                          D Offline
                          D Offline
                          dos1973
                          wrote on last edited by
                          #50

                          @dos1973 sagte in HTML Tabelle für Shelly Device Übersicht:

                          @liv-in-sky

                          Ich glaube das geht nicht, Frage aber trotzdem... ich muss scrollen aufgrund der Anzahl.

                          Lässt sich die oberste Zeile / Überschrift irgendwie fixieren?

                          ist zwar nicht die feine Art, 🙂
                          aber ich habe einfach im VIS 2x das HTML Widget plaziert. die eine Tabelle ist nur 40px hoch und überlagert die untere - die untere scrollt dann unter die andere.... Ach schwer zu erklären,
                          das Ergebnis ist eben dass die erste Zeile damit immer sichtbar/ fixiert bleibt

                          liv-in-skyL 1 Reply Last reply
                          0
                          • D dos1973

                            @dos1973 sagte in HTML Tabelle für Shelly Device Übersicht:

                            @liv-in-sky

                            Ich glaube das geht nicht, Frage aber trotzdem... ich muss scrollen aufgrund der Anzahl.

                            Lässt sich die oberste Zeile / Überschrift irgendwie fixieren?

                            ist zwar nicht die feine Art, 🙂
                            aber ich habe einfach im VIS 2x das HTML Widget plaziert. die eine Tabelle ist nur 40px hoch und überlagert die untere - die untere scrollt dann unter die andere.... Ach schwer zu erklären,
                            das Ergebnis ist eben dass die erste Zeile damit immer sichtbar/ fixiert bleibt

                            liv-in-skyL Offline
                            liv-in-skyL Offline
                            liv-in-sky
                            wrote on last edited by
                            #51

                            @dos1973 könnte evtl zu problemen führen - die scripte, die in den tabellen "drin" sind - sind jetzt doppelt in der vis - könnte sein., dass das sortieren "rumspinnt"

                            meine ersten versuche das nachzubilden sind leider noch nicht erfolgreich - evtl muss ich es aber so wie du es gemacht hast, auch im script machen - also 2 tabellen untereinander anlegen, die dann wie eine aussieht - die einstellungn dafür überschneiden sich mit meinen definitionen - ist etwas schwierig das zu integrieren

                            nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                            D 1 Reply Last reply
                            0
                            • liv-in-skyL liv-in-sky

                              @dos1973 könnte evtl zu problemen führen - die scripte, die in den tabellen "drin" sind - sind jetzt doppelt in der vis - könnte sein., dass das sortieren "rumspinnt"

                              meine ersten versuche das nachzubilden sind leider noch nicht erfolgreich - evtl muss ich es aber so wie du es gemacht hast, auch im script machen - also 2 tabellen untereinander anlegen, die dann wie eine aussieht - die einstellungn dafür überschneiden sich mit meinen definitionen - ist etwas schwierig das zu integrieren

                              D Offline
                              D Offline
                              dos1973
                              wrote on last edited by
                              #52

                              @liv-in-sky
                              also bisher habe ich nicht "fehlehaftes" wahrnehmen können...

                              liv-in-skyL 1 Reply Last reply
                              0
                              • D dos1973

                                @liv-in-sky
                                also bisher habe ich nicht "fehlehaftes" wahrnehmen können...

                                liv-in-skyL Offline
                                liv-in-skyL Offline
                                liv-in-sky
                                wrote on last edited by
                                #53

                                @dos1973 ich weiß leider nicht genau, wie die gültigkeit von scripten in der ganzen view ist. gilt ein script nur in dem widget oder gilt es überall - aber wenn es funktioniert ist ja erstmal gut

                                nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                                1 Reply Last reply
                                0
                                • liv-in-skyL Offline
                                  liv-in-skyL Offline
                                  liv-in-sky
                                  wrote on last edited by
                                  #54

                                  hab euch nicht vergessen - habe nur wenig zeit und etwas fortschritt gibt es auch schon - muss abe rviel am script ändern - dauert noch etwas

                                  AApossis (14).gif

                                  nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                                  D 1 Reply Last reply
                                  1
                                  • Holger EtzelH Offline
                                    Holger EtzelH Offline
                                    Holger Etzel
                                    wrote on last edited by
                                    #55

                                    Hallo,
                                    wo wird die Tabellenbreite und die Lage der Tabelle eingestellt?

                                    liv-in-skyL 1 Reply Last reply
                                    0
                                    • Holger EtzelH Holger Etzel

                                      Hallo,
                                      wo wird die Tabellenbreite und die Lage der Tabelle eingestellt?

                                      liv-in-skyL Offline
                                      liv-in-skyL Offline
                                      liv-in-sky
                                      wrote on last edited by
                                      #56

                                      @holger-etzel die breite unter "weite" und die lage bestimmst du durch die lage des html-standard widgets

                                      nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                                      Holger EtzelH 1 Reply Last reply
                                      0
                                      • liv-in-skyL liv-in-sky

                                        @holger-etzel die breite unter "weite" und die lage bestimmst du durch die lage des html-standard widgets

                                        Holger EtzelH Offline
                                        Holger EtzelH Offline
                                        Holger Etzel
                                        wrote on last edited by
                                        #57

                                        @liv-in-sky
                                        Habe ich auch so gedacht, aber wenn ich da die Werte ändere bleibt die Tabelle in der VIS immer gleich ???

                                        D 1 Reply Last reply
                                        0
                                        • Holger EtzelH Holger Etzel

                                          @liv-in-sky
                                          Habe ich auch so gedacht, aber wenn ich da die Werte ändere bleibt die Tabelle in der VIS immer gleich ???

                                          D Offline
                                          D Offline
                                          dos1973
                                          wrote on last edited by
                                          #58

                                          @holger-etzel
                                          dein html-widget definiert die gesamtbreite

                                          Holger EtzelH 1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          99

                                          Online

                                          32.4k

                                          Users

                                          81.3k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe