Trying to modify Thermostat to have a bit more functionality

Add-ons UIs
1

Continuing the discussion from [OH3] Main UI Examples: Thank you @Integer for sharing your UI widgets. I would like to add the ability to:

  • set the operating mode on your heating_item label to an options command, allowing the user to select the operating mode. This is my attempt that is not working. I have taken the oh-link out of the code for now to allow for the abiltiy to click what is now set_temp_mode 
component: Label
config:
action: options
actionItem: set_temp_mode
actionOptions: 2=Cool,1=Heat,0=Off
visible: "=props.set_temp_mode ? true : false"
text: =items[props.set_temp_mode].state
style:
font-size: 12px
margin-left: 5px
margin-top: 0px
  • hide components based on state of set_temp_mode This enable/disable the setpoints based on the operating mode of the thermostat 2=Cool,1=Heat,0=Off I don’t know how to make the expressions for each component. Here’s the gist with triple Square brackets to make them esily seen
visible: items.set_temp_mode.state === "HEAT" && =props.set_temp_heat ? true : false

Here’s the modified code.

uid: Cell_Temp_Card_1
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
    - description: in rgba() or HEX or empty
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      label: Current Temperature
      name: temp_item
      required: false
      type: TEXT
    - context: item
      label: Cooling Temperature Setpoint
      name: set_temp_cool
      required: false
      type: TEXT
    - context: item
      label: Heating Temperature Setpoint
      name: set_temp_heat
      required: false
      type: TEXT
    - context: item
      label: Current Humidity
      name: humidity_item
      required: false
      type: TEXT
    - context: item
      description: Options Item
      label: HVAC Mode
      name: set_temp_mode
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Nov 13, 2021, 2:03:45 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)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 120px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          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: 22px
                font-weight: 400
                margin-left: 0px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -40px
          left: 12px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: drop
              size: 18
              visible: "=props.humidity_item ? true : false"
          - component: Label
            config:
              visible: "=props.humidity_item ? true : false"
              text: =items[props.humidity_item].displayState
              style:
                font-size: 12px
                margin-left: 5px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -63px
          left: 12px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              visible: items.set_temp_mode.state === "HEAT"
              f7: flame
              size: 18
          - component: f7-icon
            config:
              visible: items.set_temp_mode.state === "COOL"
              f7: snow
              size: 18
          - component: Label
            config:
              action: options
              actionItem: set_temp_mode
              actionOptions: 2=Cool,1=Heat,0=Off
              visible: "=props.set_temp_mode ? true : false"
              text: =items[props.set_temp_mode].state
              style:
                font-size: 12px
                margin-left: 5px
                margin-top: 0px
    - component: oh-button
      config:
        visible: items.set_temp_mode.state === "HEAT" && =props.set_temp_heat ? true : false
        iconColor: red
        iconF7: arrow_up_circle
        iconSize: 35
        action: command
        actionItem: =props.set_temp_heat
        actionCommand: =Number(items[props.set_temp_heat].state.split(' ')[0]) + 1
        style:
          position: absolute
          top: 12px
          right: 10px
          height: 35px
          background: transparent
    - component: oh-button
      config:
        visible: items.set_temp_mode.state === "HEAT" && =props.set_temp_heat ? true : false
        iconColor: red
        iconF7: arrow_down_circle
        iconSize: 35
        action: command
        actionItem: =props.set_temp_heat
        actionCommand: =Number(items[props.set_temp_heat].state.split(' ')[0]) - 1
        style:
          position: absolute
          top: 74px
          right: 10px
          height: 35px
          background: transparent
    - component: Label
      config:
        visible: items.set_temp_mode.state === "HEAT" && =props.set_temp_heat ? true : false
        text: =items[props.set_temp_heat].state
        style:
          font-size: 12px
          position: absolute
          right: 15px
          top: 50px
    - component: oh-button
      config:
        visible: items.set_temp_mode.state === "COOL" && =props.set_temp_cool ? true : false
        iconColor: blue
        iconF7: arrow_up_circle
        iconSize: 35
        action: command
        actionItem: =props.set_temp_cool
        actionCommand: =Number(items[props.set_temp_cool].state.split(' ')[0]) + 1
        style:
          position: absolute
          top: 12px
          right: 10px
          height: 35px
          background: transparent
    - component: oh-button
      config:
        visible: items.set_temp_mode.state === "COOL" && =props.set_temp_cool ? true : false
        iconColor: blue
        iconF7: arrow_down_circle
        iconSize: 35
        action: command
        actionItem: =props.set_temp_cool
        actionCommand: =Number(items[props.set_temp_cool].state.split(' ')[0]) - 1
        style:
          position: absolute
          top: 74px
          right: 10px
          height: 35px
          background: transparent
    - component: Label
      config:
        visible: items.set_temp_mode.state === "COOL" && =props.set_temp_cool ? true : false
        text: =items[props.set_temp_cool].state
        style:
          font-size: 12px
          position: absolute
          right: 15px
          top: 50px
    - component: f7-block
      config:
        style:
          position: absolute
          top: 15px
          left: 15px
          width: "=props.set_temp_heat ? 'calc(100% - 55px)' : '100%' "
          height: 120px
      slots:
        default:
          - component: oh-trend
            config:
              trendItem: =props.temp_item
              trendGradient:
                - "#aa2b1d"
                - "#cc561e"
                - "#ef8d32"
                - "#beca5c"
              style:
                --f7-theme-color-bg-color: transparent
                background: var(--f7-theme-color-bg-color)
                filter: opacity(30%)
                position: absolute
                width: 100%
                height: 100%
                top: 0px
                left: 0px
                z-index: 1

