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

[liv-in-sky]

@Agria4800

mit dem Alexa listen project geht es hier weiter

https://forum.iobroker.net/topic/28254/script-alexa-listen-pflegen-und-anzeigen

[zahnheinrich]

@liv-in-sky
Ich habe dein Script "Tabellenerzeugung für 3 Werte" am Fredanfang kopiert und unverändert gestartet.
Bekomme folgende Tabelle:

Da ist wohl was verschoben oder?
Gruß Ulrich

[liv-in-sky]

@zahnheinrich hab erst vor einer stunde neue files drauf getan - ich check das gleich

[liv-in-sky]

@zahnheinrich du hast recht - ich mach mich auf die suche - ist nur wenn man 4 tabellen nebeneinander haben möchte

[zahnheinrich]

@liv-in-sky
Mach dir keinen Stress!
Eigentlich hätte ich die Tabelle lieber 3-spaltig als lange Tabelle nach unten fürs Handy.
Geht das auch?

[liv-in-sky]

@zahnheinrich nochmal danke für den hinweis - irgendwo hat ein leerzeichen gefehlt im html code

habe es ausgebessert

[zahnheinrich]

@liv-in-sky
Leider keine Änderung.
Im log bekomme ich:

9.1.2020, 20:03:20.012	[warn ]: javascript.0 (29355)     at tabelleFinish (script.js.common.Tabellen.Tabelle_erzeugen_3_Spalten:205:37)
9.1.2020, 20:03:20.012	[warn ]: javascript.0 (29355)     at writeHTML (script.js.common.Tabellen.Tabelle_erzeugen_3_Spalten:140:7)
9.1.2020, 20:03:20.013	[warn ]: javascript.0 (29355)     at Object.<anonymous> (script.js.common.Tabellen.Tabelle_erzeugen_3_Spalten:147:2)
9.1.2020, 20:03:37.091	[info ]: javascript.0 (29355) Stop script script.js.common.Tabellen.Tabelle_erzeugen_3_Spalten
9.1.2020, 20:03:37.098	[info ]: javascript.0 (29355) Start javascript script.js.common.Tabellen.Tabelle_erzeugen_3_Spalten
9.1.2020, 20:03:37.112	[warn ]: javascript.0 (29355)     at tabelleFinish (script.js.common.Tabellen.Tabelle_erzeugen_3_Spalten:205:37)
9.1.2020, 20:03:37.112	[warn ]: javascript.0 (29355)     at writeHTML (script.js.common.Tabellen.Tabelle_erzeugen_3_Spalten:140:7)
9.1.2020, 20:03:37.112	[warn ]: javascript.0 (29355)     at script.js.common.Tabellen.Tabelle_erzeugen_3_Spalten:150:1
9.1.2020, 20:03:37.112	[info ]: javascript.0 (29355) script.js.common.Tabellen.Tabelle_erzeugen_3_Spalten: registered 0 subscriptions and 1 schedule
9.1.2020, 20:03:40.010	[warn ]: javascript.0 (29355)     at tabelleFinish (script.js.common.Tabellen.Tabelle_erzeugen_3_Spalten:205:37)
9.1.2020, 20:03:40.010	[warn ]: javascript.0 (29355)     at writeHTML (script.js.common.Tabellen.Tabelle_erzeugen_3_Spalten:140:7)
9.1.2020, 20:03:40.011	[warn ]: javascript.0 (29355)     at Object.<anonymous> (script.js.common.Tabellen.Tabelle_erzeugen_3_Spalten:147:2)

[liv-in-sky]

@zahnheinrich

bei mir kommen keine fehler oder warnungen

hier mal zum, testen - script mit 3 werten

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
let mySchedule=" */20 * * * * * ";                       //jede minute  
//---------------------------------------

//HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 3
var htmlFeld1='Instanz';      var Feld1lAlign="left";                     // überschrift Tabellen Spalte1 und  Ausrichtung left,right or center
var htmlFeld2='Alive';        var Feld2lAlign="center";                      // überschrift Tabellen Spalte2 und  Ausrichtung left,right or center
var htmlFeld3='Status';         var Feld3lAlign="right";                    // überschrift Tabellen Spalte3 und  Ausrichtung left,right or center
//-----------------------------------


//hier werden die styles für die tabelle definiert
//ÜBERSCHRIFT ÜBER TABELLE
let   htmlUberschrift=true;                           // mit Überschrift über der tabelle
let   htmlSignature=true;                              // anstatt der Überscghrift eine signature: - kleiner - anliegend
const htmlFeldUeber='Instanzen IOBroker';              // Überschrift und Signature
const htmlFarbUber="white";                         // Farbe der Überschrift
const htmlSchriftWeite="normal";                       // bold, normal - Fettschrift für Überschrift
const htmlÜberFontGroesse="18px";                       // schriftgröße ü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="white";                // Farbe der Überschrift bei jeder 2.ten Tabelle
const htmlFarbTableColorUber="black";               // Überschrift in der tabelle - der einzelnen Spalten
//GANZE TABELLE
let abstandZelle="2";
let weite="auto";                                     //Weite der Tabelle
let zentriert=true;                                   //ganze tabelle zentriert
const backgroundAll="#000000";                        //Hintergrund für die ganze Seite - für direkten aufruf oder iqontrol sichtber - keine auswirkung auf vis-widget
const htmlSchriftart="Helvetica";
const htmlSchriftgroesse="14px";
//FELDER UND RAHMEN
let   UeberschriftSpalten=true;                // ein- oder ausblenden der spatlen-überschriften
const htmlFarbFelderschrift="#000000";                  // SchriftFarbe der Felder
const htmlFarbFelderschrift2="#000000";                 // SchriftFarbe der Felder für jede 2te Tabelle
const htmlFarbTableColorGradient1="grey";          //  Gradient - Hintergrund der Tabelle - Verlauffarbe
const htmlFarbTableColorGradient2="white";          //  Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf
const htmlFarbTableBorderColor="blue";             // Farbe des Rahmen - is tdieser gleich den gradienten, sind die rahmen unsichtbar
let htmlRahmenLinien="all";                            // Format für Rahmen: MÖGLICH: "none" oder "all" oder "cols" oder "rows"
const htmlSpalte1Weite="auto";                   //  Weite der ersten beiden  Spalten oder z.b. 115px

// HIER NICHTS  ÄNDERN

let borderHelpBottum;
let borderHelpRight;
let htmlcenterHelp;
let htmlcenterHelp2;

