Dashboard bearbeiten · home

Konfiguration als JSON. Tiles können entweder inline definiert werden (mit template, binding, …) ODER per Card-Referenz: { "card": "slug" }. Cards verwaltest du in der Karten-Bibliothek.

Karten

Karten sind wiederverwendbare Tile-Vorlagen. Im Dashboard referenzierst du sie per {"card":"slug"} in der tiles-Liste. + Neue Karte

In diesem Dashboard verwendet

✎ load-card ✎ grid-card ✎ audi-card ✎ wallbox_info ✎ pv-master ✎ buffer-card ✎ wallbox_info ✎ energy-card ✎ energy-card ✎ energy-card ✎ energy-card ✎ energy-card ✎ energy-card ✎ energy-card

Bibliothek (14 Karten verfügbar)

presence-card audi-card battery-card energy-card energy-card2 facts-grid load-card heater-meter-card grid-card pv-history pv-card pv-master buffer-card wallbox_info

Name Konfiguration (JSON)

{
  "tiles": [
    {
      "card": "load-card"
    },
    {
      "card": "grid-card"
    },
    {
      "card": "audi-card"
    },
    {
      "card": "wallbox_info",
      "replace": {
        "public": "private"
      },
      "overrides": {
        "title": "Wallbox Privat",
        "fields": [
          {},
          {},
          {
            "_delete": true
          },
          {
            "_delete": true
          },
          {
            "_delete": true
          },
          {
            "_delete": true
          }
        ]
      }
    },
    {
      "card": "pv-master"
    },
    {
      "card": "buffer-card"
    },
    {
      "card": "wallbox_info"
    },
    {
      "card": "energy-card",
      "replace": {
        "baer-meter-home": "baer-meter-grid"
      },
      "overrides": {
        "title": "Grid"
      }
    },
    {
      "card": "energy-card",
      "replace": {
        "baer-meter-home": "baer-meter-home"
      },
      "overrides": {
        "title": "Home"
      }
    },
    {
      "card": "energy-card",
      "replace": {
        "baer-meter-home": "baer-meter-rental"
      },
      "overrides": {
        "title": "Rental"
      }
    },
    {
      "card": "energy-card",
      "replace": {
        "baer-meter-home": "baer-meter-other"
      },
      "overrides": {
        "title": "Other"
      }
    },
    {
      "card": "energy-card",
      "replace": {
        "baer-meter-home": "baer-meter-heater"
      },
      "overrides": {
        "title": "Heater"
      }
    },
    {
      "card": "energy-card",
      "replace": {
        "baer-meter-home": "baer-meter-private-wallbox"
      },
      "overrides": {
        "title": "WB_Garage"
      }
    },
    {
      "card": "energy-card",
      "replace": {
        "baer-meter-home": "baer-meter-public-wallbox"
      },
      "overrides": {
        "title": "WB_Public"
      }
    }
  ],
  "columns": 4
}

Abbrechen

Schema & Beispiele

Verfügbare Templates

Template	Optik	Geeignet für
`metric`	Große Zahl + Sub-Zeile + Alter	Hauslast, PV-Leistung, Netz
`gauge`	Halbkreis + Liste rechts	SOC, Audi, Wallbox-Anzeige
`tank`	3+ Segmente, Temp-Farben	Pufferspeicher, Heizung
`facts-grid`	Ring + 4 Faktentiles (span 2)	Batterie, Inverter
`pv-master`	PV-Live, Strings, Batterie-Ring + Verlauf	PV-Systemstatus als Zusatzkarte
`text`	Mittelgroßer Wert + Alter	Status, Anwesenheit, einfache Werte

Vollständiges Beispiel

