Hello community! I’m trying to build a universal Radiator Control widget for every Radiator model.
This is the first release, so there could be some bugs or options to be fine tuned, so feel free to tell me what are issues you will find.
This widget looks into “Model” scheme, find some defined tags (described below) and automatically show/hide widget options.
First thing to be done is to configure a Group and set it as “RadiatorControl” in Semantic Class.
Then, you have to set:
Mode item as “Type” (String), “Semantic Class” (Control) and “Semantic Property” (Temperature);
Setpoint item, “Type” (Number:Temperature), “Semantic Class” (Setpoint) and “Semantic Property” (Temperature);
Temperature item as “Type” (Number:Temperature), “Semantic Class” (Measurement) and “Semantic Property” (Temperature);
Humidity item as “Type” (Number:Intensity), “Semantic Class” (Measurement) and “Semantic Property” (Humidity);
Maybe nothing too much different from the setup you already have.
Screenshots
Changelog
- Added Humidity support for who have Nest Radiators device
- Added displayState for temperature and setpoint items
Version 0.2
- Added Humidity Graph and value label
Version 0.1
- initial release
Resources
uid: Universal_Radiator_Card
tags: []
props:
parameters:
- context: text
description: Temperature Equipment Group Name
label: Temperature Equipment Group Name
name: tempTitle
required: false
type: TEXT
- context: item
description: Temperature Equipment Group
label: Temperature Equipment Group
name: groupItem
required: true
type: TEXT
timestamp: Oct 5, 2022, 3:11:57 PM
component: f7-card
config:
noShadow: false
padding: false
style:
background: rgb(240, 240, 240)
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 15px 1px rgba(0,0,0,0.3)
height: auto
margin-left: 5px
margin-right: 5px
padding: 0px
slots:
default:
- component: f7-card-content
config:
style:
height: auto
slots:
default:
- component: oh-icon
config:
icon: iconify:ph:flame-duotone
style:
color: red
position: absolute
top: 25px
width: 40px
- component: f7-row
config:
style:
margin-left: 50px
margin-top: 0px
slots:
default:
- component: Label
config:
style:
color: black
font-size: 15px
font-weight: 500
text: =props.tempTitle
- component: f7-block
config:
style:
display: flex
justify-content: space-between
margin-top: 0px
margin-left: 35px
width: 150px
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
filter: "(loop.tempItem.groupNames.indexOf(props.groupItem) >= 0) ? true : false"
for: tempItem
itemTags: Measurement,Temperature
sourceType: itemsWithTags
slots:
default:
- component: f7-chip
config:
style:
color: '=items[loop.tempItem.name].state >= "21" ? "red" : items[loop.tempItem.name].state >= "19" ? "black" : "blue"'
background: rgb(200,200,200)
font-weight: 500
text: "=items[loop.tempItem.name].displayState ? items[loop.tempItem.name].displayState : items[loop.tempItem.name].state"
- component: oh-repeater
config:
filter: "(loop.setpointItem.groupNames.indexOf(props.groupItem) >= 0) ? true : false"
fetchMetadata: semantics,metadata,listWidget
sourceType: itemsWithTags
itemTags: Setpoint,Temperature
for: setpointItem
slots:
default:
- component: f7-chip
config:
style:
background: transparent
color: red
font-weight: 500
text: '=items[loop.setpointItem.name].displayState ? items[loop.setpointItem.name].displayState : items[loop.setpointItem.name].state == "UNDEF" ? "Not set" : items[loop.setpointItem.name].state'
- component: oh-repeater
config:
filter: '(loop.humidityItem.groupNames.indexOf(props.groupItem) >= 0) ? true : false'
fetchMetadata: semantics,metadata,listWidget
sourceType: itemsWithTags
itemTags: Measurement,Humidity
for: humidityItem
slots:
default:
- component: f7-chip
config:
style:
background: transparent
color: blue
font-weight: 500
text: '=items[loop.humidityItem.name].displayState ? items[loop.humidityItem.name].displayState : items[loop.humidityItem.name].state ? items[loop.humidityItem.name].state : ""'
- component: f7-row
config:
style:
margin-top: 3%
slots:
default:
- component: f7-col
config:
style:
width: 73%
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
filter: "(loop.tempItem.groupNames.indexOf(props.groupItem) >= 0) ? true : false"
for: tempItem
itemTags: Measurement,Temperature
sourceType: itemsWithTags
slots:
default:
- component: oh-trend
config:
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
filter: opacity(100%)
margin-left: 40px
margin-top: 5px
z-index: 98
trendGradient:
- red
- black
trendItem: =loop.tempItem.name
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
filter: "(loop.humidityItem.groupNames.indexOf(props.groupItem) >= 0) ? true : false"
for: humidityItem
itemTags: Measurement,Humidity
sourceType: itemsWithTags
slots:
default:
- component: oh-trend
config:
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
filter: opacity(100%)
margin-left: 40px
margin-top: 5px
z-index: 98
trendGradient:
- blue
- black
trendItem: =loop.humidityItem.name
- component: f7-col
config:
style:
width: 20px
slots:
default:
- component: oh-repeater
config:
filter: '((loop.modeItem.groupNames.indexOf(props.groupItem) >= 0) && (loop.modeItem.type=="String")) ? true : false'
fetchMetadata: semantics,metadata,listWidget
sourceType: itemsWithTags
itemTags: Control,Temperature
for: modeItem
slots:
default:
- component: oh-repeater
config:
filter: '((loop.setpointItem.groupNames.indexOf(props.groupItem) >= 0) && (loop.setpointItem.type=="Number:Temperature")) ? true : false'
fetchMetadata: semantics,metadata,listWidget
sourceType: itemsWithTags
itemTags: Setpoint,Temperature
for: setpointItem
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =Number(items[loop.setpointItem.name].state.split(' ')[0]) + 0.5
actionItem: =loop.setpointItem.name
iconColor: red
iconF7: arrow_up_circle
iconSize: 30
style:
background: transparent
height: 35px
display: flex
position: absolute
right: 1%
z-index: 98
visible: '=items[loop.modeItem.name].state != "OFF" ? true : false'
- component: oh-button
config:
action: command
actionCommand: =Number(items[loop.setpointItem.name].state.split(' ')[0]) - 0.5
actionItem: =loop.setpointItem.name
iconColor: red
iconF7: arrow_down_circle
iconSize: 30
style:
background: transparent
bottom: 5%
height: 35px
position: absolute
right: 1%
z-index: 98
visible: '=items[loop.modeItem.name].state != "OFF" ? true : false'
- component: oh-repeater
config:
filter: '((loop.modeItem.groupNames.indexOf(props.groupItem) >= 0) && (loop.modeItem.type=="String")) ? true : false'
fetchMetadata: semantics,metadata,listWidget
sourceType: itemsWithTags
itemTags: Control,Temperature
for: modeItem
slots:
default:
- component: f7-card-footer
config:
style:
background: rgb(255, 204, 204)
border-radius: 0 0 var(--f7-card-expandable-border-radius) var(--f7-card-expandable-border-radius)
height: auto
slots:
default:
- component: f7-block
config:
style:
display: flex
justify-content: space-between
margin-top: 0px
padding: 0
width: 100px
slots:
default:
- component: oh-link
config:
action: options
actionItem: =loop.modeItem.name
slots:
default:
- component: f7-chip
config:
text: =loop.modeItem.label
style:
color: white
background: red