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

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

Community Forum

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

NEWS

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

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

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

HTML Tabelle für Shelly Device Übersicht

Geplant Angeheftet Gesperrt Verschoben Visualisierung
261 Beiträge 13 Kommentatoren 42.5k Aufrufe 16 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • da_WoodyD da_Woody

    @liv-in-sky hmm, bei mir wird die 1. zeile gleich rot...
    f1f0488a-84f3-4fca-a315-ae7548087f34-grafik.png

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

    @da_woody wird was angezeigt in der vis?

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

    da_WoodyD 1 Antwort Letzte Antwort
    0
    • da_WoodyD da_Woody

      @liv-in-sky hmm, bei mir wird die 1. zeile gleich rot...
      f1f0488a-84f3-4fca-a315-ae7548087f34-grafik.png

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

      @da_woody ich denke, das ist nicht so wichtig - es geht um Acknowledge - aber die tabelle schaltet ja nichts und muss daher nicht bestätigt werden

      https://forum.iobroker.net/post/41216

      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 Antwort Letzte Antwort
      0
      • liv-in-skyL liv-in-sky

        @da_woody wird was angezeigt in der vis?

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

        @liv-in-sky muss erst schauen wie ich das in iqontrol bringe. als html importiert in dreamweaver zeigts:
        ef08e0ab-6d98-41aa-b85b-14a08b46947f-grafik.png
        is latürnich bei 70 shellys um einiges länger und lässt sich so nicht sortieren.
        ist das js aus dem ersten posting...

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

        liv-in-skyL 2 Antworten Letzte Antwort
        0
        • da_WoodyD da_Woody

          @liv-in-sky muss erst schauen wie ich das in iqontrol bringe. als html importiert in dreamweaver zeigts:
          ef08e0ab-6d98-41aa-b85b-14a08b46947f-grafik.png
          is latürnich bei 70 shellys um einiges länger und lässt sich so nicht sortieren.
          ist das js aus dem ersten posting...

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

          @da_woody

          das nicht sortieren liegt an den ip adress bereichen - da ip adressen text sind, die sortierung aber nach einer zahl geht, muss ich das umrechnen - ich rechne aber nur die hinterste stelle um.

          das müßte ich nochmal näher ansehen - hatte gehofft, das es keine user mit einem solchen netz, wie du es hast, die tabelle brauchen :-)

          in iqontrol kannst du das direkt einbinden - sollte kein thema sein - man muss nur ein wenig am farbsytyling arbeiten, damit es schön aussieht

          Image 4.png

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

          da_WoodyD 1 Antwort Letzte Antwort
          0
          • da_WoodyD da_Woody

            @liv-in-sky muss erst schauen wie ich das in iqontrol bringe. als html importiert in dreamweaver zeigts:
            ef08e0ab-6d98-41aa-b85b-14a08b46947f-grafik.png
            is latürnich bei 70 shellys um einiges länger und lässt sich so nicht sortieren.
            ist das js aus dem ersten posting...

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

            @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];   });}
            
            }
            
            
            
            
            

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

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

              @da_woody

              das nicht sortieren liegt an den ip adress bereichen - da ip adressen text sind, die sortierung aber nach einer zahl geht, muss ich das umrechnen - ich rechne aber nur die hinterste stelle um.

              das müßte ich nochmal näher ansehen - hatte gehofft, das es keine user mit einem solchen netz, wie du es hast, die tabelle brauchen :-)

              in iqontrol kannst du das direkt einbinden - sollte kein thema sein - man muss nur ein wenig am farbsytyling arbeiten, damit es schön aussieht

              Image 4.png

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

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

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

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

                @liv-in-sky 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
                schrieb am zuletzt editiert von
                #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 Antwort Letzte Antwort
                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","&#8644;","&#8644;"];   // 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
                  schrieb am zuletzt editiert von 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... :D

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

                  liv-in-skyL 2 Antworten Letzte Antwort
                  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... :D

                    liv-in-skyL Offline
                    liv-in-skyL Offline
                    liv-in-sky
                    schrieb am zuletzt editiert von
                    #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 Antwort Letzte Antwort
                    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... :D

                      liv-in-skyL Offline
                      liv-in-skyL Offline
                      liv-in-sky
                      schrieb am zuletzt editiert von
                      #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 Antwort Letzte Antwort
                      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
                        schrieb am zuletzt editiert von
                        #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 Antwort Letzte Antwort
                        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
                          schrieb am zuletzt editiert von
                          #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 Antwort Letzte Antwort
                          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
                            schrieb am zuletzt editiert von
                            #45

                            @liv-in-sky hrnz, der browserwixx geht mir schon ... :D
                            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 Antwort Letzte Antwort
                            0
                            • da_WoodyD da_Woody

                              @liv-in-sky hrnz, der browserwixx geht mir schon ... :D
                              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
                              schrieb am zuletzt editiert von
                              #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 Antworten Letzte Antwort
                              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
                                schrieb am zuletzt editiert von
                                #47

                                @nordischerjung

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

                                1 Antwort Letzte Antwort
                                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
                                  schrieb am zuletzt editiert von
                                  #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 Antwort Letzte Antwort
                                  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
                                    schrieb am zuletzt editiert von
                                    #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 Antwort Letzte Antwort
                                    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
                                      schrieb am zuletzt editiert von
                                      #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 Antwort Letzte Antwort
                                      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
                                        schrieb am zuletzt editiert von
                                        #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 Antwort Letzte Antwort
                                        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
                                          schrieb am zuletzt editiert von
                                          #52

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

                                          liv-in-skyL 1 Antwort Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          852

                                          Online

                                          32.4k

                                          Benutzer

                                          81.5k

                                          Themen

                                          1.3m

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

                                          • Du hast noch kein Konto? Registrieren

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