[SOLVED] UI Widget: Intesis aircon controller; No commands send to items

I have started to develop a custom widget for my Intesis binding to control our air-conditioners.
Here is a first screen shot (looks much better on my iPhone):

Here is the according YAML config:

uid: intesis_aircon
tags: []
props:
  parameters:
    - context: item
      description: Item for power channel
      label: Power
      name: itemPower
      required: true
      type: TEXT
    - context: item
      description: Item for ambient temperature channel
      label: Ambient temperature
      name: itemAmbientTemp
      required: false
      type: TEXT
    - context: item
      description: Item for outdoor temperature channel
      label: Outdoor temperature
      name: itemOutdoorTemp
      required: false
      type: TEXT
    - context: item
      description: Item for target temperature channel
      label: Target temperature
      name: itemTargetTemp
      required: true
      type: TEXT
    - context: item
      description: Item for operation mode channel
      label: Operation mode
      name: itemMode
      required: true
      type: TEXT
    - context: item
      description: Item for fan speed channel
      label: Fan speed
      name: itemFanSpeed
      required: true
      type: TEXT
    - context: item
      description: Item for vanes up/down channel
      label: Vanes up/down
      name: itemVanesUD
      required: false
      type: TEXT
    - context: item
      description: Item for vanes left/right channel
      label: Vanes left/right
      name: itemVanesLR
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Nov 17, 2020, 9:10:11 AM
component: f7-block
config:
  style:
    --f7-button-text-color: var(--f7-text-color)
    --f7-button-bg-color: var(--f7-card-bg-color)
    --f7-theme-color-rgb: var(--f7-color-blue-rgb)
  class:
    - no-padding
