This is a very simple thermostat list item widget (great to use as the default list Item widget for a thermostat). It supports a single setpoint, current temperature and a mode. The slider sets the setpoint. The value in the upper right shows the current temperature. The “Mode” button lets you set the mode.
Requirements:
The Items must meet the following criteria.
| Item | Criteria |
|---|---|
| Setpoint | Must be a Number:Temperature Item with properly formatted State Description metadata |
| Current Temp | Must be a Number Item with properly formatted State Description metadata |
| Mode | Must be a String Item with options defined. The options are often provided by the Channel. If not, you will have to supply your own in the State Description metadata. This widget assumes “HEAT”, “COOL” and “OFF” will be the modes. The options will dictate what is shown when clicking on the button. |
Behavior:
The behavior is pretty simple. Moving the slider changes the setpoint. The color of the widget is based on the mode: HEAT = orange, COOL = blue, OFF = gray.
If “°C” is chosen as the units the slider min is set to 10, max set to 27, and steps set to 0.5. If “°F” is chosen as the units the slider min is set to 40, max set to 80, and steps set to 1.
Screenshots
Changelog
Version 0.1
- initial release
Resources
uid: rlk_simple_thermostat_list
tags:
- list
props:
parameters:
- default: Thermostat
description: Set the title for this thermostat
label: Title
name: title
required: false
type: TEXT
- context: item
description: Item representing the setpoint
label: Setpoint Item
name: setpoint
required: true
type: TEXT
- context: item
description: The current temperature
label: Current Temperature
name: currentTemp
required: true
type: TEXT
- context: item
description: HVAC Mode
label: Current thermostat mode
name: mode
required: true
type: TEXT
- default: °F
description: Set the temperature units
label: Units
name: units
required: false
type: TEXT
options:
- label: °C
value: °C
- label: °F
value: °F
parameterGroups: []
timestamp: Oct 4, 2022, 3:17:30 PM
component: f7-card
config:
style:
noShadow: true
class:
- padding: 0px
boarder-radius: var(--f7-card-expandable-board-radius)
height: 100px
width: calc(100%)
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 15px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: "=(items[props.mode].state == 'HEAT') ? 'thermometer_sun' : (items[props.mode].state == 'COOL') ? 'thermometer_snowflake' : 'thermometer'"
size: 32
color: "=(items[props.mode].state == 'HEAT') ? 'orange' : (items[props.mode].state == 'COOL') ? 'blue' : 'gray'"
style:
margin-right: 10px
- component: Label
config:
text: "=(items[props.mode].state == 'OFF') ? 'Thermostat is off' : 'Thermostat is set to ' + items[props.mode].displayState + ' to ' + items[props.setpoint].state"
style:
font-size: 14px
font-weight: 700
margin-top: 0px
color: "=(items[props.mode].state == 'HEAT') ? 'orange' : (items[props.mode].state == 'COOL') ? 'blue' : 'gray'"
- component: f7-block
config:
style:
position: absolute
width: 100%
slots:
default:
- component: f7-chip
config:
text: =items[props.currentTemp].state
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
position: absolute
top: 8px
right: 18px
font-size: 14px
color: "=(items[props.mode].state == 'HEAT') ? 'orange' : (items[props.mode].state == 'COOL') ? 'blue' : 'gray'"
- component: oh-slider
config:
item: Thermostat_TargetSetpoint
color: "=(items[props.mode].state == 'HEAT') ? 'orange' : (items[props.mode].state == 'COOL') ? 'blue' : 'gray'"
min: "=(props.units == '°F') ? 50 : 10"
max: "=(props.units == '°F') ? 80 : 27"
step: "=(props.units == '°F') ? 1 : 0.5"
label: true
unit: =props.units
releaseOnly: true
style:
position: absolute
top: 35px
width: 90%
- component: oh-button
config:
text: Mode
fill: true
action: options
actionItem: Thermostat_ThermostatMode
color: "=(items[props.mode].state == 'HEAT') ? 'orange' : (items[props.mode].state == 'COOL') ? 'blue' : 'gray'"
style:
position: absolute
top: 60px
width: 90%