Startseite » Licht-Steuer-Widget für OpenHAB

Licht-Steuer-Widget für OpenHAB

Ein Kommentar / Eingabe und Steuerung / Von

Dieses Lightbulb-Widget für die OpenHAB MainUI ist teil meines Pokémon-Floorplans und bietet eine kompakte und flexible Möglichkeit, Lampen oder Gruppen von Lampen zu steuern.
Es kombiniert Schalter- und Gruppenzugriff in einem einzigen Button und erlaubt zusätzlich eine dynamische Farbgestaltung des Icons – passend zum Zustand oder zu einem verknüpften Farb-Item.

Funktionen

  • Schalten oder Gruppenzugriff:
    • Kurzer Klick: Schaltet das konfigurierte Switch Item ein/aus.
    • Langer Klick: Öffnet die konfigurierte Zielgruppe (groupName) als Popup.
  • Flexible Icons:
    • Unterschiedliche Symbole für „An“ und „Aus“.
    • Standard: gefüllte oder leere Glühbirne (f7:lightbulb_fill, f7:lightbulb).
  • Farboptionen:
    1. Feste Farbe über HEX-Code.
    2. Dynamische Farbe aus einem HSB-Item (z. B. RGB-Lampen).
    3. Farbverlauf basierend auf einem Number-Item (z. B. Prozentwerte für Helligkeit oder Verbrauch).
    • Optional mit invertierten Farben und Richtungskontrolle.
  • Lichteffekt:
    • Optionaler Leuchteffekt durch Drop-Shadow, gesteuert von einem Color-/Number-Item.
  • Animationen & Design:
    • Weiche Übergänge beim Umschalten.
    • Kompakte Größe (40x40px Button).

Benutzungshinweise

  1. Pflichtparameter:
    • groupName: Die Gruppe, die bei langem Drücken geöffnet wird.
  2. Optionale Parameter:
    • switchItem: Item, das beim Klick geschaltet wird.
    • icon_on, icon_off: Anpassung der Icons.
    • fixedColor, colorItem: Steuerung der Icon-Farbe.
    • Erweiterte Parameter für Farbverläufe und Drop-Shadow.
  3. Einsatzbereich:
    • Besonders geeignet für Lichtsteuerungen mit Einzel- oder Gruppenfunktion.
    • Kann auch als Statusanzeige mit Farbfeedback genutzt werden (z. B. Temperatur oder Energieverbrauch).

Verwendung als Thermostat-Widget

  • colorItem kann auf ein Number-Item gesetzt werden (Option 3). Hier die aktuelle Temperatur.
  • passende Werte sind als default bereits vorgeschlagen und setzen die Farbe entsprechend der Temperatur zu blau, wenn kalt, grün ~20°C, orange/rot wenn warm.
Widget-Code
uid: ha_lightbulb
tags: []
props:
  parameters:
    - context: item
      description: Gruppe, die bei langem Drücken geöffnet wird
      label: Target Group
      name: groupName
      required: true
      type: TEXT
    - context: item
      description: Item für den Schalter
      label: Switch Item
      name: switchItem
      required: false
      type: TEXT
    - default: f7:lightbulb_fill
      description: Icon Name (z.B. material:lightbulb, f7:lightbulb_fill)
      label: Icon On
      name: icon_on
      required: false
      type: TEXT
    - default: f7:lightbulb
      description: Icon Name (z.B. material:lightbulb, f7:lightbulb_fill)
      label: Icon Off
      name: icon_off
      required: false
      type: TEXT
    - context: color
      description: "Option 1: Feste Farbe für das Icon (z.B. #FF0000)"
      label: Fixed Color
      name: fixedColor
      required: false
      type: TEXT
    - context: item
      description: "Option 2/3: Item für dynamische Farbsteuerung (HSB Color Item /
        Number Item)"
      label: Color Item / Number Item
      name: colorItem
      required: false
      type: TEXT
      advanced: true
    - description: "Option 2: Farbe invertieren"
      label: Invert Color
      name: invertColor
      required: false
      type: BOOLEAN
      advanced: true
    - default: "240"
      description: "Option 3: Prozentualer Farbverlauf - Hue von"
      label: Hue start
      name: colorHueStart
      required: false
      type: INTEGER
      min: 0
      max: 359
      advanced: true
    - default: "11"
      description: "Option 3: Prozentualer Farbverlauf - Item-Value von"
      label: Value start
      name: numberHueStart
      required: false
      type: INTEGER
      advanced: true
    - default: "0"
      description: "Option 3: Prozentualer Farbverlauf - Hue bis"
      label: Hue end
      name: colorHueEnd
      required: false
      type: INTEGER
      min: 0
      max: 359
      advanced: true
    - default: "31"
      description: "Option 3: Prozentualer Farbverlauf - Item-Value bis"
      label: Value end
      name: numberHueEnd
      required: false
      type: INTEGER
      advanced: true
    - default: backwards
      description: "Option 3: Prozentualer Farbverlauf - Rückwärts (z.B. forwards |
        backwards)"
      label: Invert Color
      name: colorHueDirection
      required: false
      type: TEXT
      advanced: true
    - context: item
      description: Schattenfarbe
      label: Color Item / Number Item
      name: dropshadow
      required: false
      type: TEXT
      advanced: true
  parameterGroups: []
