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