HTML Tabelle Calendar Adapter

[Stephan Schleich]

@liv-in-sky aaah, dankeschön

[bergjet]

@liv-in-sky Also mich würde diese Tabelle für ical sehr interessieren. Aber, welche Datenpunkte genau muss ich wo anlegen?

[liv-in-sky]

@bergjet ausgehend von dieser tabelle: https://forum.iobroker.net/post/530687

schwarze pfeile müssen angelegt werden - du kannst den pfad bestimmen, wie du willst und dann im script angleichen. was im script angegeben ist, muss auch existieren. alle als zeichenkette.
roter pfeil: die datenpunkte von deinen ical instanzen eintragen. hier im script sind 2 eingetragen, in anführungszeichen und komma getrennt. diese datenpunkte existieren, wenn du ical installiert hast

[bergjet]

@liv-in-sky So, ich habe alles angelegt und das Script so belassen. Aber wie bringe ich die HTML Tabelle (0_userdata.0.Tabellen.iCALTermine) in VIS angezeigt, womit?

[liv-in-sky]

@bergjet ein normales html widget

und du gibst ein binding des dp an im htmlteil des widgets - -bedeutet: das widget soll den inhalt des datenpunktes anzeigen

{0_userdata.0.Tabellen.iCALTermine}

ist nur in runtime sichtbar - nicht im editor

[bergjet]

@liv-in-sky sagte in HTML Tabelle Calendar Adapter:

ist nur in runtime sichtbar - nicht im editor

Ah, das wars.
Jedoch wird mir in der Spalte Zeit nichts angezeigt.

[liv-in-sky]

@bergjet

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

gemacht ?

[bergjet]

@liv-in-sky Ersetze Datum mit Worten, der Hacken ist nicht gesetzt.

[liv-in-sky]

@bergjet sind das evtl einträge ohne uhrzeit - also ganztägig ?

[bergjet]

@liv-in-sky sagte in HTML Tabelle Calendar Adapter:

sind das evtl einträge ohne uhrzeit - also ganztägig

Nein, sind Termine mit Zeitangaben.
Aber stehen hier nicht die Tage bis zum Termin?

[liv-in-sky]

@bergjet trage mal die drei logs ein und schau mal, ob da die zeit drinsteht

log(JSON.stringify(myData))
  log(val2help)
    log(val1)

[bergjet]

@liv-in-sky