timestamp: Jul 6, 2025, 12:44:13 AM
component: oh-context
config:
  functions:
    colorFromColorItem: |
      =(colorItem) => 'hsl(' +
        (
          (props.invertColor) ? 
            ((parseFloat(colorItem.state.split(',')[0]) + 180) % 360) : 
            colorItem.state.split(',')[0]
        ) + ' ' + 
        colorItem.state.split(',')[1] + '% 50% ' +
        ')'
    colorFromNumberItem: >
      =(numberItem) => 'hsl(' +
        Math.round(
          (props.colorHueDirection === 'backwards') ?
              ((Number(props.colorHueStart) + ((props.colorHueEnd - props.colorHueStart) * (numberItem.numericState - props.numberHueStart) / (props.numberHueEnd - props.numberHueStart))) % 360)
            : ((Number(props.colorHueStart) - ((props.colorHueEnd - props.colorHueStart) * (numberItem.numericState - props.numberHueStart) / (props.numberHueEnd - props.numberHueStart))) % 360)
        ) +
        ' 100% 50%
      )'
slots:
  default:
    - component: oh-button
      config:
        action: "=(props.switchItem) ? 'toggle' : 'group'"
        actionCommand: ON
        actionCommandAlt: OFF
        actionGroupPopupItem: =props.groupName
        actionItem: =props.switchItem
        outline: true
        style:
          border: 0
          border-radius: 40%
          height: 40px
          transition: all 0.3s ease
          width: 40px
        taphold_action: group
        taphold_actionGroupPopupItem: =props.groupName
      slots:
        default:
          - component: f7-block
            config:
              style:
                align-items: center
                display: flex
                filter: >
                  = (props.dropshadow && items[props.dropshadow]) ?
                    'drop-shadow(0 0 5px ' +
                    ((items[props.dropshadow].type == 'HSB') ?  
                      fn.colorFromColorItem(items[props.dropshadow])
                    : ( props.colorHueStart && props.colorHueEnd && props.numberHueStart && props.numberHueEnd
                        && items[props.dropshadow].type == 'Quantity'
                      ) ? fn.colorFromNumberItem(items[props.dropshadow]) : '') +
                    ')' : ''
                height: 100%
                justify-content: center
                margin: 0
                padding: 0
                width: 100%
            slots:
              default:
                - component: oh-icon
                  config:
                    height: 30px
                    icon: >
                      = (props.icon_on) ?
                          (props.icon_off && (items[props.switchItem].numericState == 0 || @@props.switchItem === 'OFF')) ? props.icon_off
                          : props.icon_on
                        : (
                          (items[props.switchItem].numericState > 0 || @@props.switchItem === 'ON') ? 'f7:lightbulb_fill' : 'f7:lightbulb'
                        )
                    style:
                      color: >
                        = (props.fixedColor) ? props.fixedColor
                          : (props.colorItem && items[props.colorItem] && items[props.colorItem].type == 'HSB') ?  
                            fn.colorFromColorItem(items[props.colorItem])
                          : (props.colorHueStart && props.colorHueEnd && props.numberHueStart && props.numberHueEnd && props.colorItem && items[props.colorItem] && items[props.colorItem].type == 'Quantity') ?
                            fn.colorFromNumberItem(items[props.colorItem])
                          : '#666666'
                      filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.9))
                      transition: all 0.3s ease
                    width: 30px

1 Kommentar zu „Licht-Steuer-Widget für OpenHAB“

  1. Pingback: Interaktiver Floorplan in OpenHAB mit Effekten

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre, wie deine Kommentardaten verarbeitet werden.

Translate »