[gelöst] Maximale Anzahl Abfragen Datenpunkte HTML Widget

Heinz2100

Hallo, gibt es im HMTL-Widget eine maximale Anzahl an Datenpunkten, die man mit geschweifter Klammer abfragen kann (Beispiel: {Datenpunkt}).

Ich habe nämlich das Problem, dass ab einer gewissen Menge nur noch {Datenpunkt} ausgegeben wird statt der Wert des Datenpunktes.

Bei wenig(er) abgefragten Werten funktioniert es tadellos.

Heinz2100

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed">
    <style>
        #WettertabelleStunden {
            font-family: 'Roboto Condensed', sans-serif;
            border-collapse: collapse;
        }

        #WettertabelleStunden td {
            border: 1px solid #000;
            padding: 8px;
        }

        #WettertabelleStunden tr:nth-child(2) {
            font-weight: bold;
            font-size: 14px;
            color: #8c8c8c;
        }
    </style>
    <title>HTML Tabelle</title>
</head>
<body>

<table id="WettertabelleStunden">
    <tr>
        <td><img id="wetterBild2" src="" alt="WetterBild2" style="width: 80%; display: block; margin: 10px auto;"></td>
        <td><img id="wetterBild4" src="" alt="Wetterbild4" style="width: 80%; display: block; margin: 10px auto;"></td>
        <td><img id="wetterBild6" src="" alt="Wetterbild6" style="width: 80%; display: block; margin: 10px auto;"></td>
        <td><img id="wetterBild8" src="" alt="Wetterbild8" style="width: 80%; display: block; margin: 10px auto;"></td>
        <td><img id="wetterBild10" src="" alt="Wetterbild10" style="width: 80%; display: block; margin: 10px auto;"></td>
        <td><img id="wetterBild12" src="" alt="Wetterbild12" style="width: 80%; display: block; margin: 10px auto;"></td>
        <td>Zeile 1, Spalte 11</td>
        <td>Zeile 1, Spalte 12</td>
        <td>Zeile 1, Spalte 12</td>
        <td>Zeile 1, Spalte 12</td>
        <td>Zeile 1, Spalte 12</td>
        <td>Zeile 1, Spalte 12</td>
    </tr>
    <tr>
        <td style="color: #8c8c8c; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 14px;">{daswetter.0.NextHours.Location_1.Day_1.Hour_2.temp_value} °</td>
        <td style="color: #8c8c8c; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 14px;">{daswetter.0.NextHours.Location_1.Day_1.Hour_4.temp_value} °</td>
        <td style="color: #8c8c8c; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 14px;">{daswetter.0.NextHours.Location_1.Day_1.Hour_6.temp_value} °</td>
        <td style="color: #8c8c8c; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 14px;">{daswetter.0.NextHours.Location_1.Day_1.Hour_8.temp_value} °</td>
        <td style="color: #8c8c8c; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 14px;">{daswetter.0.NextHours.Location_1.Day_1.Hour_10.temp_value} °</td>
        <td style="color: #8c8c8c; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 14px;">{daswetter.0.NextHours.Location_1.Day_1.Hour_12.temp_value} °</td>
        <td style="color: #8c8c8c; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 14px;">{daswetter.0.NextHours.Location_1.Day_1.Hour_14.temp_value} °</td>
        <td style="color: #8c8c8c; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 14px;">{daswetter.0.NextHours.Location_1.Day_1.Hour_16.temp_value} °</td>
        <td style="color: #8c8c8c; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 14px;">{daswetter.0.NextHours.Location_1.Day_1.Hour_18.temp_value} °</td>
        <td style="color: #8c8c8c; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 14px;">{daswetter.0.NextHours.Location_1.Day_1.Hour_20.temp_value} °</td>
        <td style="color: #8c8c8c; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 14px;">{daswetter.0.NextHours.Location_1.Day_1.Hour_22.temp_value} °</td>
        <td style="color: #8c8c8c; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 14px;">{daswetter.0.NextHours.Location_1.Day_1.Hour_23.temp_value} °</td>
    </tr>
    <tr>
        <td style="color: #ffffff; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 14px;">{daswetter.0.NextHours.Location_1.Day_1.Hour_1.rain_value}</td>
        <td style="color: #ffffff; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 14px;">{daswetter.0.NextHours.Location_1.Day_1.Hour_1.rain_value}</td>
        <td style="color: #ffffff; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 14px;">{daswetter.0.NextHours.Location_1.Day_1.Hour_1.rain_value}</td>
        <td style="color: #ffffff; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 14px;">{daswetter.0.NextHours.Location_1.Day_1.Hour_1.rain_value}</td>
        <td style="color: #ffffff; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 14px;">{daswetter.0.NextHours.Location_1.Day_1.Hour_1.rain_value}</td>
        <td style="color: #ffffff; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 14px;">{daswetter.0.NextHours.Location_1.Day_1.Hour_1.rain_value}</td>
        <td style="color: #ffffff; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 14px;">{daswetter.0.NextHours.Location_1.Day_1.Hour_1.rain_value}</td>
        <td style="color: #ffffff; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 14px;">{daswetter.0.NextHours.Location_1.Day_1.Hour_1.rain_value}</td>
        <td style="color: #ffffff; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 14px;">{daswetter.0.NextHours.Location_1.Day_1.Hour_1.rain_value}</td>
        <td style="color: #ffffff; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 14px;">{daswetter.0.NextHours.Location_1.Day_1.Hour_1.rain_value}</td>
        <td style="color: #ffffff; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 14px;">{daswetter.0.NextHours.Location_1.Day_1.Hour_1.rain_value}</td>
        <td style="color: #ffffff; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 14px;">{daswetter.0.NextHours.Location_1.Day_1.Hour_1.rain_value}</td>
    </tr>
