Skip to content

Widget-Typ: Gauge

Gauge-Widgets zeigen einen numerischen Wert als halbkreisförmigen Bogen. Der aktuelle Wert sitzt mittig in der Öffnung, während min und max unten links und rechts eingeblendet werden.

Struktur

Ein Gauge-Widget kombiniert:

  • normales Widget-Rendering im Dashboard
  • content.gauge für Bereich, Wertpfad und optionalen Verlauf
  • optional content.value für den formatierten Mittelwert

Pflichtfelder

{
  "content": {
    "mode": "gauge",
    "gauge": {
      "min": 0,
      "max": 100,
      "valuePath": "battery.soc"
    }
  }
}

valuePath

valuePath bestimmt:

  • welcher numerische Statuswert den Fortschritt im Gauge steuert
  • welcher Rohwert angezeigt wird, wenn content.value fehlt
  • ob der Payload für spätere Re-Resolves im Snapshot erhalten bleibt

Farbverlauf

Ohne weitere Konfiguration verwendet das Widget standardmäßig einen Verlauf von Blau bei min nach Rot bei max.

Mit gradientColors lässt sich der Verlauf optional selbst festlegen:

  • die Liste wird von min nach max gelesen
  • mindestens zwei gültige Farben sind sinnvoll
  • ungültige oder zu kurze Listen fallen automatisch auf den Standardverlauf zurück
"gauge": {
  "min": 0,
  "max": 100,
  "valuePath": "battery.soc",
  "gradientColors": [
    "#DC2626",
    "#F59E0B",
    "#16A34A"
  ]
}

Anzeige im Widget

Im Dashboard zeigt ein Gauge-Widget:

  • Icon oder Emoji
  • Titel
  • einen halbkreisförmigen Gauge-Bogen
  • links und rechts kleine Labels für min und max
  • den aktuellen Wert mittig innerhalb des Bogens

Wichtig:

  • der Wert wird auf den Bereich min..max geclamped
  • wenn content.value nicht gesetzt ist, verwendet die Mitte den formatierten Rohwert aus valuePath
  • content.value ist ideal für Einheiten oder Prozentangaben

Vollständiges Beispiel

{
  "id": "battery-charge",
  "layout": {
    "order": 29,
    "size": "2/2"
  },
  "content": {
    "mode": "gauge",
    "icon": {
      "name": "bolt",
      "defaultColor": "#0F766E"
    },
    "title": {
      "mode": "static",
      "value": "Batterie"
    },
    "value": {
      "mode": "template",
      "value": "{{battery.soc}} %"
    },
    "gauge": {
      "min": 0,
      "max": 100,
      "valuePath": "battery.soc",
      "gradientColors": [
        "#DC2626",
        "#F59E0B",
        "#16A34A"
      ]
    }
  },
  "status": {
    "request": {
      "url": "https://example.org/api/energy/storage"
    }
  }
}

Tipps

  • für Gauge-Widgets ist size = "2/2" oder breiter meist am lesbarsten
  • content.value am besten mit Einheit oder % formatieren
  • min und max so setzen, dass der Marker nicht ständig am Rand klebt

Siehe auch