SONOFF NSPanel mit Lovelace UI

[teletapi]

Morjen, ich hab da noch Fragen ;-), ich hab mir mit eurer Hilfe Anleitungen und ein wenig Chatgpt versucht ein JS script zu basteln um mal mit der Powercard zu spielen und einen Teil meiner PV Anlage wiederzugeben.
Da wird das batteriesymbol jetzt im Moment grün dargestellt könnte man diese farbe dynamisch oder ggf. auch statisch ändern lassen wenn Voll dann grün wenn geladen wird Rot..?

Hier Das Script:

schedule("* * * * *", function () {
    var powerCardJson = "0_userdata.0.NSPanel.Powercard";

    var pwr1Raw = getState("0_userdata.0.PV.now.Battery_Power").val || 0;
    var pwr1 = Math.abs(Math.round(pwr1Raw));  // Betrag für Anzeige
    var pwr2 = Math.round(getState("modbus.0.holdingRegisters._Total_Active_power_(Grid_Meter)").val);
    var pwr3 = "";
    var pwr4 = "";
    var pwr5 = Math.round(getState("sonoff.0.Tasmota Energie LG E320.E320_Power_in").val);
    var pwr6 = 0;
    var pwrHome = Math.round(getState("0_userdata.0.PV.now.Load_Total_Power").val || 0);

    var keys = ["id", "value", "unit", "icon", "iconColor", "speed"];
    var helperBase = "0_userdata.0.NSPanel.PowercardHelper";

    if (!existsObject(helperBase)) {
        createState(helperBase, null, { type: "channel", common: { name: "PowercardHelper" }, native: {} });
    }

    function createStateIfNotExists(id, initialValue = 0) {
        if (!existsState(id)) {
            createState(id, initialValue, {
                name: "Last Power Wert",
                role: "value",
                type: "number",
                unit: "W",
                read: true,
                write: false
            });
        }
    }

    createStateIfNotExists(helperBase + ".PWR1_Last");
    createStateIfNotExists(helperBase + ".PWR2_Last");
    createStateIfNotExists(helperBase + ".PWR5_Last");

    function getLastValue(id) {
        var s = getState(id);
        return s ? s.val : 0;
    }

    function setLastValue(id, val) {
        setState(id, val, true);
    }

    function calcSpeed(current, last) {
        if (current > last) return 2;
        else if (current < last) return -2;
        else return 0;
    }

    var pwr1Last = getLastValue(helperBase + ".PWR1_Last");
    var pwr2Last = getLastValue(helperBase + ".PWR2_Last");
    var pwr5Last = getLastValue(helperBase + ".PWR5_Last");

    var speedPwr1 = calcSpeed(pwr1Raw, pwr1Last);  // Richtung basiert auf Originalwert
    var speedPwr2 = calcSpeed(pwr2, pwr2Last);
    var speedPwr5 = calcSpeed(pwr5, pwr5Last);

    setLastValue(helperBase + ".PWR1_Last", pwr1Raw);
    setLastValue(helperBase + ".PWR2_Last", pwr2);
    setLastValue(helperBase + ".PWR5_Last", pwr5);

    var home = [0, pwrHome, "W", "home-lightning-bolt-outline", 0, 0];

    // Batterie → ID 1
    var item1 = [1, pwr1, "W", "battery-high", 3, speedPwr1];

    var item2 = [2, pwr2, "W", "solar-power-variant-outline", 3, speedPwr2];
    var item3 = [3, pwr3, "", "", 0, 0];
    var item4 = [4, pwr4, "", "", 0, 0];
    var item5 = [5, pwr5, "W", "transmission-tower", 10, speedPwr5];
    var item6 = [6, pwr6, "kW", "", 0, 0];

    function func(tags, values) {
        return tags.reduce((acc, tag, index) => {
            acc[tag] = values[index];
            return acc;
        }, {});
    }

    setState(
        powerCardJson,
        JSON.stringify([
            func(keys, home),
            func(keys, item1),
            func(keys, item2),
            func(keys, item3),
            func(keys, item4),
            func(keys, item5),
            func(keys, item6),
        ])
    );
});

Hier meine Powercard:

let CardPower: PageType =
        {
            "type": "cardPower",
            "heading": "Energiefluss",
//          "useColor": true,
            "subPage": false,
            "parent": undefined,
            "items": [
                {id: "alias.0.NSPanel.PowerCard", alwaysOnDisplay: true}
                 //   interpolateColor: true}
         ]
};

Und hier ein Bild wie es derzeit aussieht:

[TT-Tom]

@teletapi Mach doch aus dem iconColor eine variable und setze den Wert je nach Wunsch.

["id", "value", "unit", "icon", "iconColor", "speed"]
[1, pwr1, "W", "battery-high", 3, speedPwr1]

[arteck]

@armilar sagte in SONOFF NSPanel mit Lovelace UI:

@arteck

nein, an der Stelle nicht... Nur den Wert selbst

Andere Möglichkeiten?
Zeilenumbruch vielleicht?

[teletapi]

@tt-tom said in SONOFF NSPanel mit Lovelace UI:

[1, pwr1, "W", "battery-high", 3, speedPwr1]

Wenn du mir jetzt noch sagen würdest wie, dann wäre ich dabei. Das sind alles spanische Dörfer für mich die verursachen bei mir Knoten im Kopf...

[TT-Tom]

@teletapi

Gib mir die Datenpunkte welche die Farben ändern sollen oder Grenzwerte, die die Farben ändern.

[Armilar]

