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

hmerk · November 17, 2020, 8:20am

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
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 ???

hmerk · November 17, 2020, 9:39am

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 …

hmerk · November 17, 2020, 9:53am

Solved the last issues also…

hmerk · November 17, 2020, 10:20am

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” ???

RGroll · November 17, 2020, 10:50am

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.

hmerk · November 17, 2020, 11:01am

Thanks Rainer.

ysc · November 17, 2020, 11:10am

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…

randye007 · November 21, 2020, 11:38pm

@hmerk

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

=items.myItem.state + " °C"

hmerk · November 22, 2020, 8:13am

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

randye007 · November 22, 2020, 11:30am

@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.

hmerk · November 22, 2020, 11:41am

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…

denominator · December 3, 2020, 5:37am

@hmerk

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

hmerk · December 3, 2020, 8:06am

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

README is not existing atm, but will come soon…

denominator · December 3, 2020, 8:11am

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

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

hmerk · December 3, 2020, 8:15am

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…

denominator · December 4, 2020, 10:51pm

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

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