slots:
  default:
    - component: f7-row
      config:
        class:
          - margin
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    action: toggle
                    actionItem: =(props.itemPower)
                    icon-f7: power
                    iconColor: '=(items[props.itemPower].state === "OFF") ? "red" : "green"'
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
          - component: f7-col
            config:
              visible: "=(props.itemAmbientTemp === undefined) ? false : true"
              style:
                text-align: center
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: house
                    color: green
                - component: Label
                  config:
                    text: =items[props.itemAmbientTemp].displayState
                    style:
                      white-space: nowrap
                      overflow: hidden
                      text-overflow: elipsis
          - component: f7-col
            config:
              visible: "=(props.itemOutdoorTemp === undefined) ? false : true"
              style:
                text-align: center
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: tree
                    color: green
                - component: Label
                  config:
                    text: =items[props.itemOutdoorTemp].displayState
                    style:
                      white-space: nowrap
                      overflow: hidden
                      text-overflow: elipsis
    - component: f7-row
      config:
        class:
          - justify-content-center
      slots:
        default:
          - component: oh-knob
            config:
              min: 18
              max: 30
              stepSize: 1
              size: 300
              item: =props.itemTargetTemp
    - component: f7-row
      config:
        class:
          - margin
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    class:
                      - margin
                      - display-flex
                      - flex-direction-column
                    action: command
                    actionItem: =(props.itemMode)
                    actionCommand: AUTO
                    icon-f7: arrow_2_circlepath
                    iconColor: '=(items[props.itemMode].state === "AUTO") ? "red" : "gray"'
                    text: AUTO
                    textColor: '=(items[props.itemMode].state === "AUTO") ? "black" : "gray"'
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
                      --f7-button-pressed-bg-color: transparent
                      font-size: 10px
                      height: auto
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    class:
                      - margin
                      - display-flex
                      - flex-direction-column
                    action: command
                    actionItem: =(props.itemMode)
                    actionCommand: HEAT
                    icon-f7: thermometer_sun
                    iconColor: '=(items[props.itemMode].state === "HEAT") ? "orange" : "gray"'
                    text: HEAT
                    textColor: '=(items[props.itemMode].state === "HEAT") ? "black" : "gray"'
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
                      --f7-button-pressed-bg-color: transparent
                      font-size: 10px
                      height: auto
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    class:
                      - margin
                      - display-flex
                      - flex-direction-column
                    action: command
                    actionItem: =(props.itemMode)
                    actionCommand: DRY
                    icon-f7: drop
                    iconColor: '=(items[props.itemMode].state === "DRY") ? "yellow" : "gray"'
                    text: DRY
                    textColor: '=(items[props.itemMode].state === "DRY") ? "black" : "gray"'
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
                      --f7-button-pressed-bg-color: transparent
                      font-size: 10px
                      height: auto
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    class:
                      - margin
                      - display-flex
                      - flex-direction-column
                    action: command
                    actionItem: =(props.itemMode)
                    actionCommand: FAN
                    icon-f7: wind
                    iconColor: '=(items[props.itemMode].state === "FAN") ? "white" : "gray"'
                    text: FAN
                    textColor: '=(items[props.itemMode].state === "FAN") ? "black" : "gray"'
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
                      --f7-button-pressed-bg-color: transparent
                      font-size: 10px
                      height: auto
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    class:
                      - margin
                      - display-flex
                      - flex-direction-column
                    action: command
                    actionItem: =(props.itemMode)
                    actionCommand: COOL
                    icon-f7: thermometer_snowflake
                    iconColor: '=(items[props.itemMode].state === "COOL") ? "blue" : "gray"'
                    text: COOL
                    textColor: '=(items[props.itemMode].state === "COOL") ? "blue" : "gray"'
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
                      --f7-button-pressed-bg-color: transparent
                      font-size: 10px
                      height: auto
    - component: f7-row
      config: {}
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionItem: =(props.itemFanSpeed)
                    class:
                      - margin
                      - display-flex
                      - flex-direction-column
                    icon-f7: chart_bar
                    iconColor: yellow
                    text: =items[props.itemFanSpeed].state
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
                      font-size: 10px
                      height: auto
          - component: f7-col
            config:
              visible: "=(props.itemVanesUD === undefined) ? false : true"
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionItem: =(props.itemVanesUD)
                    class:
                      - margin
                      - display-flex
                      - flex-direction-column
                    icon-f7: arrow_up_down_circle
                    iconColor: green
                    text: =items[props.itemVanesUD].state
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
                      --f7-button-pressed-bg-color: transparent
                      font-size: 10px
                      height: auto
          - component: f7-col
            config:
              visible: "=(props.itemVanesLR === undefined) ? false : true"
            slots:
              default:
                - component: oh-button
                  config:
                    action: popup
                    actionItem: =(props.itemVanesLR)
                    class:
                      - margin
                      - display-flex
                      - flex-direction-column
                    icon-f7: arrow_left_right_circle
                    iconColor: green
                    text: =items[props.itemVanesLR].state
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
                      --f7-button-pressed-bg-color: transparent
                      height: auto
                      font-size: 10px

I have just one issue and hope @RGroll or @ysc can help me as usual :wink:
My issue is that I cannot send commands to the configured items within the widget.
Changing the items outside the widget will reflect the state within, so definition should be ok.

Any Ideas / hints ???

1 Like

Part one solved myself, for FansSpeed and Vansecontrol I had to chanege the config to :

                - component: oh-button
                  config:
                    action: options
                    actionItem: =(props.itemFanSpeed)

Now trying to get mode and power right …

Solved the last issues also… :face_with_symbols_over_mouth:

1 Like

Sorry, @RGroll or @ysc one last Question on this behalf :

How can I configure a oh-knob to show “20 °C” instead of just “20” ???

As far as I can tell, this vue-component was used, which offers no option to do so.

So this has to be implemented - I opened an issue there. But maybe @ysc will be faster. :stuck_out_tongue:

1 Like

Thanks Rainer. :+1:

There’s
valueDisplayFunction Function Custom function to alter the display text (v) => v
but you can’t define functions in YAML so it has to be made accessible somehow with a different parameter specific to oh-knob, like suffix