</table>

<script>
    var Sonnenaufgang = "{daswetter.0.NextDaysDetailed.Location_1.Day_1.sun_in}";
    var Sonnenuntergang = "{daswetter.0.NextDaysDetailed.Location_1.Day_1.sun_out}";
    var AktuelleUhrzeit = "{daswetter.0.NextHours.Location_1.Day_1.Hour_2.hour_value}";
    var Zeit1 = "{daswetter.0.NextHours.Location_1.Day_1.Hour_1.symbol_value}";
    var Zeit2 = "{daswetter.0.NextHours.Location_1.Day_1.Hour_2.symbol_value}";
    var Zeit3 = "{daswetter.0.NextHours.Location_1.Day_1.Hour_3.symbol_value}";
    
    var SonnenaufgangStunden = Sonnenaufgang.slice(0, 2);
    var SonnenuntergangStunden = Sonnenuntergang.slice(0, 2);
    var AktuelleUhrzeitStunden = AktuelleUhrzeit.slice(0, 2); 

    var bildAdresseTag1 = "http://192.168.178.100:8082/vis.0/Wetter/TagEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_1.symbol_value}.png";
    var bildAdresseNacht1 = "http://192.168.178.100:8082/vis.0/Wetter/NachtEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_1.symbol_value}.png";
    var bildAdresseTag2 = "http://192.168.178.100:8082/vis.0/Wetter/TagEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_2.symbol_value}.png";
    var bildAdresseNacht2 = "http://192.168.178.100:8082/vis.0/Wetter/NachtEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_2.symbol_value}.png";
    var bildAdresseTag3 = "http://192.168.178.100:8082/vis.0/Wetter/TagEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_3.symbol_value}.png";
    var bildAdresseNacht3 = "http://192.168.178.100:8082/vis.0/Wetter/NachtEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_3.symbol_value}.png";

    var imgElement = document.getElementById("wetterBild2");
    
