Das Radiator-Shadow-Widget aus meinem Pokémon-Floorplan ist ein visuelles Status-Element für die OpenHAB MainUI, das Heizkörper (Radiatoren) oder beliebige andere Zustände ansprechend darstellt.
Durch einen farbigen Schatteneffekt lässt sich intuitiv erkennen, ob und wie stark der Heizkörper im Vergleich zur Raumtemperatur arbeitet.
Funktionen
- Schneller Zugriff auf Gruppen:
- Kurzer Klick oder langer Druck öffnet die konfigurierte Gruppe (
groupName) als Popup.
- Kurzer Klick oder langer Druck öffnet die konfigurierte Gruppe (
- Visuelle Darstellung durch Schatteneffekt:
- Mehrfacher Drop-Shadow in frei wählbarer Farbe (
color). - Die Intensität des Schattens passt sich dynamisch an.
- Mehrfacher Drop-Shadow in frei wählbarer Farbe (
- Dynamische Transparenz:
- Automatische Berechnung: Differenz zwischen Heizkörper-Temperatur (
radiatorItem) und Raumtemperatur (roomItem).- Je größer der Unterschied, desto deutlicher (sichtbarer) wird der Schatten.
- Maximalwert: 100 % Sichtbarkeit bei hoher Differenz.
- Alternativ: Umschaltung über ein Toggle-Item (
toggleItem).
- Automatische Berechnung: Differenz zwischen Heizkörper-Temperatur (
- Animationen & Design:
- Weiche Übergänge (CSS-Transition).
- Dezente, punktuelle Hervorhebung statt plakativer Anzeige.
Benutzungshinweise
- Pflichtparameter:
groupName: Gruppe, die bei Klick/Langdruck geöffnet wird.
- Optionale Parameter:
color: Farbe des Schattens (Standard:rgba(255, 0, 0, 1)).toggleItem: Einfacher Schalter für Sichtbarkeit des Effekts.radiatorItem&roomItem: Automatische Schattenstärke basierend auf Temperaturdifferenz.
- Einsatzbereich:
- Ideal für Heizungsanzeigen (z. B. Ventile, Heizkörper).
- Kann auch für andere Statusanzeigen mit Schwellwerten eingesetzt werden (z. B. Batterie-Ladung, Temperaturwarnungen, Signalstärke).
uid: ha_radiator_shadow
tags: []
props:
parameters:
- context: item
description: Gruppe, die bei langem Drücken geöffnet wird
label: Target Group
name: groupName
required: true
type: TEXT
- description: Farbe des Schattens
label: color
name: color
required: false
type: TEXT
default: "rgba(255, 0, 0, 1)"
- context: item
label: Toggle Item
name: toggleItem
required: false
type: TEXT
- context: item
description: Temperatur des Heizkörpers
label: Radiator temperature Item
name: radiatorItem
required: false
type: TEXT
- context: item
description: Temperatur des Raums
label: Room temperature Item
name: roomItem
required: false
type: TEXT
parameterGroups: []
timestamp: Jun 29, 2025, 3:18:53 PM
component: oh-context
config: {}
slots:
default:
- component: oh-button
config:
action: group
actionCommand: ON
actionCommandAlt: OFF
actionGroupPopupItem: =props.groupName
actionItem: =props.groupName
actionModal: page:overview
outline: true
style:
border: 0
height: 100%
padding: 13px 14px 14px 13px
width: 100%
taphold_action: group
taphold_actionGroupPopupItem: =props.groupName
slots:
default:
- component: div
config:
style:
border-radius: 7px
border-style: dotted
border-width: thin
filter: >
="drop-shadow(0 0 5px " + props.color + ") drop-shadow(0 0 5px
" + props.color + ") drop-shadow(0 0 3px " + props.color + ")
drop-shadow(0 0 3px " + props.color + ") drop-shadow(0 0 3px
" + props.color + ")"
height: 100%
opacity: >
=(props.radiatorItem && props.roomItem) ? (Math.min(100,
Math.max(0, ((items[props.radiatorItem].numericState -
items[props.roomItem].numericState)/ 25) ))) : ((props.toggleItem && items[props.toggleItem] && items[props.toggleItem].state == "ON") ? 1 : 0)
transition: all 0.3s ease
width: 100%
Pingback: Interaktiver Floorplan in OpenHAB mit Effekten