Phone screen recording, showing widget’s usage
Git repository
My version of cell widget for rooms of my house, small cells will popup a bigger widget on click, giving more options and controls (from the smaller widget only light controls will popup if you’ll manage to click exactly on lightbulb button - that is made for faster access to the most used control).
Smaller widget will pass all options it has to the bigger one, so despite of the fact that smaller version doesn’t show all items which are passed to it, you’ll still need to fill in all those items you want to see in popup.
Widget is designed to fit dark and bright color themes, changing it’s colors depending of user theme, and is designed to provide clear view on background image, so it’s full off css shadows, and maybe if you don’t need/don’t like all those shadows, you should delete them in widget code to get a bit more of performance.
Widget’s remote control is designed for Samsung TV, using Samsung TV’s binding, so if your TV is different, you will not get all those keys working.
So the cell widget code is:
uid: Cell_Temp_Card_3
tags:
- co
- humidity
- motion
- temperature
props:
parameters:
- description: Title on top of the card
label: Title
name: title
required: false
type: TEXT
groupName: general
- description: Icon on top of the card (only f7 icons (without f7:))
label: Icon
name: icon
required: false
type: TEXT
groupName: general
- description: Background image name
label: Background image
name: bg_image_url
required: false
type: TEXT
groupName: general
- description: in rgba() or HEX or empty
label: Background Color
name: bgcolor
required: false
type: TEXT
groupName: general
- context: item
description: An item, measuring room's temperature
label: Temperature sensor
name: temp_item
required: false
type: TEXT
groupName: sensors
- context: item
description: An item, measuring room's light level
label: Lightlevel sensor
name: lightlevel_item
required: false
type: TEXT
groupName: sensors
- context: item
description: An item, measuring room's humidity
label: Humidity sensor
name: humidity_item
required: false
type: TEXT
groupName: sensors
- context: item
description: An item, measuring room's CO2 level
label: CO2 sensor
name: CO_item
required: false
type: TEXT
groupName: sensors
- context: item
description: An item, setting room's desired temperature
label: Target Temperature
name: temperatureset_item
required: false
type: TEXT
groupName: climate
- context: item
description: An item, setting room's desired humidity
label: Target Humidity
name: humidityset_item
required: false
type: TEXT
groupName: climate
- context: item
description: An item to switch cooling On/Off
label: Cooling On/Off
name: coolingon_item
required: false
type: TEXT
groupName: climate
- context: item
description: An item to switch heating On/Off
label: Heating On/Off
name: heatingon_item
required: false
type: TEXT
groupName: climate
- context: item
description: An item to switch humidifier On/Off
label: Humidifier On/Off
name: humidifieron_item
required: false
type: TEXT
groupName: climate
- context: item
description: Main climate fan speeed
label: Fanspeed
name: fanspeed_item
required: false
type: TEXT
groupName: climate
- context: item
description: An item to switch fan On/Off
label: Fan on/off
name: fanon_item
required: false
type: TEXT
- context: item
description: An item to choose humidifier fan's speed
label: Humidifier fan speed
name: humidifierfan_item
required: false
type: TEXT
groupName: climate
- context: item
description: Motion sensor
label: Motion item
name: motion_item
required: false
type: TEXT
groupName: security
- context: item
description: A group, containing all kind of lights - On/Off, Dimmers, Colorlights, widget will try to show them, by reading their tags.
label: Lights group
name: light
required: false
type: TEXT
- context: item
label: Door item
name: door_item
required: false
type: TEXT
groupName: security
- context: item
label: Lock item
name: lock_item
required: false
type: TEXT
groupName: security
- context: item
label: Window item
name: window_item
required: false
type: TEXT
groupName: security
- context: item
label: Leakage item
name: leakage_item
required: false
type: TEXT
groupName: security
- context: item
label: Smoke item
name: smoke_item
required: false
type: TEXT
groupName: security
- context: item
description: SamsungTV or Kodi Media title
label: Media Title
name: mediaTitle
required: false
type: TEXT
groupName: media
- context: item
description: TV power On/Off, widget will hide media remote section if this item is not set
label: Power Item
name: power
required: false
type: TEXT
groupName: media
- context: item
description: TV channel item, if present
label: Channel
name: channel
required: false
type: TEXT
groupName: media
- context: item
description: Samsung TV KeyCode channel
label: Key Code
name: inputAction
required: false
type: TEXT
groupName: media
- context: item
description: Volume control item, if present, any dimmer type item
label: Volume Control Item
name: volumeControlItem
required: false
type: TEXT
groupName: media
- context: item
description: SamsungTV source name, or Kodi Media title, or any other item to show on remote's screen
label: Source Name
name: sourceName
required: false
type: TEXT
groupName: media
parameterGroups:
- name: general
label: General settings
- name: sensors
label: Sensors settings
- name: media
label: Media group settings
- name: climate
label: Climate settings
- name: security
label: Security settings
timestamp: Sep 19, 2022, 2:18:30 AM
component: f7-card
config:
style:
background: transparent
background-brightness: 60%
background-color: "=props.bgcolor ? props.bgcolor : ''"
background-image: "=props.bg_image_url ? 'url(/static/' + (props.bg_image_url) + ')' : ''"
background-position: center
background-repeat: no-repeat
background-size: cover
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px var(--f7-bars-bg-color)
color: var(--f7-text-color)
font-size: medium
font-weight: 500
height: 150px
margin: 5
noShadow: false
padding: 0
text-shadow: 1px 0px 2px var(--f7-bars-bg-color), -1px 0px 2px var(--f7-bars-bg-color), 0px 0px 2px var(--f7-bars-bg-color), 0px 0px 3px var(--f7-bars-bg-color)
slots:
default:
- component: f7-card-header
config:
style:
justify-content: center
margin: 0
min-height: 30px
padding: 0
slots:
default:
- component: f7-icon
config:
f7: =props.icon
size: 20
visible: "=props.icon ? true : false"
- component: Label
config:
style:
font-size: 18px
font-weight: bold
margin-left: 5px
text: "=props.title ? props.title : ''"
- component: f7-card-content
config:
style:
align-items: flex-start
display: flex
justify-content: space-between
margin: 7px
padding: 0
slots:
default:
- component: f7-col
config: {}
slots:
default:
- component: f7-row
config:
style:
flex-wrap: nowrap
justify-content: flex-start
visible: "=props.temp_item ? true : false"
slots:
default:
- component: oh-icon
config:
icon: martinitemp
state: =items[props.temp_item].state
style:
filter: drop-shadow(3px 2px 2px rgb(0 0 0 / 0.4))
width: 23
- component: Label
config:
style:
color: '=(Number.parseFloat(items[props.temp_item].state.split(" ")[0]) > 30) ? "rgb(242,75,36)" : (Number.parseFloat(items[props.temp_item].state.split(" ")[0]) < 10) ? "rgba(32, 185, 256,0.8)" : "var(--f7-text-color)"'
margin-left: 5px
text: =Number.parseInt(items[props.temp_item].state)+" °C"
- component: f7-row
config:
style:
flex-wrap: nowrap
justify-content: flex-start
z-index: 2
visible: "=props.humidity_item ? true : false"
slots:
default:
- component: oh-icon
config:
icon: hum
state: =items[props.humidity_item].state
style:
filter: drop-shadow(3px 2px 2px rgb(0 0 0 / 0.4))
width: 23
- component: Label
config:
style:
margin-left: 5px
text: =Number.parseInt(items[props.humidity_item].state) +" %"
- component: f7-row
config:
style:
flex-wrap: nowrap
justify-content: flex-start
z-index: 2
visible: "=props.lightlevel_item ? true : false"
slots:
default:
- component: oh-icon
config:
icon: lightlevel
state: =items[props.lightlevel_item].state
style:
filter: drop-shadow(3px 2px 2px rgb(0 0 0 / 0.4))
width: 23
- component: Label
config:
style:
color: "=(items[props.lightlevel_item].state < 1) ? 'gray' : 'var(--f7-text-color)'"
margin-left: 5px
text: =Number.parseInt(items[props.lightlevel_item].state) +" lux"
- component: f7-row
config:
style:
flex-wrap: nowrap
z-index: 2
visible: "=props.CO_item ? true : false"
slots:
default:
- component: oh-icon
config:
icon: carbondioxidecloud
state: =items[props.CO_item].state
style:
filter: drop-shadow(3px 2px 2px rgb(0 0 0 / 0.4))
width: 23
- component: Label
config:
style:
color: '=(Number.parseFloat(items[props.CO_item].state.split(" ")[0]) > 1500) ? "red" : (Number.parseFloat(items[props.CO_item].state.split(" ")[0]) > 1000) ? "yellow" : "var(--f7-text-color)"'
margin-left: 5px
white-space: nowrap
text: =Number.parseInt(items[props.CO_item].state) +" ppm"
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
slots:
default:
- component: f7-row
config:
style:
z-index: 1
visible: "=props.motion_item ? true : false"
slots:
default:
- component: oh-icon
config:
icon: f7:dot_radiowaves_left_right
visible: "=props.motion_item ? true : false"
width: 25
style:
color: '=(items[props.motion_item].state == "ON") ? "red" : "var(--f7-text-color)"'
- component: f7-row
config:
style:
z-index: 1
visible: "=props.motion_item || props.door_item || props.lock_item || props.window_item ? true : false"
slots:
default:
- component: oh-icon
config:
icon: "=(items[props.lock_item].state === 'ON') ? 'f7:lock' : 'f7:lock_open'"
visible: "=props.lock_item ? true : false"
width: 25
- component: oh-icon
config:
icon: "=(items[props.door_item].state === 'ON') ? 'door-closed' : 'door-open'"
visible: "=props.door_item ? true : false"
width: 25
- component: oh-icon
config:
icon: "=(items[props.window_item].state === 'ON') ? 'window' : 'window-open'"
visible: "=props.window_item ? true : false"
width: 25
- component: oh-button
config:
action: group
actionGroupPopupItem: =props.light
style:
padding: 0
z-index: 99
visible: "=props.light ? true : false"
slots:
default:
- component: oh-icon
config:
width: 30
icon: '=(items[props.light].state == "ON") ? "f7:lightbulb_fill" : "f7:lightbulb"'
item: =loop.item.name
style:
color: '=(items[props.light].state == "ON") ? "yellow" : "var(--f7-text-color)"'
- component: oh-link
config:
action: popup
actionModal: widget:Cell_Temp_Card_Expanded
actionModalConfig:
CO_item: =props.CO_item
bg_image_url: =props.bg_image_url
bgcolor: =props.bgcolor
channel: =props.channel
door_item: =props.door_item
humidity_item: =props.humidity_item
humidityset_item: =props.humidityset_item
icon: =props.icon
inputAction: =props.inputAction
leakage_item: =props.leakage_item
light: =props.light
lightlevel_item: =props.lightlevel_item
lock_item: =props.lock_item
mediaTitle: =props.
motion_item: =props.motion_item
power: =props.power
smoke_item: =props.smoke_item
sourceName: =props.sourceName
temp_item: =props.temp_item
temperatureset_item: =props.temperatureset_item
humidifieron_item: =props.humidifieron_item
fanspeed_item: =props.fanspeed_item
fanon_item: =props.fanon_item
humidifierfan_item: =props.humidifierfan_item
title: =props.title
volumeControlItem: =props.volumeControlItem
window_item: =props.window_item
style:
height: 137px
left: 0px
margin: 0px
padding: 0
position: absolute
top: -30px
width: 100%
z-index: 3
And popup widget code is:
uid: Cell_Temp_Card_Expanded
tags:
- co
- humidity
- motion
- temperature
props:
parameters:
- description: Title on top of the card
label: Title
name: title
required: false
type: TEXT
- description: Icon on top of the card (only f7 icons (without f7:))
label: Icon
name: icon
required: false
type: TEXT
- description: Background image name
label: Background image
name: bg_image_url
required: false
type: TEXT
- description: in rgba() or HEX or empty
label: Background Color
name: bgcolor
required: false
type: TEXT
- context: item
label: Temperature
name: temp_item
required: false
type: TEXT
- context: item
label: Target Temperature
name: temperatureset_item
required: false
type: TEXT
- context: item
label: Cooling On/Off
name: coolingon_item
required: false
type: TEXT
- context: item
label: Heating On/Off
name: heatingon_item
required: false
type: TEXT
- context: item
label: Lightlevel
name: lightlevel_item
required: false
type: TEXT
- context: item
label: Humidity
name: humidity_item
required: false
type: TEXT
- context: item
label: Target Humidity
name: humidityset_item
required: false
type: TEXT
- context: item
label: Humidifier On/Off
name: humidifieron_item
required: false
type: TEXT
- context: item
label: Fanspeed
name: fanspeed_item
required: false
type: TEXT
- context: item
label: Fan on/off
name: fanon_item
required: false
type: TEXT
- context: item
label: Humidifier fan speed
name: humidifierfan_item
required: false
type: TEXT
- context: item
label: CO
name: CO_item
required: false
type: TEXT
- context: item
label: Motion item
name: motion_item
required: false
type: TEXT
- context: item
label: Lights group
name: light
required: false
type: TEXT
- context: item
label: Door item
name: door_item
required: false
type: TEXT
- context: item
label: Lock item
name: lock_item
required: false
type: TEXT
- context: item
label: Window item
name: window_item
required: false
type: TEXT
- context: item
label: Leakage item
name: leakage_item
required: false
type: TEXT
- context: item
label: Smoke item
name: smoke_item
required: false
type: TEXT
- context: item
label: Media Title
name: mediaTitle
required: false
type: TEXT
- context: item
label: Power Item
name: power
required: false
type: TEXT
- context: item
label: Channel
name: channel
required: false
type: TEXT
- context: item
label: Key Code
name: inputAction
required: false
type: TEXT
- context: item
label: Volume Control Item
name: volumeControlItem
required: false
type: TEXT
- context: item
label: Source Name
name: sourceName
required: false
type: TEXT
parameterGroups: []
timestamp: Sep 19, 2022, 2:17:59 AM
component: f7-card
config:
style:
--f7-badge-text-color: var(--f7-text-color)
--f7-bars-bg-color: none
--f7-bars-border-color: none
--f7-bars-translucent-blur: none
--f7-bars-translucent-opacity: none
--f7-navbar-link-color: var(--f7-text-color)
--f7-navbar-shadow-image: none
--f7-page-content-extra-padding-bottom: none
--f7-page-content-extra-padding-top: none
--f7-page-searchbar-offset: none
--f7-page-subnavbar-offset: none
--f7-page-toolbar-bottom-offset: none
--f7-page-toolbar-top-offset: none
--f7-range-label-text-color: var(--f7-text-color)
--f7-range-label-bg-color: var(--f7-card-bg-color)
--f7-range-label-font-size: 16px
--f7-range-label-font-weight: 500
--popup-text-shadow-light: 2px 2px rgba(var(--f7-card-bg-color),.15)
--popup-text-shadow-strong: 2px 2px rgba(var(--f7-card-bg-color),.35)
background: transparent
background-brightness: 60%
background-color: "=props.bgcolor ? props.bgcolor : ''"
background-image: "=props.bg_image_url ? 'url(/static/' + (props.bg_image_url) + ')' : ''"
background-position: down
background-repeat: no-repeat
background-size: cover
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px var(--f7-card-bg-color)
color: var(--f7-text-color)
font-size: large
font-weight: 600
height: 100%
margin: 0
noShadow: false
overflow: hidden
text-shadow: 0.031250em 0.031250em 0.015625em var(--f7-card-bg-color), -0.015625em -0.015625em 0.187500em var(--f7-card-bg-color), -0.006250em -0.006250em 0.187500em var(--f7-card-bg-color)
slots:
default:
- component: f7-card-header
config:
style:
display: flex
justify-content: center
margin: 0
min-height: 35px
padding: 0
slots:
default:
- component: f7-icon
config:
f7: =props.icon
size: 20
visible: "=props.icon ? true : false"
- component: Label
config:
style:
font-size: 20px
font-weight: bold
margin-left: 5px
text: "=props.title ? props.title : ''"
- component: f7-card-content
config:
style:
margin: 0
padding: 0
slots:
default:
- component: f7-row
slots:
default:
- component: f7-segmented
config:
color: gray
raised: false
strong: true
style:
width: 100%
backdrop-filter: blur(5px)
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: select
actionVariableValue: 1
active: =(vars.select == 1)
iconF7: thermometer
iconSize: 40
large: true
outline: =(vars.select == 1)
style:
height: 45px
- component: oh-button
config:
action: variable
actionVariable: select
actionVariableValue: 2
active: =(vars.select == 2)
iconF7: thermometer_snowflake
iconSize: 40
large: true
outline: =(vars.select == 2)
visible: "=props.temperatureset_item || props.humidityset_item || props.fanon_item || props.coolingon_item || props.heatingon_item ? true : false"
style:
height: 45px
- component: oh-button
config:
action: variable
actionVariable: select
actionVariableValue: 3
active: =(vars.select == 3)
iconF7: film
iconSize: 40
large: true
outline: =(vars.select == 3)
visible: "=props.power ? true : false"
style:
height: 45px
- component: oh-button
config:
action: variable
actionVariable: select
actionVariableValue: 4
active: =(vars.select == 4)
iconF7: shield
iconSize: 40
large: true
outline: =(vars.select == 4)
visible: "=props.lock_item || props.door_item || props.window_item || props.motion_item || props.leakage_item ? true : false"
style:
height: 45px
- component: oh-button
config:
action: variable
actionVariable: select
actionVariableValue: 5
active: =(vars.select == 5)
iconF7: graph_square
iconSize: 40
large: true
outline: =(vars.select == 5)
style:
height: 45px
- component: f7-tab
config:
class:
- display-flex
- justify-content-space-between
- flex-direction-column
style:
animation: f7-fade-in 300ms
margin: 5px
padding: 0px
visible: =(vars.select == 1 || vars.select == NULL)
slots:
default:
- component: f7-row
config:
style:
border-bottom: 1px solid
filter: drop-shadow(0px 0px 1px var(--f7-card-bg-color))
margin: 10px
slots:
default:
- component: f7-col
config:
style:
width: auto
slots:
default:
- component: f7-row
config:
style:
flex-wrap: nowrap
justify-content: flex-start
visible: "=props.temp_item ? true : false"
slots:
default:
- component: oh-icon
config:
icon: martinitemp
state: =items[props.temp_item].state
width: 30
- component: Label
config:
style:
color: '=(Number.parseFloat(items[props.temp_item].state.split(" ")[0]) > 30) ? "rgb(242,75,36)" : (Number.parseFloat(items[props.temp_item].state.split(" ")[0]) < 10) ? "rgba(32, 185, 256,0.8)" : "var(--f7-text-color)"'
margin-left: 5px
text: =items[props.temp_item].state.split(" ")[0]+" °C"
- component: f7-row
config:
style:
flex-wrap: nowrap
justify-content: flex-start
z-index: 2
visible: "=props.humidity_item ? true : false"
slots:
default:
- component: oh-icon
config:
icon: hum
state: =items[props.humidity_item].state
width: 30
- component: Label
config:
style:
color: '=(Number.parseFloat(items[props.humidity_item].state.split(" ")[0]) < 35) ? "rgb(242,75,36)" : (Number.parseFloat(items[props.humidity_item].state.split(" ")[0]) > 75) ? "green" : "var(--f7-text-color)"'
margin-left: 5px
text: =items[props.humidity_item].state.split(" ")[0]+" %"
- component: f7-row
config:
style:
flex-wrap: nowrap
justify-content: flex-start
z-index: 2
visible: "=props.lightlevel_item ? true : false"
slots:
default:
- component: oh-icon
config:
icon: lightlevel
state: =items[props.lightlevel_item].state
width: 30
- component: Label
config:
style:
color: "=(items[props.lightlevel_item].state < 1) ? 'gray' : 'var(--f7-text-color)'"
margin-left: 5px
text: =items[props.lightlevel_item].state.split(" ")[0]+" lux"
- component: f7-row
config:
style:
flex-wrap: nowrap
justify-content: flex-start
z-index: 2
visible: "=props.CO_item ? true : false"
slots:
default:
- component: oh-icon
config:
icon: carbondioxidecloud
state: =items[props.CO_item].state
width: 30
- component: Label
config:
style:
color: '=(Number.parseFloat(items[props.CO_item].state.split(" ")[0]) > 1500) ? "red" : (Number.parseFloat(items[props.CO_item].state.split(" ")[0]) > 1000) ? "orange" : "var(--f7-text-color)"'
margin-left: 5px
white-space: nowrap
text: =items[props.CO_item].state.split(" ")[0]+" ppm"
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
justify-content: flex-end
width: auto
slots:
default:
- component: f7-col
config:
style:
z-index: 1
visible: "=props.motion_item || props.lock_item ? true : false"
slots:
default:
- component: oh-button
config:
action: analyzer
actionAnalyzerItems: =[props.motion_item]
large: true
visible: "=props.motion_item ? true : false"
slots:
default:
- component: oh-icon
config:
icon: f7:dot_radiowaves_left_right
width: 40
style:
color: '=(items[props.motion_item].state == "ON") ? "red" : "var(--f7-text-color)"'
- component: oh-button
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: =[props.lock_item]
large: true
visible: "=props.lock_item ? true : false"
slots:
default:
- component: oh-icon
config:
icon: "=(items[props.lock_item].state === 'ON') ? 'f7:lock' : 'f7:lock_open'"
style:
color: var(--f7-text-color)
width: 30
- component: f7-col
config:
style:
z-index: 1
visible: "=props.door_item || props.window_item ? true : false"
slots:
default:
- component: oh-icon
config:
icon: "=(items[props.door_item].state === 'ON') ? 'door-closed' : 'door-open'"
visible: "=props.door_item ? true : false"
width: 25
- component: oh-icon
config:
icon: "=(items[props.window_item].state === 'ON') ? 'window' : 'window-open'"
visible: "=props.window_item ? true : false"
width: 25
- component: f7-block
config:
style:
font-size: medium
font-weight: 600
margin: 5px
padding: 0px
border-bottom: 1px solid
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,metadata
filter: '(loop.switchItem.type=="Switch") ? true : false'
for: switchItem
groupItem: =props.light
sourceType: itemsInGroup
slots:
default:
- component: f7-row
config:
style:
margin-bottom: 5px
slots:
default:
- component: oh-icon
config:
height: 30
icon: '=(items[loop.switchItem.name].state == "ON") ? "f7:lightbulb_fill" : "f7:lightbulb"'
style:
color: '=(items[loop.switchItem.name].state == "ON") ? "yellow" : var(--f7-text-color)'
- component: Label
config:
text: =loop.switchItem.label
- component: oh-toggle
config:
color: yellow
item: =loop.switchItem.name
style:
--f7-toggle-height: 23px
--f7-toggle-width: 55px
--f7-toggle-inactive-color: rgba(100,100,100,0.8)
margin-left: auto
- component: oh-repeater
config:
fetchMetadata: semantics,metadata
filter: '(loop.dimmerItem.type=="Dimmer") ? true : false'
for: dimmerItem
groupItem: =props.light
sourceType: itemsInGroup
slots:
default:
- component: f7-row
config:
style:
margin-bottom: 5px
slots:
default:
- component: oh-icon
config:
height: 30
icon: f7:sun_max
style:
color: '=(loop.dimmerItem.state == "ON") ? "yellow" : var(--f7-text-color)'
- component: Label
config:
style:
margin-right: auto
text: =loop.dimmerItem.label
- component: oh-slider
config:
color: white
item: =loop.dimmerItem.name
label: true
max: '=(loop.dimmerItem.stateDescription && loop.dimmerItem.stateDescription.maximum) ? loop.dimmerItem.stateDescription.maximum : "100"'
style:
--f7-range-bar-active-bg-color: linear-gradient(to right, rgba(30,30,0,0.1), rgba(255,255,0,1))
--f7-range-bar-bg-color: linear-gradient(to right, rgba(50,50,0,0.1), rgba(255,255,0,1))
--f7-range-bar-border-radius: 10px
--f7-range-bar-size: 20px
--f7-range-knob-box-shadow: 0 2px 4px black
--f7-range-knob-size: 25px
margin-left: auto
margin-right: auto
width: 90%
- component: oh-repeater
config:
fetchMetadata: semantics,metadata
filter: 'loop.colorTempItem.metadata.semantics.config.relatesTo == "Property_ColorTemperature" ? true : false'
for: colorTempItem
groupItem: =props.light
sourceType: itemsInGroup
slots:
default:
- component: f7-row
config:
style:
margin-bottom: 5px
slots:
default:
- component: oh-icon
config:
height: 30
icon: f7:dial
style:
color: '=(loop.colorTempItem.state == "ON") ? "yellow" : var(--f7-text-color)'
- component: Label
config:
style:
margin-right: auto
text: =loop.colorTempItem.label
- component: oh-slider
config:
item: =loop.colorTempItem.name
label: true
max: 6500
min: 1700
color: white
style:
--f7-range-bar-active-bg-color: rgba(255, 121, 0,0.1)
--f7-range-bar-bg-color: linear-gradient(to right, rgba(255, 121, 0,0.5), rgba(200, 249, 253,1))
--f7-range-bar-border-radius: 10px
--f7-range-bar-size: 20px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-knob-size: 25px
margin-left: auto
margin-right: auto
width: 90%
- component: oh-repeater
config:
fetchMetadata: semantics,metadata
filter: '(loop.colorItem.type=="Color") ? true : false'
for: colorItem
groupItem: =props.light
sourceType: itemsInGroup
slots:
default:
- component: f7-row
config:
style:
margin-bottom: 5px
--f7-color-picker-slider-size: 15px
--f7-color-picker-slider-knob-size: 25px
slots:
default:
- component: oh-icon
config:
height: 30
icon: f7:slider_horizontal_3
style:
color: '=(loop.colorItem.state == "ON") ? "yellow" : var(--f7-text-color)'
- component: Label
config:
style:
margin-right: auto
text: =loop.colorItem.label
- component: oh-colorpicker
config:
item: =loop.colorItem.name
modules:
- hsb-sliders
- component: f7-tab
config:
class:
- display-flex
- justify-content-space-between
- flex-direction-column
style:
animation: f7-fade-in 300ms
margin: 5px
padding: 0px
visible: =(vars.select == 2)
slots:
default:
- component: f7-segmented
config:
color: gray
raised: false
strong: true
style:
width: 100%
backdrop-filter: blur(5px)
slots:
default:
- component: oh-button
config:
action: toggle
actionItem: =props.heatingon_item
actionCommand: ON
actionCommandAlt: OFF
active: '=(items[props.heatingon_item].state == "ON") ? true : false'
iconF7: thermometer_sun
large: true
outline: '=(items[props.heatingon_item].state == "ON") ? true : false'
visible: "=props.heatingon_item ? true : false"
- component: oh-button
config:
action: toggle
actionItem: =props.coolingon_item
actionCommand: ON
actionCommandAlt: OFF
active: '=(items[props.coolingon_item].state == "ON") ? true : false'
iconF7: thermometer_snowflake
large: true
outline: '=(items[props.coolingon_item].state == "ON") ? true : false'
visible: "=props.coolingon_item ? true : false"
- component: oh-button
config:
action: toggle
actionItem: =props.fanon_item
actionCommand: ON
actionCommandAlt: OFF
active: '=(items[props.fanon_item].state == "ON") ? true : false'
iconF7: wind
large: true
outline: '=(items[props.fanon_item].state == "ON") ? true : false'
visible: "=props.fanon_item ? true : false"
- component: oh-button
config:
action: toggle
actionItem: =props.humidifieron_item
actionCommand: ON
actionCommandAlt: OFF
active: '=(items[props.humidifieron_item].state == "ON") ? true : false'
iconF7: drop
large: true
outline: '=(items[props.humidifieron_item].state == "ON") ? true : false'
visible: "=props.humidifieron_item ? true : false"
- component: f7-block
config:
style:
display: flex
width: 100%
slots:
default:
- component: f7-col
config:
style:
margin: auto
visible: "=props.temperatureset_item ? true : false"
slots:
default:
- component: f7-col
config: {}
slots:
default:
- component: Label
config:
style:
color: var(--f7-text-color)
text: Target temperature
- component: oh-stepper
config:
autorepeat: true
step: 0.5
raised: true
round: true
fill: true
item: =(props.temperatureset_item)
style:
backdrop-filter: blur(5px)
filter: drop-shadow(0px 0px 1px var(--f7-card-bg-color))
--f7-stepper-fill-button-bg-color: rgba(255, 0, 0, 0.4)
--f7-stepper-value-text-color: var(--f7-text-color)
--f7-stepper-height: 40px
--f7-stepper-raised-box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.5), -2px -2px 10px rgba(0, 0, 0, 0.5)
--f7-stepper-value-font-weight: 600
--f7-stepper-border-width: 0px
- component: f7-col
config:
visible: "=props.fanspeed_item ? true : false"
slots:
default:
- component: Label
config:
style:
color: var(--f7-text-color)
text: Fan mode
- component: oh-stepper
config:
min: 1
max: 4
item: =props.fanspeed_item
round: true
raised: true
fill: true
style:
backdrop-filter: blur(5px)
filter: drop-shadow(0px 0px 1px var(--f7-card-bg-color))
--f7-stepper-fill-button-bg-color: rgba(0, 0, 255, 0.4)
--f7-stepper-value-text-color: var(--f7-text-color)
--f7-stepper-height: 40px
--f7-stepper-raised-box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.5), -2px -2px 10px rgba(0, 0, 0, 0.5)
--f7-stepper-value-font-weight: 600
--f7-stepper-border-width: 0px
- component: f7-col
config:
style:
margin: auto
visible: "=props.humidityset_item ? true : false"
slots:
default:
- component: f7-col
config: {}
slots:
default:
- component: Label
config:
style:
color: var(--f7-text-color)
text: Target humidity
- component: oh-stepper
config:
autorepeat: true
autorepeatDynamic: true
item: =props.humidityset_item
round: true
raised: true
fill: true
style:
backdrop-filter: blur(5px)
filter: drop-shadow(0px 0px 1px var(--f7-card-bg-color))
--f7-stepper-fill-button-bg-color: rgba(0, 255, 255, 0.4)
--f7-stepper-value-text-color: var(--f7-text-color)
--f7-stepper-height: 40px
--f7-stepper-raised-box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.5), -2px -2px 10px rgba(0, 0, 0, 0.5)
--f7-stepper-value-font-weight: 600
--f7-stepper-border-width: 0px
- component: f7-col
config:
visible: "=props.humidifierfan_item ? true : false"
slots:
default:
- component: Label
config:
style:
color: var(--f7-text-color)
text: Humidifier fan mode
- component: oh-stepper
config:
min: 1
max: 4
item: =props.humidifierfan_item
round: true
raised: true
fill: true
style:
backdrop-filter: blur(5px)
filter: drop-shadow(0px 0px 1px var(--f7-card-bg-color))
--f7-stepper-fill-button-bg-color: rgba(0, 0, 255, 0.4)
--f7-stepper-value-text-color: var(--f7-text-color)
--f7-stepper-height: 40px
--f7-stepper-raised-box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.5), -2px -2px 10px rgba(0, 0, 0, 0.5)
--f7-stepper-value-font-weight: 600
--f7-stepper-border-width: 0px
- component: f7-tab
config:
class:
- display-flex
- justify-content-space-between
- flex-direction-column
style:
animation: f7-fade-in 300ms
font-weight: 600
margin: 5px
margin-right: 5px
padding: 0px
text-shadow: 1px 1px 1px var(--f7-card-bg-color), -1px -1px 1px var(--f7-card-bg-color), 1px -1px 1px var(--f7-card-bg-color), -1px 1px 1px var(--f7-card-bg-color)
visible: =(vars.select == 3)
slots:
default:
- component: f7-block
config:
style:
height: 70px
slots:
default:
- component: oh-button
config:
large: true
raised: true
style:
box-shadow: 0px 2px 5px
height: 40px
line-height: 1.5
top: 5px
white-space: pre-wrap
word-break: break-word
text: "=(items[props.sourceName].state !== 'UNDEF' ? (items[props.sourceName].state +' '+ items[props.mediaTitle].state) : items[props.mediaTitle].state)"
textColor: var(--f7-text-color)
- component: f7-block
config:
style:
width: auto
slots:
default:
- component: f7-row
config: {}
slots:
default:
- component: oh-button
config:
action: command
actionCommand: "=(items[props.power].state === 'OFF') ? 'ON' : 'OFF' "
actionItem: =props.power
iconF7: power
iconSize: 20
style:
background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
border-radius: 12px
box-shadow: 0px 2px 2px
color: "=(items[props.power].state === 'OFF') ? 'var(--f7-text-color)' : 'red' "
width: 25%
- component: oh-button
config:
action: command
actionCommand: KEY_HOME
actionItem: =props.inputAction
iconF7: house
iconSize: 20
style:
background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
border-radius: 12px
box-shadow: 0px 2px 2px
color: var(--f7-text-color)
width: 25%
- component: oh-button
config:
action: command
actionCommand: KEY_MENU
actionItem: =props.inputAction
iconF7: menu
iconSize: 20
style:
background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
border-radius: 12px
box-shadow: 0px 2px 5px
color: var(--f7-text-color)
width: 25%
- component: f7-row
config:
style:
color: var(--f7-text-color)
height: 37px
margin-top: 5px
width: 100%
slots:
default:
- component: f7-segmented
config:
round: true
strong: true
style:
--f7-segmented-strong-between-buttons: 3px
--f7-segmented-strong-padding: 0px
border-radius: 12px
box-shadow: 1px 0px 8px
width: 100%
slots:
default:
- component: oh-button
config:
action: command
actionCommand: INCREASE
actionItem: =props.volumeControlItem
iconF7: speaker_3
iconSize: 25
style:
background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
border-right: 1px solid gray
width: 50%
- component: oh-button
config:
action: command
actionCommand: KEY_CHUP
actionItem: =props.inputAction
iconF7: arrow_up
iconSize: 25
style:
background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
border-left: 1px solid gray
width: 50%
- component: f7-row
config:
style:
width: 100%
slots:
default:
- component: f7-segmented
config:
round: true
strong: true
style:
--f7-segmented-strong-between-buttons: 3px
--f7-segmented-strong-padding: 0px
border-radius: 12px
box-shadow: 1px 0px 5px
width: 100%
slots:
default:
- component: oh-button
config:
action: command
actionCommand: DECREASE
actionItem: =props.volumeControlItem
bgColor: black
iconF7: speaker_1
iconSize: 25
style:
background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
border-right: 1px solid gray
color: var(--f7-text-color)
width: 50%
- component: oh-button
config:
action: command
actionCommand: KEY_CHDOWN
actionItem: =props.inputAction
bgColor: black
iconF7: arrow_down
iconSize: 25
style:
background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
border-left: 1px solid gray
color: var(--f7-text-color)
width: 50%
- component: f7-row
config:
style:
margin-top: 10px
slots:
default:
- component: oh-button
config:
action: command
actionCommand: KEY_RED
actionItem: =props.inputAction
bgColor: black
iconF7: circle_fill
iconSize: 20
style:
background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
border-radius: 12px
box-shadow: 0px 2px 5px
color: red
width: 20%
- component: oh-button
config:
action: command
actionCommand: KEY_GREEN
actionItem: =props.inputAction
bgColor: black
iconF7: circle_fill
iconSize: 20
style:
background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
border-radius: 12px
box-shadow: 0px 2px 5px
color: green
width: 20%
- component: oh-button
config:
action: command
actionCommand: KEY_YELLOW
actionItem: =props.inputAction
bgColor: black
iconF7: circle_fill
iconSize: 20
style:
background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
border-radius: 12px
box-shadow: 0px 2px 5px
color: yellow
width: 20%
- component: oh-button
config:
action: command
actionCommand: KEY_BLUE
actionItem: =props.inputAction
bgColor: black
iconF7: circle_fill
iconSize: 20
style:
background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
border-radius: 12px
box-shadow: 0px 2px 5px
color: blue
width: 20%
- component: f7-row
config:
style:
margin-top: 10px
slots:
default:
- component: oh-button
config:
action: command
actionCommand: KEY_REWIND
actionItem: =props.inputAction
bgColor: black
iconF7: backward_end
iconSize: 20
style:
background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
border-radius: 12px
box-shadow: 0px 2px 5px
color: var(--f7-text-color)
width: 20%
- component: oh-button
config:
action: command
actionCommand: KEY_STOP
actionItem: =props.inputAction
bgColor: black
iconF7: stop
iconSize: 20
style:
background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
border-radius: 12px
box-shadow: 0px 2px 5px
color: var(--f7-text-color)
width: 20%
- component: oh-button
config:
action: command
actionCommand: KEY_PLAY
actionItem: =props.inputAction
bgColor: black
iconF7: playpause
iconSize: 20
style:
background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
border-radius: 12px
box-shadow: 0px 2px 5px
color: var(--f7-text-color)
width: 20%
- component: oh-button
config:
action: command
actionCommand: KEY_FF
actionItem: =props.inputAction
bgColor: black
iconF7: forward_end
iconSize: 20
style:
background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
border-radius: 12px
box-shadow: 0px 2px 5px
color: var(--f7-text-color)
width: 20%
- component: f7-block
config:
style:
height: 220px
width: auto
slots:
default:
- component: oh-button
config:
action: command
actionCommand: KEY_EXIT
actionItem: =props.inputAction
style:
background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
border-radius: 12px
box-shadow: 0px 2px 5px
color: var(--f7-text-color)
left: 10%
position: absolute
top: 15px
width: 70px
text: EXIT
- component: oh-button
config:
action: command
actionCommand: KEY_MENU
actionItem: =props.inputAction
style:
background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
border-radius: 12px
box-shadow: 0px 2px 5px
color: var(--f7-text-color)
position: absolute
right: 10%
top: 15px
width: 70px
text: MENU
- component: oh-button
config:
action: command
actionCommand: KEY_MUTE
actionItem: =props.inputAction
iconF7: speaker_slash
iconSize: 25
style:
background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
border-radius: 12px
box-shadow: 0px 2px 5px
color: red
left: 50%
position: absolute
top: 15px
transform: translate(-50%)
- component: oh-button
config:
action: command
actionCommand: KEY_RETURN
actionItem: =props.inputAction
iconF7: arrow_counterclockwise
iconSize: 25
style:
background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
border-bottom: 0px
border-radius: 12px
box-shadow: 0px 2px 5px
color: var(--f7-text-color)
display: flex
height: 40px
left: 10%
position: absolute
top: 60px
transform: skew(140deg)
width: 15%
z-index: 2
- component: f7-badge
config:
bgColor: gray
style:
background-image: "linear-gradient(300deg, #1C1C1C 10%, #494949 360%)"
border-radius: 100px/100px
box-shadow: 1px 0px 8px
height: 160px
left: 50%
position: absolute
top: 60px
transform: translate(-50%)
width: 160px
z-index: 1
- component: f7-badge
config:
bgColor: black
style:
background-image: "linear-gradient(360deg, #1C1C1C 1%, #494949 90%)"
border-radius: 60px
box-shadow: 1px 0px 8px
height: 60px
left: 50%
position: absolute
top: 110px
transform: translate(-50%)
width: 60px
z-index: 3
- component: oh-link
config:
action: command
actionCommand: KEY_ENTER
actionItem: =props.inputAction
style:
color: var(--f7-text-color)
font-size: 18px
left: 50%
position: absolute
top: 125px
transform: translate(-50%)
z-index: 3
text: OK
- component: oh-link
config:
action: command
actionCommand: KEY_UP
actionItem: =props.inputAction
iconF7: arrowtriangle_up
iconSize: 35
style:
color: var(--f7-text-color)
left: 50%
position: absolute
top: 67px
transform: translate(-50%)
z-index: 2
- component: oh-link
config:
action: command
actionCommand: KEY_LEFT
actionItem: =props.inputAction
iconF7: arrowtriangle_left
iconSize: 35
style:
color: var(--f7-text-color)
left: 50%
position: absolute
top: 120px
transform: translate(-75px)
z-index: 2
- component: oh-link
config:
action: command
actionCommand: KEY_RIGHT
actionItem: =props.inputAction
iconF7: arrowtriangle_right
iconSize: 35
style:
color: var(--f7-text-color)
left: 50%
position: absolute
top: 120px
transform: translate(45px)
z-index: 2
- component: oh-link
config:
action: command
actionCommand: KEY_DOWN
actionItem: =props.inputAction
iconF7: arrowtriangle_down
iconSize: 35
style:
color: var(--f7-text-color)
left: 50%
position: absolute
top: 180px
transform: translate(-50%)
z-index: 2
- component: oh-button
config:
action: command
actionCommand: left
actionItem: =props.inputaction
iconF7: circle
iconSize: 25
style:
align-items: center
background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
border-bottom: 0px
border-radius: 12px
box-shadow: 0px 2px 5px
color: var(--f7-text-color)
display: flex
height: 40px
justify-content: center
position: absolute
right: 10%
top: 60px
transform: skew(40deg)
width: 15%
z-index: 2
- component: oh-button
config:
action: command
actionCommand: KEY_GUIDE
actionItem: =props.inputaction
iconF7: doc_plaintext
iconSize: 25
style:
align-items: center
background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
border-bottom: 0px
border-radius: 12px
box-shadow: 0px 2px 5px
color: var(--f7-text-color)
display: flex
height: 40px
justify-content: center
left: 10%
position: absolute
top: 180px
transform: skew(40deg)
width: 15%
z-index: 2
- component: oh-button
config:
action: command
actionCommand: KEY_INFO
actionItem: =props.inputAction
iconF7: info_circle
iconSize: 25
style:
align-items: center
background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
border-bottom: 0px
border-radius: 12px
box-shadow: 0px 2px 5px
color: var(--f7-text-color)
display: flex
height: 40px
justify-content: center
position: absolute
right: 10%
top: 180px
transform: skew(140deg)
width: 15%
z-index: 2
- component: f7-tab
config:
style:
animation: f7-fade-in 300ms
filter: drop-shadow(0px 1px 1px var(--f7-card-bg-color))
margin: 5px
margin-right: 5px
padding: 0px
visible: =(vars.select == 4)
slots:
default:
- component: oh-list
config: {}
slots:
default:
- component: oh-list-item
config:
accordionItem: true
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: =[props.lock_item]
badge: '=(items[props.lock_item].state == "ON") ? "Closed" : "Open"'
badgeColor: '=(items[props.lock_item].state == "ON") ? "green" : "red"'
icon: "=(items[props.lock_item].state === 'ON') ? 'f7:lock' : 'f7:lock_open'"
item: =props.lock_item
style:
font-size: large
title: Lock
visible: "=props.lock_item ? true : false"
- component: oh-list-item
config:
accordionItem: true
action: analyzer
actionAnalyzerItems: =[props.door_item]
badge: '=(items[props.door_item].state == "ON") ? "Closed" : "Open"'
badgeColor: '=(items[props.door_item].state == "ON") ? "green" : "red"'
icon: "=(items[props.door_item].state === 'ON') ? 'door-closed' : 'door-open'"
item: =props.door_item
style:
font-size: large
title: Doors
visible: "=props.door_item ? true : false"
slots:
accordion:
- component: oh-repeater
config:
for: item
fragment: true
groupItem: =props.door_item
sourceType: itemsInGroup
slots:
default:
- component: oh-list-item
config:
action: analyzer
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =[loop.item.name]
badge: '=(items[loop.item.name].state == "ON") ? "Closed" : "Open"'
badgeColor: '=(items[loop.item.name].state == "ON") ? "green" : "red"'
icon: '=(items[loop.item.name].state == "ON") ? "door-closed" : "door-open"'
item: =loop.item.name
title: =loop.item.label
- component: oh-list-item
config:
accordionItem: true
action: analyzer
actionAnalyzerItems: =[props.window_item]
badge: '=(items[props.window_item].state == "ON") ? "Closed" : "Open"'
badgeColor: '=(items[props.window_item].state == "ON") ? "green" : "red"'
icon: "=(items[props.window_item].state === 'ON') ? 'window-closed' : 'window-open'"
item: =props.window_item
style:
font-size: large
title: Windows
visible: "=props.window_item ? true : false"
slots:
accordion:
- component: oh-repeater
config:
for: item
fragment: true
groupItem: =props.window_item
sourceType: itemsInGroup
slots:
default:
- component: oh-list-item
config:
action: analyzer
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =[loop.item.name]
badge: '=(items[loop.item.name].state == "ON") ? "Closed" : "Open"'
badgeColor: '=(items[loop.item.name].state == "ON") ? "gray" : "lightblue"'
icon: '=(items[loop.item.name].state == "ON") ? "window-closed" : "window-open"'
item: =loop.item.name
title: =loop.item.label
- component: oh-list-item
config:
accordionItem: true
action: analyzer
actionAnalyzerItems: =[props.motion_item]
badge: '=(items[props.motion_item].state == "ON") ? "Movement" : "Calm"'
badgeColor: '=(items[props.motion_item].state == "ON") ? "red" : "green"'
icon: f7:dot_radiowaves_left_right
item: =props.motion_item
style:
font-size: large
title: Movement
visible: "=props.motion_item ? true : false"
slots:
accordion:
- component: oh-repeater
config:
for: item
fragment: true
groupItem: =props.motion_item
sourceType: itemsInGroup
slots:
default:
- component: oh-list-item
config:
action: analyzer
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =[loop.item.name]
badge: '=(items[loop.item.name].state == "ON") ? "Movement" : "Calm"'
badgeColor: '=(items[loop.item.name].state == "ON") ? "red" : "green"'
icon: f7:dot_radiowaves_left_right
item: =loop.item.name
title: =loop.item.label
- component: oh-list-item
config:
action: analyzer
actionAnalyzerItems: =[props.leakage_item]
badge: '=(items[props.leakage_item].state == "ON") ? "Leak" : "Dry"'
badgeColor: '=(items[props.leakage_item].state == "ON") ? "red" : "green"'
icon: "=(items[props.leakage_item].state === 'ON') ? 'f7:drop_triangle' : 'f7:drop'"
item: =props.motion_item
style:
font-size: large
title: Leakage
visible: "=props.leakage_item ? true : false"
- component: oh-list-item
config:
action: analyzer
actionAnalyzerItems: =[props.smoke_item]
badge: '=(items[props.smoke_item].state == "ON") ? "Smoke" : "No smoke"'
badgeColor: '=(items[props.smoke_item].state == "ON") ? "red" : "green"'
icon: "=(items[props.smoke_item].state === 'ON') ? 'f7:flame_fill' : 'f7:flame'"
item: =props.smoke_item
style:
font-size: large
title: Smoke
visible: "=props.smoke_item ? true : false"
- component: f7-tab
config:
class:
- display-flex
- justify-content-space-between
- flex-direction-column
style:
animation: f7-fade-in 300ms
margin: 5px
padding: 0px
visible: =(vars.select == 5)
slots:
default:
- component: f7-block
config:
style:
text-shadow: none
width: 100%
slots:
default:
- component: oh-chart
config:
height: 50vh
options:
backgroundColor: rgba(0,0,0,0.5)
color:
- red
- "#01ffa6"
- yellow
- "#1689f2"
textStyle:
color: white
slots:
dataZoom:
- component: oh-chart-datazoom
config:
type: inside
grid:
- component: oh-chart-grid
config:
includeLabels: true
left: center
width: 60%
legend:
- component: oh-chart-legend
config:
bottom: 1
textStyle:
color: var(--f7-text-color)
type: scroll
series:
- component: oh-time-series
config:
gridIndex: 0
item: =props.temp_item
name: Temperature
type: line
visible: "=props.temp_item ? true : false"
xAxisIndex: 0
yAxisIndex: 0
- component: oh-time-series
config:
gridIndex: 0
item: =props.humidity_item
name: Humidity
type: line
visible: "=props.humidity_item ? true : false"
xAxisIndex: 0
yAxisIndex: 1
- component: oh-time-series
config:
gridIndex: 0
item: =props.lightlevel_item
name: Lightlevel
type: line
visible: "=props.lightlevel_item ? true : false"
xAxisIndex: 0
yAxisIndex: 2
- component: oh-time-series
config:
gridIndex: 0
item: =props.CO_item
name: CO2
type: line
visible: "=props.CO_item ? true : false"
xAxisIndex: 0
yAxisIndex: 3
tooltip:
- component: oh-chart-tooltip
config:
confine: true
smartFormatter: true
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
yAxis:
- component: oh-value-axis
config:
gridIndex: 0
name: °C
nameLocation: start
position: left
show: "=props.temp_item ? true : false"
- component: oh-value-axis
config:
gridIndex: 0
name: "%"
nameLocation: start
position: right
show: "=props.humidity_item ? true : false"
- component: oh-value-axis
config:
gridIndex: 0
name: lux
nameLocation: start
offset: 20
position: left
show: "=props.lightlevel_item ? true : false"
- component: oh-value-axis
config:
gridIndex: 0
name: ppm
nameLocation: start
offset: 30
scale: true
show: "=props.CO_item ? true : false"
Widgets are using custom icons, so you’ll have to download them and place them to openhab’s /icons/classic directory, or change the code to your preferred icons.
