Navigation

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

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

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

    • ioBroker goes Matter ... Matter Adapter in Stable

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

    This topic has been deleted. Only users with topic management privileges can see it.
    • sigi234
      sigi234 Forum Testing Most Active @liv-in-sky last edited by

      @liv-in-sky

      Warum habe ich bei Status ?

      Screenshot (1033).png

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

        @sigi234 liegt wahrscheinlich an den sonderzeichen - die häkchen und x - da ist beim kopieren was schiefgelaufen - ich schau mal, ob ich die scripte wieder wie vorher im ersten post unterkriege - aber da gibt es eine beschränkung vom forum

        du kannst du das hier reinkopieren - copy von hier - paste in das script
        ❌
        ✅
        oder von hier

                   if (getState(id).val==false) {val2="❌"} else{val2="✅"}   
        

        so sollte es im script aussehen:
        Image 1.png

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

          @sigi234 habe im ersten post wieder scripte, die man direkt kopieren kann

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

            @liv-in-sky sagte in Script HTML-Tabellen für VIS oder Iqontrol:

            @sigi234 habe im ersten post wieder scripte, die man direkt kopieren kann

            Cool, kann man noch bei Rahmen :
            Horizontale oder vertikale Rahmen ein/aus blenden hinzufügen?
            Überschriften Rahmen ein/ausblenden und Farbe extra einstellen?

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

              @sigi234 da muss ich erst mal herrn oder frau google fragen, wie oder ob überhaupt man das in html umsetzen kann - ich habe erstmal das ändern der farben für jede 2te tabelle hinzugefügt - damit es übersichtlicher wird

              ich schau mal

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

                @sigi234 meinst du sowas:

                Image 2.png Image 3.png

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

                  @liv-in-sky

                  Jupp 👍

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

                    @liv-in-sky

                    Fehler Beispiele 3: sollten 4 sein?

                    //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 3
                    var htmlFeld1='Instanz';                            // überschrift Tabellen Spalte1
                    var htmlFeld2='Alive';                              // überschrift Tabellen Spalte2
                    var htmlFeld3='MemHeap';                             // überschrift Tabellen Spalte3
                    var htmlFeld4='Status';                            // überschrift Tabellen Spalte4
                    //-----------------------------------
                    

                    Bei Value dann ja auch 4?

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

                      @sigi234 bessere ich aus - muss eh alle nochmal ins forum kopieren - wegen der rahmenlinien

                      ich check nochmal alle

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

                        @liv-in-sky sagte in Script HTML-Tabellen für VIS oder Iqontrol:

                        ch check nochmal alle

                        Habe es im Skript geändert, kommt aber noch undefined

                        Screenshot (1036).png

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

                          @sigi234 anstatt val2 mußt du val 3 zweimal tauschen

                          if (getState(id).val==false) {val3="❌"} else{val3="✅"}   
                          

                          das hier ist für das 4-werte script

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

                            @liv-in-sky sagte in Script HTML-Tabellen für VIS oder Iqontrol:

                            das hier ist für das 4-werte script

                            Ok, und wie bekomme ich andere Symbole oder ein Gif rein?

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

                              @sigi234 ein gif garnicht - ist im html nicht vorgesehen und zu kompliziert zu integrieren

                              andere symbole gibt es z.b hier
                              https://emojipedia.org/

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

                                @sigi234 im ersten post sind neue scripte - mit verschiedenen gitterlinien - kein, alle, vertikal oder horizontal

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

                                  @liv-in-sky sagte in Script HTML-Tabellen für VIS oder Iqontrol:

                                  @sigi234 im ersten post sind neue scripte - mit verschiedenen gitterlinien - kein, alle, vertikal oder horizontal

                                  Super, wie kann ich die Spalten zentriert ausrichten? Oder/Und die Spaltengröße ändern?

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

                                    @sigi234

                                    wenn ich alle zellen zentriere sieht das echt seltsam aus - vorallem bei unterschiedlich langen spalteneinträge in der ersten spalte
                                    was denkst du? erste spalte links bündig und der rest mittig

                                    da bräuch ich noch ein wenig dafür - müsste einiges umgestellt werden

                                    so wie hier:
                                    Image 8.png

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

                                      @liv-in-sky sagte in Script HTML-Tabellen für VIS oder Iqontrol:

                                      @sigi234

                                      wenn ich alle zellen zentriere sieht das echt seltsam aus - vorallem bei unterschiedlich langen spalteneinträge in der ersten spalte
                                      was denkst du? erste spalte links bündig und der rest mittig

                                      da bräuch ich noch ein wenig dafür - müsste einiges umgestellt werden

                                      so wie hier:

                                      Schaut komisch aus. Würde nur die Spalten-Breite per xxpx änderbar machen. Oder Option padding ?
                                      Überschriften Links , nur die Icons mittig? Spalten links

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

                                        @sigi234 versteh ich nicht - die breite der spalten geht automatisch - was schaut auf dem bild komisch aus ?

                                        muss jetzt weg aber teste mal

                                        für 4 werte

                                        
                                        
                                        
                                        //HIER WIRD PFAD UND FILENAME DEFINIERT
                                        const path = "/htmlexample.html";                   //FIlenamen definieren
                                        const home ='vis.0'                                 //wo soll das file im iobroker-file-system liegen ? (oder z.b auch iqontrol.meta)
                                        let   braucheEinFile=true;                          // bei true wird ein file geschrieben
                                        let   braucheEinVISWidget=true;                     // bei true wird ein html-tabelle in einen dp geschrieben - siehe nächste zeile
                                        let dpVIS="controll-own.0.AAATEST.TestHTML"         //WICHTIG wenn "braucheEinVISWidget" auf true gesetzt !!  dp zusätzlich für VIS-HTML-Basic-Widget
                                        //---------------------------------------
                                        
                                        //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 4
                                        var htmlFeld1='Instanz';                            // überschrift Tabellen Spalte1
                                        var htmlFeld2='Alive';                              // überschrift Tabellen Spalte2
                                        var htmlFeld3='MemHeap';                             // überschrift Tabellen Spalte3
                                        var htmlFeld4='Status';                            // überschrift Tabellen Spalte4
                                        //-----------------------------------
                                        
                                        
                                        //hier werden die styles für die tabelle definiert
                                        //ÜBERSCHRIFT ÜBER TABELLE
                                        let   htmlUberschrift=true;                           // mit Überschrift über der tabelle
                                        const htmlFeldUeber='MEINE ÜBERSCHRIFT';              // Überschrift
                                        const htmlFarbUber="#794486";                         // Farbe der Überschrift
                                        //MEHRERE TABELLEN NEBENEINANDER
                                        let   mehrfachTabelle=4;                              // bis zu 4 Tabellen werden nebeneinander geschrieben-  verkürzt das Ganze, dafür etwas breiter - MÖGLICH 1,2,3,oder 4 !!!
                                        const htmlFarbZweiteTabelle="#C755E4";                // Farbe der Überschrift bei jeder 2.ten Tabelle
                                        const htmlFarbTableColorUber="#A820CA";               // Überschrift in der tabelle - der einzelnen Spalten
                                        //GANZE TABELLE
                                        const htmlSchriftart="Helvetica";
                                        const htmlSchriftgroesse="13px";
                                        //FELDER UND RAHMEN
                                        const htmlFarbFelderschrift="#DADFDA";                  // SchriftFarbe der Felder
                                        const htmlFarbFelderschrift2="#E3FBE2";                 // SchriftFarbe der Felder für jede 2te Tabelle
                                        const htmlFarbTableColorGradient1="#3F403F";           //  Gradient - Hintergrund der Tabelle - Verlauffarbe
                                        const htmlFarbTableColorGradient2="#3F403F";          //  Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf
                                        const htmlFarbTableBorderColor="#794486";             // Farbe des Rahmen - is tdieser gleich den gradienten, sind die rahmen unsichtbar
                                        const htmlRahmenLinien=2;                            // Format für Rahmen(Gitter)linien 1=alle - 2=nur vertikal - 3= nur horizontal - 4=keine
                                        
                                        
                                        // HIER NICHTS  ÄNDERN
                                        const htmlEnd=      '</table></body>';
                                        const htmlStart=    '<!DOCTYPE html><html lang="de"><head><title>Vorlage</title><meta http-equiv="content-type" content="text/html; charset=utf-8"></head><body>';
                                        const htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-weight: bold\">"+htmlFeldUeber+"</p>";
                                        const htmlTabStyleCol= "<table bordercolor=\""+htmlFarbTableBorderColor+"\" border=\"3\" cellspacing=\"3\" cellpadding=\"3\"  rules=\"cols\" style=\"color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+
                                                              "; font-family:"+htmlSchriftart+";background-image: linear-gradient(42deg,"+htmlFarbTableColorGradient2+","+htmlFarbTableColorGradient1+");\">";
                                        const htmlTabStyleRow= "<table bordercolor=\""+htmlFarbTableBorderColor+"\" border=\"3\" cellspacing=\"3\" cellpadding=\"3\"  rules=\"rows\" style=\"color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+
                                                              "; font-family:"+htmlSchriftart+";background-image: linear-gradient(42deg,"+htmlFarbTableColorGradient2+","+htmlFarbTableColorGradient1+");\">";
                                        const htmlTabStyleAll= "<table bordercolor=\""+htmlFarbTableBorderColor+"\" border=\"3\" cellspacing=\"3\" cellpadding=\"3\"  rules=\"all\" style=\"color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+
                                                              "; font-family:"+htmlSchriftart+";background-image: linear-gradient(42deg,"+htmlFarbTableColorGradient2+","+htmlFarbTableColorGradient1+");\">";                                               
                                        const htmlTabStyleNone= "<table bordercolor=\""+htmlFarbTableBorderColor+"\" border=\"3\" cellspacing=\"3\" cellpadding=\"3\"  rules=\"none\" style=\"color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+
                                                              "; font-family:"+htmlSchriftart+";background-image: linear-gradient(42deg,"+htmlFarbTableColorGradient2+","+htmlFarbTableColorGradient1+");\">"; 
                                        const htmlTabUeber1="<tr style=\"color:"+htmlFarbTableColorUber+"; font-weight: bold\">";
                                        const htmlTabUeber3="</tr>";
                                        
                                        
                                        //NICHTS ÄNDERN - abhängig von den oben definierten _Spalten - in diesem Beispiel sind es 4
                                        
                                        var htmlTabUeber2="<td  align=center>&ensp;"+htmlFeld1+"&ensp;</td><td align=center>&ensp;"+htmlFeld2+"&ensp;</td><td  align=center>&ensp;"+htmlFeld3+"&ensp;</td><td align=center>&ensp;"+htmlFeld4+"&ensp;</td>";
                                        var htmlTabUeber2_1="<td  align=center style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld1+"&ensp;</td><td  align=center style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld2+
                                                           "&ensp;</td><td  align=center style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld3+"&ensp;</td><td  align=center style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld4+
                                                           "&ensp;</td>";
                                        //------------------------------------------------------
                                        
                                        
                                        var htmlOut="";
                                        
                                        
                                        
                                        function writeHTML(){
                                        
                                             var htmlTabStyle;
                                           switch (+htmlRahmenLinien) { 
                                           case 1: htmlTabStyle=htmlTabStyleAll; break;
                                           case 2: htmlTabStyle=htmlTabStyleCol; break;
                                           case 3: htmlTabStyle=htmlTabStyleRow; break;
                                           case 4: htmlTabStyle=htmlTabStyleNone; break;
                                           
                                        };  
                                        
                                        htmlOut="";
                                        
                                        
                                        
                                        var counter=-1;
                                        var htmlTabUeber="";
                                        switch (mehrfachTabelle) { 
                                           case 1: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber3;  break;
                                           case 2: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
                                           case 3: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2+htmlTabUeber2+htmlTabUeber3; break;
                                           case 4: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
                                        };  
                                        
                                        //HIER SIND DIE § WERTE, DIE IN DER SCHLEIFE GEFILTERET WER%DEN - Jede spalte einen wert
                                        var val1; var val2; var val0; var val3;
                                        //------------------------------------------------------------
                                        
                                        $('system.adapter.*.alive').each(function(id, i) {           // hier eigene schleife definieren
                                                var ida = id.split('.');
                                                if( !(id.includes("vis") || id.includes("devices") ||  id.includes("fullcalendar"))){
                                                  counter++;
                                                  val0=ida[2]+"."+ida[3];
                                                  let val1help=getState(id.replace("alive","uptime")).val;
                                                  val2=getState(id.replace("alive","memHeapUsed")).val;
                                                  val1=Math.floor( ((val1help)/60/60/24) )+"d "+ Math.floor(((val1help)/60/60) % 24) +"h "+ Math.floor( ((val1help)/60) % 60 )+" m" ;
                                        
                                                  if (getState(id).val==null) {val3="never used"}; //log(id)}; 
                                             
                                                  if (getState(id).val==false) {val3="❌"} else{val3="✅"}         
                                        
                                             //HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT - hat man oben 4 Felder definiert, braucht man hier 4 Werte
                                           
                                               switch (mehrfachTabelle) {  
                                                 case 1:                    htmlOut=htmlOut+"<tr><td>"+val0+"&ensp;</td><td align=center>&ensp;"+val1+"&ensp;</td><td align=center>&ensp;"+val2+"&ensp;</td><td align=center>&ensp;"+val3+"&ensp;</td></tr>"; break;
                                                 case 2:  if(counter%2==0)  {htmlOut = htmlOut+"<tr><td>"+val0+"&ensp;</td><td align=center>&ensp;"+val1+"&ensp;</td><td align=center>&ensp;"+val2+"&ensp;</td><td align=center>&ensp;"+val3+"&ensp;</td>"; } 
                                                                       else {htmlOut = htmlOut+"<td style=\"color:"+htmlFarbFelderschrift2+"\">"+val0+"&ensp;</td><td  align=center style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align=center style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align=center style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td></tr>";} break;
                                                                            
                                                 case 3: if(counter%3==0 )  {htmlOut = htmlOut+"<tr><td>"+val0+"&ensp;</td><td align=center>&ensp;"+val1+"&ensp;</td><td align=center>&ensp;"+val2+"&ensp;</td><td align=center>&ensp;"+val3+"&ensp;</td>"; } 
                                                                       else { if(counter%3==1 )  { htmlOut = htmlOut+"<td style=\"color:"+htmlFarbFelderschrift2+"\">"+val0+"&ensp;</td><td  align=center style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align=center style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align=center style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td>";} 
                                                                                        else    {htmlOut = htmlOut+"<td>"+val0+"&ensp;</td><td align=center>&ensp;"+val1+"&ensp;</td><td align=center>&ensp;"+val2+"&ensp;</td><td align=center>&ensp;"+val3+"&ensp;</td></tr>";}
                                                                                  } break;
                                        
                                        
                                                 case 4: if(counter%4==0)  {htmlOut = htmlOut+"<tr><td>"+val0+"&ensp;</td><td align=center>&ensp;"+val1+"&ensp;</td><td align=center>&ensp;"+val2+"&ensp;</td><td align=center>&ensp;"+val3+"&ensp;</td>"; } 
                                                                           else {if(counter%2==1 )  { htmlOut = htmlOut+"<td style=\"color:"+htmlFarbFelderschrift2+"\">"+val0+"&ensp;</td><td  align=center style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align=center style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align=center style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td>";} 
                                                                                        else    {if(counter%2==1 && counter%4==3)  { htmlOut= htmlOut+"<td style=\"color:"+htmlFarbFelderschrift2+"\">"+val0+"&ensp;</td><td  align=center style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td align=center style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align=center style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td></tr>";} 
                                                                                                          else    {htmlOut = htmlOut = htmlOut+"<td>"+val0+"&ensp;</td><td>&ensp;"+val1+"&ensp;</td><td align=center>&ensp;"+val2+"&ensp;</td><td align=center>&ensp;"+val3+"&ensp;</td>";}}
                                                                                  } break;
                                        
                                             } //switch ende
                                        
                                            //---------------------------------------------
                                           }}); //Schleifen ende
                                             
                                                  //Ausgabe über VIS html widget - tabelle in datenpunkt schreiben - html tabelle ohne html header und body
                                                   var htmlOutVIS="";
                                                   htmlUberschrift ? htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>" : htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>";
                                                   //log(htmlOutVIS);
                                                   if (braucheEinVISWidget) setState(dpVIS, htmlOutVIS );
                                        
                                         //mit oder ohne überschrift
                                         htmlUberschrift ? htmlOut=htmlStart+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd : htmlOut=htmlStart+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd;
                                         //log(htmlOut);
                                        } // function ende
                                        
                                        //hier wird schleife gestartet und das file geschrieben
                                         
                                        schedule("*/20 * * * * *",  function () {  
                                         writeHTML();
                                         if (braucheEinFile) {writeFile(home, path ,htmlOut, function (error) { /* log('file written');*/  });}
                                        }); 
                                        
                                        
                                        
                                        
                                        
                                        

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

                                          @liv-in-sky

                                          Na ja eigentlich geht es um den Abstand zu den Rahmen, der ist sehr knapp.

                                          Screenshot (1038)_LI.jpg

                                          Wenn ich die Rahmen deaktiviere (4) habe ich trotzdem einen Rahmen rundherum.

                                          Screenshot (1040)_LI.jpg

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

                                            @sigi234 dem rahmen aussenrum kannst du durch die farbgebung beeinflussen - mache rahmenfarbe gleich den beiden gradientenfarben - dann ist er weg

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            782
                                            Online

                                            31.8k
                                            Users

                                            80.0k
                                            Topics

                                            1.3m
                                            Posts

                                            blockly javascript template
                                            19
                                            295
                                            50658
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo