Conditioner Card for Daikin AC

Hi!
I would like to present my first widget based on widget “Thermostat” found on community.
This improved widget allow you to monitor and control the AC device seting it to Cool mode, Heat mode, Dry mode and Fan mode.

image

When Cool or Heat mode are selected, it show the control buttons to set Setpoint temperature.

When Dry or Fan mode are selected, it shows FAN speed (actually doesn’t work in this release, I’m looking on how make it work.)

If Trendline is defined on props, it become clickable to show graph of temperature trend.

I would thank for users that give me this idea, and if anyone have suggestions, just tell me. I’m always looking for new ideas!

Screenshots

Default view when Conditioner is OFF:

image

View of Conditioner ON with Dehumidifier Mode in action:

image

View when Conditioner ON with Cool mode selected. This mode allow to control also Set Point temperature on the right.

image

Trendline is clickable to show graph in different ways:

Version 2.0

Changelog

Version 2.0

  • Completely restyled
  • Added settings to control FAN DIRECTION and FAN SPEED
  • Recolored all values to improve readability
  • Aded auto adapt to Light/Dark mode

Version 0.3

  • trendline color based on MODE in use. White when conditioner is OFF. (thanks to JustinG)

Version 0.2

  • translated all MODES to english
  • added support for FAN speed (thanks to JustinG)
  • changed trandline color to red gradient
  • when OFF, MODES icons are invisible

Version 0.1

  • initial release

Resources

YAML Code:

uid: Conditioner Card for Daikin AC
tags:
  - MadeByEvil
props:
  parameters:
    - description: Color
      label: color
      name: color
      required: false
      type: TEXT
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - default: snow
      description: Icon on top of the card ( only f7 icons without "f7:" )
      label: Icon
      name: icon
      required: false
      type: TEXT
    - context: item
      description: Item to show CURRENT TEMPERATURE of the room
      label: Temperature Item
      name: temp_item
      required: false
      type: TEXT
    - context: item
      description: Item to manage FAN speed
      label: Fan Item
      name: set_speed_item
      required: false
      type: TEXT
    - context: text
      description: "value=label - Example: LEVEL_1=Fan Speed 1"
      label: Array
      name: tArray
      required: false
      type: TEXT
      multiple: true
    - context: item
      description: Item to manage SET POINT temperature
      label: SetPoint Item
      name: set_temp_item
      required: false
      type: TEXT
    - context: item
      description: Item to turn ON/OFF conditioner
      label: Power ON/OFF Item
      name: power
      required: false
      type: TEXT
    - context: item
      description: Item to manage the MODE (HEAT,COLD,DEHUMIDIFIER,FAN)
      label: Mode Item
      name: heating_item
      required: false
      type: TEXT
    - context: item
      description: Trendline item
      label: Trendline
      name: widgettrend
      required: false
      type: TEXT
  parameterGroups:
    - name: widgetAction
      context: action
      label: Action
      description: Action to perform when the element is clicked
timestamp: Aug 21, 2022, 5:31:40 PM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    height: 200px
    margin-left: 5px
    margin-right: 5px
slots:
  default:
    - component: oh-link
      config:
        actionPropsParameterGroup: widgetAction
        color: white
        class:
          - no-padding
          - no-margin
        style:
          max-height: 192px
          width: 80%
          height: 80%
          position: absolute
          top: 0
          left: 0
          z-index: 98
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -10px
          left: 10px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              size: 18
              style:
                margin-right: 10px
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -20px
          left: 16px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=items[props.temp_item].displayState ? items[props.temp_item].displayState : items[props.temp_item].state"
              style:
                font-size: 20px
                font-weight: 400
                margin-left: 0px
                margin-top: 0px
                color: '=items[props.temp_item].state >= "22" ? "red" : items[props.temp_item].state <= "20" ? "blue" :"white"'
    - component: oh-button
      config:
        visible: '=items[props.heating_item].state == "HEAT" && items[props.power].state == "ON" ? "true" : items[props.heating_item].state == "COLD" && items[props.power].state == "ON" ? "true" : "false"'
        iconColor: '=items[props.heating_item].state == "DEHUMIDIFIER" && items[props.power].state == "ON" ? "yellow" : items[props.heating_item].state == "HEAT" && items[props.power].state == "ON" ? "red" : items[props.heating_item].state == "COLD" && items[props.power].state == "ON" ? "blue" : items[props.heating_item].state == "FAN" && items[props.power].state == "ON" ? "orange" : "gray"'
        iconF7: arrow_up_circle
        iconSize: 35
        action: command
        actionItem: =props.set_temp_item
        actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) + 0.5
        style:
          position: absolute
          top: 40px
          right: 0px
          height: 33px
          background: transparent
          z-index: 98
    - component: oh-button
      config:
        visible: '=items[props.heating_item].state == "HEAT" && items[props.power].state == "ON" ? "true" : items[props.heating_item].state == "COLD" && items[props.power].state == "ON" ? "true" : "false"'
        iconColor: '=items[props.heating_item].state == "DEHUMIDIFIER" && items[props.power].state == "ON" ? "yellow" : items[props.heating_item].state == "HEAT" && items[props.power].state == "ON" ? "red" : items[props.heating_item].state == "COLD" && items[props.power].state == "ON" ? "blue" : items[props.heating_item].state == "FAN" && items[props.power].state == "ON" ? "orange" : "gray"'
        iconF7: arrow_down_circle
        iconSize: 35
        action: command
        actionItem: =props.set_temp_item
        actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) - 0.5
        style:
          position: absolute
          top: 104px
          right: 0px
          height: 33px
          background: transparent
          z-index: 98
    - component: Label
      config:
        visible: '=items[props.heating_item].state == "HEAT" && items[props.power].state == "ON" ? "true" : items[props.heating_item].state == "COLD" && items[props.power].state == "ON" ? "true" : "false"'
        text: '=items[props.set_temp_item].state == "UNDEF" ? " " : items[props.set_temp_item].state'
        style:
          font-size: 12px
          position: absolute
          right: 8px
          top: 80px
    - component: oh-button
      config:
        visible: "=props.set_speed_item && items[props.power].state == 'ON' ? true : false"
        iconColor: '=items[props.heating_item].state == "DEHUMIDIFIER" && items[props.power].state == "ON" ? "yellow" : items[props.heating_item].state == "HEAT" && items[props.power].state == "ON" ? "red" : items[props.heating_item].state == "COLD" && items[props.power].state == "ON" ? "blue" : items[props.heating_item].state == "FAN" && items[props.power].state == "ON" ? "orange" : "gray"'
        iconF7: arrow_up_circle
        iconSize: 35
        action: command
        actionItem: =props.set_speed_item
        actionCommand: =props.tArray[Math.min(props.tArray.join('').substring(0,props.tArray.join('').search(items[props.set_speed_item].state)).split('=').length,props.tArray.length-1)].split('=')[0]
        style:
          position: absolute
          top: 40px
          right: 40px
          height: 35px
          background: transparent
          z-index: 98
    - component: oh-button
      config:
        visible: "=props.set_speed_item && items[props.power].state == 'ON' ? true : false"
        iconColor: '=items[props.heating_item].state == "DEHUMIDIFIER" && items[props.power].state == "ON" ? "yellow" : items[props.heating_item].state == "HEAT" && items[props.power].state == "ON" ? "red" : items[props.heating_item].state == "COLD" && items[props.power].state == "ON" ? "blue" : items[props.heating_item].state == "FAN" && items[props.power].state == "ON" ? "orange" : "gray"'
        iconF7: arrow_down_circle
        iconSize: 35
        action: command
        actionItem: =props.set_speed_item
        actionCommand: =props.tArray[Math.max(props.tArray.join('').substring(0,props.tArray.join('').search(items[props.set_speed_item].state)).split('=').length-2,0)].split('=')[0]
        style:
          position: absolute
          top: 104px
          right: 40px
          height: 35px
          background: transparent
          z-index: 98
    - component: Label
      config:
        visible: "=props.set_speed_item && items[props.power].state == 'ON' ? true : false"
        text: "=((items[props.set_speed_item].state) ? props.tArray[props.tArray.join('').substring(0,props.tArray.join('').search(items[props.set_speed_item].state)).split('=').length-1].split('=')[1] : 'Push a button')"
        style:
          color: red
          font-size: 12px
          position: absolute
          right: 58px
          top: 80px
    - component: f7-block
      config:
        style:
          position: absolute
          top: 50px
          left: 15px
          width: "=props.set_temp_item ? 'calc(100% - 55px)' : '100%' "
          height: 120px
      slots:
        default:
          - component: oh-trend
            config:
              trendItem: =props.widgettrend
              trendGradient: =[(items[props.heating_item].state == 'FAN' && items[props.power].state == "ON")?('orange'):(items[props.heating_item].state == 'COLD' && items[props.power].state == "ON")?('blue'):(items[props.heating_item].state == 'HEAT' && items[props.power].state == "ON")?('red'):(items[props.heating_item].state == 'DEHUMIDIFIER' && items[props.power].state == "ON")?('yellow'):('white'),('#6A6A6A')]
              style:
                --f7-theme-color-bg-color: transparent
                background: var(--f7-theme-color-bg-color)
                filter: opacity(50%)
                position: absolute
                width: 100%
                height: 100%
                top: 0px
                left: 15px
                z-index: 1
  footer:
    - component: oh-toggle
      config:
        item: =props.power
        color: '=items[props.heating_item].state == "DEHUMIDIFIER" && items[props.power].state == "ON" ? "yellow" : items[props.heating_item].state == "HEAT" && items[props.power].state == "ON" ? "red" : items[props.heating_item].state == "COLD" && items[props.power].state == "ON" ? "blue" : items[props.heating_item].state == "FAN" && items[props.power].state == "ON" ? "orange" : "gray"'
        style:
          --f7-toggle-height: 20px
          --f7-toggle-width: 40px
          font-size: 100%
          top: 125px
    - component: oh-button
      config:
        visible: '=items[props.power].state == "ON" ? true : false'
        iconColor: '=items[props.heating_item].state == "COLD" && items[props.power].state == "ON" ? "blue" : "gray"'
        iconF7: snow
        iconSize: 25
        action: command
        actionItem: =props.heating_item
        actionCommand: COLD
        style:
          position: absolute
          top: 133px
          left: 25%
          height: 35px
          background: transparent
          z-index: 98
    - component: oh-button
      config:
        visible: '=items[props.power].state == "ON" ? true : false'
        iconColor: '=items[props.heating_item].state == "HEAT" && items[props.power].state == "ON" ? "red" : "gray"'
        iconF7: flame
        iconSize: 20
        action: command
        actionItem: =props.heating_item
        actionCommand: HEAT
        style:
          position: absolute
          top: 133px
          left: 45%
          height: 35px
          background: transparent
          z-index: 98
    - component: oh-button
      config:
        visible: '=items[props.power].state == "ON" ? true : false'
        iconColor: '=items[props.heating_item].state == "DEHUMIDIFIER" && items[props.power].state == "ON" ? "yellow" : "gray"'
        iconF7: drop
        iconSize: 20
        action: command
        actionItem: =props.heating_item
        actionCommand: DEHUMIDIFIER
        style:
          position: absolute
          top: 133px
          left: 65%
          height: 35px
          background: transparent
          z-index: 98
    - component: oh-button
      config:
        visible: '=items[props.power].state == "ON" ? true : false'
        iconColor: '=items[props.heating_item].state == "FAN" && items[props.power].state == "ON" ? "orange" : "gray"'
        iconF7: wind
        iconSize: 20
        action: command
        actionItem: =props.heating_item
        actionCommand: FAN
        style:
          position: absolute
          top: 133px
          left: 85%
          height: 35px
          background: transparent
          z-index: 98

Conditioner Card for Daikin AC_V2

uid: Conditioner Card for Daikin AC_V2
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title_item
      required: false
      type: TEXT
    - context: item
      description: Item to show CURRENT TEMPERATURE of the room
      label: Temperature Item
      name: temp_item
      required: false
      type: TEXT
    - context: item
      description: Item to manage FAN SPEED
      label: Fan Speed Item
      name: fanspeed_item
      required: false
      type: TEXT
    - context: item
      description: Item to manage FAN DIRECTION
      label: Fan Direction Item
      name: fandirection_item
      required: false
      type: TEXT
    - context: item
      description: Item to manage SET POINT temperature
      label: SetPoint Item
      name: set_temp_item
      required: false
      type: TEXT
    - context: item
      description: Item to turn ON/OFF conditioner
      label: Power ON/OFF Item
      name: power_item
      required: false
      type: TEXT
    - context: item
      description: Item to manage the MODE (AUTO,HEAT,COLD,DEHUMIDIFIER,FAN)
      label: Mode Item
      name: heating_item
      required: false
      type: TEXT
    - default: "false"
      description: Show/Hide shadow for the widget card
      label: Widget shadow
      name: boxshadow
      required: false
      type: BOOLEAN
  parameterGroups:
    - name: widgetAction
      context: action
      label: Action
      description: Action to perform when the element is clicked
timestamp: Oct 19, 2022, 4:15:45 PM
component: f7-card
config:
  noShadow: false
  padding: false
  style:
    background: "=themeOptions.dark === 'dark' ? rgb(35, 35, 35) : rgb(240, 240, 240)"
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: "=props.boxshadow === true ? (themeOptions.dark === 'dark' ? '5px 5px 15px 1px rgba(240,240,240,0.5)' : '5px 5px 15px 1px rgba(35,35,35,0.5)') : '0px 0px 0px 0px rgba(0,0,0,0)'"
    height: auto
    min-height: 200px
    margin-left: 5px
    margin-right: 5px
    padding: 0px
