SONOFF NSPanel mit Lovelace UI

arteck

kann ich die fonst grösse hier beeinflussen

Armilar

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

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

MichaelF

@michaelf sagte in SONOFF NSPanel mit Lovelace UI:

@armilar Danke, das war es.

Grüße

Hi, ein kleines Problem gibt es leider noch das Display schaltet sich nicht mehr nach der eingestellten Nachtzeit ab.

Dimmer Nacht steht auf 0

Gibt es vielleicht ein Tipp wo ich schauen muss ?

Grade noch entdeckt:

web.0
2025-06-26 15:03:44.677	error	Error on "subscribeForeignStates": Alias alias.0.alias.0.NSPanel..Dimmode.brightnessDay.ACTUAL has no target

web.0
2025-06-26 15:03:44.676	warn	Alias alias.0.NSPanel.1.alias.0.NSPanel.1.Dimmode.brightnessDay.ACTUAL has no target 5

web.0
2025-06-26 15:03:44.676	warn	Alias alias.0.alias.0.NSPanel.1.Dimmode.brightnessDay.ACTUAL has no target 5

web.0
2025-06-26 15:03:44.675	warn	Alias alias.0.alias.0.NSPanel..Dimmode.brightnessDay.ACTUAL has no target 5

web.0
2025-06-26 15:03:42.347	info	==> Connected system.user.admin from ::ffff:192.168.178.252

web.0
2025-06-26 15:03:39.697	info	<== Disconnect system.user.admin from ::ffff:192.168.178.252 vis.0

web.0
2025-06-26 15:02:52.997	error	Error on "subscribeForeignStates": Alias alias.0.alias.0.NSPanel..Dimmode.brightnessDay.ACTUAL has no target

web.0
2025-06-26 15:02:52.996	warn	Alias alias.0.NSPanel.1.alias.0.NSPanel.1.Dimmode.brightnessDay.ACTUAL has no target 5

web.0
2025-06-26 15:02:52.996	warn	Alias alias.0.alias.0.NSPanel.1.Dimmode.brightnessDay.ACTUAL has no target 5

web.0
2025-06-26 15:02:52.995	warn	Alias alias.0.alias.0.NSPanel..Dimmode.brightnessDay.ACTUAL has no target 5

Allerdings Funktioniert das Dimmen am Tag, meine ich zumindest.

Grüße

arteck

@michaelf sagte in SONOFF NSPanel mit Lovelace UI:

alias.0.alias.0.NSPanel..Dimmode.brightnessDay.ACTUAL

da ist das problem

alias.0.alias.0.

ist falsch

MichaelF

@arteck Ist das Falsch im Skript oder im Objekt ?

Update, habe es im Objektbaum gefunden und gelöscht. Aber für das nicht abschalten war das nicht verantwortlich, oder ?

Grüße und Danke

arteck

@michaelf da ist noch ein fehler

NSPanel..Dimmode

da ist ein punkt zu viel

MichaelF

@arteck In den Objekten nicht zu finden?

Armilar

@michaelf

wieso "web.0" ???

javascript.0 würde ich im Zusammenhang mit dem Script ja noch verstehen... Ich denke da musst du an einer völlig anderen Stelle suchen...

Der zu visualisierende Alias wäre dann sicherlich

alias.0.NSPanel.1.Dimmode.brightnessDay.ACTUAL

Sieht für mich aus, als wäre in vis.0 ein Fehler der diese Meldung wirft

MichaelF

@armilar
was ich grade gefunden habe:

{
  "common": {
    "name": "alias.0.NSPanel.1.Dimmode.brightnessDay.ACTUAL",
    "desc": "Manuell erzeugt",
    "role": "state",
    "type": "number",
    "read": true,
    "write": true,
    "def": 0
  },
  "type": "state",
  "native": {},
  "from": "system.adapter.admin.0",
  "user": "system.user.admin",
  "ts": 1750409085470,
  "_id": "alias.0.alias.0.NSPanel.1.Dimmode.brightnessDay.ACTUAL",
  "acl": {
    "object": 1636,
    "state": 1636,
    "owner": "system.user.admin",
    "ownerGroup": "system.group.administrator"
  }
}

Wie passiert das denn ?

Kann ich das einfach löschen ?

Armilar

@michaelf

So eine doppelte alias.0 - Verkettung habe ich auch noch nie gesehen?

Irgendwann mal den Alias-Path im Script geändert?

Du kannst jederzeit die erstellten Verzeichnisse eines NSPanel unter 0_userdata.NSPanel.X und alias.0.NSPanel.X löschen.

Mit Scriptstart werden die wieder sauber erzeugt... Bis auf die paar individuellen Anpassungen...

NEWS

SONOFF NSPanel mit Lovelace UI

Support us

889
Online

31.8k
Users

79.9k
Topics

1.3m
Posts

NEWS

SONOFF NSPanel mit Lovelace UI

Support us

889Online

31.8kUsers

79.9kTopics

1.3mPosts

889
Online

31.8k
Users

79.9k
Topics

1.3m
Posts