Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Skripten / Logik
    4. HTML Datenpunkt dynamisch erzeugen

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    HTML Datenpunkt dynamisch erzeugen

    This topic has been deleted. Only users with topic management privileges can see it.
    • dirk_1930
      dirk_1930 last edited by dirk_1930

      Ich erstelle mir gerade den HTML Code für eine dynamische Tabelle durch ein Script.
      Mein Ziel wäre es 12 einzelne Tabellen in einem HTML Codeblock zusammenzufassen, damit ich diese dann in einem HTML Element in Vis anzeigen kann.

      Die einzelnen Datenpunkte sind jeweils mit ...data0 bis data11 durchnummeriert.

      Wenn ich jetzt einen Zähler z.b. auf 2 setzte erstellt mir das Skript korrekt die Tabelle zu dem Datenpunkt - wenn ich allerdings den Zähler in eine Schleife packe stürzt der Adapter ab.

      Könnt Ihr mir einen Tipp geben was ich falsch mache?

      const htmlFile = [];
      var zaehler = 0;
      Render(zaehler);
      
      function Render(zaehler) {
          var uhrzeit = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.uhrzeit').val;
          var pictocode = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.pictocode_picture').val;
          var temperaturfelt = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.felttemperature_round').val;
          var temperaturHg = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.temperatureBackColor').val;
          var temperaturVg = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.temperatureForeColor').val;
          var winkel = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.winddirection').val;
          var windspeed = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.windspeed_avg').val;
          var rainspot = '<img src="/0_userdata.0/meteoblue/basic-day/data_1h/data_' + zaehler + '/rainspotpic' + zaehler + '.png" height="48" width="48">';
          var uvindexcolor = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.uvindex_color').val;
          var uvindex = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.uvindex').val;
          var precipitation = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.precipitation').val;
          var temperatur = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.temp_round').val;
          htmlFile.push('<!DOCTYPE html><html lang=\"de\">');
          htmlFile.push('<head><meta charset=\"UTF-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>TabelleMeteoblueTbl1h</title>');
          htmlFile.push('<style type=\"text/css\">');
          htmlFile.push('.table{border-collapse:collapse;border-spacing:0;border-color:#darkgrey;border-style:solid;border-width:.1px;color:#dfdfdf;font-family:Arial,sans-serif;font-size:1rem;overflow:hidden;padding:1px 1px;word-break:normal;}');
          htmlFile.push('.table .uhrzeit{background-color:#000;text-align:center;vertical-align:middle;font-size:.7rem;font-weight:bold}');
          htmlFile.push('.table .temperatur{border-color:inherit;text-align:center;vertical-align:middle;font-size:1rem;font-weight:bold}');
          htmlFile.push('.table .pictocode{border-color:inherit;text-align:center;vertical-align:middle}');
          htmlFile.push('.table .rainspot{border-color:inherit;text-align:center;vertical-align:middle padding:0}');
          htmlFile.push('.table .iconregen{border-right:.1px solid;border-left:.1px solid;border-color:inherit;text-align:center;vertical-align:middle}');
          htmlFile.push('.table .iconuv{border-right:.1px solid;border-left:.1px solid;border-color:inherit;text-align:center;vertical-align:middle}');
          htmlFile.push('.table .iconhand{border-right:.1px solid;border-left:.1px solid;border-color:inherit;text-align:center;vertical-align:middle}');
          htmlFile.push('.table .pfeil{border-color:inherit;text-align:center;vertical-align:middle;transform:rotate(' + winkel + 'deg)}');
          htmlFile.push('.table .windspeed{border-color:inherit;text-align:center;vertical-align:middle;font-size:.6rem}');
          htmlFile.push('.table .precipitation{border-right:.1px solid;border-left:.1px solid;border-color:inherit;text-align:center;vertical-align:middle;font-size:.6rem}');
          htmlFile.push('.table .felttemperatur{border-right:.1px solid;border-left:.1px solid;border-color:inherit;text-align:center;vertical-align:middle;font-size:.6rem}');
          htmlFile.push('.table .uv{color:' + uvindexcolor + ';border-right:.1px solid;border-left:.1px solid;border-color:inherit;font-weight:bold;text-align:center;vertical-align:middle;font-size:1rem}');
          htmlFile.push('</style>');
          htmlFile.push('<body>');
          htmlFile.push('<table class=\"table\" style=\"undefined;table-layout:fixed;width: 100%\">');
          htmlFile.push('<colgroup><col style=\"width: 15%\"><col style=\"width: 20%\"><col style=\"width: 10%\"><col style=\"width: 10%\"><col style=\"width: 10%\"><col style=\"width: 10%\"><col style=\"width: 20%\"></colgroup>');
          htmlFile.push('<tr>');
          htmlFile.push('<td class=\"uhrzeit\">' + uhrzeit + '</td>');
          htmlFile.push('<td class=\"pictocode\" rowspan=\"4\">' + pictocode + '</td>');
          htmlFile.push('<td class=\"iconuv\" rowspan=\"2\"><img src="/vis.0/baisiepen/images/icons8-uv-index-64.png" height="20" width="20"></td>');
          htmlFile.push('<td class=\"pfeil\" rowspan=\"2\"><img src="/vis.0/Element 1.png" height="20" width="20"></td>');
          htmlFile.push('<td class=\"iconregen\" rowspan=\"2\"><img src="/vis.0/baisiepen/images/icons8-drop-64.png" height="20" width="20"></td>');
          htmlFile.push('<td class=\"iconhand\" rowspan=\"2\"><img src="/vis.0/baisiepen/images/icons8-ganze-hand-50.png" height="20" width="20"></td>');
          htmlFile.push('<td class=\"rainspot\" rowspan=\"4\">' + rainspot + '</td>');
          htmlFile.push('</tr>');
          htmlFile.push('<tr>');
          htmlFile.push('<td style=\"background-color:' + temperaturHg + ';color:' + temperaturVg + ';\" class=\"temperatur\" rowspan=\"3\">' + temperatur + '°C</td>');
          htmlFile.push('</tr>');
          htmlFile.push('<tr>');
          htmlFile.push('<td class=\"uv\">' + uvindex + '</td>');
          htmlFile.push('<td class=\"windspeed\" rowspan=\"2\">' + windspeed + ' m/s</td>');
          htmlFile.push('<td class=\"precipitation\" rowspan=\"2\">' + precipitation + ' </td>');
          htmlFile.push('<td class=\"felttemperatur\" rowspan=\"2\">' + temperaturfelt + '°C</td>');
          htmlFile.push('</tr>');
          htmlFile.push('<tr>');
          htmlFile.push('</tr>');
          htmlFile.push('</table>');
          htmlFile.push('</body>');
          
      }
      
      let html = htmlFile.join('');
      console.log(html);
      setState('0_userdata.0.meteoblue.htmltest', html, true);```
      liv-in-sky 1 Reply Last reply Reply Quote 0
      • liv-in-sky
        liv-in-sky @dirk_1930 last edited by

        @dirk_1930 Zeige das ganze Mal mit deiner Schleife

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

          @liv-in-sky
          Ich hatte in der Zwischenzeit den Code noch etwas abgeändert und rufe die einzelnen Elemente jetzt wie folgt auf.
          Die Schleife bekomme ich nicht hin 😞

          const htmlFile = [];
          var zaehler = 0;
          htmlFile.push('<!DOCTYPE html><html lang=\"de\">');
          htmlFile.push('<head><meta charset=\"UTF-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>TabelleMeteoblueTbl1h</title>');
          htmlFile.push('<style type=\"text/css\">');
          htmlFile.push('.table{border-bottom:.1px solid darkgrey;border-top:.1px solid darkgrey;border-right:.1px solid darkgrey;border-left:.1px solid darkgrey;border-collapse:collapse;border-spacing:1;font-family:Arial,sans-serif;font-size:1rem;overflow:hidden;padding:1px 1px;word-break:normal;}');
          htmlFile.push('.table .uhrzeit{background-color:#000;color:#dfdfdf;text-align:center;vertical-align:middle;font-size:.7rem;font-weight:bold}');
          htmlFile.push('.table .temperatur{text-align:center;vertical-align:middle;font-size:1rem;font-weight:bold}');
          htmlFile.push('.table .pictocode{text-align:center;vertical-align:middle}');
          htmlFile.push('.table .rainspot{text-align:center;vertical-align:middle padding:0}');
          htmlFile.push('.table .iconregen{text-align:center;vertical-align:bottom}');
          htmlFile.push('.table .iconuv{text-align:center;vertical-align:bottom}');
          htmlFile.push('.table .iconhand{text-align:center;vertical-align:bottom}');
          htmlFile.push('.table .windspeed{text-align:center;vertical-align:middle;font-size:.6rem}');
          htmlFile.push('.table .precipitation{text-align:center;vertical-align:middle;font-size:.6rem}');
          htmlFile.push('.table .felttemperatur{text-align:center;vertical-align:middle;font-size:.6rem}');
          
          await Render(zaehler);
          await Render(zaehler + 1);
          await Render(zaehler + 2);
          await Render(zaehler + 3);
          await Render(zaehler + 4);
          await Render(zaehler + 5);
          await Render(zaehler + 6);
          await Render(zaehler + 7);
          await Render(zaehler + 8);
          await Render(zaehler + 9);
          await Render(zaehler + 10);
          await Render(zaehler + 11);
          
          
          async function Render(zaehler) {
              var uhrzeit = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.uhrzeit').val;
              var pictocode = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.pictocode_picture').val;
              var temperaturfelt = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.felttemperature_round').val;
              var temperaturHg = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.temperatureBackColor').val;
              var temperaturVg = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.temperatureForeColor').val;
              var winkel = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.winddirection').val;
              var windspeed = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.windspeed_avg').val;
              var rainspot = '<img src="/0_userdata.0/meteoblue/basic-day/data_1h/data_' + zaehler + '/rainspotpic' + zaehler + '.png" height="48" width="48">';
              var uvindexcolor = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.uvindex_color').val;
              var uvindex = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.uvindex').val;
              var precipitation = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.precipitation').val;
              var temperatur = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.temp_round').val;
              htmlFile.push('</style>');
              htmlFile.push('<body>');
              htmlFile.push('<table class=\"table\" style=\"undefined;table-layout:fixed;width: 100%\">');
              htmlFile.push('<colgroup><col style=\"width: 15%\"><col style=\"width: 20%\"><col style=\"width: 10%\"><col style=\"width: 10%\"><col style=\"width: 10%\"><col style=\"width: 10%\"><col style=\"width: 20%\"></colgroup>');
              htmlFile.push('<tr>');
              htmlFile.push('<td class=\"uhrzeit\">' + uhrzeit + '</td>');
              htmlFile.push('<td class=\"pictocode\" rowspan=\"4\">' + pictocode + '</td>');
              htmlFile.push('<td class=\"iconuv\" rowspan=\"2\"><img src="/vis.0/baisiepen/images/icons8-uv-index-64.png" height="20" width="20"></td>');
              htmlFile.push('<td style=\"text-align:center;vertical-align:middle;transform:rotate(' + winkel + 'deg)" rowspan=\"2\"><img src="/vis.0/Element 1.png" height="20" width="20"></td>');
              htmlFile.push('<td class=\"iconregen\" rowspan=\"2\"><img src="/vis.0/baisiepen/images/icons8-drop-64.png" height="20" width="20"></td>');
              htmlFile.push('<td class=\"iconhand\" rowspan=\"2\"><img src="/vis.0/baisiepen/images/icons8-ganze-hand-50.png" height="20" width="20"></td>');
              htmlFile.push('<td class=\"rainspot\" rowspan=\"4\">' + rainspot + '</td>');
              htmlFile.push('</tr>');
              htmlFile.push('<tr>');
              htmlFile.push('<td style=\"background-color:' + temperaturHg + ';color:' + temperaturVg + ';\" class=\"temperatur\" rowspan=\"3\">' + temperatur + '°C</td>');
              htmlFile.push('</tr>');
              htmlFile.push('<tr>');
              htmlFile.push('<td style=\"color:' + uvindexcolor + ';text-align:center;vertical-align:middle;font-size:1rem;\">' + uvindex + '</td>');
              htmlFile.push('<td style=\"color:#dfdfdf;font-size:.6rem;text-align:center; class=\"windspeed\" rowspan=\"2\">' + windspeed + ' m/s</td>');
              htmlFile.push('<td style=\"color:#dfdfdf;font-size:.6rem;text-align:center;class=\"precipitation\" rowspan=\"2\">' + precipitation + ' mm </td>');
              htmlFile.push('<td style=\"color:#dfdfdf;font-size:.6rem;text-align:center;class=\"felttemperatur\" rowspan=\"2\">' + temperaturfelt + '°C</td>');
              htmlFile.push('</tr>');
              htmlFile.push('<tr>');
              htmlFile.push('</tr>');
          
          }
          htmlFile.push('</table>');
          htmlFile.push('</body>');
          let html = htmlFile.join('');
          console.log(html);
          setState('0_userdata.0.meteoblue.htmltest', html, true);
          

          Unbenannt.JPG

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

          Support us

          ioBroker
          Community Adapters
          Donate

          791
          Online

          31.8k
          Users

          80.0k
          Topics

          1.3m
          Posts

          2
          3
          189
          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