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

[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]

@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

[liv-in-sky]

@sigi234 meinst du sowas:

[sigi234]

@liv-in-sky

Jupp

[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]

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

ich check nochmal alle

[sigi234]

@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

[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]

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

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

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

[liv-in-sky]

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

[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]

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

[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]

@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

Spoiler

//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]

@liv-in-sky

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

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

[liv-in-sky]

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

[liv-in-sky]

@sigi234

habe jetzt etwas mehr platz beim ersten:

[liv-in-sky]

@sigi234

falls dir noch was einfällt - ich muss jedesmal 4 scripte durchändern - dann wäre jetzt noch ein guter zeitpunkt

es sind jetzt alle 4 upgedatet im ersten post

ich versuch mal eine einfache blockly integration hinzubekommen - vielleicht klappt es ja

[liv-in-sky]

update

• im ersten post gibt es ein kleine anleitung und ein beispiel, wenn man das ganze in blockly einbinden möchte
• daher hat sich auch der titel des threads etwas geändert