javascript.0	2021-01-06 18:34:18.570	info	(32557) Stop script script.js.common.ical_Abfrage
javascript.0	2021-01-06 18:34:11.798	info	(32557) script.js.common.ical_Abfrage: registered 0 subscriptions and 1 schedule
javascript.0	2021-01-06 18:34:11.796	info	(32557) script.js.common.ical_Abfrage: 4
javascript.0	2021-01-06 18:34:11.796	info	(32557) script.js.common.ical_Abfrage:
javascript.0	2021-01-06 18:34:11.795	info	(32557) script.js.common.ical_Abfrage: 11.01.2021
javascript.0	2021-01-06 18:34:11.793	info	(32557) script.js.common.ical_Abfrage: 0
javascript.0	2021-01-06 18:34:11.792	info	(32557) script.js.common.ical_Abfrage:
javascript.0	2021-01-06 18:34:11.792	info	(32557) script.js.common.ical_Abfrage: 07.01.2021
javascript.0	2021-01-06 18:34:11.791	info	(32557) script.js.common.ical_Abfrage: [{"date":"07.01.2021 ","event":"Bio-M","_class":"ical_Müll ical_tomorrow","_date":"2021-01-06T23:00:00.000Z","_end":"2021-01-07T23:00:00.000Z","_IDID":"542EBA0
javascript.0	2021-01-06 18:34:11.760	info	(32557) Start javascript script.js.common.ical_Abfrage

[liv-in-sky]

@bergjet so sieht es bei mir aus:

was nicht da ist, kann das script nicht anzeigen - muss mal drüber nachdenken, woran das liegt - ist aber eher ein ical thema

[liv-in-sky]

@bergjet zeig mal das setting von ical unter html-einstellungen

[bergjet]

@liv-in-sky Du schiesst aber scharf. Ich habe "Start-Endzeit verbergen" angekreuzt. Also wird es auch nicht angezeigt. Jetzt stimmt es, danke. Kann ich statt der Zeit auch die Tage bis zum Termin anzeigen lassen?

[liv-in-sky]

@bergjet ist in dem script nicht vorgesehen

eine neue spalte dafür wäre zu aufwendig, da ich dann ein anderes script-template brauche.

ist nur im calendar adapter script integriert

ich verspreche nix - aber ich schau mal, ob mir was einfällt

[bergjet]

@liv-in-sky Danke trotzdem. Da ich schon einige Anwendungen über den ical mache, möchte ich nicht noch einen Kalender installieren. Da verliere ich dann völlig den Überblick, wo was nicht geht.

[liv-in-sky]

@bergjet kann ich nachvollziehen

hauptsacher es läuft mal erstmal das gewünschte - ich meld mich

[liv-in-sky]

@bergjet
schnellschuß
teste mal das:

Spoiler

 //@liv-in-sky 2020  6.1.2020 19:00


//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=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   braucheMaterialDesignWidget=false;             // bei true wird ein json in einen dp geschrieben - MUSS ANGELEGT WERDEN !!!
let   braucheMaterialDesignWidgetTable=false;        // bei true wird ein json in einen dp geschrieben - MUSS ANGELEGT WERDEN !!!
let dpVIS="0_userdata.0.Tabellen.iCALTermine";         //WICHTIG wenn "braucheEinVISWidget" auf true gesetzt !!  dp zusätzlich für VIS-HTML-Basic-Widget
let dpTSJson=["ical.0.data.table","ical.1.data.table"];                        //WICHTIG wenn "braucheEinVISWidget" auf true gesetzt !! wähle den dp der trashschedule instanz
let dpMaterialWidget="0_userdata.0.Tabellen.TrashScheduleMaterialWidget";            // WICHTIG wenn braucheMaterialDesignWidget auf true MATERIALDESIGN List Widget - datenpunkt anlegen : zeichenkette  
let dpMaterialWidgetTable="0_userdata.0.Tabellen.TrashScheduleMaterialWidgetTable";  // WICHTIG wenn braucheMaterialDesignWidgetTable auf true MATERIALDESIGN Table Widget - datenpunkt anlegen: zeichenkette  
 
let wievielTage=7
//im MD List Widget
 let farbeNurEinTag="yellow"                               //statusBarColor im MD List Widget wenn nur noch ein tag
 let farbeStandardBar="#d5d3b4"                            ////statusBarColor im MD List Widget wenn normal
//im HTML Widget
 let bildergröße=24
 let farbeEinTagHTML="#CB9529"                             // Farbe der zeile wenn unter einem tag:
 let styleEinTagHTML="span"                                  // style der zeile wenn unter einem tag:  möglich b fett; i kursiv; span normal

//HIER WERDEN DIE TONNENNAMEN und BILDERPFADE definiert
/*const apName = {  "RESTMÜLL"     : { aname: "/vis.0/armin/img/muelltonneSchwarz.png"},
                 "BIOMÜLL"      : { aname: "/vis.0/armin/img/muelltonneBraun.png"},
                 "GELBER SACK"  : { aname: "/vis.0/armin/img/muelltonneGelb.png"},
                 "PAPIER TONNE" : { aname: "/vis.0/armin/img/muelltonneGruen.png"},
                 "nochwas"      : { aname: "/vis.0/armin/img/info.png"},
                 "irgendwas"    : { aname: "/vis.0/armin/img/info.png"}}*/



 let mySchedule3="  35 * * * * ";                       //jede stunde um 35 minuten

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

//HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 4
var htmlFeld1='EVENT';       var Feld1lAlign="left";                     // überschrift Tabellen Spalte1 und  Ausrichtung left,right or center
var htmlFeld2='ZEIT';        var Feld2lAlign="left";                      // überschrift Tabellen Spalte2 und  Ausrichtung left,right or center
var htmlFeld3='DATUM';         var Feld3lAlign="center";                    // überschrift Tabellen Spalte3 und  Ausrichtung left,right or center
var htmlFeld4='WTAG';        var Feld4lAlign="center";                    // überschrift Tabellen Spalte4 und  Ausrichtung left,right or center
var htmlFeld5='TAGE';        var Feld5lAlign="center";                    // überschrift Tabellen Spalte5 und  Ausrichtung left,right or center
//-----------------------------------


//ÜBERSCHRIFT ÜBER TABELLE
let   htmlUberschrift=false;                           // mit Überschrift über der tabelle
let   htmlSignature=false;                              // anstatt der Überscghrift eine signature: - kleiner - anliegend
const htmlFeldUeber='Trash Schedule';              // Überschrift und Signature
const htmlFarbUber="black";                         // 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 trennungsLinie="2";                             //extra trennungslinie bei mehrfachtabellen - evtl auf 0 stellen, wnn htmlRahmenLinien auf none sind
const htmlFarbZweiteTabelle="black";                // Farbe der Überschrift bei jeder 2.ten Tabelle
const htmlFarbTableColorUber="black";               // Überschrift in der tabelle - der einzelnen Spalten BDBDBD
//ÜBERSCHRIFT SPALTEN
const UeberSchriftHöhe=25;                          //Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe
const LinieUnterUeberschrift="2";                   // Linie nur unter Spaltenüberschrift - 
const farbetrennungsLinie="white";
const farbeLinieUnterUeberschrift="black";
const groesseUeberschrift=16;
const UeberschriftStyle="normal"                     // möglich "bold"
//GANZE TABELLE
let abstandZelle="2";
let farbeUngeradeZeilen="#333333"//"#1C1C1C";                     //Farbe für ungerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
let farbeGeradeZeilen="black"//"black";                        //Farbe für gerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/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=""     //"Jura-DemiBold"   //"RobotoCondensed-Bold"   //"Helvetica";
const htmlSchriftgroesse="16px";
//FELDER UND RAHMEN
let   UeberschriftSpalten=true;                // ein- oder ausblenden der spatlen-überschriften
const htmlFarbFelderschrift="#D8D8D8";                  // SchriftFarbe der Felder
const htmlFarbFelderschrift2="#D8D8D8";                 // SchriftFarbe der Felder für jede 2te Tabelle
const htmlFarbTableColorGradient1="orange";          //  Gradient - Hintergrund der Tabelle - Verlauffarbe
const htmlFarbTableColorGradient2="green";          //  Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf
const htmlFarbTableBorderColor="transparent";             // Farbe des Rahmen - is tdieser gleich den gradienten, sind die rahmen unsichtbar
let htmlRahmenLinien="none";                            // 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 height=\""+UeberSchriftHöhe+"\" style=\"color:"+htmlFarbTableColorUber+"; font-size: "+groesseUeberschrift+"px; font-weight: "+UeberschriftStyle+" ;  border-bottom: "+LinieUnterUeberschrift+"px solid "+farbeLinieUnterUeberschrift+" \">";
const htmlTabUeber3="</tr>";


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

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><td align="+Feld4lAlign+">&ensp;"+htmlFeld4+"&ensp;</td><td  align="+Feld5lAlign+">&ensp;"+htmlFeld5+"&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;"+htmlFeld3+
                   "&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld3+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld4+
                   "&ensp;</td><td align="+Feld5lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld5+"&ensp;</td>";
                       //------------------------------------------------------



var htmlOut="";
var mix;
var counter;
var val1; var val2; var val0; var val3; var val4;
var htmlTabUeber="";
var wochentag = ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag' ]
var myJsonWidget=[]; 
var myJsonWidget2=[];
var json1; var json2; var json3; var json4; var json5;
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+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,val3,val4!!!------------------------------------------------------------
//--------------------------------------------------------------------------------------------------------------------------------------------------
var myData=[]
for (let i=0;i<dpTSJson.length;i++) {
   myData=myData.concat(getState(dpTSJson[i]).val)
}
myData.sort(function(a, b){
                               return new Date(a._date).getTime() - new Date(b._date).getTime();      // return parseInt(new Date(b.date).getTime()) - parseInt(a.date);
                               });

//myData=getState(dpTSJson).val;
//log(JSON.stringify(myData))
for (var index in myData ) {             // hier eigene schleife definieren
     if(Math.ceil(Math.floor( ((new Date(myData[index]._date).getTime() - new Date().getTime())/60/60/24) )/1000 )-1 <=wievielTage){
        counter++
       val0=myData[index].event
       let val2help=myData[index].date
     //  log(val2help)
       val2=val2help.replace(/(.+?) .+/,"$1")//myData[index].daysLeft  
         
       //log(myData[index].nextDate) 
      // val3=wochentag[getDateObject(myData[index].nextDate).getDay()]+"  "+formatDate(getDateObject(myData[index].nextDate), "DD.MM.")
        val1=val2help.replace(/.+? (.+)/,"$1")
  //      log(val1)
        let val3help=2;
        if (formatDate(getDateObject(myData[index]._date), "DD.MM") == formatDate(getDateObject((new Date().getTime())), "DD.MM") ) {
               val3help=Math.ceil(Math.floor( ((new Date(myData[index]._date).getTime() - new Date().getTime())/60/60/24) )/1000 )
               val4=Math.ceil(Math.floor( ((new Date(myData[index]._date).getTime() - new Date().getTime())/60/60/24) )/1000 )-1} else{
                   val4=Math.ceil(Math.floor( ((new Date(myData[index]._date).getTime() - new Date().getTime())/60/60/24) )/1000 )
               }

      
       // log(     (Math.ceil(Math.floor( ((new Date(myData[index]._date).getTime() - new Date().getTime())/60/60/24) )/1000 )-1).toString()                  )
       // log(val3help.toString())

        val3=formatDate(getDateObject(myData[index]._date), "W")
      //  log((new Date(myFFF[4]._date).getTime() - new Date().getTime()).toString())


//log((Math.floor( ((new Date(myFFF[4]._date).getTime() - new Date().getTime())/60/60/24) )/1000).toString())
 
     //  for(let device_name in apName) {                            //Abfrage welches bild
                     // log(myData[index].name+"   "+device_name+"  "+ apName[device_name].aname)
       //              if (myData[index].name==device_name) {val0="<img src="+apName[device_name].aname+" height=\""+bildergröße+"\" width=\""+bildergröße+"\">"; json1=apName[device_name].aname}}; 
                     
                                                       
    //   if (myData[index].name=="RESTMÜLL") {/*val0="⬛"; */       val0="<img src=/vis.0/armin/img/muelltonneSchwarz.png height=\""+bildergröße+"\" width=\""+bildergröße+"\">"; json1="/vis.0/armin/img/muelltonneSchwarz.png"}
    //   if (myData[index].name=="GELBER SACK") {/*val0="🟨"; */    val0="<img src=/vis.0/armin/img/muelltonneGelb.png height=\""+bildergröße+"\" width=\""+bildergröße+"\">"; json1="/vis.0/armin/img/muelltonneGelb.png"}
    //   if (myData[index].name=="BIOMÜLL") {/*val0="🟫";  */       val0="<img src=/vis.0/armin/img/muelltonneBraun.png height=\""+bildergröße+"\" width=\""+bildergröße+"\">";json1="/vis.0/armin/img/muelltonneBraun.png"}
    //   if (myData[index].name=="PAPIER TONNE") {/* val0="🟩"; */  val0="<img src=/vis.0/armin/img/muelltonneGruen.png height=\""+bildergröße+"\" width=\""+bildergröße+"\">";json1="/vis.0/armin/img/muelltonneGruen.png"}
    //   if (myData[index].name=="irgendwas") {/*val0="☢️";  */     val0="<img src=/vis.0/armin/img/irgendwas.jpg height=\""+bildergröße+"\" width=\""+bildergröße+"\">";json1="/vis.0/armin/img/irgendwas.png"}

        if (braucheMaterialDesignWidget || braucheMaterialDesignWidgetTable) {
            json2=val1; json3=val2; json4=val3;json5=farbeStandardBar;
            makeJsonWidget(json1,json2,json3,json4,json5);}

        if(val3help<=1){
            val3="<font color=\""+farbeEinTagHTML +"\"><"+styleEinTagHTML+">"+val3;
            val1="<font color=\""+farbeEinTagHTML +"\"><"+styleEinTagHTML+">"+val1;
            val2="<font color=\""+farbeEinTagHTML +"\"><"+styleEinTagHTML+">"+val2;
            val0="<font color=\""+farbeEinTagHTML +"\"><"+styleEinTagHTML+">"+val0}
        
   
     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(mySchedule3,  function () {
 writeHTML();
 if (braucheEinFile) {writeFile(home, path ,htmlOut, function (error) { /* log('file written');*/  });}
}); 
 writeHTML();

   				 function tabelleBind(){
     //HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT - hat man oben 5 Felder definiert, braucht man hier 5 Werte
   
       switch (mehrfachTabelle) {  
         case 1:  if(counter%2==0) {  htmlOut=htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+" >"+val0+"</td><td align="+Feld2lAlign+">"+val1+"</td><td align="+Feld3lAlign+">"+val2+"</td><td align="+Feld4lAlign+">"+val3+"</td><td align="+Feld5lAlign+">"+val4+"</td></tr>"; break; } else
                                  {  htmlOut=htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+" >"+val0+"</td><td align="+Feld2lAlign+">"+val1+"</td><td align="+Feld3lAlign+">"+val2+"</td><td align="+Feld4lAlign+">"+val3+"</td><td align="+Feld5lAlign+">"+val4+"</td></tr>"; break; } 
       
        case 2: if(counter%4==0){
                   if(counter%2==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+" >"+val0+"</td><td align="+Feld2lAlign+">"+val1+"</td><td align="+Feld3lAlign+">"+val2+"</td><td align="+Feld4lAlign+">"+val3+"</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\"  align="+Feld5lAlign+">"+val4+"</td>"; } 
                              else {htmlOut = htmlOut+"<td align="+Feld1lAlign+"  style=\"color:"+htmlFarbFelderschrift2+"\">"+val0+"</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val1+"</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val2+"</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val3+"</td><td align="+Feld5lAlign+">"+val4+"</td></tr>";} break;
               }else{
                              if(counter%2==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+" >"+val0+"</td><td align="+Feld2lAlign+">"+val1+"</td><td align="+Feld3lAlign+">"+val2+"</td><td align="+Feld4lAlign+">"+val3+"</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld5lAlign+">"+val4+"</td>"; } 
                              else {htmlOut = htmlOut+"<td align="+Feld1lAlign+"  style=\"color:"+htmlFarbFelderschrift2+"\">"+val0+"</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val1+"</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val2+"</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val3+"</td><td align="+Feld5lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val4+"</td></tr>";} break;}
                                   
        case 3:  if(counter%2==0)   {
                 if(counter%3==0 )  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+" >"+val0+"</td><td align="+Feld2lAlign+">"+val1+"</td><td align="+Feld3lAlign+">"+val2+"</td><td  align="+Feld4lAlign+">"+val3+"</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld5lAlign+">"+val4+"</td>"; } 
                              else { if(counter%3==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+"  style=\"color:"+htmlFarbFelderschrift2+"\">"+val0+"</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val1+"</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val2+"</td><td  align="+Feld4lAlign+" style=\" color:"+htmlFarbFelderschrift2+"\">"+val3+"</td><td align="+Feld5lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"; color:"+htmlFarbFelderschrift2+"\">"+val4+"</td>";} 
                                               else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+" >"+val0+"</td><td align="+Feld2lAlign+">"+val1+"</td><td align="+Feld3lAlign+">"+val2+"</td><td align="+Feld4lAlign+">"+val3+"</td><td align="+Feld5lAlign+">"+val4+"</td></tr>";}
                                         } break;} else{
                 if(counter%3==0 )  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+" >"+val0+"</td><td align="+Feld2lAlign+">"+val1+"</td><td align="+Feld3lAlign+">"+val2+"</td><td align="+Feld4lAlign+">"+val3+"</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld5lAlign+">"+val4+"</td>"; } 
                              else { if(counter%3==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+"  style=\"color:"+htmlFarbFelderschrift2+"\">"+val0+"</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val1+"</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val2+"</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val3+"</td><td align="+Feld5lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"; color:"+htmlFarbFelderschrift2+"\">"+val4+"</td>";} 
                                               else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+" >"+val0+"</td><td align="+Feld2lAlign+">"+val1+"</td><td align="+Feld3lAlign+">"+val2+"</td><td align="+Feld4lAlign+">"+val3+"</td><td align="+Feld5lAlign+">"+val4+"</td></tr>";}
                                         } break; }

        case 4:  if(counter%8==0)   {
                 if(counter%4==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+" >"+val0+"</td><td align="+Feld2lAlign+">"+val1+"</td><td align="+Feld3lAlign+">"+val2+"</td><td align="+Feld4lAlign+">"+val4+"</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld5lAlign+">"+val3+"</td>"; } 
                                  else {if(counter%4==1 )  { htmlOut = htmlOut+"<td  align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val0+"</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val1+"</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val2+"</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val3+"</td><td align="+Feld5lAlign+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"; color:"+htmlFarbFelderschrift2+"\">"+val4+"</td>";} 
                                               else    {if(counter%4==3)  { htmlOut= htmlOut+"<td align="+Feld1lAlign+"  style=\"color:"+htmlFarbFelderschrift2+"\">"+val0+"</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val1+"</td><td align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val2+"</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val3+"</td><td align="+Feld5lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val4+"</td></tr>";} 
                                                                 else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+" >"+val0+"</td><td align="+Feld2lAlign+">"+val1+"</td><td align="+Feld3lAlign+">"+val2+"</td><td align="+Feld4lAlign+">"+val3+"</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld5lAlign+">"+val4+"</td>";}}
                                         } break;} else{
                 if(counter%4==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+" >"+val0+"</td><td align="+Feld2lAlign+">"+val1+"</td><td align="+Feld3lAlign+">"+val2+"</td><td align="+Feld4lAlign+">"+val3+"</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld5lAlign+">"+val3+"</td>"; } 
                                  else {if(counter%4==1 )  { htmlOut = htmlOut+"<td  align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val0+"</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val1+"</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val2+"</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val3+"</td><td align="+Feld5lAlign+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"; color:"+htmlFarbFelderschrift2+"\">"+val4+"</td>";} 
                                               else    {if(counter%4==3)  { htmlOut= htmlOut+"<td align="+Feld1lAlign+"  style=\"color:"+htmlFarbFelderschrift2+"\">"+val0+"</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val1+"</td><td align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val2+"</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val3+"</td><td align="+Feld5lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val4+"</td></tr>";} 
                                                                 else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+" >"+val0+"</td><td align="+Feld2lAlign+">"+val1+"</td><td align="+Feld3lAlign+">"+val2+"</td><td align="+Feld4lAlign+">"+val3+"</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld5lAlign+">"+val4+"</td>";}}
                                         } break; }

     } //switch ende



}

function tabelleFinish() {

      // tabelle fertigstellen
switch (mehrfachTabelle) {  
       case 1:    break;

       case 2:    
                  if(counter%2==0)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');
                
                  break;

       case 3:   if(counter%3==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");
                 if(counter%3==1)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");        
                 if(counter%3==0)      htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");
               
                  break;
       case 4:   if(counter%4==3)  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");
                 if(counter%4==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");
                 if(counter%4==1)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");    
                 if(counter%4==0)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&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>"
 
 if (!htmlSignature) htmlUnter="";
var htmlEnd="</table>"+htmlUnter+"</div></body>";
 //mit oder ohne überschrift - zentriert oder links
htmlUberschrift ? htmlOut=htmlStart+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd : htmlOut=htmlStart+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd;
 //log(htmlOut);
 
if (braucheMaterialDesignWidget) {
     
       setState(dpMaterialWidget,JSON.stringify(myJsonWidget2)); 
       myJsonWidget2=[];
}
if (braucheMaterialDesignWidgetTable) {
  
  setState(dpMaterialWidgetTable,JSON.stringify(myJsonWidget)); 
     myJsonWidget=[];
}
}




function makeJsonWidget(vax1,vax2,vax3,vax4,vax5) {
//log(vax3+vax6+htmlFeld1)
   if ( braucheMaterialDesignWidgetTable) {
   myJsonWidget.push({
       Device : vax1,
       Wert : vax2,
       Status : vax4,
       Hersteller : vax3       
   }

   );}

//	log(myJsonWidget)
if (braucheMaterialDesignWidget) {
let mysubText = `<div style="display: flex; flex-direction: row; line-height: 1.3; padding-left: 1px; padding-right: 8px; align-items: center;">
                <div style="flex: 1;">${vax4}</div>
                <div style="color: black; font-size: 18px; font-family: RobotoCondensed-LightItalic; text-align: right;">${vax3}</div>
                </div>`
       if(vax3<=1)   vax5=farbeNurEinTag               
  
     myJsonWidget2.push({
               text: vax2,
               subText: mysubText,
               statusBarColor: vax5,
               image: vax1,
               imageColor: "",
               listType: "text",
               showValueLabel: false,
               name: vax2,
               status: vax3,
               Wert : vax3,
               Hersteller : vax4
           });
}
 }

du kannst dir das setting vom alten script rüberkopieren - die datenpunkte - zeile 11 bis einschl. 14

[bergjet]

@liv-in-sky Das ging ja flott. Danke.