Hello,
I have created my first OH3 widget to show my most important Netatmo parameters of the inside modules. The target is a similar design as oh-cell-card.
However, I have still some challenges with the syntax:
- The f7-card shadow seems to be larger than the original oh-cell background-shadow
- I would like to make this widget to open another page if I click on it - also with the same click behavior of oh-cell-card.
Is it possible to add and “action” or do I need to add a oh-button? how can I do this?
many thanks
uid: widget_NetAtmo_v2
tags: []
props:
parameters:
- description: Set Location
label: Location
name: location
required: false
type: TEXT
- description: Set Sensor Name - Room 1
label: Location
name: locRoom1
required: false
type: TEXT
- context: item
description: Item Sensor Room 1
label: item
name: Room_1
required: false
type: TEXT
- description: Image Room 1
label: Image Path
name: Image_1
required: false
type: TEXT
- description: Set Sensor Name - Room 2
label: Location
name: locRoom2
required: false
type: TEXT
- context: item
description: Item Sensor Room 2
label: item
name: Room_2
required: false
type: TEXT
- description: Image Room 2
label: Image Path
name: Image_2
required: false
type: TEXT
- description: Set Sensor Name - Room 3
label: Location
name: locRoom3
required: false
type: TEXT
- context: item
description: Item Sensor Room 3
label: item
name: Room_3
required: false
type: TEXT
- description: Image Room 3
label: Image Path
name: Image_3
required: false
type: TEXT
- description: Set Sensor Name - Room 4
label: Location
name: locRoom4
required: false
type: TEXT
- context: item
description: Item Sensor Room 4
label: item
name: Room_4
required: false
type: TEXT
- description: Image Room 4
label: Image Path
name: Image_4
required: false
type: TEXT
- description: Set Temperatur Color
label: Temperatur Color
name: ColorTemp
required: false
type: TEXT
- description: Set Humidity Color
label: Humidity Color
name: ColorHumidity
required: false
type: TEXT
- description: Set CO2 Color
label: CO2 Color
name: ColorCO2
required: false
type: TEXT
- description: Set CO2 Threshold Value
label: CO2 Threshold Value
name: ThresholdCO2
required: false
- description: Set CO2 Threshold Color
label: CO2 Threshold Color
name: ThresholdColorCO2
required: false
type: TEXT
- description: Set opacity for background Images
label: Opacity Image (e.g. 20%)
name: opacity
required: false
parameterGroups: []
timestamp: Feb 10, 2021, 8:27:01 PM
component: f7-card
config:
title: =props.location
style:
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: var(--f7-card-expandable-box-shadow)
width: auto
margin: 5px
class:
- no-padding
#- no-margin
#- oh-cell
#- label-cell
#- cell-button
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-row
config:
class:
- display-flex
- justify-content-space-between
- align-content-stretch
- align-items-center
style:
flex-wrap: nowrap
slots:
default:
- component: f7-col
config:
style:
width: 20px
class:
- display-flex
- flex-direction-column
- align-items-center
- component: f7-col
config:
style:
width: 100px
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: Label
config:
text: = props.locRoom1
style:
fontSize: 11px
fontWeight: 400
color: =props.ColorTemp
z-index: 1
text-align: center
class:
- margin-horizontal
- component: f7-col
config:
style:
width: 100px
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: Label
config:
text: = props.locRoom2
style:
fontSize: 11px
fontWeight: 400
color: =props.ColorTemp
z-index: 1
text-align: center
class:
- margin-horizontal
- component: f7-col
config:
style:
width: 100px
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: Label
config:
text: = props.locRoom3
style:
fontSize: 11px
fontWeight: 400
color: =props.ColorTemp
z-index: 1
text-align: center
class:
- margin-horizontal
- component: f7-col
config:
style:
width: 100px
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: Label
config:
text: = props.locRoom4
style:
fontSize: 11px
fontWeight: 400
color: =props.ColorTemp
z-index: 1
text-align: center
class:
- margin-horizontal
- component: f7-row
config:
class:
- display-flex
- justify-content-space-between
- align-content-stretch
- align-items-center
style:
flex-wrap: nowrap
slots:
default:
- component: f7-col
config:
style:
width: 20px
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: thermometer
color: blue
size: 24
class:
- margin-horizontal
- component: f7-icon
config:
f7: drop
color: blue
size: 24
class:
- margin-horizontal
- component: f7-icon
config:
f7: gauge
color: blue
size: 24
class:
- margin-horizontal
- component: f7-col
config:
style:
width: 105px
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: oh-image
config:
url: = props.Image_1
noShadow: true
noBorder: true
outline: false
style:
position: absolute
height: 80px
opacity: =props.opacity
z-index: 0
- component: Label
config:
text: "=items[((props.Room_1 === undefined) ? '' : props.Room_1) + '_Temperatur'].displayState"
style:
fontSize: 20px
fontWeight: 600
color: =props.ColorTemp
z-index: 1
class:
- margin-horizontal
- component: Label
config:
text: "=items[((props.Room_1 === undefined) ? '' : props.Room_1) + '_Luftfeuchtigkeit'].state"
style:
fontSize: 16px
fontWeight: 600
color: =props.ColorHumidity
class:
- margin-horizontal
- component: Label
config:
text: "=items[((props.Room_1 === undefined) ? '' : props.Room_1) + '_CO2Gehalt'].state"
style:
fontSize: 14px
fontWeight: 600
color: '=(Number.parseInt(items[props.Room_1 + "_CO2Gehalt"].state) > props.ThresholdCO2) ? props.ThresholdColorCO2 : props.ColorCO2'
class:
- margin-horizontal
- component: f7-col
config:
style:
width: 105px
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: oh-image
config:
url: = props.Image_2
noShadow: true
noBorder: true
outline: false
style:
position: absolute
height: 80px
opacity: =props.opacity
z-index: 0
- component: Label
config:
text: "=items[((props.Room_2 === undefined) ? '' : props.Room_2) + '_Temperatur'].displayState"
style:
fontSize: 20px
fontWeight: 600
color: =props.ColorTemp
class:
- margin-horizontal
- component: Label
config:
text: "=items[((props.Room_2 === undefined) ? '' : props.Room_2) + '_Luftfeuchtigkeit'].state"
style:
fontSize: 16px
fontWeight: 600
color: =props.ColorHumidity
class:
- margin-horizontal
- component: Label
config:
text: "=items[((props.Room_2 === undefined) ? '' : props.Room_2) + '_CO2Gehalt'].state"
style:
fontSize: 14px
fontWeight: 600
color: '=(Number.parseInt(items[props.Room_2 + "_CO2Gehalt"].state) > props.ThresholdCO2) ? props.ThresholdColorCO2 : props.ColorCO2'
class:
- margin-horizontal
- component: f7-col
config:
style:
width: 105px
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: oh-image
config:
url: = props.Image_3
noShadow: true
noBorder: true
outline: false
style:
position: absolute
height: 80px
opacity: =props.opacity
z-index: 0
- component: Label
config:
text: "=items[((props.Room_3 === undefined) ? '' : props.Room_3) + '_Temperatur'].displayState"
style:
fontSize: 20px
fontWeight: 600
color: =props.ColorTemp
class:
- margin-horizontal
- component: Label
config:
text: "=items[((props.Room_3 === undefined) ? '' : props.Room_3) + '_Luftfeuchtigkeit'].state"
style:
fontSize: 16px
fontWeight: 600
color: =props.ColorHumidity
class:
- margin-horizontal
- component: Label
config:
text: "=items[((props.Room_3 === undefined) ? '' : props.Room_3) + '_CO2Gehalt'].state"
style:
fontSize: 14px
fontWeight: 600
color: '=(Number.parseInt(items[props.Room_3 + "_CO2Gehalt"].state) > props.ThresholdCO2) ? props.ThresholdColorCO2 : props.ColorCO2'
class:
- margin-horizontal
- component: f7-col
config:
style:
width: 105px
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: oh-image
config:
url: = props.Image_4
noShadow: true
noBorder: true
outline: false
style:
position: absolute
height: 80px
opacity: =props.opacity
z-index: 0
- component: Label
config:
text: "=items[((props.Room_4 === undefined) ? '' : props.Room_4) + '_Temperatur'].displayState"
style:
fontSize: 20px
fontWeight: 600
color: =props.ColorTemp
class:
- margin-horizontal
- component: Label
config:
text: "=items[((props.Room_4 === undefined) ? '' : props.Room_4) + '_Luftfeuchtigkeit'].state"
style:
fontSize: 15px
fontWeight: 600
color: =props.ColorHumidity
class:
- margin-horizontal
- component: Label
config:
text: "=items[((props.Room_4 === undefined) ? '' : props.Room_4) + '_CO2Gehalt'].state"
style:
fontSize: 14px
fontWeight: 600
color: '=(Number.parseInt(items[props.Room_4 + "_CO2Gehalt"].state) > props.ThresholdCO2) ? props.ThresholdColorCO2 : props.ColorCO2'
class:
- margin-horizontal