2 Likes

@hmerk

I was able to show “xx °C” by adding the following expression in the Label field:

=items.myItem.state + " °C"

Could you please post the complete YAML for the knob, as it is not working for me.

@hmerk - I just realized you are using a knob cell.
I was using a Label Cell like so …

component: oh-label-cell
config:
  item: openHAB2Server_ItemIndoorTemp
  title: First Floor Temp
  stateAsHeader: true
  expandable: false
  icon: f7:thermometer
  label: =items.openHAB2Server_ItemIndoorTemp.state + " °C"

I don’t think there’s a label field in the knob cell config.

That’s what @ysc wrote, so I was wondering you found a solution.
For the label parameter, It might be enough to use .displayState instead of .state.
That’s what I use mostly…

@hmerk

I just started playing with custom widgets an love this one. Have you got it all working?

Yes, it is all working, still improvements possible.
You can find my latest YAML here:

README is not existing atm, but will come soon…

2 Likes

Thankyou Very much I have been playing around with it and got some things working.
I will start again :slight_smile:

I have 2 sensibo’s so I will adapt it for that as it has humidity sensor.

Adding Humidity will be easy,
Just copy one of the temp buttons, paste after outdoor temp, change icon to humidity and add a new config parameter for the according item…

2 Likes

Thankyou again for doing this.

I have adapted this for my aircons as I have two I still have some changes to make when I have time.

I created items using a model - Create Equipment from thing

You can see all it creates all the item names with a prefix of BedroomAircon

So to setup widget you only need this props and all the others are crated dynamically.
I also added a label

image

My 2 Aircons

I did change a couple of things to suit.

Work in progress

uid: Sensibo_ACcontroller
tags: []
props:
  parameters:
    - description: The Label at the top of the card
      label: Friendly name of your aircon eg. Lounge
      name: title
      required: false
      type: TEXT
    - description: The index of your items aircon foo_targetTemperature = foo
      label: The index name of your aircon
      name: airconditioner
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Dec 4, 2020, 10:44:34 PM
component: f7-block
config:
  style:
    --f7-button-text-color: var(--f7-text-color)
    --f7-button-bg-color: var(--f7-card-bg-color)
    --f7-theme-color-rgb: var(--f7-color-blue-rgb)
  class:
    - no-padding
