Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Skripten / Logik
    4. JavaScript
    5. HTML Tabelle für Tankerkönig

    NEWS

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    HTML Tabelle für Tankerkönig

    This topic has been deleted. Only users with topic management privileges can see it.
    • liv-in-sky
      liv-in-sky last edited by liv-in-sky

      nutzt man die neue version von tankerkönig, bitte diesen post beachten: https://forum.iobroker.net/post/896445

      • grundlage des scriptes ist: https://forum.iobroker.net/topic/28021/html-table-für-vis-oder-iqontrol-js-und-blockly

      • script vorlage thread:https://forum.iobroker.net/topic/37561/json-aus-tankerkönig-adapter-parsen (dank an @sveni_lee -hat script vorlage erstellt )

      • für übersicht in der vis (tabelle wird über html-widget mit binding angezeigt) oder in iqontrol

      • die bilder müssen in der vis und im setting ()mit richtigen pfad angegeben sein und im setting ( var station_png ))

      • die datenpunkte dpVis und dpMDWidget müssen selbst angelegt und im script angepaßt werden - type : zeichefolge

      • die günstigste tankstelle ist farblich markiert

      • getriggert wird durch json datenpunkt des adapters und beim ersten start nach dem speichern

      • die farben können selbst definiert werden

      Image 15.png

       //@liv-in-sky 2023  27.1.-10:55
       // dank an @sveni_lee - hat vorlage für das script gemacht
      
      //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 dpVIS="0_userdata.0.CONTROL-OWN.TABELLEN.TankerKoenig"         //WICHTIG wenn "braucheEinVISWidget" auf true gesetzt !!  dp zusätzlich für VIS-HTML-Basic-Widget
      let   braucheEinMDWidget=true;                     // bei true wird ein json in einen dp geschrieben - siehe nächste zeile
      let dpMDWidget="0_userdata.0.CONTROL-OWN.TABELLEN.TankerKoenigMDWidget"
      let   braucheEinMDWidgetList=true;                     // bei true wird ein json in einen dp geschrieben - siehe nächste zeile
      let dpMDWidgetList="0_userdata.0.CONTROL-OWN.TABELLEN.TankerKoenigMDWidgetList"
      //let mySchedule=" */20 * * * * * ";                       //änderung des JSON ist trigger
      let benzinArt="e5";    //  für material design widget only - diesel, e5 oder e10 möglich
      var station_png = {"6a567d36-fe56-4118-a3e0-45a2b77dc584" : "/vis.0/armin/img/tankstellen/erstewahl.jpg",  
                         "ba57cc7a-aa15-4fe8-87d4-180fcd1cc8a4" : "/vis.0/armin/img/tankstellen/esso.jpg",
                         "2cca550a-5be0-4099-bc16-f2a85550d949" : "/vis.0/armin/img/tankstellen/oil.png",
                         "76c28b9b-44d7-4286-bf64-75a055973544" : "/vis.0/armin/img/tankstellen/vmarkt.png",
                         "98033fc8-408c-4d5d-bd37-5c967d214bc2" : "/vis.0/armin/img/tankstellen/aral.png",
                         "d558326f-37b9-4c0f-3eb9-693c23a03705" : "/vis.0/armin/img/tankstellen/avia.png"
                         };
      let bildergroeße=15
      let farbeCheapestHTML="lightgreen"//"#41A9DC"                             // Farbe der zeile wenn unter einem tag:
      let styleCheapestHTML="b"                                  // style der zeile wenn unter einem tag:  möglich b fett; i kursiv; span normal
      let braucheUhrzeit=true;
      
      //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 5
      var htmlFeld1='';       var Feld1lAlign="left";                     // überschrift Tabellen Spalte1 und  Ausrichtung left,right or center
      var htmlFeld2='Tankstelle';        var Feld2lAlign="left";                      // überschrift Tabellen Spalte2 und  Ausrichtung left,right or center
      var htmlFeld3='Diesel';         var Feld3lAlign="center";                    // überschrift Tabellen Spalte3 und  Ausrichtung left,right or center
      var htmlFeld4='E5';        var Feld4lAlign="center";                    // überschrift Tabellen Spalte4 und  Ausrichtung left,right or center
      var htmlFeld5='E10';        var Feld5lAlign="center";                    // überschrift Tabellen Spalte5 und  Ausrichtung left,right or center
      var htmlFeld6='Status';        var Feld6lAlign="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='Tankerkönig Tabelle';              // Ü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 trennungsLinie="2";                             //extra trennungslinie bei mehrfachtabellen - evtl auf 0 stellen, wnn htmlRahmenLinien auf none sind
      const farbetrennungsLinie="white";
      const htmlFarbZweiteTabelle="white";                // Farbe der Überschrift bei jeder 2.ten Tabelle
      const htmlFarbTableColorUber="black";               // Überschrift in der tabelle - der einzelnen Spalten
      //ÜBERSCHRIFT SPALTEN
      const UeberSchriftHöhe="15";                          //Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe
      const LinieUnterUeberschrift="3";                   // Linie nur unter Spaltenüberschrift - 
      const farbeLinieUnterUeberschrift="black";
      const groesseUeberschrift=13;
      const UeberschriftStyle="normal"                     // möglich "bold"
      //GANZE TABELLE
      let abstandZelle="1";
      let farbeUngeradeZeilen="#000000";                     //Farbe für ungerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
      let farbeGeradeZeilen="#333333";                        //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="Helvetica";
      const htmlSchriftgroesse="13px";
      //FELDER UND RAHMEN
      let   UeberschriftSpalten=true;                // ein- oder ausblenden der spatlen-überschriften
      const htmlFarbFelderschrift="#BDBDBD";                  // SchriftFarbe der Felder
      const htmlFarbFelderschrift2="#333333";                 // SchriftFarbe der Felder für jede 2te Tabelle
      const htmlFarbTableColorGradient1="lightgreen"//"#41A9DC";          //  Gradient - Hintergrund der Tabelle - Verlauffarbe
      const htmlFarbTableColorGradient2="green"//"#424242";          //  Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf
      const htmlFarbTableBorderColor="grey";             // Farbe des Rahmen - is tdieser gleich den gradienten, sind die rahmen unsichtbar
      let htmlRahmenLinien="cols";                            // 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><td  align="+Feld6lAlign+">&ensp;"+htmlFeld6+"&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><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld4+
                         "&ensp;</td><td align="+Feld5lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld5+"&ensp;</td><td align="+Feld6lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld6+"&ensp;</td>";
                             //------------------------------------------------------
      
      
      
      var htmlOut="";
      var mix;
      var counter;
      var val1; var val2; var val0; var val3; var val4; var val5; 
      var htmlTabUeber="";
      function writeHTML(){
      
      braucheUhrzeit ? htmlFeld1=formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm") : htmlFeld1="";
      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><td  align="+Feld6lAlign+">&ensp;"+htmlFeld6+"&ensp;</td>";
      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><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld4+
                         "&ensp;</td><td align="+Feld5lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld5+"&ensp;</td><td align="+Feld6lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld6+"&ensp;</td>";
                             //------------------------------------------------------
      
      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!!!------------------------------------------------------------
      //--------------------------------------------------------------------------------------------------------------------------------------------------
      
      let   json_tank = [];  
      let   json_tank2 = [];
      
      let myStations = getObject('system.adapter.tankerkoenig.0').native.station;
      //log(myStations)
      let json = JSON.parse(getState('tankerkoenig.0.stations.json').val);
      
      let stations = Object.keys(json.prices);
      
      
      
      
      
      stations.forEach((station,i) => {
        //log(station)
         myStations.forEach((arr, j) => {
       //log(arr)
             if(arr.station == station) {
                 if(json.prices[station].status=="open") {
             val0=  "<img src="+station_png[station]+" height=\""+bildergroeße+"\" width=\""+bildergroeße+"\">"
           //  log(val0)
             val1=arr.stationname
             json.prices[station].diesel!=false ? val2=json.prices[station].diesel.toFixed(2)+" €" : val2=0
             json.prices[station].e5!=false ? val3=json.prices[station].e5.toFixed(2)+" €" :val3=0
             json.prices[station].e10!=false ? val4=json.prices[station].e10.toFixed(2)+" €" :val4=0
             val5=json.prices[station].status;//log(val5)
             if (getState("tankerkoenig.0.stations.cheapest.diesel.station_id").val == station) {
                  val2="<font color=\""+farbeCheapestHTML +"\"><"+styleCheapestHTML+">"+val2;
                  }
             if (getState("tankerkoenig.0.stations.cheapest.e5.station_id").val == station) {
                  val3="<font color=\""+farbeCheapestHTML +"\"><"+styleCheapestHTML+">"+val3;
                 }
             
             if (getState("tankerkoenig.0.stations.cheapest.e10.station_id").val == station) {
                  val4="<font color=\""+farbeCheapestHTML +"\"><"+styleCheapestHTML+">"+val4;
                }     
      
             counter++;
             tabelleBind();
             let helper;
             //log(json.prices[station][benzinArt])
                 json.prices[station][benzinArt]!=false ? helper=json.prices[station][benzinArt].toFixed(2)+" € ("+benzinArt+")" : helper="0"
                // log(helper)
                 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;">${helper}</div>
                      <div style="color: black; font-size: 18px; font-family: RobotoCondensed-LightItalic; text-align: right;">${json.prices[station].status}</div>
                      </div>`
                      let vax5="";
                      let helpi="tankerkoenig.0.stations.cheapest."+benzinArt+".station_id"
                      if(getState(helpi).val == station)   vax5=farbeCheapestHTML            
           
           json_tank2.push({
                     text: arr[1] ,
                     subText: mysubText,
                     statusBarColor: vax5,
                     image:station_png[station],
                     imageColor: "",
                     listType: "text",
                     showValueLabel: false,
                     name: " ",
                     status: " ",
                     Wert : " ",
                     Hersteller : " "
                 });
                     json.prices[station][benzinArt]!=false ? helper=json.prices[station][benzinArt].toFixed(2)+" € ("+benzinArt+")" : helper="0"
                     json_tank.push(
                     {
                         "img": station_png[station],
                         "name": arr[1],
                         "preis": helper,
                         "status": json.prices[station].status
                     }) 
      
            } else { val0=  "<img src="+station_png[station]+" height=\""+bildergroeße+"\" width=\""+bildergroeße+"\">"
             val1=arr.stationname;
             val2="-"
             val3="-"
             val4="-"
             val5=json.prices[station].status
             counter++;
             tabelleBind();
      
            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;"> - </div>
                      <div style="color: black; font-size: 18px; font-family: RobotoCondensed-LightItalic; text-align: right;">${json.prices[station].status}</div>
                      </div>`
                      let vax5="";
                      let helpi="tankerkoenig.0.stations.cheapest."+benzinArt+".station_id"
                      if(getState(helpi).val == station)   vax5=farbeCheapestHTML            
           
           json_tank2.push({
                     text: arr[1] ,
                     subText: mysubText,
                     statusBarColor: vax5,
                     image:station_png[station],
                     imageColor: "",
                     listType: "text",
                     showValueLabel: false,
                     name: " ",
                     status: " ",
                     Wert : " ",
                     Hersteller : " "
                 });
      
      
      
      
             json_tank.push(
                     {
                         "img": station_png[station],
                         "name": arr[1],
                         "preis": "-",
                         "status": json.prices[station].status
                     })
            }
            
              }
         });
         
      })
      
         json_tank.sort(function (a, b) {
      
             return a.preis == b.preis ? 0 : +(a.preis > b.preis) || -1;
            
      
         }); 
          if (braucheEinMDWidget) setState(dpMDWidget, JSON.stringify(json_tank), true);//Schleifen Ende - je nach schleifenart muss hier etwas geändert werden !!!!!!!!!
          if (braucheEinMDWidgetList) setState(dpMDWidgetList, JSON.stringify(json_tank2), true);
      
      //-------------------------------------------------------------------------------------------------------------------------------------------------
      //--------------------------------------------------Ende der schleife------------------------------------------------------------------------------
      //-------------------------------------------------------------------------------------------------------------------------------------------------
      
            tabelleFinish(); // AB HIER NICHTS ÄNDERN - tabelle fertigstellen
           
      } // function ende
      
      //MAIN:
       
       on({id:'tankerkoenig.0.stations.json'}, function (obj) {  
           setTimeout(function () {
             writeHTML();
      }, 5000);
       
       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+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td></tr>"; break; } else
                                        {  htmlOut=htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td></tr>"; break;}
             
              case 2:  if(counter%4==0){
                      if(counter%2==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld6lAlign+">&ensp;"+val5+"&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><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val5+"&ensp;</td></tr>";} break;
                         }else{
                       if(counter%2==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld6lAlign+">&ensp;"+val5+"&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><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val5+"&ensp;</td></tr>";} break;}
                                         
              case 3:  if(counter%2==0)   {
                        if(counter%3==0 )  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld6lAlign+">&ensp;"+val5+"&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><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"; color:"+htmlFarbFelderschrift2+"\">&ensp;"+val5+"&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><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td></tr>";}
                                               } break;}else{
                       if(counter%3==0 )  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld6lAlign+">&ensp;"+val5+"&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><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"; color:"+htmlFarbFelderschrift2+"\">&ensp;"+val5+"&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><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td></tr>";}
                                               } break;}
      
      
              case 4:   if(counter%8==0)   {
                        if(counter%4==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val4+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val3+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td>"; } 
                                        else {if(counter%4==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><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"; color:"+htmlFarbFelderschrift2+"\">&ensp;"+val5+"&ensp;</td>";} 
                                                     else    {if(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><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+" >&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+" style=\" color:"+htmlFarbFelderschrift2+"\">&ensp;"+val5+"&ensp;</td></tr>";} 
                                                                       else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td>&ensp;"+val1+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val4+"&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td>";}}
                                               } break;}else{
                        if(counter%4==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val4+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val3+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td>"; } 
                                        else {if(counter%4==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><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+" style=\"  border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"; color:"+htmlFarbFelderschrift2+"\">&ensp;"+val5+"&ensp;</td>";} 
                                                     else    {if(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><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+" style=\" color:"+htmlFarbFelderschrift2+"\">&ensp;"+val5+"&ensp;</td></tr>";} 
                                                                       else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td>&ensp;"+val1+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val4+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</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><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><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>&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><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><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>&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><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>&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><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><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);
       
      
      
      }
      
      
      
      

      alle widget in der übersicht - MaterialDesign Table, MaterialDesign List und die HTML Tabelle

      Image 17.png

      andere farben
      Image 20.png

      1 Reply Last reply Reply Quote 6
      • liv-in-sky
        liv-in-sky last edited by

        @Stephan-Schleich

        hier zum testen

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

          habe ein update eingespielt - wenn es schon jmd installiert hat - bitte update benutzen im ersten post - es hat bei e10 und e5 eine kleine verwechslung gegeben - sonst stimmen die werte nicht !!!

          zusätzlich gibt es auch die widgets für MaterialDesing table und MD List

          List:

          [{"tpl":"tplVis-materialdesign-Icon-List","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","wrapItems":true,"listItemDataMethod":"jsonStringObject","countListItems":"1","vibrateOnMobilDevices":"50","listLayout":"card","itemLayout":"horizontal","listType0":"text","showValueLabel0":"true","listType1":"text","showValueLabel1":true,"signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"maxItemsperRow":"4","json_string_oid":"controll-own.0.TABELLEN.TankerKoenigMDWidgetList","labelFontSize":"18","subLabelFontSize":"16","labelFontFamily":"RobotoCondensed-Regular","horizontalIconContainerWidth":"70","buttonHeight":"70","iconHeight":"45","iconItemMinWidth":"300","labelFontColor":"#f3f1f1","valueFontFamily":"RobotoCondensed-Regular","itemBackgroundColor":"#9f9b5b","valueFontColor":"#f3f1f1","subLabelFontColor":"#f3f1f1","subLabelFontFamily":"RobotoCondensed-Regular","valueFontSize":"16","itemGaps":"5","valueAppendix1":"","label1":"IP","buttonLayout":"round","autoLockAfter":"10","lockIconTop":"5","lockIconLeft":"5","lockFilterGrayscale":"30","lockApplyOnlyOnImage":"true","titleLayout":"headline6","colorBackground":""},"style":{"left":"155px","top":"448px","width":"350px","height":"36.24%","overflow-y":"auto","background":"#423d3d"},"widgetSet":"materialdesign"}]
          

          Image 21.png

          Table:

          [{"tpl":"tplVis-materialdesign-Table","data":{"oid":"controll-own.0.TABELLEN.TankerKoenigMDWidget","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","countCols":"3","tableLayout":"standard","showHeader":"true","headerTextSize":"headline6","showColumn0":"true","colType0":"image","textAlign0":"left","showColumn1":"true","colType1":"text","textAlign1":"center","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"showColumn2":"true","colType2":"text","textAlign2":"center","showColumn3":"true","colType3":"text","textAlign3":"center","dataJson":"","colTextSize0":"","label1":"Tankstelle","label0":" ","label2":"Preis","sortKey0":"name","fontFamily0":"RobotoCondensed-Regular","padding_left0":"10","colTextColor0":"#beb7b7","colorBackground":"#fefedc","colorHeaderRowBackground":"#424242","colorHeaderRowText":"#b6b9b7","borderColor":"#000000","fontFamily1":"RobotoCondensed-Regular","colTextColor1":"","rowHeight":"","label3":"Status","imageSize3":"","padding_right3":"","imageSize0":"50","colTextSize3":"","colTextColor2":"#beb7b7","fontFamily2":"RobotoCondensed-Regular","dividers":"grey","columnWidth0":"80","colNoWrap0":false,"padding_right2":"","padding_left3":"","colNoWrap3":true,"columnWidth3":"","padding_right0":"10","columnWidth2":"","headerRowHeight":"20","fixedHeader":false,"headerFontFamily":"RobotoCondensed-Regular","showColumn4":"true","colType4":"text","textAlign4":"center","showColumn5":"true","colType5":"text","textAlign5":"center"},"style":{"left":"561px","top":"448px","z-index":"1","width":"546px","height":"351px","overflow-y":"auto"},"widgetSet":"materialdesign"}]
          

          Image 19.png

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

            @liv-in-sky Vielen Dank, klappt wie immer einwandfrei 👍 👍

            Stephan Schleich 1 Reply Last reply Reply Quote 0
            • Stephan Schleich
              Stephan Schleich @Stephan Schleich last edited by Stephan Schleich

              @liv-in-sky Wenn eine Tankstelle zu hat, kommt noch folgender fehler und der status ändert sich nicht auf closed

              2f561420-9017-4803-bea2-f1eb0eb2b037-image.png

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

                @Stephan-Schleich konnte ich bis jetzt nicht testen - kannst du mir den inhalt von dm json datenpunkt posten - dann kann ich mal reinschauen

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

                  @liv-in-sky ```
                  {"ok":true,"license":"CC BY 4.0 - https://creativecommons.tankerkoenig.de","data":"MTS-K","prices":{"a314d76c-c570-4a87-8efe-fa3d4488a847":{"status":"open","e5":1.199,"e10":1.169,"diesel":0.999},"9b9e42cf-49be-4ae2-ab13-2efaf36dda51":{"status":"open","e5":1.249,"e10":1.199,"diesel":1.049},"b7a4fc36-e9c9-4259-9e1d-bd84c81630fc":{"status":"closed"},"f8507c5b-578a-4cdf-85ce-7270fc3e90ec":{"status":"open","e5":1.219,"e10":1.169,"diesel":1.019},"51d4b6b8-a095-1aa0-e100-80009459e03a":{"status":"open","e5":1.209,"e10":1.159,"diesel":0.999},"91adc4bb-c19a-4f1f-aded-c6a645bf6821":{"status":"open","e5":1.239,"e10":1.189,"diesel":1.039},"91ffe312-b617-42a3-91ca-f77128657b74":{"status":"open","e5":1.239,"e10":1.189,"diesel":1.039},"04052c37-16c0-4766-8b2c-a78ba98388f7":{"status":"open","e5":1.219,"e10":1.169,"diesel":1.019}}}

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

                    @Stephan-Schleich sagte in HTML Tabelle für Tankerkönig:

                    {"ok":true,"license":"CC BY 4.0 - https://creativecommons.tankerkoenig.de","data":"MTS-K","prices":{"a314d76c-c570-4a87-8efe-fa3d4488a847":{"status":"open","e5":1.199,"e10":1.169,"diesel":0.999},"9b9e42cf-49be-4ae2-ab13-2efaf36dda51":{"status":"open","e5":1.249,"e10":1.199,"diesel":1.049},"b7a4fc36-e9c9-4259-9e1d-bd84c81630fc":{"status":"closed"},"f8507c5b-578a-4cdf-85ce-7270fc3e90ec":{"status":"open","e5":1.219,"e10":1.169,"diesel":1.019},"51d4b6b8-a095-1aa0-e100-80009459e03a":{"status":"open","e5":1.209,"e10":1.159,"diesel":0.999},"91adc4bb-c19a-4f1f-aded-c6a645bf6821":{"status":"open","e5":1.239,"e10":1.189,"diesel":1.039},"91ffe312-b617-42a3-91ca-f77128657b74":{"status":"open","e5":1.239,"e10":1.189,"diesel":1.039},"04052c37-16c0-4766-8b2c-a78ba98388f7":{"status":"open","e5":1.219,"e10":1.169,"diesel":1.019}}}

                    ok - da muss ich definitiv eine abfrage reinmachen - wird heute wohl nix mehr - aber morgen früh sollte es soweit sein

                    1 Reply Last reply Reply Quote 1
                    • liv-in-sky
                      liv-in-sky @Stephan Schleich last edited by

                      @Stephan-Schleich

                      testest du bitte mal die neue version im ersten post - bei mir funktioniert es

                      Image 22.png

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

                        @liv-in-sky Jetzt schaut's gut aus 👍 👍

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

                          @Stephan-Schleich
                          @all

                          mir ist gestern noch etwas aufgefallen - das script wird durch den json datenpunkt getriggert - es wird im script aber auch geprüft, welches der "cheapest" anbieter ist und das geht über die datenpunkte - gestern abend war bei mir, als die zweite tankstelle geschlossen wurde, die anzeige der billigsten tankstelle nicht richtig - das änderte sich nach einem weitere durchlauf des scriptes - ich gehe davon aus, dass die datenpunkte noch nicht geschrieben sind, wenn das json triggert - habe das im script im ersten post geändert

                          ferner habe ich noch ein setting, ob man die update-uhrzeit in der ersten zelle sehen will - gibt immer ein besseres gefühl, wenn man weiß/sieht , dass es aktuell ist

                          Image 5.png

                          reindeer-web 1 Reply Last reply Reply Quote 1
                          • Mike77
                            Mike77 last edited by

                            Hallo zusammen,

                            da ich null Profi bin und vieles mit Copy&Paste meistere hier ein Tip für alle.

                            Nach dem letzten Update vom Tankerkönig hat sich ein Datenpunkt geändert.

                            Im Script muss: tankerkoenig.0.json durch tankerkoenig.0.stations.json 2x ersetzt werden... dann geht es wieder.

                            Mike

                            1 Reply Last reply Reply Quote 1
                            • reindeer-web
                              reindeer-web @liv-in-sky last edited by

                              @liv-in-sky Habe mich mal mit diesem Script beschäftigt. Ich habe auch alles (hoffentlich) richtig konfiguriert wie hier beschrieben.
                              Allerdings bekomme ich nach dem Starten des Scripts folgende Fehler-Meldungen.

                              10:44:36.471	info	javascript.0 (460) Start javascript script.js.common.Spritpreise
                              10:44:36.495	warn	javascript.0 (460) script.js.common.Spritpreise: Object "system.adapter.tankerkoenig.0.stations" does not exist
                              10:44:36.497	info	javascript.0 (460) script.js.common.Spritpreise: registered 1 subscription, 0 schedules, 0 messages, 0 logs and 0 file subscriptions
                              10:44:36.501	error	javascript.0 (460) script.js.common.Spritpreise: TypeError: Cannot read properties of null (reading 'native')
                              10:44:36.503	error	javascript.0 (460) at writeHTML (script.js.common.Spritpreise:305:69)
                              10:44:36.503	error	javascript.0 (460) at script.js.common.Spritpreise:591:2
                              10:44:36.504	error	javascript.0 (460) at script.js.common.Spritpreise:789:3
                              

                              Konnte mir hier vielleicht jemand weiterhelfen?

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

                                @reindeer-web

                                probier mal das script vom ersten post - habe es geändert - da gab es änderungen im adapter

                                sichere zuerst das jetzt eingestellte scipt, damit du dir die settings rüberkopieren kannst

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

                                  @liv-in-sky Vielen Dank!
                                  Jetzt kommen nach dem Start zumindest nur noch ein paar Warnungen:

                                  17:27:58.062	info	javascript.0 (460) Start javascript script.js.common.Spritpreise
                                  17:27:58.078	warn	javascript.0 (460) at writeHTML (script.js.common.Spritpreise:559:33)
                                  17:27:58.078	warn	javascript.0 (460) at script.js.common.Spritpreise:597:2
                                  17:27:58.079	warn	javascript.0 (460) at script.js.common.Spritpreise:795:3
                                  17:27:58.080	info	javascript.0 (460) script.js.common.Spritpreise: registered 1 subscription, 0 schedules, 0 messages, 0 logs and 0 file subscriptions
                                  

                                  Auf jeden Fall funktioniert es und ich sehe auch schon die Tabelle. Inwieweit ich das noch formatieren kann werde ich schon herausfinden.

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

                                    @reindeer-web hast du da script über firefox in den admin kopiert ?

                                    wenn ja- bitte chrome, edge, opera nehmen

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

                                      @liv-in-sky Ja, so war es!
                                      Ich habe nicht gewusst, dass es hier Unterschiede beim Kopieren gibt.
                                      Jetzt läuft es ohne Fehler und Warnungen.

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

                                        @reindeer-web

                                        könnte sein, dass dies an meinen scripten liegt - ff macht immer eine leerzeile dazwischen - weiß nicht warum

                                        normalerweise sollte das mit ff auch funktionieren

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

                                        Support us

                                        ioBroker
                                        Community Adapters
                                        Donate

                                        1.1k
                                        Online

                                        31.7k
                                        Users

                                        79.7k
                                        Topics

                                        1.3m
                                        Posts

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