SONOFF NSPanel mit Lovelace UI

TT-Tom

Wenn du Hue hast nimm auch eine Hue Lampe.

CardGrid: du brauchst nur den Typ tauschen. Der Rest bleibt gleich.

Armilar

Ja ich habe jetzt erstmal bei den Paulmannleuchten die sollen ja laut Datenblatt RGBW sein bei "Weiß" das "level" rausgemacht und durch den Datenpunkt "Hue" ersetezt

HUE steuert alles über 0-360°...

Somit kannst du, wenn du einen HUE Datenpunkt hast, die komplette Lampe steuern... Nimm dazu mal den Alias-Typ HUE...

Dann brauchst du nur:

HUE = hue
DIMMER = level
ON = on
ON_ACTUAL = on
TEMPERATURE = ct

Beispiel:

let Test_Color_HUE: PageType =
{
    type: 'cardEntities',
    useColor: true,
    heading: 'Test Color HUE',
    'items': [
        { 
            id: 'alias.0.DeinAlias', 
            name: 'HUE (CT=Kelvin)',
            icon: 'lightbulb-on',
            icon2: 'lightbulb-outline',
            offColor: Off,
            minValueColorTemp: 2203, // Kelvin = Warmweiß
            maxValueColorTemp: 6536, // Kelvin = Kaltweiß
            interpolateColor: true
        },
    ]
};

peterfido

@armilar Der Gerätemanager hat einen Bug. Hat man eine nicht-HUE-Leuchte konfiguriert, wird beim nächsten neuen anzulegenden Gerät wieder das Modell angeboten, obwohl man HUE ausgewählt hat. Da muss man Vor dem Anlegen des Gerätes die Seite ohne Cache neu laden (STRG + F5). Da erscheint dann auch der gewollte HUE Datenpunkt, wenn man HUE auswählt.

Die abgebrochenen Geräte kann man vorher aus den Objekten löschen, sonst ist der Name ja schon belegt.

teletapi

Danke allen bin nocham testen, muss aber noch was arbeiten schau ich mir am späten Abend nochmal an. Hab jetzt nochmal verschiedenes verändert. Komme aber im Moment noch nicht wirklich weiter danke bis später
Hawe

arteck

welchen Alias definiere ich für sowas

{
  "type": "state",
  "common": {
    "name": "cmd",
    "read": true,
    "write": true,
    "type": "string",
    "role": "state",
    "def": ""
  },
  "native": {},
  "from": "system.adapter.mytime.0",
  "user": "system.user.admin",
  "ts": 1731410376623,
  "_id": "mytime.0.Countdowns.sprinkler.cmd",
  "acl": {
    "object": 1638,
    "state": 1638,
    "owner": "system.user.admin",
    "ownerGroup": "system.group.administrator"
  }
}

ich muss da run oder stop rein schreiben

Armilar

@arteck

sieht für mich erstmal wie ein Schalter (socket oder light) aus...

Die sind zwar per default Boolean, jedoch kannst du ja bei true/false entsprechend den Alias mit run/stop schreiben lassen und lesend in bool konvertieren.

Hoffe ich habe das richtig verstanden...

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:

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

Pages:

   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

{
 "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:

/**
* 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:

NEWS

SONOFF NSPanel mit Lovelace UI

Support us

951
Online

31.7k
Users

79.9k
Topics

1.3m
Posts

NEWS

SONOFF NSPanel mit Lovelace UI

Support us

951Online

31.7kUsers

79.9kTopics

1.3mPosts

951
Online

31.7k
Users

79.9k
Topics

1.3m
Posts