Skip to content

cardpower

tt-tom17 edited this page Jan 7, 2025 · 1 revision

cardPower (ab TS-Script v.3.4.1)

Nextion_Editor_9AYbpowjZS

Es gibt nur einen einzigen externen Datenpunkt (anzulegen in 0_userdata.0.), auf den ein Alias vom Typ "Info" zugreift. Dieser muss mit einem JSON-Objekt in nachfolgender Struktur befüllt werden. Der Alias-Datenpunkt "ACTUAL" sollte hierbei auf diesen neuen Datenpunkt in "0_userdata.0.) gebunden sein.

[
  {
    "id": 0,
    "value": 13,
    "unit": "kW",
    "icon": "emoticon-happy-outline",
    "iconColor": 0
  },
  {
    "id": 1,
    "value": 3,
    "unit": "kW",
    "icon": "battery-charging-60",
    "iconColor": 10,
    "speed": 30
  },
  {
    "id": 2,
    "value": 4.7,
    "unit": "kW",
    "icon": "solar-power-variant",
    "iconColor": 3,
    "speed": -20
  },
  {
    "id": 3,
    "value": 4.3,
    "unit": "kW",
    "icon": "wind-turbine",
    "iconColor": 1,
    "speed": -30
  },
  {
    "id": 4,
    "value": 3.4,
    "unit": "kW",
    "icon": "shape",
    "iconColor": 10,
    "speed": 30
  },
  {
    "id": 5,
    "value": 0.1,
    "unit": "kW",
    "icon": "transmission-tower",
    "iconColor": 0,
    "speed": 20
  },
  {
    "id": 6,
    "value": 2.5,
    "unit": "kW",
    "icon": "car",
    "iconColor": 5,
    "speed": 20
  }
]

iconColor kann einen Wert von 0-10 annehmen und entspricht der ColorScale Grün -> Gelb -> Rot
speed kann positive und negative Werte annehmen, wobei positive Werte den Punkt vom Haus weggehen lassen und negative Werte zum Haus

Mit dem Zusatzparameter alwaysOnDisplay fällt die Seite nicht in den Screensaver-Mode zurück. Erst wenn auf eine andere Seite navigiert wird, wird der Screensaver wieder aktiv.

let CardPower: PageType =
{
    'type': 'cardPower',
    'heading': 'Energiefluss',
    'items': [
        { id: 'alias.0.NSPanel.cardPower', 
          alwaysOnDisplay: true }
    ]
};

Wenn ihr das pageItem leer lässt, startet die Seite mit einem Demomodus.

let CardPowerExample: PageType =
{
    'type': 'cardPower',
    'heading': 'Energiefluss',
    'items': [
        {  }
    ]
};

cardPower Emulator (Blockly)

Zum Blockly

Kurze Anleitung:
Der Code dient nur der Orientierung und stellt keine Lösung für die eigene Visualisierung dar. Somit soll z.B. der Aufbau des JSON-Objektes verdeutlicht werden.

Für dieses Beispiel sind in 0_userdata für die 6 Werte in der cardPower entsprechende Datenpunkte (number) manuell angelegt worden:
image

Im oberen Teil des Blocklys wird lediglich eine Emulation auf 4 von 6 Datenpunkten je Minute erzeugt. Bei Produktivnutzung sollte dieses Codeobjekt gelöscht (deaktiviert) werden.

image

Produktivnutzung:

Die Datenpunkte zu den entsprechenden Piktogrammen (id's) sollten mit den jeweiligen eigenen Adapter-Datenpunkten ersetzt werden. Im Beispiel werden folgende Datenpunkte zugewiesen:

1 - Batteriespeicher (Einspeisung/Bezug)
2 - Photovoltaik Ertrag
3 - Windenergieanlage Ertrag
4 - Sämtliche aktiven Verbraucher des Hauses
5 - Energielieferant (Netz-Einspeisung/Netz-Bezug)
6 - Ladestation Verbrauch (E-Car)

Für eine abweichende Darstellung ist das JSON entsprechend zu befüllen. Wenn eine Entität nicht visualisiert werden soll, so sollte in allen Werten zur id ein leerer String "" übergeben werden. Beispiel:

  {
    "id": 3,
    "value": "",
    "unit": "",
    "icon": "",
    "iconColor": "",
    "speed": ""
  },

Das Skript stellt nur eine exemplarische Möglichkeit der Befüllung dar. Es kann frei definiert und auf eigene Bedürfnisse angepasst werden, soll aber keine finale Lösung für jede Smart Home Situation abbilden! Ebenso kann die Erstellung des JSON natürlich auch über JavaScript oder TypeScript erfolgen.

Ein kleines einfaches Javascript von @l4rs, für die erzeugung des JSON-String.

/**
* 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
*/
schedule("* * * * *", function () {
 
    // Definition der Datenpunkte für das JSON der POWER-Card und der anzuzeigenden Leistungswerte
    var powerCardJson = "0_userdata.0.NSPanel.Energie.PowerCard",
      pwr1 = "", // Batterie
      pwr2 = Math.round(getState("mqtt.0.SmartHome.Energie.PV.openDTU.114180710360.0.power").val),    // Solar
      pwr3 = "",    // Wind
      pwr4 = "",   // Verbraucher
      pwr5 = Math.round(getState("hm-rpc.0.MEQ0706303.1.POWER").val),    // Stromnetz
      pwr6 = 0, // Auto
      pwrHome = Math.round(pwr5 - pwr2);    // Berechnung des Energiefluss anstelle eines Datenpunktes
    
    // 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, "", "", 0, ""];   // Icon battery-charging-60
    var item2 = [2, pwr2, "W", "solar-power-variant-outline", 3, pwr2 > 0 ? -2 : 0]; // Icon solar-power-variant
    var item3 = [3, pwr3, "", "", 0, ""];   // Icon wind-turbine
    var item4 = [4, pwr4, "", "", 0, ""];   // Icon shape
    var item5 = [5, pwr5, "W", "transmission-tower", 10, 10];   // Icon transmission-tower
    var item6 = [6, pwr6, "kW", "car-electric-outline", 5, 0];  // Icon car

Zum Script CardPower.js

Clone this wiki locally