if (Zeit1 > Zeit2 && Zeit1 > Zeit3) {
    if (AktuelleUhrzeitStunden >= SonnenaufgangStunden && AktuelleUhrzeitStunden <= SonnenuntergangStunden) {
        imgElement.src = bildAdresseTag1;} else {imgElement.src = bildAdresseNacht1;}
} else if (Zeit2 > Zeit1 && Zeit2 > Zeit3) {
    if (AktuelleUhrzeitStunden >= SonnenaufgangStunden && AktuelleUhrzeitStunden <= SonnenuntergangStunden) {
        imgElement.src = bildAdresseTag2;
    } else {
        imgElement.src = bildAdresseNacht2;
    }
} else {
    if (AktuelleUhrzeitStunden >= SonnenaufgangStunden && AktuelleUhrzeitStunden <= SonnenuntergangStunden) {
        imgElement.src = bildAdresseTag3;
    } else {
        imgElement.src = bildAdresseNacht3;
    }
}

</script>

<script>
    var Sonnenaufgang = "{daswetter.0.NextDaysDetailed.Location_1.Day_1.sun_in}";
    var Sonnenuntergang = "{daswetter.0.NextDaysDetailed.Location_1.Day_1.sun_out}";
    var AktuelleUhrzeit = "{daswetter.0.NextHours.Location_1.Day_1.Hour_4.hour_value}";
    var Zeit1 = "{daswetter.0.NextHours.Location_1.Day_1.Hour_4.symbol_value}";
    var Zeit2 = "{daswetter.0.NextHours.Location_1.Day_1.Hour_5.symbol_value}";
    
    var SonnenaufgangStunden = Sonnenaufgang.slice(0, 2);
    var SonnenuntergangStunden = Sonnenuntergang.slice(0, 2);
    var AktuelleUhrzeitStunden = AktuelleUhrzeit.slice(0, 2); 

    var bildAdresseTag1 = "http://192.168.178.100:8082/vis.0/Wetter/TagEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_4.symbol_value}.png";
    var bildAdresseNacht1 = "http://192.168.178.100:8082/vis.0/Wetter/NachtEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_4.symbol_value}.png";
    var bildAdresseTag2 = "http://192.168.178.100:8082/vis.0/Wetter/TagEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_5.symbol_value}.png";
    var bildAdresseNacht2 = "http://192.168.178.100:8082/vis.0/Wetter/NachtEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_5.symbol_value}.png";

    var imgElement = document.getElementById("wetterBild4");
    
if (Zeit1>=Zeit2)
    
    if (AktuelleUhrzeitStunden >= SonnenaufgangStunden && AktuelleUhrzeitStunden <= SonnenuntergangStunden) {
        imgElement.src = bildAdresseTag1;
    } else {
        imgElement.src = bildAdresseNacht1;
    }
    else
    if (AktuelleUhrzeitStunden >= SonnenaufgangStunden && AktuelleUhrzeitStunden <= SonnenuntergangStunden) {
        imgElement.src = bildAdresseTag2;
    } else {
        imgElement.src = bildAdresseNacht2;
    }
</script>


<script>
    var Sonnenaufgang = "{daswetter.0.NextDaysDetailed.Location_1.Day_1.sun_in}";
    var Sonnenuntergang = "{daswetter.0.NextDaysDetailed.Location_1.Day_1.sun_out}";
    var AktuelleUhrzeit = "{daswetter.0.NextHours.Location_1.Day_1.Hour_6.hour_value}";
    var Zeit1 = "{daswetter.0.NextHours.Location_1.Day_1.Hour_6.symbol_value}";
    var Zeit2 = "{daswetter.0.NextHours.Location_1.Day_1.Hour_7.symbol_value}";
    
    var SonnenaufgangStunden = Sonnenaufgang.slice(0, 2);
    var SonnenuntergangStunden = Sonnenuntergang.slice(0, 2);
    var AktuelleUhrzeitStunden = AktuelleUhrzeit.slice(0, 2); 

    var bildAdresseTag1 = "http://192.168.178.100:8082/vis.0/Wetter/TagEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_6.symbol_value}.png";
    var bildAdresseNacht1 = "http://192.168.178.100:8082/vis.0/Wetter/NachtEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_6.symbol_value}.png";
    var bildAdresseTag2 = "http://192.168.178.100:8082/vis.0/Wetter/TagEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_7.symbol_value}.png";
    var bildAdresseNacht2 = "http://192.168.178.100:8082/vis.0/Wetter/NachtEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_7.symbol_value}.png";

    var imgElement = document.getElementById("wetterBild6");
    
