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:

Changelog

Version 0.1

  • initial release

Resources

YAML Code:

uid: Conditioner Card
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Icon on top of the card ( only f7 icons without "f7:" )
      label: Icon
      name: icon
      required: false
      type: TEXT
    - context: item
      label: Current Temperature
      name: temp_item
      required: false
      type: TEXT
    - context: item
      label: Set Temperature
      name: set_temp_item
      required: false
      type: TEXT
    - context: item
      label: Set Speed
      name: set_speed_item
      required: false
      type: TEXT
    - context: item
      label: Power ON/OFF
      name: power
      required: false
      type: TEXT
    - context: item
      description: Modalità item
      label: Modalità
      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 3, 2022, 6:58:42 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].displayState == "Pompa di calore" ? "true" : items[props.heating_item].displayState == "Condizionatore" ? "true" : "false"'
        iconColor: '=items[props.heating_item].displayState == "Deumidificatore" && items[props.power].state == "ON" ? "yellow" : items[props.heating_item].displayState == "Pompa di calore" && items[props.power].state == "ON" ? "red" : items[props.heating_item].displayState == "Condizionatore" && items[props.power].state == "ON" ? "blue" : items[props.heating_item].displayState == "Ventola" && 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].displayState == "Pompa di calore" ? "true" : items[props.heating_item].displayState == "Condizionatore" ? "true" : "false"'
        iconColor: '=items[props.heating_item].displayState == "Deumidificatore" && items[props.power].state == "ON" ? "yellow" : items[props.heating_item].displayState == "Pompa di calore" && items[props.power].state == "ON" ? "red" : items[props.heating_item].displayState == "Condizionatore" && items[props.power].state == "ON" ? "blue" : items[props.heating_item].displayState == "Ventola" && 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].displayState == "Pompa di calore" ? "true" : items[props.heating_item].displayState == "Condizionatore" ? "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 ? true : false"
        iconColor: '=items[props.heating_item].displayState == "Deumidificatore" && items[props.power].state == "ON" ? "yellow" : items[props.heating_item].displayState == "Pompa di calore" && items[props.power].state == "ON" ? "red" : items[props.heating_item].displayState == "Condizionatore" && items[props.power].state == "ON" ? "blue" : items[props.heating_item].displayState == "Ventola" && items[props.power].state == "ON" ? "orange" : "gray"'
        iconF7: arrow_up_circle
        iconSize: 35
        action: command
        actionItem: =props.set_speed_item
        actionCommand: =Number(items[props.set_speed_item].displayState.split(' ')[0]) + 1
        style:
          position: absolute
          top: 40px
          right: 40px
          height: 35px
          background: transparent
          z-index: 98
    - component: oh-button
      config:
        visible: "=props.set_speed_item ? true : false"
        iconColor: '=items[props.heating_item].displayState == "Deumidificatore" && items[props.power].state == "ON" ? "yellow" : items[props.heating_item].displayState == "Pompa di calore" && items[props.power].state == "ON" ? "red" : items[props.heating_item].displayState == "Condizionatore" && items[props.power].state == "ON" ? "blue" : items[props.heating_item].displayState == "Ventola" && items[props.power].state == "ON" ? "orange" : "gray"'
        iconF7: arrow_down_circle
        iconSize: 35
        action: command
        actionItem: =props.set_speed_item
        actionCommand: COOL
        style:
          position: absolute
          top: 104px
          right: 40px
          height: 35px
          background: transparent
          z-index: 98
    - component: Label
      config:
        visible: "=props.set_speed_item ? true : false"
        text: =items[props.set_speed_item].state
        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:
                - "#aa2b1d"
                - "#cc561e"
                - "#ef8d32"
                - "#beca5c"
              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: 98
  footer:
    - component: oh-toggle
      config:
        item: =props.power
        color: '=items[props.heating_item].displayState == "Deumidificatore" && items[props.power].state == "ON" ? "yellow" : items[props.heating_item].displayState == "Pompa di calore" && items[props.power].state == "ON" ? "red" : items[props.heating_item].displayState == "Condizionatore" && items[props.power].state == "ON" ? "blue" : items[props.heating_item].displayState == "Ventola" && items[props.power].state == "ON" ? "orange" : "grey"'
        style:
          --f7-toggle-height: 20px
          --f7-toggle-width: 40px
          font-size: 100%
          top: 125px
    - component: oh-button
      config:
        iconColor: '=items[props.heating_item].displayState == "Condizionatore" && 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:
        iconColor: '=items[props.heating_item].displayState == "Pompa di calore" && 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:
        iconColor: '=items[props.heating_item].displayState == "Deumidificatore" && 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:
        iconColor: '=items[props.heating_item].displayState == "Ventola" && 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

Thanks all for your feedbacks!

8 Likes