Thank you for any assistance.

2

Here is my weather widget

3

I managed to get what I wanted by removing the trend line.

uid: Cell_Temp_Card_1
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
    - description: in rgba() or HEX or empty
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      label: Current Temperature
      name: temp_item
      required: false
      type: TEXT
    - context: item
      label: Set Temperature Heat Setpoint
      name: heat_temp_item
      required: false
      type: TEXT
    - context: item
      label: Set Temperature Cool Setpoint
      name: cool_temp_item
      required: false
      type: TEXT
    - context: item
      label: Current Humidity
      name: humidity_item
      required: false
      type: TEXT
    - context: item
      description: on/off item
      label: Heating control item
      name: heating_item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Nov 17, 2021, 9:24:56 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)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 120px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          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: 22px
                font-weight: 400
                margin-left: 0px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -40px
          left: 12px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: drop
              size: 18
              visible: "=props.humidity_item ? true : false"
          - component: Label
            config:
              visible: "=props.humidity_item ? true : false"
              text: =items[props.humidity_item].displayState
              style:
                font-size: 12px
                margin-left: 5px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -63px
          left: 12px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              visible: "=props.heating_item ? true : false"
              f7: '=(items[props.heating_item].state == "HEAT") ? "thermometer_sun" : (items[props.heating_item].state == "COOL") ? "thermometer_snowflake" : (items[props.heating_item].state == "AUTO") ? "thermometer" : (items[props.heating_item].state == "OFF") ? "power" : "multiply_circle"'
              color: '=(items[props.heating_item].state == "HEAT") ? "red" : (items[props.heating_item].state == "COOL") ? "blue" : (items[props.heating_item].state == "AUTO") ? "black" : (items[props.heating_item].state == "OFF") ? "black" : "gray"'
              size: 18
          - component: oh-button
            config:
              action: options
              outline: false
              actionOptions: 2=Cool,1=Heat,0=Off
              actionItem: =props.heating_item
              item: =props.heating_item
              text: =items[props.heating_item].state
              fontSize: "22"
              icon: f7:thermometer
              style:
                position: absolute
                bottom: -4px
                left: 23px
    - component: oh-button
      config:
        visible: '=(items[props.heating_item].state == "HEAT") ? true : false'
        iconColor: red
        iconF7: arrow_up_circle
        iconSize: 35
        action: command
        actionItem: =props.heat_temp_item
        actionCommand: =Number(items[props.heat_temp_item].state.split(' ')[0]) + 1
        style:
          position: absolute
          top: 12px
          right: 10px
          height: 35px
          background: transparent
    - component: oh-button
      config:
        visible: '=(items[props.heating_item].state == "COOL") ? true : false'
        iconColor: blue
        iconF7: arrow_up_circle
        iconSize: 35
        action: command
        actionItem: =props.cool_temp_item
        actionCommand: =Number(items[props.cool_temp_item].state.split(' ')[0]) + 1
        style:
          position: absolute
          top: 12px
          right: 10px
          height: 35px
          background: transparent
    - component: oh-button
      config:
        visible: '=(items[props.heating_item].state == "HEAT") ? true : false'
        iconColor: red
        iconF7: arrow_down_circle
        iconSize: 35
        action: command
        actionItem: =props.heat_temp_item
        actionCommand: =Number(items[props.heat_temp_item].state.split(' ')[0]) - 1
        style:
          position: absolute
          top: 74px
          right: 10px
          height: 35px
          background: transparent
    - component: oh-button
      config:
        visible: '=(items[props.heating_item].state == "COOL") ? true : false'
        iconColor: blue
        iconF7: arrow_down_circle
        iconSize: 35
        action: command
        actionItem: =props.cool_temp_item
        actionCommand: =Number(items[props.cool_temp_item].state.split(' ')[0]) - 1
        style:
          position: absolute
          top: 74px
          right: 10px
          height: 35px
          background: transparent
    - component: Label
      config:
        visible: '=(items[props.heating_item].state == "HEAT") ? true : false'
        text: =items[props.heat_temp_item].state
        style:
          font-size: 12px
          position: absolute
          right: 15px
          top: 50px
    - component: Label
      config:
        visible: '=(items[props.heating_item].state == "COOL") ? true : false'
        text: =items[props.cool_temp_item].state
        style:
          font-size: 12px
          position: absolute
          right: 15px
          top: 50px