{
  "columns": 4,
  "refresh_ms": 3000,
  "tiles": [
    { "id": "load", "template": "metric",
      "title": "Hauslast", "subtitle": "Aktueller Verbrauch",
      "accent": "#7cc7ff",
      "binding": { "short_name": "load_total" },
      "unit": "W", "decimals": 0, "show_age": true },

    { "id": "audi", "template": "gauge",
      "title": "Audi", "subtitle": "SOC / Reichweite", "tag": "Auto",
      "accent": "#7cc7ff",
      "binding": { "short_name": "audi_soc" },
      "unit": "%", "max": 100, "show_age": true,
      "fields": [
        { "label": "Reichweite", "binding": {"short_name": "audi_range"}, "unit": "km" },
        { "label": "Laden",      "binding": {"short_name": "audi_charge_power"}, "unit": "kW", "decimals": 1 }
      ] },

    { "id": "battery", "template": "facts-grid",
      "title": "Batterie", "subtitle": "Leistung und Kernwerte",
      "accent": "#85d3a2",
      "binding": { "short_name": "battery_soc" }, "max": 100,
      "secondary_binding": { "short_name": "battery_power" }, "secondary_unit": "W",
      "fields": [
        { "label": "Spannung",     "binding": {"short_name": "battery_voltage"}, "unit": "V", "decimals": 1 },
        { "label": "Strom",        "binding": {"short_name": "battery_current"}, "unit": "A" },
        { "label": "Laden heute",  "binding": {"short_name": "battery_charge_today"}, "unit": "kWh", "decimals": 1 },
        { "label": "Entladen heute","binding": {"short_name": "battery_discharge_today"}, "unit": "kWh", "decimals": 1 }
      ] },

    { "id": "pv-master", "template": "pv-master", "span": 2,
      "title": "PV & Energie Systemstatus", "accent": "#85d3a2",
      "binding": { "sum": ["pv_string1", "pv_string2"] },
      "unit": "W", "decimals": 0, "show_age": true,
      "production_binding": { "short_name": "pv_total_today" },
      "production_unit": "kWh", "production_decimals": 1,
      "strings": [
        { "label": "String 1", "binding": {"short_name": "pv_string1"}, "unit": "W", "color": "#85d3a2" },
        { "label": "String 2", "binding": {"short_name": "pv_string2"}, "unit": "W", "color": "#7cc7ff" }
      ],
      "battery": {
        "binding": {"short_name": "pv_soc"}, "unit": "%", "max": 100,
        "secondary_binding": {"short_name": "battery_power"}, "secondary_unit": "W"
      },
      "history": {
        "title": "Verlauf", "source": {"short_name": "pv_total_today"},
        "count": 10, "mode": "max", "unit": "kWh", "decimals": 0
      } },

    { "id": "buffer", "template": "tank",
      "title": "Pufferspeicher", "subtitle": "Oben / Mitte / Unten",
      "accent": "#f0c977",
      "fields": [
        { "label": "OBEN",  "binding": {"short_name": "buffer_top"},    "unit": "°C", "decimals": 1 },
        { "label": "MITTE", "binding": {"short_name": "buffer_mid"},    "unit": "°C", "decimals": 1 },
        { "label": "UNTEN", "binding": {"short_name": "buffer_bottom"}, "unit": "°C", "decimals": 1 }
      ] },

    { "id": "presence", "template": "text",
      "title": "Anwesenheit", "subtitle": "baer iPhone",
      "accent": "#c89af0",
      "binding": { "short_name": "baer_iphone_presence" },
      "show_age": true }
  ]
}

Hinweise

Werte-Labels (aus Abschnitt 4 im Topic) werden automatisch verwendet — z.B. zeigt baer_iphone_presence dann „online" statt 1.
Faktor wird auf der Server-Seite zurückgerechnet — du brauchst keine Float-Konvertierung im Dashboard.
"vor X Min" rechnet rein clientseitig aus dem letzten ts — refresht alle 20 Sekunden auch ohne Polling-Hit.
Updates blinken nicht — DOM-Updates passieren nur wenn sich der gerenderte Text wirklich ändert.