slots:
  content:
    - component: f7-card-content
      config:
        style:
          height: auto
      slots:
        default:
          - component: oh-icon
            config:
              icon: iconify:lucide:sun-snow
              style:
                color: rgb(33, 150, 243)
                position: absolute
                top: 25px
              width: 40px
          - component: Label
            config:
              style:
                color: "=themeOptions.dark === 'dark' ? rgb(35, 35, 35) : rgb(240, 240, 240)"
                font-size: 15px
                font-weight: 500
                margin-left: 50px
              text: =props.title_item
          - component: oh-toggle
            config:
              color: blue
              item: =props.power_item
              style:
                position: absolute
                right: 3%
                top: 20px
                --f7-toggle-height: 20px
                --f7-toggle-inactive-color: red
                --f7-toggle-width: 40px
                z-index: 98
          - component: f7-row
            config: {}
            slots:
              default:
                - component: f7-chip
                  config:
                    style:
                      font-size: 13px
                      color: '=items[props.temp_item].state >= "21" ? "red" : items[temp_item].state >= "19" ? "black" : rgb(33, 150, 243)'
                      font-weight: 600
                      left: 65px
                      position: absolute
                    text: "=items[props.temp_item].state ? items[props.temp_item].state : items[props.temp_item].displayState"
                - component: f7-chip
                  config:
                    font-size: 13px
                    visible: '=items[props.heating_item].state == "HEAT" && items[props.power_item].state == "ON" ? "true" : items[props.heating_item].state == "COLD" && items[props.power_item].state == "ON" ? "true" : items[props.heating_item].state == "AUTO" && items[props.power_item].state == "ON" ? "true" : "false"'
                    style:
                      background: transparent
                      color: '=items[props.heating_item].state == "DEHUMIDIFIER" && items[props.power_item].state == "ON" ? "yellow" : items[props.heating_item].state == "HEAT" && items[props.power_item].state == "ON" ? "red" : items[props.heating_item].state == "AUTO" && items[props.power_item].state == "ON" ? "rgb(89, 220, 111)" : items[props.heating_item].state == "COLD" && items[props.power_item].state == "ON" ? "rgb(33, 150, 243)" : items[props.heating_item].state == "FAN" && items[props.power_item].state == "ON" ? "orange" : "gray"'
                      font-weight: 600
                      left: 130px
                      position: absolute
                    text: '=items[props.set_temp_item].displayState ? items[props.set_temp_item].displayState : items[props.set_temp_item].state == "UNDEF" ? "Not set" : items[props.set_temp_item].state'
                - component: oh-button
                  config:
                    action: command
                    actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) + 0.5
                    actionItem: =props.set_temp_item
                    iconColor: '=items[props.heating_item].state == "DEHUMIDIFIER" && items[props.power_item].state == "ON" ? "yellow" : items[props.heating_item].state == "HEAT" && items[props.power_item].state == "ON" ? "red" : items[props.heating_item].state == "AUTO" && items[props.power_item].state == "ON" ? "green" : items[props.heating_item].state == "COLD" && items[props.power_item].state == "ON" ? "blue" : items[props.heating_item].state == "FAN" && items[props.power_item].state == "ON" ? "orange" : "gray"'
                    iconF7: arrow_up_circle
                    iconSize: 25
                    style:
                      background: transparent
                      height: 33px
                      position: absolute
                      right: 1%
                      top: 60px
                      z-index: 98
                    visible: '=items[props.heating_item].state == "HEAT" && items[props.power_item].state == "ON" ? "true" : items[props.heating_item].state == "COLD" && items[props.power_item].state == "ON" ? "true" : items[props.heating_item].state == "AUTO" && items[props.power_item].state == "ON" ? "true" : "false"'
                - component: oh-button
                  config:
                    action: command
                    actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) - 0.5
                    actionItem: =props.set_temp_item
                    iconColor: '=items[props.heating_item].state == "DEHUMIDIFIER" && items[props.power_item].state == "ON" ? "yellow" : items[props.heating_item].state == "HEAT" && items[props.power_item].state == "ON" ? "red" : items[props.heating_item].state == "AUTO" && items[props.power_item].state == "ON" ? "green" : items[props.heating_item].state == "COLD" && items[props.power_item].state == "ON" ? "blue" : items[props.heating_item].state == "FAN" && items[props.power_item].state == "ON" ? "orange" : "gray"'
                    iconF7: arrow_down_circle
                    iconSize: 25
                    style:
                      background: transparent
                      height: 33px
                      position: absolute
                      right: 1%
                      margin-top: 90px
                      z-index: 98
                    visible: '=items[props.heating_item].state == "HEAT" && items[props.power_item].state == "ON" ? "true" : items[props.heating_item].state == "COLD" && items[props.power_item].state == "ON" ? "true" : items[props.heating_item].state == "AUTO" && items[props.power_item].state == "ON" ? "true" : "false"'
          - component: f7-row
            config: {}
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 75%
                  slots:
                    default:
                      - component: oh-trend
                        config:
                          style:
                            --f7-theme-color-bg-color: transparent
                            background: var(--f7-theme-color-bg-color)
                            filter: opacity(100%)
                            margin-left: 40px
                            margin-top: 10px
                            height: 120px
                            z-index: 98
                          trendGradient:
                            - orange
                            - rgb(33, 150, 243)
                          trendItem: =props.temp_item
                - component: f7-block
                  config:
                    visible: '=items[props.power_item].state == "ON" ? true : false'
                    style:
                      display: flex
                      width: 100%
                      justify-content: space-between
                  slots:
                    default:
                      - component: oh-link
                        config:
                          visible: '=items[props.power_item].state == "ON" ? true : false'
                          action: command
                          actionItem: =props.heating_item
                          actionCommand: AUTO
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                height: 20px
                                icon: iconify:ic:outline-auto-fix-high
                                style:
                                  color: '=items[props.heating_item].state == "AUTO" && items[props.power_item].state == "ON" ? "rgb(89, 220, 111)" : "gray"'
                      - component: oh-link
                        config:
                          visible: '=items[props.power_item].state == "ON" ? true : false'
                          action: command
                          actionItem: =props.heating_item
                          actionCommand: COLD
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                height: 20px
                                icon: iconify:iconoir:snow-flake
                                style:
                                  color: '=items[props.heating_item].state == "COLD" && items[props.power_item].state == "ON" ? "rgb(33, 150, 243)" : "gray"'
                      - component: oh-link
                        config:
                          visible: '=items[props.power_item].state == "ON" ? true : false'
                          action: command
                          actionItem: =props.heating_item
                          actionCommand: HEAT
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                height: 20px
                                icon: iconify:material-symbols:mode-heat-outline
                                style:
                                  color: '=items[props.heating_item].state == "HEAT" && items[props.power_item].state == "ON" ? "red" : "gray"'
                      - component: oh-link
                        config:
                          visible: '=items[props.power_item].state == "ON" ? true : false'
                          action: command
                          actionItem: =props.heating_item
                          actionCommand: DEHUMIDIFIER
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                height: 20px
                                icon: iconify:entypo:drop
                                style:
                                  color: '=items[props.heating_item].state == "DEHUMIDIFIER" && items[props.power_item].state == "ON" ? "rgb(204, 204, 0)" : "gray"'
                      - component: oh-link
                        config:
                          visible: '=items[props.power_item].state == "ON" ? true : false'
                          action: command
                          actionItem: =props.heating_item
                          actionCommand: FAN
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                height: 20px
                                icon: iconify:la:fan
                                style:
                                  color: '=items[props.heating_item].state == "FAN" && items[props.power_item].state == "ON" ? "rgb(191, 0, 255)" : "gray"'
          - component: f7-block
            config:
              visible: =items[props.power_item].state == "ON
            slots:
              default:
                - component: Label
                  config:
                    visible: '=items[props.power_item].state == "ON" ? true : false'
                    text: "Fan options:"
                    style:
                      margin-top: 25px
                      color: red
                - component: oh-link
                  config:
                    visible: '=items[props.power_item].state == "ON" ? true : false'
                    action: options
                    actionItem: =props.fanspeed_item
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 20px
                          icon: iconify:material-symbols:mode-fan
                          style:
                            color: '=items[props.heating_item].state == "DEHUMIDIFIER" && items[props.power_item].state == "ON" ? "rgb(204, 204, 0)" : items[props.heating_item].state == "HEAT" && items[props.power_item].state == "ON" ? "red" : items[props.heating_item].state == "AUTO" && items[props.power_item].state == "ON" ? "rgb(89, 220, 111)" : items[props.heating_item].state == "COLD" && items[props.power_item].state == "ON" ? "rgb(33, 150, 243)" : items[props.heating_item].state == "FAN" ? "rgb(191,0,255)" : "gray"'
                            margin-left: 15px
                - component: oh-link
                  config:
                    visible: '=items[props.power_item].state == "ON" ? true : false'
                    action: options
                    actionItem: =props.fandirection_item
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 20px
                          icon: iconify:gis:direction
                          style:
                            color: '=items[props.heating_item].state == "DEHUMIDIFIER" && items[props.power_item].state == "ON" ? "rgb(204, 204, 0)" : items[props.heating_item].state == "HEAT" && items[props.power_item].state == "ON" ? "red" : items[props.heating_item].state == "AUTO" && items[props.power_item].state == "ON" ? "rgb(89, 220, 111)" : items[props.heating_item].state == "COLD" && items[props.power_item].state == "ON" ? "rgb(33, 150, 243)" : items[props.heating_item].state == "FAN" ? "rgb(191,0,255)" : "gray"'
                            margin-top: 10px
                            margin-bottom: 10px
                            margin-left: 35px
  default:
    - component: oh-link
      config:
        actionPropsParameterGroup: widgetAction
        class:
          - no-padding
          - no-margin
        color: white
        style:
          height: 70%
          left: 0
          max-height: 192px
          position: absolute
          top: 0
          width: 80%
          z-index: 999