if(htmlRahmenLinien=="rows") {borderHelpBottum=1;borderHelpRight=0;}
if(htmlRahmenLinien=="cols") {borderHelpBottum=0;borderHelpRight=1;}
if(htmlRahmenLinien=="none") {borderHelpBottum=0;borderHelpRight=0;}
if(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; 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+"}"+"td:nth-child(2) {width:"+htmlSpalte1Weite+"}"+
                   " </style></head><body> <div>";
//const htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-weight: bold\">"+htmlFeldUeber+"</p>";                    
const htmlTabStyle= "<table bordercolor=\""+htmlFarbTableBorderColor+"\" border=\"2px\" cellspacing=\""+abstandZelle+"\" cellpadding=\""+abstandZelle+"\" width=\""+weite+"\" rules=\""+htmlRahmenLinien+"\" 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>";
/*
table td:first-child {}  //1
table td:nth-child(2) {} //2
table td:nth-child(3) {} //3
table td:last-child {}   //4
*/

//NICHTS ÄNDERN - abhängig von den oben definierten _Spalten - in diesem Beispiel sind es 3

   	var htmlTabUeber2="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+">&ensp;"+htmlFeld1+"&ensp;</td><td width="+htmlSpalte1Weite+" align="+Feld2lAlign+">&ensp;"+htmlFeld2+"&ensp;</td><td  align="+Feld3lAlign+">&ensp;"+htmlFeld3+"&ensp;</td>";
var htmlTabUeber2_1="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld1+"&ensp;</td><td width="+htmlSpalte1Weite+"  align="+Feld2lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld2+
                   "&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld3+"&ensp;</td>";
//------------------------------------------------------


var htmlTabUeber="";
var htmlOut="";
var mix;
var counter;
//HIER SIND DIE  WERTE, DIE IN DER SCHLEIFE GEFILTERET WER%DEN - Jede spalte einen wert - jeder valx muss in dieser schleife gesetzt werden !!
var val1; var val0; var val2;

function writeHTML(){


htmlOut="";

counter=-1;
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_1+htmlTabUeber2+htmlTabUeber3; break;
   case 4: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
};   
if (!UeberschriftSpalten) {htmlTabUeber=""}


//--------------------------------------------------------------------------------------------------------------------------------------------------
//---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------
//---------alle valx werte müssen von euch bestimmt werden - val0,val1,val2 !!!---------------------------------------------------------------------
//--------------------------------------------------------------------------------------------------------------------------------------------------

$('system.adapter.*.alive').each(function(id, i) {           // hier eigene schleife definieren und den wert counter++ nicht vergessen  !!!
        var ida = id.split('.');
        if( !(id.includes("vis") || id.includes("devices")  ||  id.includes("sssss"))){
          counter++;                                       // SEHR WICHTIG - MUSS IN JEDER SCHLEIFE INTEGRIERT SEIN
          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="✅"}         

     
   
     tabelleBind(); //HIER NICHTS ÄNDERN : HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT  - diese function muss als letztes in der eigenen schleife aufgerufen werden
    
   }}); //Schleifen Ende - je nach schleifenart muss hier etwas geändert werden !!!!!!!!!

//-------------------------------------------------------------------------------------------------------------------------------------------------
//--------------------------------------------------Ende der schleife------------------------------------------------------------------------------
//-------------------------------------------------------------------------------------------------------------------------------------------------

      tabelleFinish(); // AB HIER NICHTS ÄNDERN - tabelle fertigstellen
     
} // function ende

//MAIN:
 
