Widget to Control the Philips TV with ambilight, chanel, volume, power with configurable color
Changelog
Version 0.1
- initial release
Resources
uid: Cell_TV
tags: []
props:
parameters:
- description: Header on top of the card
label: Header
name: header
required: false
type: TEXT
- description: in rgba() or HEX or empty
label: Foreground Color
name: fgcolor
required: false
type: TEXT
- context: item
label: Power
name: power
required: false
type: TEXT
- context: item
label: Volume
name: volume
required: false
type: TEXT
- context: item
label: App Icon
name: appIcon
required: false
type: TEXT
- context: item
label: Channel
name: channel
required: false
type: TEXT
- context: item
label: App Name
name: appName
required: false
type: TEXT
- context: item
label: Ambilight
name: ambilight
required: false
type: TEXT
- context: item
label: Ambilight & HUE
name: ambilightHUE
required: false
type: TEXT
parameterGroups: []
timestamp: Aug 5, 2022, 10:52:04 PM
component: f7-card
config:
style:
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
height: 120px
margin-left: 5px
margin-right: 5px
noShadow: false
padding: 0px
slots:
content:
- component: f7-block
config:
style:
display: flex
flex-direction: row
left: 16px
position: absolute
top: -5px
slots:
default:
- component: f7-icon
config:
f7: tv
size: 18
style:
margin-right: 10px
- component: Label
config:
style:
font-size: 12px
margin-top: 0px
text: "=props.header ? props.header : ''"
- component: f7-block
config:
style:
flex-direction: row
left: 16px
position: absolute
top: 50px
width: 60%
slots:
default:
- component: oh-button
config:
action: options
actionItem: =[props.channel]
color: =props.fgcolor
fill: false
style:
font-size: 14px
font-weight: 600
margin-left: 0px
margin-top: 0px
text-align: left
text: =items[props.channel].displayState || items[props.channel].state
- component: oh-button
config:
action: options
actionItem: =[props.appName]
color: =props.fgcolor
fill: false
style:
font-size: 14px
font-weight: 600
margin-left: 0px
margin-top: 0px
text-align: left
text: =items[props.appName].displayState || items[props.appName].state
- null
- component: oh-button
config:
action: command
actionCommand: '=(items[props.power].state !== "ON") ? "ON" : "OFF"'
actionItem: =props.power
iconColor: "=(items[props.power].state === 'OFF') ? ((themeOptions.dark === 'dark') ? 'white' : 'black') : props.fgcolor"
iconF7: power
iconSize: 25
style:
background: transparent
height: 35px
position: absolute
right: 12px
- component: oh-button
config:
action: command
actionCommand: '=(items[props.ambilight].state !== "ON") ? "ON" : "OFF"'
actionItem: =props.ambilight
iconColor: "=(items[props.ambilight].state === 'OFF') ? ((themeOptions.dark === 'dark') ? 'white' : 'black') : props.fgcolor"
iconF7: lightbulb
iconSize: 25
style:
background: transparent
height: 35px
position: absolute
right: 12px
top: 45px
- component: oh-button
config:
action: command
actionCommand: '=(items[props.ambilightHUE].state !== "ON") ? "ON" : "OFF"'
actionItem: =props.ambilightHUE
iconColor: "=(items[props.ambilightHUE].state === 'OFF') ? ((themeOptions.dark === 'dark') ? 'white' : 'black') : props.fgcolor"
iconF7: link
iconSize: 25
style:
background: transparent
height: 35px
position: absolute
right: 12px
top: 75px
- component: oh-slider
config:
color: =props.fgcolor
item: =props.volume
max: 100
min: 0
style:
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 3px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-knob-size: 12px
bottom: -75px
left: 20px
position: absolute
width: calc(100% - 205px)
- component: oh-image
config:
item: =props.appIcon
style:
bottom: -78px
height: 100px
position: absolute
right: 70px