Thanks all for your feedbacks!

8 Likes

@JustinG , how can i color the trendGradient based on MODE selected?
i’ve tried different syntax but none works.
i would like to set blue for COLD, red for HEAT, orange for FAN and yellow for DEHUMIDIFIER, but i’m not able to set it…

thanks a lot

This is a known issue with the array syntax:

When you define items in an array like this, the expression parser does not process the entries so you cannot set dynamic expressions.

Fortunately there’s a fairly sensible workaround. YAML is built to also parse JSON formatted data, so anything you can render in YAML you can also make in JSON. A JSON array is just enclosed in brackets so we can set our array with a single line definition.

trendGradient: ['red','white']

Gives exactly the same result as the multi-line definition above. But now there’s one critical difference; we can build the JSON array with an expression. So you could have something such as:

trendGradient: =[(items.heatingItem.state == 'cool')?('blue'):('red'),'white']

perfect! i had to adapt a little bit the code but it pointed me in the right direction :slight_smile:

thanks a lot man!

Hi, the plugin is really cool! thanks for your work!

I have configured my plugin for Gree air conditioning but I have a small problem and I need help … when I turn on different modes, the air conditioning starts in a given mode … but the plug disappears that it is turned on, the icon turns off literally after a few seconds … can anyone help me how to fix it?

