NEWS
HTML Datenpunkt dynamisch erzeugen
Skripten / Logik
3
Beiträge
2
Kommentatoren
256
Aufrufe
2
Watching
-
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);``` -
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);```@dirk_1930 Zeige das ganze Mal mit deiner Schleife
nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html
-
@dirk_1930 Zeige das ganze Mal mit deiner Schleife
@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);
Support us
634
Online32.7k
Benutzer82.3k
Themen1.3m
Beiträge