NEWS

eds

@sidm Danke euch. So einfach kann es sein!

eds

Hallo Leute,

ich brauche mal eure Hilfe bei tibberHTML unter BIS. Hier sind so viele schlaue Köpfe, sicherlich hat jemand die entscheidende Lösung.

tibberHTML läuft bei mir seit fast einem Jahr. Bisher gab es keine Probleme. Meine Frau und ich haben täglich die beiden Grafiken studiert und uns danach gerichtet. Doch seit gestern ist das anders. Die Grafiken sind leer. Updates oder irgendwas habe ich nicht gemacht, weswegen ich mir die Geschichte nicht erklären kann (vielleicht ihr)?

Die HTML Dateien werden weiterhin erzeugt und liegen bereit (bei mir http://192.168.0.204:8082/vis.0/tibber/today.html) , nur leider erscheint kein Graph.

Der Inhalt der HMTL ist nach meiner Einschätzung auch korrekt:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tibber-Tageswert</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</head>
<body>
    <div id="chart-container" style="width: 600px; height:400px;"></div>
    <script>
    var data = [{
        "time": 1739401200000,
        "value": 0.3488,
        "tax": 0.2085,
        "energy": 0.1403,
        "level": "NORMAL"
    }, {
        "time": 1739404800000,
        "value": 0.3457,
        "tax": 0.2079,
        "energy": 0.1378,
        "level": "NORMAL"
    }, {
        "time": 1739408400000,
        "value": 0.3493,
        "tax": 0.2085,
        "energy": 0.1408,
        "level": "NORMAL"
    }, {
        "time": 1739412000000,
        "value": 0.3444,
        "tax": 0.2078,
        "energy": 0.1366,
        "level": "NORMAL"
    }, {
        "time": 1739415600000,
        "value": 0.3484,
        "tax": 0.2084,
        "energy": 0.14,
        "level": "NORMAL"
    }, {
        "time": 1739419200000,
        "value": 0.3508,
        "tax": 0.2088,
        "energy": 0.142,
        "level": "NORMAL"
    }, {
        "time": 1739422800000,
        "value": 0.3722,
        "tax": 0.2122,
        "energy": 0.16,
        "level": "NORMAL"
    }, {
        "time": 1739426400000,
        "value": 0.4083,
        "tax": 0.218,
        "energy": 0.1903,
        "level": "EXPENSIVE"
    }, {
        "time": 1739430000000,
        "value": 0.4464,
        "tax": 0.224,
        "energy": 0.2224,
        "level": "EXPENSIVE"
    }, {
        "time": 1739433600000,
        "value": 0.4437,
        "tax": 0.2237,
        "energy": 0.22,
        "level": "EXPENSIVE"
    }, {
        "time": 1739437200000,
        "value": 0.4244,
        "tax": 0.2205,
        "energy": 0.2039,
        "level": "EXPENSIVE"
    }, {
        "time": 1739440800000,
        "value": 0.4016,
        "tax": 0.2169,
        "energy": 0.1847,
        "level": "EXPENSIVE"
    }, {
        "time": 1739444400000,
        "value": 0.3895,
        "tax": 0.215,
        "energy": 0.1745,
        "level": "NORMAL"
    }, {
        "time": 1739448000000,
        "value": 0.3842,
        "tax": 0.2141,
        "energy": 0.1701,
        "level": "NORMAL"
    }, {
        "time": 1739451600000,
        "value": 0.3802,
        "tax": 0.2135,
        "energy": 0.1667,
        "level": "NORMAL"
    }, {
        "time": 1739455200000,
        "value": 0.3842,
        "tax": 0.2141,
        "energy": 0.1701,
        "level": "NORMAL"
    }, {
        "time": 1739458800000,
        "value": 0.3984,
        "tax": 0.2164,
        "energy": 0.182,
        "level": "NORMAL"
    }, {
        "time": 1739462400000,
        "value": 0.4353,
        "tax": 0.2223,
        "energy": 0.213,
        "level": "EXPENSIVE"
    }, {
        "time": 1739466000000,
        "value": 0.4283,
        "tax": 0.2211,
        "energy": 0.2072,
        "level": "EXPENSIVE"
    }, {
        "time": 1739469600000,
        "value": 0.4157,
        "tax": 0.2192,
        "energy": 0.1965,
        "level": "EXPENSIVE"
    }, {
        "time": 1739473200000,
        "value": 0.3925,
        "tax": 0.2155,
        "energy": 0.177,
        "level": "NORMAL"
    }, {
        "time": 1739476800000,
        "value": 0.3757,
        "tax": 0.2128,
        "energy": 0.1629,
        "level": "NORMAL"
    }, {
        "time": 1739480400000,
        "value": 0.364,
        "tax": 0.2109,
        "energy": 0.1531,
        "level": "NORMAL"
    }, {
        "time": 1739484000000,
        "value": 0.3472,
        "tax": 0.2082,
        "energy": 0.139,
        "level": "NORMAL"
    }];
    var chartContainer = document.getElementById("chart-container");
    var myChart = echarts.init(chartContainer);
    function formatTime(time) {
        return moment(time).format("HH");
    }
    function calculateArrowPosition(hour) {
        return (hour / 24) * 100 + 1 + "%";
    }
    function updateChart() {
        var minValue = Math.min.apply(null, data.map(function(item) {
            return item.value;
        }));
        var yAxisMin = 0.32;
        var maxValue = 0.446;
        let avgValue = 0.387;
        var visualMapPieces = [
        {
            "gt": 0.15,
            "lte": 0.23,
            "color": "green"
        },
        {
            "gt": 0.23,
            "lte": 0.3,
            "color": "orange"
        },
        {
            "gt": 0.3,
            "color": "red"
        }
        ];
        var values = data.map(item => (item.value - minValue).toFixed(2));
        var maxLineValue = Math.max.apply(null, values);
        var maxLineIndex = values.indexOf(maxLineValue);
        var maxLineData = {
            time: 1739430000000,
            value: 0.446
        };
        var currentHour = new Date().getHours();
        var colorStops = [];
        visualMapPieces.map(piece => {
            if (piece["lte"] >= yAxisMin && piece["gt"] <= maxValue) {
                if (piece["gt"] >= yAxisMin) {
                    colorStops.push({
                        offset: ((piece["gt"] - yAxisMin) / (maxValue - yAxisMin)),
                        color: piece.color
                    });
                }
                if (piece["lte"] <= maxValue) {
                    colorStops.push({
                        offset: ((piece["lte"] - yAxisMin) / (maxValue - yAxisMin)),
                        color: piece.color
                    });
                }
                if (piece["lte"] > maxValue) {
                    colorStops.push({
                        offset: 1,
                        color: piece.color
                    });
                }
                ;
            } else {
                if (piece["lte"] >= maxValue && piece["gt"] <= maxValue) {
                    colorStops.push({
                        offset: ((piece["lte"] - yAxisMin) / (maxValue - yAxisMin)),
                        color: piece.color
                    });
                } else if (piece["lte"] >= maxValue && piece["gt"] <= maxValue) {
                    colorStops.push({
                        offset: ((piece["lte"] - yAxisMin) / (maxValue - yAxisMin)),
                        color: piece.color
                    });
                }
            }
            ;
        });
        colorStops.push({
            offset: 1,
            color: colorStops[colorStops.length - 1].color
        });
        colorStops.splice(0, 0, {
            offset: 0,
            color: colorStops[0].color
        });
        myChart.setOption({
            title: {
                text: "Heute",
                show: true
            },
            visualMap: {
                type: "piecewise",
                pieces: visualMapPieces,
                dimension: 1,
                showLabel: true,
                precision: 2,
                itemWidth: 6,
                orient: "horizontal",
                left: "center",
                calculable: true,
                selectedMode: "multiple",
                bottom: 10,
                text: ["High", "Low"],
                textStyle: {
                    color: "black"
                },
            },
            grid: {
                right: 10,
                left: 10,
                containLabel: true
            },
            areaStyle: {
                color: colorStops
            },
            toolbox: {
                feature: {
                    saveAsImage: {
                        backgroundColor: "rgba(38, 37, 37, 1)",
                        title: "Speichern",
                        name: "TibberHTML Today 13.02.2025"
                    },
                    magicType: {
                        type: ["line", "bar"],
                        title: {
                            line: "Line-Chart",
                            bar: "Bar-Chart",
                        }
                    },
                    dataView: {
                        title: "Daten aus der Serie",
                        lang: ["Daten der Kurve", "Schließen", "Aktualisieren"],
                        optionToContent: function(opt) {
                            var table = '<table style="width:100%;"><tbody><tr style="text-align: left;"><th>Stunde</th><th>Wert</th><th>Energie</th><th>Steuer</th><th>Level</th></tr>';
                            for (var i = 0; i < opt.series[0].data.length; i++) {
                                table += "<tr>";
                                for (let x = 0; x < opt.series[0].data[i].value.length; x++) {
                                    if (x == 0) {
                                        table += "<td>" + ("0" + new Date(opt.series[0].data[i].value[x]).getHours()).slice(-2) + "</td>";
                                    } else {
                                        table += "<td>" + opt.series[0].data[i].value[x] + "</td>";
                                    }
                                }
                                table += "</tr>";
                            }
                            table += "</tbody></table>";
                            return table;
                        },
                        readOnly: true
                    },
                }
            },
            xAxis: {
                type: "time",
                axisLabel: {
                    show: true,
                    formatter: function(value) {
                        return formatTime(value);
                    }
                },
                splitNumber: 10,
            },
            yAxis: {
                type: "value",
                axisLabel: {
                    formatter: function(value) {
                        return value.toFixed(3) + " €";
                    }
                },
                min: 0.32,
                max: 0.55,
            },
            series: [{
                data: data.map(function(item) {
                    var hour = new Date(item.time).getHours();
                    return {
                        value: [item.time, item.value, item.energy, item.tax, item.level],
                        symbol: "circle",
                        symbolSize: hour === currentHour ? 10 : null,
                        itemStyle: {
                            borderColor: hour === currentHour ? "grey" : null,
                            shadowColor: hour === currentHour ? "grey" : null,
                            borderWidth: hour === currentHour ? 1 : null,
                            shadowBlur: hour === currentHour ? 10 : null,
                        },
                        emphasis: {
                            itemStyle: {
                                color: "white"
                            },
                            label: {
                                show: true,
                                formatter: function(params) {
                                    return params.data.value[1].toFixed(3) + " €";
                                },
                                color: "black",
                                fontWeight: "bold",
                                backgroundColor: "white"
                            }
                        }
                    }
                }),
                step: "end",
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, colorStops),
                },
                type: "bar",
                markLine: {
                    symbol: "none",
                    lineStyle: {
                        color: "red",
                        type: "dashed"
                    },
                    data: [{
                        yAxis: minValue,
                        name: "MIN",
                        lineStyle: {
                            color: "lime"
                        },
                        label: {
                            show: false,
                            position: "end",
                            formatter: "Min\n\n" + minValue.toFixed(3) + " €",
                            textStyle: {
                                fontSize: 12,
                                fontWeight: "bold",
                                color: "white"
                            }
                        }
                    }, {
                        yAxis: maxValue,
                        name: "MAX",
                        lineStyle: {
                            color: "red"
                        },
                        label: {
                            show: false,
                            position: "end",
                            formatter: "Max\n\n" + maxValue.toFixed(3) + " €",
                            textStyle: {
                                fontSize: 12,
                                fontWeight: "bold",
                                color: "white"
                            }
                        }
                    }, {
                        yAxis: avgValue,
                        name: "AVG",
                        lineStyle: {
                            color: "blue"
                        },
                        label: {
                            show: false,
                            position: "end",
                            formatter: "Avg\n\n" + avgValue.toFixed(3) + " €",
                            textStyle: {
                                fontSize: 12,
                                fontWeight: "bold",
                                color: "white"
                            }
                        }
                    }],
                }
            }],
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow"
                },
                textStyle: {
                    fontFamily: "Courier",
                    fontWeight: "bold"
                },
                formatter: function(params) {
                    let time = "Start ab: " + moment(params[0].axisValue).format("HH:mm") + " Uhr";
                    let value = "Preis:&nbsp&nbsp&nbsp&nbsp" + params[0].value[1].toFixed(4) + " €";
                    return `${time}<br/>${value}`;
                }
            },
        })
    }
    updateChart();
    var updateInterval = setInterval(updateChart, 3600000);
    </script>