I’ve attached a gif showing the problem…

Edit: sometimes the mode buttons don’t work… not every time I can turn on the mode…

Have you checked the modes names are the same for your conditioner as the ones set in the widget?

the names in the modes were different, I changed them in the same way as I have … the best thing is that the widget works and the buttons too… communication with the air conditioning works… only the widget buttons “turn off” after a few seconds… if I press it a second time, it’s stays… and sometimes the buttons don’t respond at all. I’m sending the code…

uid: Conditioner Card
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title_item
      required: false
      type: TEXT
    - context: item
      description: Item to show CURRENT TEMPERATURE of the room
      label: Temperature Item
      name: temp_item
      required: false
      type: TEXT
    - context: item
      description: Item to manage Fan SPEED
      label: Fan Speed Item
      name: fanspeed_item
      required: false
      type: TEXT
    - context: item
      description: Item to manage Fan DIRECTION
      label: Fan Direction Item
      name: fandirection_item
      required: false
      type: TEXT
    - context: item
      description: Item to manage SET POINT temperature
      label: SetPoint Item
      name: set_temp_item
      required: false
      type: TEXT
    - context: item
      description: Item to turn ON/OFF conditioner
      label: Power ON/OFF Item
      name: power_item
      required: false
      type: TEXT
    - context: item
      description: Item to manage the MODE (Auto,Heat,Cool,Dry,Fan)
      label: Mode Item
      name: heating_item
      required: false
      type: TEXT
    - default: "false"
      description: Show/Hide shadow for the widget card
      label: Widget shadow
      name: boxshadow
      required: false
      type: BOOLEAN
  parameterGroups:
    - name: widgetAction
      context: action
      label: Action
      description: Action to perform when the element is clicked
timestamp: Jan 8, 2023, 2:09:06 PM
component: f7-card
config:
  noShadow: false
  padding: false
  style:
    background: "=themeOptions.dark === 'dark' ? rgb(35, 35, 35) : rgb(240, 240, 240)"
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: "=props.boxshadow === true ? (themeOptions.dark === 'dark' ? '5px 5px 15px 1px rgba(240,240,240,0.5)' : '5px 5px 15px 1px rgba(35,35,35,0.5)') : '0px 0px 0px 0px rgba(0,0,0,0)'"
    height: auto
    min-height: 200px
    margin-left: 5px
    margin-right: 5px
    padding: 0px