schedule(mySchedule,  function () { 
 writeHTML();
 if (braucheEinFile) {writeFile(home, path ,htmlOut, function (error) { /* log('file written');*/  });}
}); 
writeHTML();                                   //     <tdalign
function tabelleBind(){
       switch (mehrfachTabelle) {  
         case 1:                    htmlOut=htmlOut+"<tr><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td></tr>"; break;
         case 2:  if(counter%2==0)  {htmlOut = htmlOut+"<tr><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } 
                               else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td></tr>";} break;
                                    
         case 3: if(counter%3==0 )  {htmlOut = htmlOut+"<tr><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } 
                               else { if(counter%3==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td>";} 
                                                else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td></tr>";}
                                          } break;


         case 4: if(counter%4==0)  {htmlOut = htmlOut+"<tr><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } 
                                   else {if(counter%2==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td>";} 
                                                else    {if(counter%2==1 && counter%4==3)  { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td></tr>";} 
                                                                  else    {htmlOut = htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>";}}
                                          } break; } //switch ende

}

function tabelleFinish() {

 switch (mehrfachTabelle) {  
         case 1:    break;
         case 2:    mix=Math.abs(((counter+1)%2)-mehrfachTabelle);  
                    if(mix==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');       
                    break;
         case 3:    mix =Math.abs(((counter+1)%3)-mehrfachTabelle);
                    if(mix==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');       
                    if(mix==2)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');   
                    break;
         case 4:    mix=Math.abs(((counter+1)%4)-mehrfachTabelle);
                    if(mix==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');
                    if(mix==2)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');    
                    if(mix==3)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');      
                    break; }
     
         var htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: "+htmlÜberFontGroesse+"; font-weight:"+htmlSchriftWeite+ "\">"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</p>"; 
       var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 70%; text-align: right;\" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>";
        
        if (!htmlSignature) htmlUnter="";
          //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>";
            if (htmlUberschrift) 
                { zentriert ? htmlOutVIS=htmlZentriert+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter : htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter ;

              } else {
               zentriert ?  htmlOutVIS=htmlZentriert+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter :  htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter;

                 }
                 

  // log("bin raus aus tabelleBind");
           if (braucheEinVISWidget) setState(dpVIS, htmlOutVIS );

 var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 80%;  text-align: center; \" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>"
 var htmlEnd="</table>"+htmlUnter+"</div></body>";
 if (!htmlSignature) htmlUnter="";

 //mit oder ohne überschrift - zentriert oder links
htmlUberschrift ? htmlOut=htmlStart+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd : htmlOut=htmlStart+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd;
 //log(htmlOut);


}

[zahnheinrich]

@liv-in-sky
Ja Tabelle ist jetzt korrekt!
Bekomme aber immer noch:

9.1.2020, 20:23:25.489	[info ]: javascript.0 (29355) Stop script script.js.common.Tabellen.Tabelle_erzeugen_3_Spalten
9.1.2020, 20:23:25.497	[info ]: javascript.0 (29355) Start javascript script.js.common.Tabellen.Tabelle_erzeugen_3_Spalten
9.1.2020, 20:23:25.510	[warn ]: javascript.0 (29355)     at tabelleFinish (script.js.common.Tabellen.Tabelle_erzeugen_3_Spalten:205:37)
9.1.2020, 20:23:25.511	[warn ]: javascript.0 (29355)     at writeHTML (script.js.common.Tabellen.Tabelle_erzeugen_3_Spalten:140:7)
9.1.2020, 20:23:25.511	[warn ]: javascript.0 (29355)     at script.js.common.Tabellen.Tabelle_erzeugen_3_Spalten:150:1
9.1.2020, 20:23:25.511	[info ]: javascript.0 (29355) script.js.common.Tabellen.Tabelle_erzeugen_3_Spalten: registered 0 subscriptions and 1 schedule

Installiert ist übrigens javascript engine 4.3.4!

[liv-in-sky]

@zahnheinrich deine zeilennummern stimmen nicht mit meinen überein - ich weiß also nicht, was los ist

mach doch ein bild von zeile 205 oder 140

könnte es sein, das es ein kopier-problem ist

[zahnheinrich]

@liv-in-sky
Bitteschön:

[liv-in-sky]

@zahnheinrich schonmal die javascript instanz neugestartet

ich seh da eigentlich nichts - ist auch keine fehlermeldung mit wert

wie oft kommt die meldung eigentlich

[zahnheinrich]

@liv-in-sky
Also ehrlich gesagt, wird das log geflutet:

[liv-in-sky]

@zahnheinrich du hast ja den datenpunkt nicht angelegt

lege dir einen datenpunkt an und im script mußt du den angeben

an dieser stelle muss ein datenpunkt von dir stehen

let dpVIS="controll-own.0.AAATEST.TestHTML"

steht ganz oben im script

[zahnheinrich]

@liv-in-sky
Klar, du hast recht.
Oh Mann!
Brett vorm Kopf!
Danke für deinen Einsatz!

Gruß Ulrich

[liv-in-sky]

habe ein weiteres beispiel script für die anwendung der tabellen gepostet https://forum.iobroker.net/topic/28789/script-mit-tabelle-der-batterie-zustände

diesmal geht es um die akku oder batterie zustände eures iobroker systems

[Agria4800]

@liv-in-sky: Ich habe mal versucht dein Script um zu bauchen, mit dem Ziel,
ca. 10 unterschiedliche Datenpunkte und dessen Werte mir als Tabelle mit 2 Spalten (ID und Wert) anzeigen zu lassen, leider ohne Erfolg.
Es geht z.B. um Werte aus dem Solarlog Adapter --> S0, WR2, WR3, wo ich mir Datenpunkte aussuche...

Kannst du helfen ?

[liv-in-sky]

@Agria4800 ich helfe dir gerne

wo ist das problem - die einbindung deiner schleife im script oder die schleife mit den slektoren selbst - du könntest auch gerne dein script posten

[Agria4800]

@liv-in-sky Ich kenne mich mir Javascript eher bescheiden aus... ich bauche nur nach Gefühl um...hierbei aber ohne Erfolg...

Hier mal mein Script, leider nur mit einem Datenpunkt, der aber keinen Wert ausgibt.
Es wäre super, wenn man oben im Script einfach die Datenpunkte eintragen könnte...

Spoiler

//HIER WIRD PFAD UND FILENAME DEFINIERT
const path = "/Solarlog Tabelle.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
let   braucheEinVISWidget=true;                     // bei true wird ein html-tabelle in einen dp geschrieben - siehe nächste zeile
let dpVIS="0_userdata.0.Solarlog_Tabelle"         //WICHTIG wenn braucheEinVISWidget auf true gesetzt !!  dp zusätzlich für VIS-HTML-Basic-Widget
let mySchedule=" */20 * * * * * ";                       //jede minute  
//---------------------------------------

//HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 2
var htmlFeld1='Datenpunkt';       var Feld1lAlign="left";                     // überschrift Tabellen Spalte1 und  Ausrichtung left,right or center
var htmlFeld2='Ergebnis';         var Feld2lAlign="right";                      // überschrift Tabellen Spalte2 und  Ausrichtung left,right or center

//-----------------------------------



//hier werden die styles für die tabelle definiert
//ÜBERSCHRIFT ÜBER TABELLE
let   htmlUberschrift=true;                           // mit Überschrift über der tabelle
let   htmlSignature=true;                              // anstatt der Überscghrift eine signature: - kleiner - anliegend
const htmlFeldUeber='SolarLog ';              // Überschrift und Signature
const htmlFarbUber="white";                         // Farbe der Überschrift
const htmlSchriftWeite="normal";                       // bold, normal - Fettschrift für Überschrift
const htmlÜberFontGroesse="18px";                       // schriftgröße überschrift
//MEHRERE TABELLEN NEBENEINANDER
let   mehrfachTabelle=1;                              // bis zu 4 Tabellen werden nebeneinander geschrieben-  verkürzt das Ganze, dafür etwas breiter - MÖGLICH 1,2,3,oder 4 !!!
const htmlFarbZweiteTabelle="white";                // Farbe der Überschrift bei jeder 2.ten Tabelle
const htmlFarbTableColorUber="black";               // Überschrift in der tabelle - der einzelnen Spalten
//GANZE TABELLE
let abstandZelle="2";
let weite="auto";                                     //Weite der Tabelle
let zentriert=true;                                   //ganze tabelle zentriert
const backgroundAll="#000000";                        //Hintergrund für die ganze Seite - für direkten aufruf oder iqontrol sichtber - keine auswirkung auf vis-widget
const htmlSchriftart="Helvetica";
const htmlSchriftgroesse="14px";
//FELDER UND RAHMEN
let   UeberschriftSpalten=true;                // ein- oder ausblenden der spatlen-überschriften
const htmlFarbFelderschrift="#000000";                  // SchriftFarbe der Felder
const htmlFarbFelderschrift2="#000000";                 // SchriftFarbe der Felder für jede 2te Tabelle
const htmlFarbTableColorGradient1="grey";          //  Gradient - Hintergrund der Tabelle - Verlauffarbe
const htmlFarbTableColorGradient2="white";          //  Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf
const htmlFarbTableBorderColor="blue";             // Farbe des Rahmen - is tdieser gleich den gradienten, sind die rahmen unsichtbar
let htmlRahmenLinien="all";                            // Format für Rahmen: MÖGLICH: "none" oder "all" oder "cols" oder "rows"
const htmlSpalte1Weite="auto";                   //  Weite der ersten beiden  Spalten oder z.b. 115px

// HIER NICHTS  ÄNDERN

let borderHelpBottum;
let borderHelpRight;
let htmlcenterHelp;
let htmlcenterHelp2;

if(htmlRahmenLinien=="rows") {borderHelpBottum=1;borderHelpRight=0;}
if(htmlRahmenLinien=="cols") {borderHelpBottum=0;borderHelpRight=1;}
if(htmlRahmenLinien=="none") {borderHelpBottum=0;borderHelpRight=0;}
if(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; 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+"}"+"td:nth-child(2) {width:"+htmlSpalte1Weite+"}"+
                  " </style></head><body> <div>";
//const htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-weight: bold\">"+htmlFeldUeber+"</p>";                    
const htmlTabStyle= "<table bordercolor=\""+htmlFarbTableBorderColor+"\" border=\"2px\" cellspacing=\""+abstandZelle+"\" cellpadding=\""+abstandZelle+"\" width=\""+weite+"\" rules=\""+htmlRahmenLinien+"\" 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 2

var htmlTabUeber2="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+">&ensp;"+htmlFeld1+"&ensp;</td><td width="+htmlSpalte1Weite+" align="+Feld2lAlign+">&ensp;"+htmlFeld2+"&ensp;</td>";
var htmlTabUeber2_1="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld1+"&ensp;</td><td width="+htmlSpalte1Weite+" align="+Feld2lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld2+
                  "&ensp;</td>";
//------------------------------------------------------


var htmlOut="";
var mix;
var counter;
var val1;  var val0;
var htmlTabUeber="";

function writeHTML(){



htmlOut="";

counter=-1;
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_1+htmlTabUeber2+htmlTabUeber3; break;
  case 4: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
};    
if (!UeberschriftSpalten) {htmlTabUeber=""}

//--------------------------------------------------------------------------------------------------------------------------------------------------
//---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------
//---------alle valx werte müssen von euch bestimmt werden - val0,val1 !!!---------------------------------------------------------------------
//--------------------------------------------------------------------------------------------------------------------------------------------------

$('solarlog.0.INV.S0-IN A.PAC').each(function(id, i) {           // hier eigene schleife definieren
       var ida = id.split('.');
       if( !(id.includes("vis") || id.includes("devices") ||  id.includes("fullcalendar"))){
         counter++;                                       // SEHR WICHTIG - MUSS IN JEDER SCHLEIFE INTEGRIERT SEIN
         val0=ida[2]+"."+ida[3];
         var val1help=getState(id.replace("","state")).val;
        // val1=Math.floor( ((val1help)/60/60/24) )+"d "+ Math.floor(((val1help)/60/60) % 24) +"h "+ Math.floor( ((val1help)/60) % 60 )+" m" ;

      
   
    tabelleBind(); //HIER NICHTS ÄNDERN : HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT  - diese function muss als letztes in der eigenen schleife aufgerufen werden
   
  }}); //Schleifen Ende - je nach schleifenart muss hier etwas geändert werden !!!!!!!!!

//------------------------------------------------------------
//------------------------------------------------------------
//------------------------------------------------------------   

     tabelleFinish(); // AB HIER NICHTS ÄNDERN - tabelle fertigstellen
    
} // function ende

//MAIN:

schedule(mySchedule,  function () {
writeHTML();
if (braucheEinFile) {writeFile(home, path ,htmlOut, function (error) { /* log('file written');*/  });}
}); 
writeHTML();

function tabelleBind(){
      switch (mehrfachTabelle) {  
        case 1:                    htmlOut=htmlOut+"<tr><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td></tr>"; break;
        case 2:  if(counter%2==0)  {htmlOut = htmlOut+"<tr><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td>"; } 
                              else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td></tr>";} break;
                                   
        case 3: if(counter%3==0 )  {htmlOut = htmlOut+"<tr><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td>"; } 
                              else { if(counter%3==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td>";} 
                                               else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td></tr>";}
                                         } break;


        case 4: if(counter%4==0)  {htmlOut = htmlOut+"<tr><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td>"; } 
                                  else {if(counter%2==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td>";} 
                                               else    {if(counter%2==1 && counter%4==3)  { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td></tr>";} 
                                                                 else    {htmlOut = htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td>";}}
                                         } break;

    } //switch ende

}

function tabelleFinish() {

      switch (mehrfachTabelle) {  
        case 1:    break;
        case 2:    mix=Math.abs(((counter+1)%2)-mehrfachTabelle);  
                   if(mix==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td></tr>');       
                   break;
        case 3:    mix =Math.abs(((counter+1)%3)-mehrfachTabelle);
                   if(mix==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td></tr>');       
                   if(mix==2)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');   
                   break;
        case 4:    mix=Math.abs(((counter+1)%4)-mehrfachTabelle);
                   if(mix==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td></tr>');
                   if(mix==2)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');    
                   if(mix==3)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');      
                   break; }
         var htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: "+htmlÜberFontGroesse+"; font-weight:"+htmlSchriftWeite+ "\">"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</p>"; 
      var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 70%; text-align: right;\" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>"
       
       if (!htmlSignature) htmlUnter="";
         //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>";
           if (htmlUberschrift) 
               { zentriert ? htmlOutVIS=htmlZentriert+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter : htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter ;

             } else {
              zentriert ?  htmlOutVIS=htmlZentriert+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter :  htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter;

                }

 // log("bin raus aus tabelleBind");
          if (braucheEinVISWidget) setState(dpVIS, htmlOutVIS );

var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 80%;  text-align: center; \" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>"
var htmlEnd="</table>"+htmlUnter+"</div></body>";
if (!htmlSignature) htmlUnter="";

//mit oder ohne überschrift - zentriert oder links
htmlUberschrift ? htmlOut=htmlStart+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd : htmlOut=htmlStart+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd;
//log(htmlOut);


}

und hier das Ergebnis:

Und daraus würde ich mir gerne Datenpunkte auswählen und eintragen:

Ich denke, eigentlich nichts wildes, aber für mich doch noch nicht machbar...

[liv-in-sky]

@Agria4800 ok fangen wir mit dem selektor an - also wo wir suchen

bei dir

 $('solarlog.0.INV.S0-IN A.PAC').each(function(id, i) {  

da brauchen wir eine wildcard - denn nur dann geht er durch die verzeichnisse durch - er sucht alles , wo der anfang paßt und für die wildcard nimmt er, was er findet

$('solarlog.*.INV.*.PAC').each(function(id, i) {  

so sucht er in jeder instanz (erster stern) und für den 2. stern nimmt er alle geräte unter INV, die einen wert PAC haben

um den wert von PAC zu erhalten und in die 2 spalte zu schreiben
val0= (erste spalte)
val1= getState(id).val - die id ist ja im selektor so gewählt, das er in dieser schleife hier nur dann ist, wenn dieser datenpunkt PAC da ist (existiert) - ansonsten lässt der selektor alle anderen aus

val 0:
der name des gerätes ist bei den ganzen adaptern unterschiedlich versteckt - wenn dir z.b S0_IN A reicht kannst du den direckt aus dem selector auslesen aber oft gibt es im raw des noch einen "schönen" namen oder man setzt ihn einfach - wenn du auf den ordner S0_IN A auf der rechten seite auf den bleistift klickst und im nächsten fenster auf den tab raw gehst siehst du manchmal deine namen
hier mal ein beispiel von mir - der rote pfeil ist dein S0_IN A , der grüne Pfeil ist der schöne name

jetzt musst du dich entscheiden, was in der ersten spalte (=val0) stehen soll - dann machen wir den auch noch rein