if (Zeit1>=Zeit2)
    
    if (AktuelleUhrzeitStunden >= SonnenaufgangStunden && AktuelleUhrzeitStunden <= SonnenuntergangStunden) {
        imgElement.src = bildAdresseTag1;
    } else {
        imgElement.src = bildAdresseNacht1;
    }
    else
    if (AktuelleUhrzeitStunden >= SonnenaufgangStunden && AktuelleUhrzeitStunden <= SonnenuntergangStunden) {
        imgElement.src = bildAdresseTag2;
    } else {
        imgElement.src = bildAdresseNacht2;
    }
</script>


<script>
    var Sonnenaufgang = "{daswetter.0.NextDaysDetailed.Location_1.Day_1.sun_in}";
    var Sonnenuntergang = "{daswetter.0.NextDaysDetailed.Location_1.Day_1.sun_out}";
    var AktuelleUhrzeit = "{daswetter.0.NextHours.Location_1.Day_1.Hour_8.hour_value}";
    var Zeit1 = "{daswetter.0.NextHours.Location_1.Day_1.Hour_8.symbol_value}";
    var Zeit2 = "{daswetter.0.NextHours.Location_1.Day_1.Hour_9.symbol_value}";
    
    var SonnenaufgangStunden = Sonnenaufgang.slice(0, 2);
    var SonnenuntergangStunden = Sonnenuntergang.slice(0, 2);
    var AktuelleUhrzeitStunden = AktuelleUhrzeit.slice(0, 2); 

    var bildAdresseTag1 = "http://192.168.178.100:8082/vis.0/Wetter/TagEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_8.symbol_value}.png";
    var bildAdresseNacht1 = "http://192.168.178.100:8082/vis.0/Wetter/NachtEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_8.symbol_value}.png";
    var bildAdresseTag2 = "http://192.168.178.100:8082/vis.0/Wetter/TagEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_9.symbol_value}.png";
    var bildAdresseNacht2 = "http://192.168.178.100:8082/vis.0/Wetter/NachtEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_9.symbol_value}.png";

    var imgElement = document.getElementById("wetterBild8");
    
if (Zeit1>=Zeit2)
    
    if (AktuelleUhrzeitStunden >= SonnenaufgangStunden && AktuelleUhrzeitStunden <= SonnenuntergangStunden) {
        imgElement.src = bildAdresseTag1;
    } else {
        imgElement.src = bildAdresseNacht1;
    }
    else
    if (AktuelleUhrzeitStunden >= SonnenaufgangStunden && AktuelleUhrzeitStunden <= SonnenuntergangStunden) {
        imgElement.src = bildAdresseTag2;
    } else {
        imgElement.src = bildAdresseNacht2;
    }
</script>


<script>
    var Sonnenaufgang = "{daswetter.0.NextDaysDetailed.Location_1.Day_1.sun_in}";
    var Sonnenuntergang = "{daswetter.0.NextDaysDetailed.Location_1.Day_1.sun_out}";
    var AktuelleUhrzeit = "{daswetter.0.NextHours.Location_1.Day_1.Hour_10.hour_value}";
    var Zeit1 = "{daswetter.0.NextHours.Location_1.Day_1.Hour_10.symbol_value}";
    var Zeit2 = "{daswetter.0.NextHours.Location_1.Day_1.Hour_11.symbol_value}";
    
    var SonnenaufgangStunden = Sonnenaufgang.slice(0, 2);
    var SonnenuntergangStunden = Sonnenuntergang.slice(0, 2);
    var AktuelleUhrzeitStunden = AktuelleUhrzeit.slice(0, 2); 

    var bildAdresseTag1 = "http://192.168.178.100:8082/vis.0/Wetter/TagEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_10.symbol_value}.png";
    var bildAdresseNacht1 = "http://192.168.178.100:8082/vis.0/Wetter/NachtEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_10.symbol_value}.png";
    var bildAdresseTag2 = "http://192.168.178.100:8082/vis.0/Wetter/TagEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_11.symbol_value}.png";
    var bildAdresseNacht2 = "http://192.168.178.100:8082/vis.0/Wetter/NachtEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_11.symbol_value}.png";

    var imgElement = document.getElementById("wetterBild10");
    
