Widget to Control the Thermostat mode and temperature and see batterystate and room- and outside temperature as graph with a configurable color
Changelog
Version 0.1
- initial release
Resources
uid: Cell_Thermostat
tags: []
props:
parameters:
- description: Header on top of the card
label: Header
name: header
required: false
type: TEXT
- description: in rgba() or HEX or empty
label: Foreground Color
name: fgcolor
required: false
type: TEXT
- context: item
label: Current Temperature
name: temperature
required: false
type: TEXT
- context: item
label: Set Temperature
name: targetTemperature
required: false
type: TEXT
- context: item
label: Battery state
name: batteryState
required: false
type: TEXT
- context: item
label: Radiator mode
name: radiatorMode
required: false
type: TEXT
- context: item
label: Outside temperature
name: outsideTemperature
required: false
type: TEXT
parameterGroups: []
timestamp: Aug 7, 2022, 10:52:44 AM
component: f7-card
config:
style:
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
height: 120px
margin-left: 5px
margin-right: 5px
noShadow: false
padding: 0px
slots:
content:
- component: f7-block
config:
style:
display: flex
flex-direction: row
left: 16px
position: absolute
top: -5px
slots:
default:
- component: f7-icon
config:
f7: thermometer
size: 18
style:
margin-right: 10px
- component: Label
config:
style:
font-size: 12px
margin-top: 0px
text: "=props.header ? props.header : ''"
- component: f7-block
config:
style:
flex-direction: row
left: 16px
position: absolute
top: 50px
slots:
default:
- component: Label
config:
style:
font-size: 14px
font-weight: 600
margin-left: 0px
margin-top: 0px
text: "=items[props.temperature].displayState ? items[props.temperature].displayState : items[props.temperature].state"
- component: f7-block
config:
style:
bottom: -40px
display: flex
flex-direction: row
left: 12px
position: absolute
slots:
default:
- component: f7-icon
config:
f7: "=(Number.parseFloat(items[props.batteryState].state) >= '80') ? 'battery_100' : 'battery_25' "
size: 18
visible: "=props.batteryState ? true : false"
- component: Label
config:
style:
font-size: 12px
margin-left: 5px
margin-top: 0px
text: =items[props.batteryState].displayState
visible: "=props.batteryState ? true : false"
- component: oh-button
config:
action: command
actionCommand: =Number(items[props.targetTemperature].state.split(' ')[0]) + 0.5
actionItem: =props.targetTemperature
iconColor: =props.fgcolor
iconF7: arrow_up
iconSize: 35
style:
background: transparent
height: 35px
position: absolute
right: 10px
top: 10px
visible: "=props.targetTemperature ? true : false"
- component: oh-button
config:
action: command
actionCommand: =Number(items[props.targetTemperature].state.split(' ')[0]) - 0.5
actionItem: =props.targetTemperature
iconColor: =props.fgcolor
iconF7: arrow_down
iconSize: 35
style:
background: transparent
height: 35px
position: absolute
right: 10px
top: 80px
visible: "=props.targetTemperature ? true : false"
- component: Label
config:
style:
font-size: 12px
position: absolute
right: 25px
top: 53px
text: =items[props.targetTemperature].state
visible: "=props.targetTemperature ? true : false"
- component: f7-block
config:
style:
height: 120px
left: 15px
position: absolute
top: 15px
width: "=props.targetTemperature ? 'calc(100% - 55px)' : '100%' "
slots:
default:
- component: oh-trend
config:
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
height: 90%
left: 60px
position: absolute
top: 20px
width: 80%
z-index: 0
trendGradient: "=props.fgcolor ? [props.fgcolor] : ['#E64A19']"
trendItem: =props.temperature
- component: oh-trend
config:
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
filter: opacity(30%)
height: 90%
left: 60px
position: absolute
top: 2px
width: 80%
z-index: 0
trendGradient:
- "#b8b8b8"
trendItem: =props.outsideTemperature
trendStrokeWidth: 1
- component: oh-link
config:
action: analyzer
actionAnalyzerChartType: week
actionAnalyzerCoordSystem: time
actionAnalyzerItems: "=props.targetTemperature ? [props.temperature, props.outsideTemperature, props.targetTemperature] : (props.outsideTemperature ? [props.temperature, props.outsideTemperature] : [props.temperature])"
style:
height: 120px
left: 0px
position: absolute
top: 0px
width: "=props.targetTemperature ? 'calc(100% - 55px)' : '100%' "
- component: f7-block
config:
style:
bottom: -63px
display: flex
flex-direction: row
left: 12px
position: absolute
slots:
default:
- component: oh-button
config:
action: options
actionItem: =[props.radiatorMode]
color: =props.fgcolor
fill: false
style:
margin-top: 5px
right: 10px
top: 2px
z-index: 2
text: =items[props.radiatorMode].displayState || items[props.radiatorMode].state
