Enigma2 widget

Enigma2 widget1

Description

This widget controls Enigma2 devices and works in light mode as well as in dark mode.

Prerequisites:

  • Enigma2 binding installed
  • Enigma2 device (Thing, Channels, Items) fully set up according to binding instructions

Recommendation for best use of widget:

  • Set up 2 items for TV channels
  • 1st item for favorites
  • 2nd item for channel long list
  • link both items to:

Add the TV channel information to the item’s metadata (e.g. favorites):

That’s it.
Have fun with the widget.

maxmaximax

Changelog

Version 0.1

  • initial release

Resources

uid: Enigma2_v01
tags: []
props:
  parameters:
    - description: Device name
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: Item for Power Channel
      label: Power
      name: itemPower
      required: false
      type: TEXT
    - context: item
      description: Item for Mute
      label: Mute
      name: itemMute
      required: false
      type: TEXT
    - context: item
      description: Item for Channel
      label: Channels
      name: itemChannel
      required: false
      type: TEXT
    - context: item
      description: Item for Channel Favorites
      label: Channel Favorites
      name: itemChannelFavorites
      required: false
      type: TEXT
    - description: Enter command for CH+ (e.g. CHANNEL_UP or RIGHT)
      label: Command for CH+
      name: CommandChannelUp
      required: false
      type: TEXT
    - description: Enter command for CH- (e.g. CHANNEL_DOWN or LEFT)
      label: Command for CH-
      name: CommandChannelDown
      required: false
      type: TEXT
    - context: item
      description: Prrogram Title of the current Channel
      label: Program Title
      name: itemProgramTitle
      required: false
      type: TEXT
    - context: item
      description: Description of the current Channel
      label: Program Description
      name: itemProgramDescription
      required: false
      type: TEXT
    - context: item
      description: Item for Volume
      label: Volume
      name: itemVolume
      required: false
      type: TEXT
    - description: Set minimum Volume (default = 0)
      label: Minimum Volume
      name: MinimumVolume
      required: false
      type: INTEGER
    - description: Set maximum Volume (default = 100)
      label: Maximum Volume
      name: MaximumVolume
      required: false
      type: INTEGER
    - description: Set Volume Stepsize (default = 1)
      label: Volume Stepsize
      name: VolumeStepsize
      required: false
      type: DECIMAL
  parameterGroups: []
timestamp: Sep 30, 2022, 5:29:32 PM
component: f7-card
config:
  class:
    - no-padding
  outline: true
  style:
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.3)
    noShadow: false
  title: =props.title
