Card for a controlled dual flow ventilation Dantherm system connected to openhab via modbus
Screenshots
Changelog
Version 0.1
- initial release
Resources
uid: frs_VMC_DF
tags: []
props:
parameters:
- default: Airflow System
description: Title
label: Title
name: HeaderTitle
required: false
type: TEXT
- context: item
description: Motor Insufflation
label: Item
name: itemMoteurInsufflation
required: false
type: TEXT
- context: item
description: Extraction motor
label: Item
name: itemMoteurExtraction
required: false
type: TEXT
- context: item
description: Fresh air temperature
label: Item
name: itemTempAirNeuf
required: false
type: TEXT
- context: item
description: Supply air temperature
label: Item
name: itemTempAirSouffle
required: false
type: TEXT
- context: item
description: Extract air temperature
label: Item
name: itemTempAirExtrait
required: false
type: TEXT
- context: item
description: Exhaust air temperature
label: Item
name: itemTempAirRejete
required: false
type: TEXT
- context: item
description: Humidity
label: Item
name: itemHumidite
required: false
type: TEXT
- context: item
description: By-Pass status
label: Item
name: itemEtatByPass
required: false
type: TEXT
- context: item
description: Status Current mode
label: Item
name: itemModeActuel
required: false
type: TEXT
- context: item
description: Selection Mode
label: Item
name: itemSelectionMode
required: false
type: TEXT
- context: item
description: Alarm
label: Item
name: itemAlarme
required: false
type: TEXT
- context: item
description: Filter time
label: Item
name: itemFiltre
required: false
type: TEXT
- context: item
description: Reset filter
label: Item
name: itemFiltreReset
required: false
type: TEXT
parameterGroups: []
timestamp: Jan 28, 2025, 9:16:56 PM
component: f7-card
config:
title: =props.HeaderTitle
style:
min-width: 300px
slots:
content:
- component: f7-block
config:
style:
margin: 0
padding: 0
slots:
default:
- component: f7-row
config:
noGap: false
style:
display: flex
flex-direction: row
justify-content: center
slots:
default:
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 80px
justify-content: center
margin-right: 30px
margin-top: 0px
width: 80px
slots:
default:
- component: Label
config:
style:
font-size: 15px
font-weight: 700
white-space: nowrap
text: Exhaust air
- component: oh-link
config:
action: analyzer
actionAnalyzerChartType: isoWeek
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =props.itemTempAirRejete
iconF7: thermometer
iconSize: 15px
style:
color: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
font-size: 15px
white-space: nowrap
text: =@(props.itemTempAirRejete)
- component: oh-icon
config:
color: orange
height: 40px
icon: if:mdi:transfer-up
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 80px
justify-content: center
margin-left: 30px
margin-top: 0px
width: 80px
slots:
default:
- component: Label
config:
style:
font-size: 15px
font-weight: 700
white-space: nowrap
text: Fresh air
- component: oh-link
config:
action: analyzer
actionAnalyzerChartType: isoWeek
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =props.itemTempAirNeuf
iconF7: thermometer
iconSize: 15px
style:
color: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
font-size: 15px
white-space: nowrap
text: =@(props.itemTempAirNeuf)
- component: oh-icon
config:
color: orange
height: 40px
icon: if:mdi:transfer-down
- component: f7-block
config:
style:
--f7-theme-color: var(--f7-text-color)
display: flex
justify-content: center
margin: 0
padding: 0
slots:
default:
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
slots:
default:
- component: f7-col
config:
preserveAspectRatio: xMidYMid slice
style:
width: 40px
tag: svg
viewBox: 0 0 20 145
xmlns: http://www.w3.org/2000/svg
slots:
default:
- component: f7-row
config:
d: M10,0 L10,60 L20,60
fill: none
id: airrejetepath
stroke: "#ffcc00"
stroke-width: 10
tag: path
vector-effect: non-scaling-stroke
visible: "=(items[props.itemEtatByPass].state === '0' ) ? true :
(items[props.itemEtatByPass].state === '255' )
? false : true"
- component: f7-row
config:
fill: "#ffcc00"
r: 3.5
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: "=(items[props.itemEtatByPass].state === '0' ) ? true :
(items[props.itemEtatByPass].state === '255' )
? false : true"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 1
keyPoints: 1;0
keyTimes: 0;1
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#airrejetepath"
- component: f7-row
config:
d: M10,0 L10,185 L20,235
fill: none
id: bypasspath2
stroke: "#cddc39"
stroke-width: 10
tag: path
vector-effect: non-scaling-stroke
visible: "=(items[props.itemEtatByPass].state === '0' ) ? false :
(items[props.itemEtatByPass].state === '255' )
? true : false"
- component: f7-row
config:
fill: "#cddc39"
r: 3.5
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: "=(items[props.itemEtatByPass].state === '0' ) ? false :
(items[props.itemEtatByPass].state === '255' )
? true : false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 2
keyPoints: 1;0
keyTimes: 0;1
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#bypasspath2"
- component: f7-row
config:
d: M10,145 L10,85 L20,85
fill: none
id: airextraitpath
stroke: "#ffcc00"
stroke-width: 10
tag: path
vector-effect: non-scaling-stroke
visible: "=(items[props.itemEtatByPass].state === '0' ) ? true :
(items[props.itemEtatByPass].state === '255' )
? false : true"
- component: f7-row
config:
fill: "#ffcc00"
r: 3.5
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: "=(items[props.itemEtatByPass].state === '0' ) ? true :
(items[props.itemEtatByPass].state === '255' )
? false : true"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 1
keyPoints: 0;1
keyTimes: 0;1
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#airextraitpath"
- component: oh-icon
config:
color: "#ff2d55"
height: 44px
icon: if:mdi:fan
style:
margin-right: 0px
position: absolute
top: 34px
- component: oh-icon
config:
color: "#4cd964"
height: 44px
icon: if:mdi:air-filter
style:
margin-right: 0px
position: absolute
top: 218px
- component: oh-link
config:
action: analyzer
actionAnalyzerChartType: isoWeek
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =props.itemMoteurExtraction
color: "#4cd964"
style:
font-size: 15px
margin-right: 110px
position: absolute
top: 42px
text: =@(props.itemMoteurExtraction)
- component: Label
config:
color: "#4cd964"
style:
font-size: 15px
margin-right: 100px
position: absolute
top: 226px
text: =@(props.itemFiltre)
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
slots:
default:
- component: f7-block
config:
style:
align-items: center
flex-direction: column
height: 80px
justify-content: center
width: 100px
- component: f7-block
config:
style:
align-items: center
background: "=themeOptions.dark === 'dark' ? 'rgb(50, 50, 50)' : 'rgb(217, 217,
217)'"
border: 4px solid teal
border-radius: 0px
display: flex
flex-direction: column
height: 100px
justify-content: center
width: 100px
slots:
default:
- component: oh-icon
config:
color: teal
height: 46px
icon: iconify:material-symbols:hvac
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: ="By-pass " + items[props.itemEtatByPass].displayState
- component: oh-link
config:
action: analyzer
actionAnalyzerChartType: isoWeek
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =props.itemHumidite
iconF7: drop
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: =@(props.itemHumidite)
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
slots:
default:
- component: f7-col
config:
preserveAspectRatio: xMidYMid slice
style:
width: 40px
tag: svg
viewBox: 0 0 20 145
xmlns: http://www.w3.org/2000/svg
slots:
default:
- component: f7-row
config:
d: M10,0 L10,60 L0,60
fill: none
id: airneufpath
stroke: "#ffcc00"
stroke-width: 10
tag: path
vector-effect: non-scaling-stroke
visible: "=(items[props.itemEtatByPass].state === '0' ) ? true :
(items[props.itemEtatByPass].state === '255' )
? false : true"
- component: f7-row
config:
fill: "#ffcc00"
r: 3.5
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: "=(items[props.itemEtatByPass].state === '0' ) ? true :
(items[props.itemEtatByPass].state === '255' )
? false : true"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 1
keyPoints: 0;1
keyTimes: 0;1
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#airneufpath"
- component: f7-row
config:
d: M10,0 L10,145
fill: none
id: bypasspath
stroke: "#cddc39"
stroke-width: 10
tag: path
vector-effect: non-scaling-stroke
visible: "=(items[props.itemEtatByPass].state === '0' ) ? false :
(items[props.itemEtatByPass].state === '255' )
? true : false"
- component: f7-row
config:
fill: "#cddc39"
r: 3.5
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: "=(items[props.itemEtatByPass].state === '0' ) ? false :
(items[props.itemEtatByPass].state === '255' )
? true : false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 1
keyPoints: 0;1
keyTimes: 0;1
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#bypasspath"
- component: f7-row
config:
d: M10,145 L10,85 L0,85
fill: none
id: airsoufflepath
stroke: "#ffcc00"
stroke-width: 10
tag: path
vector-effect: non-scaling-stroke
visible: "=(items[props.itemEtatByPass].state === '0' ) ? true :
(items[props.itemEtatByPass].state === '255' )
? false : true"
- component: f7-row
config:
fill: "#ffcc00"
r: 3.5
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: "=(items[props.itemEtatByPass].state === '0' ) ? true :
(items[props.itemEtatByPass].state === '255' )
? false : true"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 1
keyPoints: 1;0
keyTimes: 0;1
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#airsoufflepath"
- component: oh-icon
config:
color: "#ff2d55"
height: 44px
icon: if:mdi:fan
style:
margin-right: 0px
position: absolute
top: 218px
- component: oh-icon
config:
color: "#4cd964"
height: 44px
icon: if:mdi:air-filter
style:
margin-right: 0px
position: absolute
top: 34px
- component: oh-link
config:
action: analyzer
actionAnalyzerChartType: isoWeek
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =props.itemMoteurInsufflation
color: "#4cd964"
style:
font-size: 15px
margin-left: 110px
position: absolute
top: 228px
text: =@(props.itemMoteurInsufflation)
- component: Label
config:
color: "#4cd964"
style:
font-size: 15px
margin-left: 98px
position: absolute
top: 42px
text: =@(props.itemFiltre)
- component: f7-row
config:
noGap: false
style:
display: flex
flex-direction: row
justify-content: center
slots:
default:
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 80px
justify-content: center
margin-right: 30px
margin-top: 0px
width: 80px
slots:
default:
- component: oh-icon
config:
color: orange
height: 40px
icon: if:mdi:transfer-up
- component: Label
config:
style:
font-size: 15px
font-weight: 700
white-space: nowrap
text: Extracted air
- component: oh-link
config:
action: analyzer
actionAnalyzerChartType: isoWeek
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =props.itemTempAirExtrait
iconF7: thermometer
iconSize: 15px
style:
color: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
font-size: 15px
white-space: nowrap
text: =@(props.itemTempAirExtrait)
- component: f7-block
config:
style:
align-items: center
display: flex
flex-direction: column
height: 80px
justify-content: center
margin-left: 30px
width: 80px
slots:
default:
- component: oh-icon
config:
color: orange
height: 40px
icon: if:mdi:transfer-down
- component: Label
config:
style:
font-size: 15px
font-weight: 700
white-space: nowrap
text: Supply air
- component: oh-link
config:
action: analyzer
actionAnalyzerChartType: isoWeek
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =props.itemTempAirSouffle
iconF7: thermometer
iconSize: 15px
style:
color: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
font-size: 15px
white-space: nowrap
text: =@(props.itemTempAirSouffle)
- component: f7-list
config:
class: elevation-2
dividers: true
inset: true
media-list: true
outline: true
strong: true
style:
margin-bottom: 10px
margin-left: 16px
margin-right: 16px
margin-top: 30px
background-color: "=themeOptions.dark === 'dark' ? 'rgb(35, 35, 35)' : 'rgb(247,
247, 247)'"
slots:
default:
- component: oh-label-item
config:
action: options
actionItem: =props.itemSelectionMode
icon: if:mdi:fan-auto
style:
--f7-list-item-after-font-size: 15px
--f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ?
'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ?
'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-title-font-size: 15px
subtitle: =items[props.itemModeActuel].displayState
title: Mode
- component: oh-list-item
config:
icon: if:mdi:air-filter
style:
--f7-list-item-after-font-size: 15px
--f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ?
'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-title-font-size: 15px
--f7-list-item-title-line-height: 32px
title: Reset Filter
slots:
after:
- component: oh-button
config:
action: command
actionCommand: "1"
actionItem: =props.itemFiltreReset
active: false
iconF7: arrow_counterclockwise
iconSize: 18px
outline: true
small: true
style:
height: 28px
padding: 0
width: 26px
- component: oh-label-item
config:
icon: if:mdi:fan-alert
item: =props.itemAlarme
style:
--f7-list-item-after-font-size: 15px
--f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ?
'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-title-font-size: 15px
--f7-list-item-title-line-height: 32px
title: Alarm