SONOFF NSPanel mit Lovelace UI

[arteck]

@armilar aha.. auf die Idee bin ich nicht gekommen..aber hast recht

[hansi44]

Hallo liebe community,

ich hab mal wieder eine frage zum NSPanel..
Ich versuche gerade die Hauptseiten im Display anzupassen und als eine erste Seite neben der "Service-Menü"-Seite eine Seite für meine PV-Werte mit der cardpower-Karte anzeigen zu lassen.
Ich habe dabei versucht mich an die Anleitung für die cardpower-Karte zu halten, habe keine Werte eingetragen, damit die Seite erstmal im Demo-Modus angezeigt werden soll

Habe dann versucht, in der Konfiguration diese cardpower-Seite als Hauptseite neben dem Service Menü zu listen, in der Hoffnung, dass ich dann im Service-Menü mit den links/rechts Pfeiltasten auf die cardpower-Karte komme

Leider kann ich diese cardpower-Seite durch die Pfeile im Service-Menü nicht erreichen, im log kommt folgende Meldung

Kann mir jemand von euch einen Tipp geben? VG

[peterfido]

@hansi44

Meine Cardpower Puzzleteile:

Definition:

Spoiler

let CardPower: PageType =
{
   "type": "cardPower",
   "heading": "Stromfluss",
//    "useColor": true,
   "subPage": false,
   "parent": undefined,
   "items": [
//        /*PageItem*/{  }, //Demomode
       {id: "alias.0.NSPanel.StromPanel" }
   ]
};

Pages:

Spoiler

   pages: [
       //Button_1,
       //NSPanel_Service, //Auto-Alias Service Page
       Buero_Seite_1,
       Schlafen_Oben_1,
//        Arbeiten_Licht2,
       Buero_Themostat,        
       Bel_Terrasse,           //Beleuchtung Terasse
       Terrasse_Speichern,   //Terrasse Speichern / Standard
       CardPower,              //Strom
       GWLAN,
      // Unlock_Service            //Auto-Alias Service Page (Service Pages used with cardUnlock)
       NSPanel_Service           
   ],

Der Alias verweist auf einen anderen Datenpunkt:

NSPanel.Aktuell ist ein String

Spoiler

{
 "common": {
   "type": "string",
   "value": "",
   "read": true,
   "write": true,
   "role": "value",
   "name": "0_userdata.0.Zaehler.Strom.NSPanel.Aktuell"
 },
 "native": {},
 "type": "state",
 "from": "system.adapter.javascript.0",
 "user": "system.user.admin",
 "ts": 1682841779977,
 "_id": "0_userdata.0.Zaehler.Strom.NSPanel.Aktuell",
 "acl": {
   "object": 1636,
   "state": 1636,
   "owner": "system.user.admin",
   "ownerGroup": "system.group.administrator"
 }
}

welcher von einem Skript gefüllt wird:

Spoiler

/**
* generate an JSON for display Power-Card on NSPanel
* Source: https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Card-Definitionen-(Seiten)#cardpower-ab-ts-script-v341
* Version: 0.1 - L4rs
*/
//'*/20 * * * * *'
schedule("*/20 * * * * *", function () {

   // Definition der Datenpunkte für das JSON der POWER-Card und der anzuzeigenden Leistungswerte
   var powerCardJson = "0_userdata.0.Zaehler.Strom.NSPanel.Aktuell",
     pwr1 = Math.round(getState("0_userdata.0.Zaehler.PV.ist.P1").val),    // Solar
     pwr2 = Math.round(getState("nut.0.ups.realpower").val),    // Solar
     pwr3 = Math.round(getState("0_userdata.0.Wallbox.Strom.Auslese.Arbeit").val), // Auto
     pwr4 = Math.round(getState("0_userdata.0.Zaehler.Strom.EVU.ist.P").val),    // Stromnetz
     pwr5 = Math.round(getState("nut.2.ups.load").val*3.3),   // Verbraucher
     pwr6 = Math.round(getState("0_userdata.0.Zaehler.Strom.Herd.ist.P").val),   // Verbraucher
     pwrWallbox = getState("0_userdata.0.Wallbox.freigegeben").val,
     iconWallbox = pwrWallbox ? "car-electric" : "car", 
     pwrHome = Math.round(pwr4 + pwr1),    // Berechnung des Energiefluss anstelle eines Datenpunktes
     sppwr1 = Math.round(pwr1/-61),         //pwr2 > 0 ? -2 : 0
     sppwr3 = Math.round(pwr3/(1100)),         //pwr2 > 0 ? -2 : 0
     sppwr6 = Math.round(pwr6/(-1100));         //pwr2 > 0 ? -2 : 0
   
   if(pwr1 > 0 && sppwr1 == 0 ){ sppwr1 = -1};
   if(pwr3 > 0 && sppwr3 == 0 ){ sppwr3 = 1};
   if(pwr6 > 0 && sppwr6 == 0 ){ sppwr6 = -1};
   sppwr1 > 10 ? 10 : sppwr1;
   sppwr3 > 10 ? 10 : sppwr3;
   sppwr6 > 10 ? 10 : sppwr6;

   // Definition der Keys im JSON
   var keys = ["id", "value", "unit", "icon", "iconColor", "speed"];
   
   // Definition der "Kacheln", inkl. StandardIcon. Es können alle Icon aus dem Iconmapping genutzt werden.
   // Kacheln die nicht genutzt werden sollen, müssen wie z.b. item1 formatiert sein
   var home = [0, pwrHome, "W", "home-lightning-bolt-outline", 0]; // Icon home
   var item1 = [1, pwr1, "W", "solar-power-variant-outline", 5, sppwr1];   // Icon battery-charging-60
   var item2 = [2, pwr2, "W", "server-security", 5, 5]; // Icon solar-power-variant
   var item3 = [3, pwr3, "W", iconWallbox, 3, sppwr3];   // Icon wind-turbine
   var item4 = [4, pwr4, "W", "transmission-tower", 10, pwr4 > 0 ? 5 : -5];   // Icon shape
   var item5 = [5, pwr5, "W", "server", 5, -5];   // Icon transmission-tower
   var item6 = [6, pwr6, "W", "toaster-oven", 7, sppwr6];  // Icon car car-electric-outline
   
   /**
    * JSON generieren und in den Datenpunkt schreiben,
    *
    *  --- ab hier keine Änderungen mehr ---
    */
   function func(tags, values) {
     return Object.assign(
       ...tags.map((element, index) => ({ [element]: values[index] }))
     );
   }
   
   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]

@hansi44

Okay, durch die Typenprüfung hat der Demomodus jetzt ein BUG. Werde schnell ein Fix machen.

EDIT: Du kannst den Fix direkt in deinem Script machen oder dir die DEV Version runterladen.

suche diese Zeilen im Script

function GeneratePowerPage (page: NSPanel.PagePower): NSPanel.Payload[] {
    try {
        let obj: object = {};
        let demoMode = false;
        if (page.items[0].id == undefined) {
            log('No PageItem defined - cardPower demo mode active', 'info');
            demoMode = true;
        }

und ersetze if (page.items[0].id == undefined) { durch if (page.items[0].id === 'DEMO') {

in deiner config schreibst du dann für den Demomodus

"items": [
        {id: "DEMO" }
    ]

[arteck]

kann ich die fonst grösse hier beeinflussen

[Armilar]

@arteck

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 leadeentlade datenpunkt müsste ja auch: modbus.0.holdingRegisters._BatterySOC funktionieren. Als möglichen Alias für Battery_soch 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