Cell Philips TV

Cell_Philips_TV

Widget to Control the Philips TV with ambilight, chanel, volume, power

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