@arteck

Text abkürzen würde mir aktuell nur einfallen...

Kurzer Blick auf das Layout der cardGrid2:

8 Entitäten, wobei bereits der Bezeichner in der kleinsten Schriftgröße ( Fontsize 0 ) ist. Jetzt könnte man denken, da wäre noch Platz - aber mit dem Zeilenumbruch landest du mit dem Text im nächsten Icon...

[teletapi]

@tt-tom Danke dir, ich hab als Datenpunkt derzeit: 0_userdata.0.PV.now.Battery_Power als lade/entlade datenpunkt müsste ja auch: modbus.0.holdingRegisters._BatterySOC funktionieren. Als möglichen Alias für Battery_soc hab ich diesen Alias angelegt: alias.0.NSPanel.PV_Anlage.Battery_Soc.SET

Eigentlich geht es mir nur darum wenn Voll dann grün, beim Laden Rot und wenns möglich wäre fürs entladen gelb.

Ich habe jetzt auch nochmal ChatGPT gefragt wegen der Variable für das iconColor.
Da wurde mir das folgende angepasste script erzeugt.

schedule("* * * * *", function () {
    var powerCardJson = "0_userdata.0.NSPanel.Powercard";

    var pwr1Raw = getState("0_userdata.0.PV.now.Battery_Power").val || 0;
    var pwr1 = Math.abs(Math.round(pwr1Raw));  // Betrag für Anzeige
    var pwr2 = Math.round(getState("modbus.0.holdingRegisters._Total_Active_power_(Grid_Meter)").val);
    var pwr3 = "";
    var pwr4 = "";
    var pwr5 = Math.round(getState("sonoff.0.Tasmota Energie LG E320.E320_Power_in").val);
    var pwr6 = 0;
    var pwrHome = Math.round(getState("0_userdata.0.PV.now.Load_Total_Power").val || 0);

    var keys = ["id", "value", "unit", "icon", "iconColor", "speed"];
    var helperBase = "0_userdata.0.NSPanel.PowercardHelper";

    if (!existsObject(helperBase)) {
        createState(helperBase, null, { type: "channel", common: { name: "PowercardHelper" }, native: {} });
    }

    function createStateIfNotExists(id, initialValue = 0) {
        if (!existsState(id)) {
            createState(id, initialValue, {
                name: "Last Power Wert",
                role: "value",
                type: "number",
                unit: "W",
                read: true,
                write: false
            });
        }
    }

    createStateIfNotExists(helperBase + ".PWR1_Last");
    createStateIfNotExists(helperBase + ".PWR2_Last");
    createStateIfNotExists(helperBase + ".PWR5_Last");

    function getLastValue(id) {
        var s = getState(id);
        return s ? s.val : 0;
    }

    function setLastValue(id, val) {
        setState(id, val, true);
    }

    function calcSpeed(current, last) {
        if (current > last) return 2;
        else if (current < last) return -2;
        else return 0;
    }

    var pwr1Last = getLastValue(helperBase + ".PWR1_Last");
    var pwr2Last = getLastValue(helperBase + ".PWR2_Last");
    var pwr5Last = getLastValue(helperBase + ".PWR5_Last");

    var speedPwr1 = calcSpeed(pwr1Raw, pwr1Last);  // Richtung basiert auf Originalwert
    var speedPwr2 = calcSpeed(pwr2, pwr2Last);
    var speedPwr5 = calcSpeed(pwr5, pwr5Last);

    setLastValue(helperBase + ".PWR1_Last", pwr1Raw);
    setLastValue(helperBase + ".PWR2_Last", pwr2);
    setLastValue(helperBase + ".PWR5_Last", pwr5);

    // Dynamische iconColor für Batterie
    var iconColorBatt;
    if (pwr1Raw > 50) {
        iconColorBatt = 3;  // rot → Laden
    } else if (pwr1Raw < -50) {
        iconColorBatt = 4;  // gelb → Entladen
    } else if (Math.abs(pwr1Raw) <= 50) {
        iconColorBatt = 7;  // grün → Voll
    } else {
        iconColorBatt = 1;  // grau → fallback
    }

    var home = [0, pwrHome, "W", "home-lightning-bolt-outline", 0, 0];

    // Batterie → ID 1
    var item1 = [1, pwr1, "W", "battery-high", iconColorBatt, speedPwr1];

    var item2 = [2, pwr2, "W", "solar-power-variant-outline", 3, speedPwr2];
    var item3 = [3, pwr3, "", "", 0, 0];
    var item4 = [4, pwr4, "", "", 0, 0];
    var item5 = [5, pwr5, "W", "transmission-tower", 10, speedPwr5];
    var item6 = [6, pwr6, "kW", "", 0, 0];

    function func(tags, values) {
        return tags.reduce((acc, tag, index) => {
            acc[tag] = values[index];
            return acc;
        }, {});
    }

    setState(
        powerCardJson,
        JSON.stringify([
            func(keys, home),
            func(keys, item1),
            func(keys, item2),
            func(keys, item3),
            func(keys, item4),
            func(keys, item5),
            func(keys, item6),
        ])
    );
});

[TT-Tom]

@teletapi
Ja sieht gut aus, so ähnlich hätte ich es auch gemacht.

[teletapi]

@tt-tom Danke dir dann werde ich das mal so testen

[arteck]

@armilar sagte in SONOFF NSPanel mit Lovelace UI:

Text abkürzen würde mir aktuell nur einfallen...

das hab ich schon ... sieht nur bähh aus