if (Zeit1>=Zeit2)
    
    if (AktuelleUhrzeitStunden >= SonnenaufgangStunden && AktuelleUhrzeitStunden <= SonnenuntergangStunden) {
        imgElement.src = bildAdresseTag1;
    } else {
        imgElement.src = bildAdresseNacht1;
    }
    else
    if (AktuelleUhrzeitStunden >= SonnenaufgangStunden && AktuelleUhrzeitStunden <= SonnenuntergangStunden) {
        imgElement.src = bildAdresseTag2;
    } else {
        imgElement.src = bildAdresseNacht2;
    }
</script>

<script>
    var Sonnenaufgang = "{daswetter.0.NextDaysDetailed.Location_1.Day_1.sun_in}";
    var Sonnenuntergang = "{daswetter.0.NextDaysDetailed.Location_1.Day_1.sun_out}";
    var AktuelleUhrzeit = "{daswetter.0.NextHours.Location_1.Day_1.Hour_12.hour_value}";
    var Zeit1 = "{daswetter.0.NextHours.Location_1.Day_1.Hour_12.symbol_value}";
    var Zeit2 = "{daswetter.0.NextHours.Location_1.Day_1.Hour_13.symbol_value}";
    
    var SonnenaufgangStunden = Sonnenaufgang.slice(0, 2);
    var SonnenuntergangStunden = Sonnenuntergang.slice(0, 2);
    var AktuelleUhrzeitStunden = AktuelleUhrzeit.slice(0, 2); 

    var bildAdresseTag1 = "http://192.168.178.100:8082/vis.0/Wetter/TagEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_12.symbol_value}.png";
    var bildAdresseNacht1 = "http://192.168.178.100:8082/vis.0/Wetter/NachtEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_12.symbol_value}.png";
    var bildAdresseTag2 = "http://192.168.178.100:8082/vis.0/Wetter/TagEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_13.symbol_value}.png";
    var bildAdresseNacht2 = "http://192.168.178.100:8082/vis.0/Wetter/NachtEigene2/{daswetter.0.NextHours.Location_1.Day_1.Hour_13.symbol_value}.png";

    var imgElement = document.getElementById("wetterBild12");
    
if (Zeit1>=Zeit2)
    
    if (AktuelleUhrzeitStunden >= SonnenaufgangStunden && AktuelleUhrzeitStunden <= SonnenuntergangStunden) {
        imgElement.src = bildAdresseTag1;
    } else {
        imgElement.src = bildAdresseNacht1;
    }
    else
    if (AktuelleUhrzeitStunden >= SonnenaufgangStunden && AktuelleUhrzeitStunden <= SonnenuntergangStunden) {
        imgElement.src = bildAdresseTag2;
    } else {
        imgElement.src = bildAdresseNacht2;
    }
</script>





</body>
</html>

Heinz2100

Ab circa Zeile 114 wird hier nur noch {Datenpunkt} ausgegeben, statt des Wertes.

Wenn ich die Abfragen aus Zeile 2 und 3 der Tabelle lösche, dann gilt dies erst ab circa Zeile 255

Heinz2100

Ziel der Übung wäre mittels DasWetter-Adapter ein HTML, dass 12 Wettersymbole, Temperatur und Regenmenge abruft. Das ganze auch noch mit Nachtsymbolen, wenn die Sonne nicht aufgegangen ist.

ice987

@heinz2100

vis 1:

https://github.com/ioBroker/ioBroker.vis/issues/381

Heinz2100

@ice987 Du bist mein Held. Wenn man es weiß, ist es einfach. Tausend Dank

Chrunchy

@heinz2100 Du könntest die Tabelle von einem Script zusammenbauen lassen und in einen Datenpunkt schreiben.
Dann hast du im Widget nur ein Binding.

Community Forum

NEWS

[gelöst] Maximale Anzahl Abfragen Datenpunkte HTML Widget

Support us

430

32.9k

83.2k

1.3m