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

liv-in-sky

@sigi234 habe es doch noch geschafft

leider ist es komlexer geworden - daher wird es schwieriger, wenn man unterschiedliche spalten möchte - in diesem beispiel sind es 3 spalten - wie gehabt - dies aber auf ein eandere anzahl zu ändern wird schwierig

hier zum testen

es gibt eine var dpVIS (zeile 389) - da kannst du den datenpunkt eintragen, welcher für das VIS-basic-html widget ist
zeile 18: die anzahl der zu anzeigenden tabellen nebeneinander 1- 2- 3-4 ist möglich

Image 7.png




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

//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='Status';                             // überschrift Tabellen Spalte3
//-----------------------------------


//hier werden die styles für die tabelle definiert
let   htmlUberschrift=true;                           // mit Überschrift
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 htmlFeldUeber='MEINE ÜBERSCHRIFT';           // Überschrift
const htmlSchriftart="Helvetica";
const htmlSchriftgroesse="18px";
const htmlFarbUber="#000000";                         // Farbe der Überschrift
const htmlFarbFelderschrift="white";                // SchriftFarbe der Felder
const htmlFarbTableColorGradient1="#000000";          //  Gradient - Hintergrund der Tabelle - Verlauffarbe
const htmlFarbTableColorGradient2="#000000";          //  Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf
const htmlFarbTableColorUber="white";               // Überschrift in der tabelle - der einzelnen Spalten
const htmlFarbTableBorderColor="#0E030F";             // Farbe des Rahmen - is tdieser gleich den gradienten, sind die rahmen unsichtbar

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 htmlTabStyle="<table bordercolor=\""+htmlFarbTableBorderColor+"\" border=\"3\" cellspacing=\"3\" cellpadding=\"3\" style=\"color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+"; font-family:"+htmlSchriftart+";background-image: linear-gradient(42deg,"+htmlFarbTableColorGradient2+","+htmlFarbTableColorGradient1+");\">";
const htmlTabUeber="<tr style=\"color:"+htmlFarbTableColorUber+"; font-weight: bold\"><td>"+

     //HIER AUCH DIE SPALTENANZAHL DEFINIEREN - abhängig von den oben definierten _Spalten - in diesem Beispiel sind es 3
     htmlFeld1+"&ensp;&ensp;&ensp;</td><td>"+htmlFeld2+"&ensp;&ensp;&ensp;</td><td>"+htmlFeld3+"</td></tr>";
     //------------------------------------------------------

var dpVIS="controll-own.0.AAATEST.TestHTML"         //dp nur für VIS-HTML-Basic-Widget

var htmlOut="";
var htmlOutDoppelt="";
var counter=-1;

function writeHTML(){

//HIER SIND DIE § WERTE, DIE IN DER SCHLEIFE GEFILTERET WER%DEN - Jede spalte einen wert
var val1; var val2; var val0;
//------------------------------------------------------------

$('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];
          var val1help=getState(id.replace("alive","uptime")).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) {val2="never used"; log(id)}; 
     
          if (getState(id).val==false) {val2="❌"} else{val2="✅"}         

     //HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT - hat man oben 3 Felder definiert, braucht man heir 3 Werten
        //log(counter%4+"next "+counter%3+"next "+counter%2+"next "+counter%1  )
       switch (mehrfachTabelle) {  
         case 1:                    htmlOut=htmlOut+"<tr><td>"+val0+"</td><td>"+val1+"</td><td>"+val2+"</td></tr>"; break;
         case 2:  if(counter%2==0)  {htmlOut = htmlOut+"<tr><td>"+val0+"</td><td>"+val1+"</td><td>"+val2+"&ensp;&ensp;&ensp;</td>"; } 
                               else {htmlOut = htmlOut+"<td>"+val0+"</td><td>"+val1+"</td><td>"+val2+"</td></tr>";} break;
                                    
         case 3: if(counter%3==0 )  {htmlOut = htmlOut+"<tr><td>"+val0+"</td><td>"+val1+"</td><td>"+val2+"&ensp;&ensp;&ensp;</td>"; } 
                               else { if(counter%3==1 )  { htmlOut = htmlOut+"<td>"+val0+"</td><td>"+val1+"</td><td>"+val2+"&ensp;&ensp;&ensp;</td>";} 
                                                else    {htmlOut = htmlOut+"<td>"+val0+"</td><td>"+val1+"</td><td>"+val2+"</td></tr>";}
                                          } break;


         case 4: if(counter%4==0)  {htmlOut = htmlOut+"<tr><td>"+val0+"</td><td>"+val1+"</td><td>"+val2+"&ensp;&ensp;&ensp;</td>"; } 
                                   else {if(counter%2==1 )  { htmlOut = htmlOut+"<td>"+val0+"</td><td>"+val1+"</td><td>"+val2+"&ensp;&ensp;&ensp;</td>";} 
                                                else    {if(counter%2==1 && counter%4==3)  { htmlOut= htmlOut+"<td>"+val0+"</td><td>"+val1+"</td><td>"+val2+"</td></tr>";} 
                                                                  else    {htmlOut = htmlOut = htmlOut+"<td>"+val0+"</td><td>"+val1+"</td><td>"+val2+"&ensp;&ensp;&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);
                           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 DIE SCHLEIFE GESTARTET und DAS FILES GESCHRIEBEN
 
 writeHTML();
 writeFile(home, path ,htmlOut, function (error) {
  // log('file written');
 });

dslraser

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

ähnlicher beitrag nur mit blockly:

sieht jetzt bei mir so aus...(Fotos sind schon einige Tage alt)
Das schöne daran, die Liste wird geschrieben wenn sich der Zustand eines Fenster ändert. Das ganze nur über einen Selektor und die Zustände sind aus der Werteliste der Fenster Datenpunkte. Mit Hilfe von @paul53 und @liv-in-sky erstellt)

liv-in-sky

UPDATE - hat sich einges geändert

der erste post ist geandert worden - es gibt jetzt 4 scripte - für verschiedene spaltenanzahl (2-5)
der scriptaufbau und auch die settings haben sich geändert
man kann auch weiterhin auswählen , wieviele tabellen nebeneinander liegen sollen
man muss einstellen, ob man ein file oder eine VIS tabelle oder beides haben will
bei jeder 2 tabelle kann die schriftfarbe der felder und der tabellenüberschriften mit anderen werten gesetzt werden - damit man einen besseren überblich hat
ich hoffe die beschriftung im script reicht als erklärung - im spoiler sind bilder, die helfen sollen

sigi234

@liv-in-sky

Warum habe ich bei Status ?

Screenshot (1033).png

liv-in-sky

@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

liv-in-sky

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

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:

Image 2.png Image 3.png

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

Screenshot (1036).png

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:
Image 8.png

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

NEWS

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

Support us

900
Online

31.8k
Users

79.9k
Topics

1.3m
Posts

NEWS

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

Support us

900Online

31.8kUsers

79.9kTopics

1.3mPosts

900
Online

31.8k
Users

79.9k
Topics

1.3m
Posts