</body>
</html>

Auf dem nachfolgenden Screenshot seht ihr unsere "Leere".
Bildschirmfoto 2025-02-13 um 19.21.46.png

Wie gesagt, bis gestern lief alles. Habt ihr eine Idee für die weitere Fehlersuche? Hat es was mit den eCharts zu tun?

Weitere Infos:

Skript Version: tibberHTML v1.0.24

Grüße und danke für eure Unterstützung.

eds

Hallo zusammen, gibt es eigentlich eine Beschreibung aller als Objekte angelegte Variablen des Skripts?

Und noch eine Frage, hat jemand zuverlässig gelöst zu definieren, wann der PowerStream noch arbeitet und wann er offline ist? Ich bin der Meinung, dass der Inverter Status nicht zuverlässig gesetzt wird.

eds

@milchbeck

Mir wird im Kanal kein Feld zum Schreiben angezeigt. Tippe darauf, dass hier noch etwas nicht mit der Konfiguration stimmt.

eds

@milchbeck

Danke dir. Andere können nur lesen?

eds

Jetzt suche ich mir seit 1-2 Stunden einen Wolf und habe am Ende herausgefunden, dass die App geöffnet sein muss. Hätte ich lieber mal hier einen Blick rein geworfen.

Ich finde wir brauchen einen Telegram Kanal, um schneller die Probleme zu teilen