slots:
  default:
    - component: Label
      config:
        class:
          - margin
          - no-padding
        text: =props.title
        style:
          text-align: center
          height: auto
          font-size: 16px
          --f7-button-text-color: var(--f7-text-color)
          --f7-button-bg-color: var(--f7-card-bg-color)
          --f7-theme-color-rgb: var(--f7-color-blue-rgb)
    - component: f7-row
      config:
        class:
          - margin
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    action: toggle
                    actionItem: =(props.airconditioner + "_MasterSwitch")
                    actionCommand: ON
                    actionCommandAlt: OFF
                    icon-f7: power
                    iconSize: 28
                    iconColor: '=(items[props.airconditioner + "_MasterSwitch"].state === "OFF") ? "red" : "green"'
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
                      height: auto
                      font-size: 12px
          - component: f7-col
            config:
              style:
                text-align: right
                
            slots:
              default:
                - component: Label
                  config:
                    text: =items[props.airconditioner + "_CurrentTemperature"].state.displayState || items[props.airconditioner + "_CurrentTemperature"].state 
                    style:
                      white-space: nowrap
                      text-overflow: elipsis
                      heigh: auto
                      font-size: 12px               
                - component: Label
                  config:
                    text: =items[props.airconditioner + "_CurrentHumidity"].displayState || items[props.airconditioner + "_CurrentHumidity"].state

                    style:
                      white-space: nowrap
                      text-overflow: elipsis
                      heigh: auto
                      font-size: 12px
    - component: f7-row
      config:
        class:
          - justify-content-center
      slots:
        default:
          - component: oh-knob
            config:
              min: 18
              max: 30
              stepSize: 1
              size: 270
              item: =[props.airconditioner + '_targetTemperature']
    - component: f7-row
      config:
        class:
          - margin
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    class:
                      - margin
                      - display-flex
                      - flex-direction-column
                    action: command
                    actionItem: =(props.airconditioner + '_mode')
                    actionCommand: ="auto"
                    icon-f7: arrow_2_circlepath
                    iconColor: '=(items[props.airconditioner + "_mode"].state === "auto") ? "red" : "gray"'
                    text: AUTO
                    textColor: '=(items[props.airconditioner + "_mode"].state === "auto") ? "red" : "gray"'
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
                      --f7-button-pressed-bg-color: transparent
                      font-size: 8px
                      height: auto
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    class:
                      - margin
                      - display-flex
                      - flex-direction-column
                    action: command
                    actionItem: =(props.airconditioner + '_mode')
                    actionCommand: ="heat"
                    icon-f7: thermometer_sun
                    iconColor: '=(items[props.airconditioner + "_mode"].state === "heat") ? "orange" : "gray"'
                    text: HEAT
                    textColor: '=(items[props.airconditioner + "_mode"].state === "heat") ? "black" : "gray"'
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
                      --f7-button-pressed-bg-color: transparent
                      font-size: 8px
                      height: auto
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    class:
                      - margin
                      - display-flex
                      - flex-direction-column
                    action: command
                    actionItem: =(props.airconditioner + '_mode')
                    actionCommand: ="dry"
                    icon-f7: drop
                    iconColor: '=(items[props.airconditioner + "_mode"].state === "dry") ? "yellow" : "gray"'
                    text: DRY
                    textColor: '=(items[props.airconditioner + "_mode"].state === "dry") ? "black" : "gray"'
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
                      --f7-button-pressed-bg-color: transparent
                      font-size: 8px
                      height: auto
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    class:
                      - margin
                      - display-flex
                      - flex-direction-column
                    action: command
                    actionItem: =(props.airconditioner + '_mode')
                    actionCommand: ="fan"
                    icon-f7: wind
                    iconColor: '=(items[props.airconditioner + "_mode"].state === "fan") ? "white" : "gray"'
                    text: FAN
                    textColor: '=(items[props.airconditioner + "_mode"].state === "fan") ? "black" : "gray"'
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
                      --f7-button-pressed-bg-color: transparent
                      font-size: 8px
                      height: auto
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    class:
                      - margin
                      - display-flex
                      - flex-direction-column
                    action: command
                    actionItem: =(props.airconditioner + '_mode')
                    actionCommand: ="cpp;"
                    icon-f7: thermometer_snowflake
                    iconColor: '=(items[props.airconditioner + "_mode"].state === "cool") ? "blue" : "gray"'
                    text: COOL
                    textColor: '=(items[props.airconditioner + "_mode"].state === "cool") ? "blue" : "gray"'
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
                      --f7-button-pressed-bg-color: transparent
                      font-size: 8px
                      height: auto
    - component: f7-row
      config: {}
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    action: options
                    actionItem: =(props.airconditioner + '_fanLevel')
                    class:
                      - margin
                      - display-flex
                      - flex-direction-column
                    icon-f7: chart_bar
                    iconColor: yellow
                    size: 20
                    text: =items[props.airconditioner + '_fanLevel'].state
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
                      font-size: 12px
                      height: auto
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    action: options
                    actionItem: =(props.airconditioner + '_swingMode')
                    class:
                      - margin
                      - display-flex
                      - flex-direction-column
                    icon-f7: arrow_up_down_circle
                    iconColor: green
                    size: 20
                    text: =items[props.airconditioner + '_swingMode'].state
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: transparent
                      --f7-button-pressed-bg-color: transparent
                      font-size: 12px
                      height: auto

4 Likes