Skip to content

Widget-Typ: Thermometer

Thermometer-Widgets zeigen einen numerischen Temperaturwert als vertikale Roehre mit Skala. Der aktuelle Wert erscheint rechts neben der Roehre auf der passenden Hoehe, waehrend min und max klein oberhalb und unterhalb beschriftet werden.

Struktur

Ein Thermometer-Widget kombiniert:

  • normales Widget-Rendering im Dashboard
  • content.thermometer fuer Bereich, Wertpfad und optionalen Verlauf
  • optional content.value fuer den formatierten Markertext

Pflichtfelder

{
  "content": {
    "mode": "thermometer",
    "thermometer": {
      "min": -20,
      "max": 40,
      "valuePath": "weather.outdoor.temperature"
    }
  }
}

valuePath

valuePath bestimmt:

  • welcher numerische Statuswert die Fuellhoehe in der Roehre steuert
  • welche Position der Markerwert rechts neben der Roehre einnimmt
  • ob der Payload fuer spaetere Re-Resolves im Snapshot erhalten bleibt

Farbverlauf

Ohne weitere Konfiguration verwendet das Widget standardmaessig einen Verlauf von Blau unten nach Rot oben.

Mit gradientColors laesst sich der Verlauf optional selbst festlegen:

  • die Liste wird von unten nach oben gelesen
  • mindestens zwei gueltige Farben sind sinnvoll
  • ungueltige oder zu kurze Listen fallen automatisch auf den Standardverlauf zurueck
"thermometer": {
  "min": -20,
  "max": 40,
  "valuePath": "weather.outdoor.temperature",
  "gradientColors": [
    "#2563EB",
    "#14B8A6",
    "#F97316",
    "#DC2626"
  ]
}

Anzeige im Widget

Im Dashboard zeigt ein Thermometer-Widget:

  • Icon oder Emoji
  • Titel
  • die vertikale Thermometer-Roehre
  • oben und unten kleine Labels fuer max und min
  • den aktuellen Wert rechts neben der Roehre auf der passenden Hoehe

Wichtig:

  • der Temperaturwert wird auf den Bereich min..max geclamped
  • wenn content.value nicht gesetzt ist, verwendet der Marker den formatierten Rohwert aus valuePath
  • content.value ist ideal fuer Einheiten wie °C oder °F

Vollstaendiges Beispiel

{
  "id": "outside-temperature",
  "layout": {
    "order": 22,
    "size": "2/2"
  },
  "content": {
    "mode": "thermometer",
    "icon": {
      "name": "device_thermostat",
      "defaultColor": "#2563EB"
    },
    "title": {
      "mode": "static",
      "value": "Aussentemperatur"
    },
    "value": {
      "mode": "template",
      "value": "{{weather.outdoor.temperature}} °C"
    },
    "thermometer": {
      "min": -20,
      "max": 40,
      "valuePath": "weather.outdoor.temperature",
      "gradientColors": [
        "#2563EB",
        "#14B8A6",
        "#F97316",
        "#DC2626"
      ]
    }
  },
  "status": {
    "request": {
      "url": "https://example.org/api/weather/current"
    }
  }
}

Tipps

  • fuer Thermometer-Widgets ist size = "2/2" oder hoeher meist am lesbarsten
  • content.value am besten mit Einheit formatieren, z. B. {{temperature}} °C
  • min und max so setzen, dass der Wert nicht permanent an einem Ende klebt

Siehe auch