Skip to content

Widget-Typ: Slider

Slider-Widgets zeigen einen numerischen Statuswert an und öffnen bei Tap einen Dialog mit einem Slider und OK. Auf Wunsch kann vor dem eigentlichen Senden zusätzlich ein Bestätigungsdialog erscheinen.

Struktur

Ein Slider-Widget kombiniert:

  • normales Widget-Rendering im Dashboard
  • content.slider für Bereich und Wertbindung
  • action.request als Ziel-Endpoint für den gesetzten Wert
  • optional action.prompt = true für eine zusätzliche Bestätigung

Pflichtfelder

{
  "content": {
    "mode": "slider",
    "slider": {
      "min": 0,
      "max": 100,
      "step": 5,
      "valuePath": "brightness",
      "actionValueBindings": [
        {
          "target": "json_body",
          "path": "brightness"
        }
      ]
    }
  },
  "action": {
    "request": {
      "url": "http://192.168.1.20/api/lights/living-room/set-brightness",
      "method": "post",
      "jsonBody": {
        "brightness": 0
      }
    }
  }
}

valuePath

valuePath bestimmt:

  • welcher Statuswert im Widget angezeigt wird
  • mit welchem Wert der Dialog-Slider vorinitialisiert wird
  • welcher Wert bei optimistischen Updates im Snapshot geändert wird

Anzeige im Widget

Im Dashboard zeigt ein Slider-Widget:

  • Icon
  • Titel
  • optional content.value
  • einen linearen Fortschrittsbalken
  • Min- und Max-Wert

Wichtig:

  • wenn content.value nicht gesetzt ist, wird kein Value-Fallback angezeigt
  • der Fortschrittsbalken verwendet immer sliderValue aus dem Status

Binding-Ziele

Der gewählte Sliderwert kann in drei Zielarten geschrieben werden.

JSON-Body

{
  "target": "json_body",
  "path": "brightness"
}

{
  "target": "header",
  "key": "X-Brightness"
}

Query-Parameter

{
  "target": "query_param",
  "key": "brightness"
}

Bestätigung vor dem Senden

Die Bestätigung für Slider-Widgets sitzt an widgets[].action.prompt, nicht in content.slider.

"action": {
  "request": {
    "url": "http://192.168.1.20/api/lights/living-room/set-brightness",
    "method": "post",
    "jsonBody": {
      "brightness": 0
    }
  },
  "prompt": true,
  "refreshAfterAction": true
}

Optimistische Updates

Wenn action.refreshAfterAction = false gesetzt ist:

  • das Widget wird nicht sofort neu geladen
  • stattdessen aktualisiert das ViewModel den letzten Payload lokal
  • Titel, Value, Farben und Sliderwert werden daraus neu aufgebaut, soweit sie vom geänderten Pfad abhängen

Das ist vor allem dann sinnvoll, wenn das Backend langsam antwortet, aber der neu Wert sofort sichtbar sein soll.

Vollständiges Beispiel

{
  "id": "living-room-dimmer",
  "layout": {
    "order": 15,
    "size": "2/1"
  },
  "content": {
    "mode": "slider",
    "icon": {
      "name": "lightbulb",
      "defaultColor": "#E59A20"
    },
    "title": {
      "mode": "static",
      "value": "Dimmer"
    },
    "value": {
      "mode": "template",
      "value": "{{brightness}} %"
    },
    "slider": {
      "min": 0,
      "max": 100,
      "step": 5,
      "valuePath": "brightness",
      "actionValueBindings": [
        {
          "target": "json_body",
          "path": "brightness"
        }
      ]
    }
  },
  "status": {
    "sharedRequestId": "living-room-light-state"
  },
  "action": {
    "request": {
      "url": "http://192.168.1.20/api/lights/living-room/set-brightness",
      "method": "post",
      "jsonBody": {
        "brightness": 0,
        "source": "dashboard"
      }
    },
    "refreshAfterAction": true
  }
}

Tipps

  • step so wählen, dass er zur API passt
  • content.value explizit setzen, wenn ein sichtbarer Werttext gewünscht ist
  • action.request.method = "get" nur ohne jsonBody verwenden
  • für absolute Helligkeiten 0..100 verwenden, für Spezialwerte auch andere Bereiche

Siehe auch