@Nic0205 @Dimitris
Here is a first version of the HVAC (AC) card following Nic’s new template :
Controls and trend are only shown when switched on and following the color scheme.
Widget code:
uid: main_widget_HVAC_Card
tags: []
props:
parameters:
- description: Title of the card
label: Title
name: Title
required: false
type: TEXT
- context: item
description: HVAC Equipment Group
label: HVAC Equipment Group
name: groupItem
required: false
type: TEXT
- context: item
description: HVAC Power Item
label: HVAC Power Item
name: powerItem
required: false
type: TEXT
- context: item
description: HVAC Mode Item
label: HVAC Mode Item
name: modeItem
required: false
type: TEXT
timestamp: Oct 4, 2022, 3:26:58 PM
component: f7-block
config:
style:
padding: 0px
border-top-left-radius: var(--f7-card-expandable-border-radius)
border-top-right-radius: var(--f7-card-expandable-border-radius)
border-bottom-left-radius: var(--f7-card-expandable-border-radius)
border-bottom-right-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 15px 1px rgba(0,0,0,0.05)
background: RGB(247, 247, 247)
slots:
default:
- component: f7-block
config:
style:
height: 60px
background: RGB(247, 247, 247)
display: flex
flex-direction: row
align-items: center
slots:
default:
- component: oh-icon
config:
icon: iconify:iconoir:air-conditioner
width: 40px
style:
color: rgb(106,106,106)
- component: f7-row
config:
style:
display: flex
flex-direction: column
flex-wrap: nowrap
slots:
default:
- component: Label
config:
text: =props.Title
- component: f7-row
config:
style:
display: flex
flex-direction: row
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
for: tempItem
sourceType: itemsWithTags
itemTags: Measurement,Temperature
filter: "(loop.tempItem.groupNames.indexOf(props.groupItem) >= 0) ? true : false"
slots:
default:
- component: f7-chip
config:
text: =items[loop.tempItem.name].state
style:
font-weight: 500
justify-content: flex-end
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
for: setpointItem
sourceType: itemsWithTags
itemTags: Setpoint,Temperature
filter: "(loop.setpointItem.groupNames.indexOf(props.groupItem) >= 0) ? true : false"
slots:
default:
- component: f7-chip
config:
text: =items[loop.setpointItem.name].state
style:
color: '=(items[props.modeItem].state=="COOL") ? "#15B4B7" : (items[props.modeItem].state=="HEAT") ? "#E74239" : (items[props.modeItem].state=="DRY") ? "#E7D200" : "gray"'
background: none
font-weight: 500
- component: oh-toggle
config:
item: =props.powerItem
style:
margin-left: 150px
--f7-toggle-active-color: =(items[props.modeItem].state=="COOL")?"#15B4B7":(items[props.modeItem].state=="HEAT")?"#E74239":(items[props.modeItem].state=="DRY")?"#E7D200":"gray"
--f7-toggle-inactive-color: gray
- component: f7-block
config:
style:
display: flex
flex-direction: row
align-items: center
visible: =items[props.powerItem].state=="ON"
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
for: tempItem
sourceType: itemsWithTags
itemTags: Measurement,Temperature
filter: "(loop.tempItem.groupNames.indexOf(props.groupItem) >= 0) ? true : false"
slots:
default:
- component: oh-trend
config:
trendItem: =loop.tempItem.name
trendSampling: 5
trendGradient: =[(items[props.modeItem].state=='COOL')?('#15B4B7'):(items[props.modeItem].state=='HEAT')?('#E74239'):(items[props.modeItem].state=='DRY')?('#E7D200'):('gray'),('gray')]
- component: f7-row
config:
style:
display: flex
flex-direction: row
flex-wrap: nowrap
justify-content: flex-end
align-self: flex-end
slots:
default:
- component: oh-link
config:
action: command
actionItem: =loop.setpointItem.name
actionCommand: =Number(items[loop.setpointItem.name].state.split(' ')[0]) + 0.5
slots:
default:
- component: oh-icon
config:
icon: f7:arrow_up_circle
style:
color: '=(items[props.modeItem].state=="COOL") ? "#15B4B7" : (items[props.modeItem].state=="HEAT") ? "#E74239" : (items[props.modeItem].state=="DRY") ? "#E7D200" : "gray"'
width: 35px
- component: oh-link
config:
action: command
actionItem: =loop.setpointItem.name
actionCommand: =Number(items[loop.setpointItem.name].state.split(' ')[0]) 1 0.5
slots:
default:
- component: oh-icon
config:
icon: f7:arrow_down_circle
style:
margin-left: 20px
color: '=(items[props.modeItem].state=="COOL") ? "#15B4B7" : (items[props.modeItem].state=="HEAT") ? "#E74239" : (items[props.modeItem].state=="DRY") ? "#E7D200" : "gray"'
width: 35px
- component: f7-block
config:
style:
height: 50px
background: RGB(242, 242, 242)
border-radius: 0 0 var(--f7-card-expandable-border-radius) var(--f7-card-expandable-border-radius)
--f7-card-footer-border-color: transparent
display: flex
flex-direction: row
flex-wrap: nowrap
align-items: center
visible: =items[props.powerItem].state=="ON"
slots:
default:
- component: oh-link
config:
action: command
actionItem: =props.modeItem
actionCommand: COOL
slots:
default:
- component: oh-icon
config:
icon: iconify:ion:snow
color: '=(items[props.modeItem].state=="COOL") ? "#15B4B7" : "gray"'
width: 25px
- component: oh-link
config:
action: command
actionItem: =props.modeItem
actionCommand: HEAT
style:
margin-left: 25px
slots:
default:
- component: oh-icon
config:
icon: iconify:ion:flame-sharp
color: '=(items[props.modeItem].state=="HEAT") ? "#E74239" : "gray"'
width: 25px
- component: oh-link
config:
action: command
actionItem: =props.modeItem
actionCommand: DRY
style:
margin-left: 25px
slots:
default:
- component: oh-icon
config:
icon: iconify:material-symbols:cool-to-dry-rounded
color: '=(items[props.modeItem].state=="DRY") ? "#E7D200" : "gray"'
width: 25px
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
for: fanspeedItem
sourceType: itemsWithTags
itemTags: Control,Wind
filter: "(loop.fanspeedItem.groupNames.indexOf(props.groupItem) >= 0) ? true : false"
slots:
default:
- component: oh-link
config:
action: options
actionItem: =loop.fanspeedItem.name
style:
margin-left: 120px
slots:
default:
- component: f7-chip
config:
text: "=items[loop.fanspeedItem.name].displayState ? items[loop.fanspeedItem.name].displayState : items[loop.fanspeedItem.name].state"
- component: oh-icon
config:
icon: iconify:material-symbols:mode-fan
color: gray
width: 25px
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
for: vanesItem
sourceType: itemsWithTags
itemTags: Control,Opening
filter: "(loop.vanesItem.groupNames.indexOf(props.groupItem) >= 0) ? true : false"
slots:
default:
- component: oh-link
config:
action: options
actionItem: =loop.vanesItem.name
style:
margin-left: 20px
slots:
default:
- component: f7-chip
config:
text: "=items[loop.vanesItem.name].displayState ? items[loop.vanesItem.name].displayState : items[loop.vanesItem.name].state"
- component: oh-icon
config:
icon: f7:move
color: gray
width: 25px
To use it, add the following at the end of your room card:
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
for: hvacItem
sourceType: itemsWithTags
itemTags: HVAC
filter: loop.hvacItem.metadata.semantics.config.hasLocation == vars.objVar.room
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
for: hvacPowerItem
sourceType: itemsWithTags
itemTags: Control,Power
filter: '((loop.hvacPowerItem.groupNames.indexOf(loop.hvacItem.name) >= 0) && (loop.hvacPowerItem.type=="Switch")) ? true : false'
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
for: hvacModeItem
sourceType: itemsWithTags
itemTags: Control,Temperature
filter: '((loop.hvacModeItem.groupNames.indexOf(loop.hvacItem.name) >= 0) && (loop.hvacModeItem.type=="String")) ? true : false'
slots:
default:
- component: widget:main_widget_HVAC_Card
config:
Title: =loop.hvacItem.label
groupItem: =loop.hvacItem.name
powerItem: =loop.hvacPowerItem.name
modeItem: =loop.hvacModeItem.name
visible: '=vars.objVar.selectThing=="Climate" ? true : false'
i have seen that when using repeaters, visible options on item state need a page refresh to be applied. Can you make a quick test about this ?