eds

Hallo zusammen,

gibt es eine pragmatische Lösung um mittels Alexa-Sprachbefehl einen selbst erstellten Datenpunkt zu schalten?

Beispiel:
"Alexa Sonnenschutz an", daraufhin wird der Datenpunkt Sonnenschutz von false auf true gesetzt.

Im Grunde würde ich eine imaginäre Hue-Lampe benötigen. Dann kann ich über einen Blockly-Trigger einfach abfragen ob der entsprechende Datenpunkt der Imaginären-Hue-Lampe angeschaltet wurde und dann meinen selbst erstellten Datenpunkt dementsprechend setzen. Nur leider finde ich keine Möglichkeit ein imaginäres Gerät in der Alexa-App hinzuzufügen, welches dann auch in den Datenpunkten des Adapters (alexa2) erscheint.

Lange Rede kurzer Sinn. Wahrscheinlich sehe ich den Wald vor lauter Bäumen nicht und ihr habt den entscheidenden Tipp für mich.

Vielen Dank im Voraus.
PS: Schöner 2:0 Sieg eben.

eds

@foxthefox geht klar!

eds

@waly_de Denke auch. Melde mich, wenn sie abgeschlossen ist. Dann gebe ich mal Feedback, was out of the box schon läuft.

eds

@waly_de

Bei mir kommt nächste Woche auch die „neue“ 2 kWh Batterie. Ich habe lange auf genau so ein Produkt gewartet und hoffe, dass dein tolles Skript (verfolge den Thread schon seit Sommer 2023) damit kompatibel ist.

Wenn du Daten brauchst, um dir die Batterie „anzuschauen“, kannst du dich gerne bei mir melden.

Grüße

eds

Ich nutze die today.html aktuell in VIS via iFrame. Das anzeigende Gerät ist ein altes iPhone welches in der Küche an der Wand montiert ist.

Gibt es eine Chance, dass ich die today.html im Hochkant-Modus vernünftig anzeigen kann? Laut VIS braucht man ungefähr width von 700 px.

NEWS

eds

@eds

Best posts made by eds

Latest posts made by eds