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

Tags: #<Tag:0x00007fe73fc351d0> #<Tag:0x00007fe73fc34a00>

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

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…