slots:
  content:
    - component: f7-card-content
      config:
        style:
          height: auto
      slots:
        default:
          - component: oh-icon
            config:
              icon: iconify:lucide:sun-snow
              style:
                color: rgb(33, 150, 243)
                position: absolute
                top: 25px
              width: 40px
          - component: Label
            config:
              style:
                color: "=themeOptions.dark === 'dark' ? rgb(35, 35, 35) : rgb(240, 240, 240)"
                font-size: 15px
                font-weight: 500
                margin-left: 50px
              text: =props.title_item
          - component: oh-toggle
            config:
              color: blue
              item: =props.power_item
              style:
                position: absolute
                right: 3%
                top: 20px
                --f7-toggle-height: 20px
                --f7-toggle-inactive-color: red
                --f7-toggle-width: 40px
                z-index: 98
          - component: f7-row
            config: {}
            slots:
              default:
                - component: f7-chip
                  config:
                    style:
                      font-size: 13px
                      color: '=items[props.temp_item].state >= "21" ? "red" : items[temp_item].state >= "19" ? "black" : rgb(33, 150, 243)'
                      font-weight: 600
                      left: 65px
                      position: absolute
                    text: "=items[props.temp_item].state ? items[props.temp_item].state : items[props.temp_item].displayState"
                - component: f7-chip
                  config:
                    font-size: 13px
                    visible: '=items[props.heating_item].state == "Heat" && items[props.power_item].state == "ON" ? "true" : items[props.heating_item].state == "Cool" && items[props.power_item].state == "ON" ? "true" : items[props.heating_item].state == "Auto" && items[props.power_item].state == "ON" ? "true" : "false"'
                    style:
                      background: transparent
                      color: '=items[props.heating_item].state == "Dry" && items[props.power_item].state == "ON" ? "yellow" : items[props.heating_item].state == "Heat" && items[props.power_item].state == "ON" ? "red" : items[props.heating_item].state == "Auto" && items[props.power_item].state == "ON" ? "rgb(89, 220, 111)" : items[props.heating_item].state == "Cool" && items[props.power_item].state == "ON" ? "rgb(33, 150, 243)" : items[props.heating_item].state == "Fan" && items[props.power_item].state == "ON" ? "orange" : "gray"'
                      font-weight: 600
                      left: 130px
                      position: absolute
                    text: '=items[props.set_temp_item].displayState ? items[props.set_temp_item].displayState : items[props.set_temp_item].state == "UNDEF" ? "Not set" : items[props.set_temp_item].state'
                - component: oh-button
                  config:
                    action: command
                    actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) + 0.5
                    actionItem: =props.set_temp_item
                    iconColor: '=items[props.heating_item].state == "Dry" && items[props.power_item].state == "ON" ? "yellow" : items[props.heating_item].state == "Heat" && items[props.power_item].state == "ON" ? "red" : items[props.heating_item].state == "Auto" && items[props.power_item].state == "ON" ? "green" : items[props.heating_item].state == "Cool" && items[props.power_item].state == "ON" ? "blue" : items[props.heating_item].state == "Fan" && items[props.power_item].state == "ON" ? "orange" : "gray"'
                    iconF7: arrow_up_circle
                    iconSize: 25
                    style:
                      background: transparent
                      height: 33px
                      position: absolute
                      right: 1%
                      top: 60px
                      z-index: 98
                    visible: '=items[props.heating_item].state == "Heat" && items[props.power_item].state == "ON" ? "true" : items[props.heating_item].state == "Cool" && items[props.power_item].state == "ON" ? "true" : items[props.heating_item].state == "Auto" && items[props.power_item].state == "ON" ? "true" : "false"'
                - component: oh-button
                  config:
                    action: command
                    actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) - 0.5
                    actionItem: =props.set_temp_item
                    iconColor: '=items[props.heating_item].state == "Dry" && items[props.power_item].state == "ON" ? "yellow" : items[props.heating_item].state == "Heat" && items[props.power_item].state == "ON" ? "red" : items[props.heating_item].state == "Auto" && items[props.power_item].state == "ON" ? "green" : items[props.heating_item].state == "Cool" && items[props.power_item].state == "ON" ? "blue" : items[props.heating_item].state == "Fan" && items[props.power_item].state == "ON" ? "orange" : "gray"'
                    iconF7: arrow_down_circle
                    iconSize: 25
                    style:
                      background: transparent
                      height: 33px
                      position: absolute
                      right: 1%
                      margin-top: 90px
                      z-index: 98
                    visible: '=items[props.heating_item].state == "Heat" && items[props.power_item].state == "ON" ? "true" : items[props.heating_item].state == "Cool" && items[props.power_item].state == "ON" ? "true" : items[props.heating_item].state == "Auto" && items[props.power_item].state == "ON" ? "true" : "false"'
          - component: f7-row
            config: {}
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 75%
                  slots:
                    default:
                      - component: oh-trend
                        config:
                          style:
                            --f7-theme-color-bg-color: transparent
                            background: var(--f7-theme-color-bg-color)
                            filter: opacity(100%)
                            margin-left: 40px
                            margin-top: 10px
                            height: 120px
                            z-index: 98
                          trendGradient:
                            - orange
                            - rgb(33, 150, 243)
                          trendItem: =props.temp_item
                - component: f7-block
                  config:
                    visible: '=items[props.power_item].state == "ON" ? true : false'
                    style:
                      display: flex
                      width: 100%
                      justify-content: space-between
                  slots:
                    default:
                      - component: oh-link
                        config:
                          visible: '=items[props.power_item].state == "ON" ? true : false'
                          action: command
                          actionItem: =props.heating_item
                          actionCommand: Auto
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                height: 20px
                                icon: iconify:material-symbols:location-automation
                                style:
                                  color: '=items[props.heating_item].state == "Auto" && items[props.power_item].state == "ON" ? "rgb(89, 220, 111)" : "gray"'
                      - component: oh-link
                        config:
                          visible: '=items[props.power_item].state == "ON" ? true : false'
                          action: command
                          actionItem: =props.heating_item
                          actionCommand: Cool
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                height: 20px
                                icon: iconify:iconoir:snow-flake
                                style:
                                  color: '=items[props.heating_item].state == "Cool" && items[props.power_item].state == "ON" ? "rgb(33, 150, 243)" : "gray"'
                      - component: oh-link
                        config:
                          visible: '=items[props.power_item].state == "ON" ? true : false'
                          action: command
                          actionItem: =props.heating_item
                          actionCommand: Heat
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                height: 20px
                                icon: iconify:material-symbols:mode-heat-outline
                                style:
                                  color: '=items[props.heating_item].state == "Heat" && items[props.power_item].state == "ON" ? "red" : "gray"'
                      - component: oh-link
                        config:
                          visible: '=items[props.power_item].state == "ON" ? true : false'
                          action: command
                          actionItem: =props.heating_item
                          actionCommand: Dry
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                height: 20px
                                icon: iconify:entypo:drop
                                style:
                                  color: '=items[props.heating_item].state == "Dry" && items[props.power_item].state == "ON" ? "rgb(204, 204, 0)" : "gray"'
                      - component: oh-link
                        config:
                          visible: '=items[props.power_item].state == "ON" ? true : false'
                          action: command
                          actionItem: =props.heating_item
                          actionCommand: Fan
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                height: 20px
                                icon: iconify:material-symbols:mode-fan-outline
                                style:
                                  color: '=items[props.heating_item].state == "Fan" && items[props.power_item].state == "ON" ? "rgb(191, 0, 255)" : "gray"'
          - component: f7-block
            config:
              visible: =items[props.power_item].state == "ON
            slots:
              default:
                - component: Label
                  config:
                    visible: '=items[props.power_item].state == "ON" ? true : false'
                    text: "Fan options:"
                    style:
                      margin-top: 25px
                      color: red
                - component: oh-link
                  config:
                    visible: '=items[props.power_item].state == "ON" ? true : false'
                    action: options
                    actionItem: =props.fanspeed_item
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 20px
                          icon: iconify:material-symbols:mode-fan
                          style:
                            color: '=items[props.heating_item].state == "Dry" && items[props.power_item].state == "ON" ? "rgb(204, 204, 0)" : items[props.heating_item].state == "Heat" && items[props.power_item].state == "ON" ? "red" : items[props.heating_item].state == "Auto" && items[props.power_item].state == "ON" ? "rgb(89, 220, 111)" : items[props.heating_item].state == "Cool" && items[props.power_item].state == "ON" ? "rgb(33, 150, 243)" : items[props.heating_item].state == "Fan" ? "rgb(191,0,255)" : "gray"'
                            margin-left: 15px
                - component: oh-link
                  config:
                    visible: '=items[props.power_item].state == "ON" ? true : false'
                    action: options
                    actionItem: =props.fandirection_item
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 20px
                          icon: iconify:gis:direction
                          style:
                            color: '=items[props.heating_item].state == "Dry" && items[props.power_item].state == "ON" ? "rgb(204, 204, 0)" : items[props.heating_item].state == "Heat" && items[props.power_item].state == "ON" ? "red" : items[props.heating_item].state == "Auto" && items[props.power_item].state == "ON" ? "rgb(89, 220, 111)" : items[props.heating_item].state == "Cool" && items[props.power_item].state == "ON" ? "rgb(33, 150, 243)" : items[props.heating_item].state == "Fan" ? "rgb(191,0,255)" : "gray"'
                            margin-top: 10px
                            margin-bottom: 10px
                            margin-left: 35px
  default:
    - component: oh-link
      config:
        actionPropsParameterGroup: widgetAction
        class:
          - no-padding
          - no-margin
        color: white
        style:
          height: 70%
          left: 0
          max-height: 192px
          position: absolute
          top: 0
          width: 80%
          z-index: 999

my modes are

everything is ok… and yet it is not :sweat: :sweat: :sweat: :sweat:

i can think it’s related to modes that are missing…
you have fan, dry, heat, cool and auto, but none for Eco, ON and OFF…
try to add them…

I added the rest of the modes, unfortunately, it does not work anymore … I also tried on the first widget, the same error appears

Edit:
it’s not the widget’s fault, I checked it on another one and the effect is repeated… I don’t know what’s wrong then… I’m helpless.

Do you know who I can turn to for help here? if it’s not the widget’s fault?

I think i have it.
Remove completely all references to toggle/switch on off.
It will work, pretty sure.

you mean remove the air conditioning completely - will you remove things? or from location/model? and adding again?

On the widget remove toggle part or avoid to define the toggle item

Sorry for the stupid question earlier haha ​​i didn’t understand completely… i know what you meant and how you wanted to solve it… thank you for your help.

I managed to solve the problem in a different way … tried different things … on github I found a thread related to gree air conditioning and even though the commands are: Auto, Fan, Dry … someone noticed the commands auto, fan, dry . … all in lowercase. Maybe it’s simple and trivial, but it wasn’t logical for my skills… I always try to write according to the commands, keeping the letters as they are in the commands…

I would like to thank you again for your help, I really appreciate it.