slots:
  default:
    - component: f7-row
      config:
        class:
          - margin-top-half
          - margin-left-half
          - margin-right-half
          - margin-bottom-half
      slots:
        default:
          - component: f7-col
            config:
              width: "25"
            slots:
              default:
                - component: f7-segmented
                  config:
                    class:
                      - segmented-strong
                    style:
                      --f7-button-border-radius: 4px
                      --f7-button-fill-hover-bg-color: var(--f7-theme-color)
                      --f7-button-padding-horizontal: 0px
                      --f7-button-padding-vertical: 0px
                      --f7-segmented-strong-between-buttons: 5px
                      --f7-segmented-strong-bg-color: transparent
                      --f7-segmented-strong-button-font-weight: 300
                      --f7-segmented-strong-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), 0.07)
                      --f7-segmented-strong-padding: 0px
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: toggle
                          actionCommand: ON
                          actionCommandAlt: OFF
                          actionItem: =props.itemPower
                          class:
                            - padding-top-half
                            - display-flex
                            - flex-direction-column
                          fill: "=(items[props.itemPower].state === 'ON') ? true : false"
                          icon-f7: power
                          iconSize: 15
                          outline: true
                          style:
                            --f7-button-border-color: var(--f7-card-outline-border-color)
                            --f7-button-border-width: 1px
                            font-size: 8px
                            height: auto
                          text: ON/OFF
          - component: f7-col
            config:
              large: "45"
              width: "50"
            slots:
              default:
                - component: f7-segmented
                  config:
                    style:
                      --f7-button-border-radius: 4px
                      --f7-button-font-size: 12px
                      --f7-button-font-weight: 300
                      --f7-button-outline-border-width: 1px
                      --f7-button-padding-horizontal: 0px
                      --f7-button-padding-vertical: 5px
                      --f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
                    visible: true
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: variable
                          actionVariable: favorites
                          actionVariableValue: "=vars.favorites || vars.favorites === undefined ? false : true"
                          class:
                            - display-flex
                            - flex-direction-column
                          fill: "=(vars.favorites || vars.favorites === undefined) || items[props.itemPower].state === 'OFF' ? false : true"
                          icon-material: favorite
                          iconSize: 15px
                          outline: true
                          style:
                            --f7-button-border-color: var(--f7-card-outline-border-color)
                            color: "=(items[props.itemPower].state === 'ON') ? '' : 'var(--f7-card-outline-border-color)'"
                            height: 24px
                      - component: oh-button
                        config:
                          action: variable
                          actionVariable: all_channels
                          actionVariableValue: "=vars.all_channels || vars.all_channels === undefined ? false : true"
                          class:
                            - display-flex
                            - flex-direction-column
                          fill: "=(vars.all_channels || vars.all_channels === undefined) || items[props.itemPower].state === 'OFF' ? false : true"
                          icon-material: live_tv
                          iconSize: 15px
                          outline: true
                          style:
                            --f7-button-border-color: var(--f7-card-outline-border-color)
                            color: "=(items[props.itemPower].state === 'ON') ? '' : 'var(--f7-card-outline-border-color)'"
                            height: 24px
                - component: f7-segmented
                  config:
                    style:
                      --f7-button-border-radius: 4px
                      --f7-button-font-size: 12px
                      --f7-button-font-weight: 300
                      --f7-button-outline-border-width: 1px
                      --f7-button-padding-horizontal: 0px
                      --f7-button-padding-vertical: 5px
                      --f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
                      margin-top: 3px
                    visible: true
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionCommand: =props.CommandChannelDown
                          actionItem: Enigma2_RemoteKeys
                          class:
                            - display-flex
                            - flex-direction-column
                          outline: true
                          style:
                            --f7-button-border-color: var(--f7-card-outline-border-color)
                            color: "=(items[props.itemPower].state === 'ON') ? '' : 'var(--f7-card-outline-border-color)'"
                            height: 24px
                          text: CH-
                      - component: oh-button
                        config:
                          action: command
                          actionCommand: =props.CommandChannelUp
                          actionItem: Enigma2_RemoteKeys
                          class:
                            - display-flex
                            - flex-direction-column
                          outline: true
                          style:
                            --f7-button-border-color: var(--f7-card-outline-border-color)
                            color: "=(items[props.itemPower].state === 'ON') ? '' : 'var(--f7-card-outline-border-color)'"
                            height: 24px
                          text: CH+
          - component: f7-col
            config:
              width: "25"
            slots:
              default:
                - component: f7-segmented
                  config:
                    class:
                      - segmented-strong
                    style:
                      --f7-button-border-radius: 4px
                      --f7-button-fill-hover-bg-color: var(--f7-theme-color)
                      --f7-button-padding-horizontal: 0px
                      --f7-button-padding-vertical: 0px
                      --f7-segmented-strong-between-buttons: 5px
                      --f7-segmented-strong-bg-color: transparent
                      --f7-segmented-strong-button-font-weight: 300
                      --f7-segmented-strong-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), 0.07)
                      --f7-segmented-strong-padding: 0px
                    visible: "=(items[props.itemPower].state === 'ON') ? true : false"
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: toggle
                          actionCommand: ON
                          actionCommandAlt: OFF
                          actionItem: =props.itemMute
                          class:
                            - display-flex
                            - flex-direction-column
                            - padding-top-half
                          fill: "=(items[props.itemMute].state === 'ON') ? true : false"
                          icon-f7: speaker_slash
                          iconSize: 15px
                          outline: true
                          style:
                            --f7-button-border-color: var(--f7-card-outline-border-color)
                            --f7-button-border-width: 1px
                            font-size: 8px
                            height: auto
                          text: MUTE
    - component: f7-card
      config:
        outline: true
        visible: "=(items[props.itemPower].state === 'ON') ? true : false"
    - component: f7-row
      config:
        class:
          - margin-top-half
          - margin-left-half
          - margin-right-half
          - margin-bottom-half
        visible: "=(items[props.itemPower].state === 'ON') ? true : false"
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: f7-row
                  config: {}
                  slots:
                    default:
                      - component: f7-col
                        config:
                          width: "10"
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                class:
                                  - float-left
                                material: live_tv
                                size: 15
                                style:
                                  color: "=(items[props.itemPower].state === 'ON') ? 'var(--f7-theme-color)' : 'var(--f7-card-outline-border-color)'"
                      - component: f7-col
                        config:
                          width: "90"
                        slots:
                          default:
                            - component: Label
                              config:
                                class:
                                  - float-left
                                style:
                                  color: "=(items[props.itemPower].state === 'ON') ? '' : 'var(--f7-card-outline-border-color)'"
                                  font-size: 12px
                                  overflow: hidden
                                  text-overflow: elipsis
                                text: =items[props.itemChannel].displayState
                - component: f7-row
                  config: {}
                  slots:
                    default:
                      - component: f7-col
                        config:
                          width: "10"
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                class:
                                  - float-left
                                f7: textbox
                                size: 15
                                style:
                                  color: "=(items[props.itemPower].state === 'ON') ? 'var(--f7-theme-color)' : 'var(--f7-card-outline-border-color)'"
                      - component: f7-col
                        config:
                          width: "90"
                        slots:
                          default:
                            - component: Label
                              config:
                                class:
                                  - float-left
                                style:
                                  color: "=(items[props.itemPower].state === 'ON') ? '' : 'var(--f7-card-outline-border-color)'"
                                  font-size: 12px
                                  overflow: hidden
                                  text-overflow: elipsis
                                text: =items[props.itemProgramTitle].state
                - component: f7-row
                  config: {}
                  slots:
                    default:
                      - component: f7-col
                        config:
                          width: "10"
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                class:
                                  - float-left
                                material: notes
                                size: 15
                                style:
                                  color: "=(items[props.itemPower].state === 'ON') ? 'var(--f7-theme-color)' : 'var(--f7-card-outline-border-color)'"
                      - component: f7-col
                        config:
                          width: "90"
                        slots:
                          default:
                            - component: Label
                              config:
                                class:
                                  - float-left
                                style:
                                  color: "=(items[props.itemPower].state === 'ON') ? '' : 'var(--f7-card-outline-border-color)'"
                                  font-size: 12px
                                  overflow: hidden
                                  text-overflow: elipsis
                                text: =items[props.itemProgramDescription].state
    - component: f7-card
      config:
        outline: true
        visible: "=vars.favorites === false && items[props.itemPower].state === 'ON' ? true : false"
    - component: f7-card
      config:
        class:
          - margin-left-half
          - margin-right-half
        noShadow: true
        style:
          --f7-button-border-radius: 4px
          --f7-button-font-size: 8px
          --f7-button-font-weight: 300
          --f7-button-outline-border-width: 1px
          --f7-button-padding-horizontal: 0px
          --f7-button-padding-vertical: 0px
          --f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
          --f7-button-text-transform: uppercase
          display: grid
          gap: 5px
          grid-template-columns: repeat(4, 1fr)
        visible: "=vars.favorites === false && items[props.itemPower].state === 'ON' ? true : false"
      slots:
        default:
          - component: oh-repeater
            config:
              for: option
              fragment: true
              itemOptions: =props.itemChannelFavorites
              sourceType: itemStateOptions
            slots:
              default:
                - component: oh-button
                  config:
                    action: command
                    actionCommand: =loop.option.value
                    actionItem: =props.itemChannel
                    fill: "=(loop.option.value == items[props.itemChannelFavorites].state) ? true : false"
                    outline: true
                    style:
                      --f7-button-border-color: var(--f7-card-outline-border-color)
                      height: auto
                    text: =loop.option.label
    - component: f7-card
      config:
        outline: true
        visible: "=vars.all_channels === false && items[props.itemPower].state === 'ON' ? true : false"
    - component: f7-card
      config:
        class:
          - margin-left-half
          - margin-right-half
        noShadow: true
        style:
          --f7-button-border-radius: 4px
          --f7-button-font-size: 8px
          --f7-button-font-weight: 300
          --f7-button-outline-border-width: 1px
          --f7-button-padding-horizontal: 0px
          --f7-button-padding-vertical: 0px
          --f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
          --f7-button-text-transform: uppercase
          display: grid
          gap: 5px
          grid-template-columns: repeat(4, 1fr)
        visible: "=vars.all_channels === false && items[props.itemPower].state === 'ON' ? true : false"
      slots:
        default:
          - component: oh-repeater
            config:
              for: option
              fragment: true
              itemOptions: =props.itemChannel
              sourceType: itemStateOptions
            slots:
              default:
                - component: oh-button
                  config:
                    action: command
                    actionCommand: =loop.option.value
                    actionItem: =props.itemChannel
                    fill: "=(loop.option.value == items[props.itemChannel].state) ? true : false"
                    outline: true
                    style:
                      --f7-button-border-color: var(--f7-card-outline-border-color)
                      height: auto
                    text: =loop.option.label
    - component: f7-row
      config:
        class:
          - margin-left-half
          - margin-right-half
          - margin-top-half
          - margin-bottom-half
        visible: "=(items[props.itemPower].state === 'ON') ? true : false"
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-slider-card
                  config:
                    item: =props.itemVolume
                    label: true
                    max: =props.MaximumVolume
                    min: =props.MinimumVolume
                    outline: true
                    scale: true
                    scaleSteps: 4
                    step: =props.VolumeStepsize

5 Likes