4

I played with this and kept the trend line but removed the ability to click it. same concept you were going for, i think.

Do you know how to display different text for the heating mode? I use 0=off, 1= on,2=auto so my states show up 1,2,3 but I would prefer they show as on/off/auto. Anyway, here’s my widget if this helps you any
image

uid: Cell_Temp_Card_1
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
    - description: in rgba() or HEX or empty
      label: Background Color
      name: bgcolor
      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: Current Humidity
      name: humidity_item
      required: false
      type: TEXT
    - context: item
      description: on/off item
      label: Heating control item
      name: heating_item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Nov 22, 2021, 3:05:06 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)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 120px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          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: 22px
                font-weight: 400
                margin-left: 0px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -40px
          left: 12px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: drop
              size: 18
              visible: "=props.humidity_item ? true : false"
          - component: Label
            config:
              visible: "=props.humidity_item ? true : false"
              text: =items[props.humidity_item].displayState
              style:
                font-size: 12px
                margin-left: 5px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -63px
          left: 12px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              visible: "=props.heating_item ? true : false"
              f7: flame
              color: '=(items[props.heating_item].state == "0") ? "red" : (items[props.heating_item].state == "1") ? "green" : (items[props.heating_item].state == "2") ? "blue"'
              size: 18
          - component: oh-button
            config:
              action: options
              outline: false  
              actionOptions: 2=Auto,1=On,0=Off
              actionItem: =props.heating_item
              item: =props.heating_item
              text: =items[props.heating_item].state
              fontSize: "22"
              icon: f7:thermometer
              style:
                position: absolute
                bottom: -5px
                left: 35px
    - component: oh-button
      config:
        visible: "=props.set_temp_item ? true : false"
        iconColor: red
        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: 12px
          right: 10px
          height: 35px
          background: transparent
    - component: oh-button
      config:
        visible: "=props.set_temp_item ? true : false"
        iconColor: red
        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: 74px
          right: 10px
          height: 35px
          background: transparent
    - component: Label
      config:
        visible: "=props.set_temp_item ? true : false"
        text: =items[props.set_temp_item].state
        style:
          font-size: 12px
          position: absolute
          right: 15px
          top: 50px
    - component: f7-block
      config:
        style:
          position: absolute
          top: 15px
          left: 15px
          width: "=props.set_temp_item ? 'calc(100% - 55px)' : '100%' "
          height: 90px
      slots:
        default:
          - component: oh-trend
            config:
              trendItem: =props.temp_item
              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: 0px
                z-index: 1
5

My Item is mapped via transform so that the state is shown in text rather than the number value. Therefore, the command is still 0,1,or 2 and the state will show as Off,On,or Auto

              actionOptions: 2=Auto,1=On,0=Off
              actionItem: =props.heating_item
              item: =props.heating_item
              text: =items[props.heating_item].state
1 Like
6

Nice widget. Can this be done with a repeater ? I mean just assigned a group with all the thermostats and build a page with all the thermostats with this nice widget?

7

I have 2 of these widgets on a page. 1 for upstairs and the other for down. I guess you can have a setpoint group to change all the thermostat setpoints at once. As well as a temperature group with an average of thermostat temps.

I’m not sure what you are asking.

8

i have 8 thermostats. if i want a page with all my Thermostats with this widget, i must setup 8 times the widget, correct? its not possible someone that know Beter than me :frowning: yaml to modify the widget with repeater function? just enter your group item of all your thermostat and then the widget will produce 8 different widget. sorry if my English dont help me to clarify exact what i mean.

9

I think 8 different widgets is the way to go as not to clutter any one particular widget.

On the Group reference I was thinking you could set the group to allow you to control all eight at once.
i.e. Changing the value of the group will change all of the group items.

Group TstatAllMode ["All Thermostat Mode Controller"]

will have the following items

Number Tstat1Mode "Thermostat 1 Mode" (TstatAllMode) 
Number Tstat2Mode "Thermostat 2 Mode" (TstatAllMode) 
Number Tstat3Mode "Thermostat 3 Mode" (TstatAllMode) 
Number Tstat4Mode "Thermostat 4 Mode" (TstatAllMode) 
Number Tstat5Mode "Thermostat 5 Mode" (TstatAllMode)

mode.map
0=Off
1=Heat
2=Cool
3=Auto