Hello,
I’m trying to get the room card widget to show the number of lights that are “ON” with this widget Card_room_12 posted here.
The original script appears to count the number of items based on a dimmer value over 0
text: "=(Number(items[props.status].state) > 0) ? items[props.status].state : ''"
However, my lights operate in a state of either ON or OFF and I set the scirpt to this.
text: "=(Number(items[props.status].state) === 'ON') ? items[props.status].state : '
Of course, this isn’t working.
Here’s the the group.
and my modified version of the widget
uid: Card_room_12
tags: []
props:
parameters:
- label: Header
name: text_header
required: false
type: TEXT
- description: icon name without ".png", located in static/icons/ folder
label: Icon
name: iconimage
required: false
type: TEXT
- description: HEX or rgba
label: Backgroundcolor
name: bgcolor
required: false
type: TEXT
- description: Page which will be opened as popup
label: Page ID
name: page
required: false
- context: item
description: select group for status lights
label: Item
name: status
required: false
type: TEXT
- context: item
description: select item for heating
label: Item
name: heating
required: false
type: TEXT
- context: item
description: select item for temperature
label: Item
name: temp
required: false
type: TEXT
- context: item
description: select item for set temperature
label: Item
name: settemp
required: false
type: TEXT
- context: item
description: select item for humidity
label: Item
name: humidity
required: false
type: TEXT
- context: item
description: select item for motion
label: Item
name: motion
required: false
type: TEXT
- context: item
description: select item for illuminance
label: Item
name: illuminance
required: false
type: TEXT
- context: item
description: select item for door state(s)
label: Item
name: door_state
required: false
type: TEXT
- context: item
description: select item for door lock(s)
label: Item
name: door_lock
required: false
type: TEXT
- context: item
description: select item for blinds group (SUM)
label: Item
name: blinds_closed
required: false
type: TEXT
- context: item
description: select item for speaker(s)
label: Item
name: speakers
required: false
type: TEXT
- context: item
description: select item for windows(s)
label: Item
name: windows
required: false
type: TEXT
- context: item
description: select item for numbers of windows
label: Item
name: windows_numbers
required: false
type: TEXT
- context: item
description: select item for boiler temp
label: Item
name: boiler_temp
required: false
type: TEXT
timestamp: Nov 22, 2021, 9:51:22 AM
component: f7-card
config:
style:
noShadow: false
class:
- padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor ? props.bgcolor : ''"
height: 125px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 50px
slots:
default:
- component: Label
config:
text: "=props.text_header ? props.text_header : 'Set Props'"
style:
font-size: 17px
font-weight: 600
margin-left: 0px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -37px
left: 16px
slots:
default:
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: "=props.status ? true : false"
text: "=(Number(items[props.status].state) === 'ON') ? items[props.status].state : ''"
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: "=(items[props.status].state === 'ON') ? 'lightbulb' : 'lightbulb_slash'"
iconSize: 18
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: =items[props.heating].state === 'ON'
text: "=items[props.heating].state === 'ON' ? '' : ''"
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: flame
iconSize: 18
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: "=props.door_state ? true : false"
text: "=items[props.door_state].state === 'ON' ? '' : ''"
slots:
media:
- component: oh-icon
config:
icon: "=items[props.door_state].state === 'ON' ? 'door-open' : 'door-closed'"
style:
filter: "='brightness(' + (themeOptions.dark === 'dark' ? '1' : '0.4') + ')'"
height: 18px
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: "=items[props.windows].state === 'OPEN' ? true : false"
text: "=items[props.windows_numbers].state > 0 ? items[props.windows_numbers].state : ''"
slots:
media:
- component: oh-icon
config:
icon: window-open
style:
filter: "='brightness(' + (themeOptions.dark === 'dark' ? '1' : '0.4') + ')'"
height: 18px
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: "=props.door_lock ? true : false"
text: "=items[props.door_lock].state === 'ON' ? '' : ''"
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: "=items[props.door_lock].state === 'ON' ? 'lock_open' : 'lock'"
iconSize: 18
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: "=(Number(Math.floor(items[props.blinds_closed].state)) > 0) ? true : false"
text: "=(Number(items[props.blinds_closed].state) === 0) ? '' : Math.floor(items[props.blinds_closed].state)"
slots:
media:
- component: oh-icon
config:
icon: "=(Number(items[props.blinds_closed].state) === 0) ? 'cinemascreen-30' : 'cinemascreen-100'"
style:
filter: "='brightness(' + (themeOptions.dark === 'dark' ? '100' : '0.3') + ')'"
height: 18px
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: "=items[props.speakers].state === 'PLAY' ? true : false"
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: "=items[props.speakers].state === 'PLAY' ? 'speaker_2' : 'speaker'"
iconSize: 18
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: "=props.illuminance ? true : false"
text: =items[props.illuminance].displayState
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: sun_min
iconSize: 18
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: "=props.motion ? true : false"
text: =items[props.motion].state
slots:
media:
- component: oh-icon
config:
color: "=(items[props.motion].state === 'Motion') ? 'blue' : 'gray'"
icon: "=(items[props.motion].state === 'Motion') ? 'motion' : 'motion'"
style:
filter: "='brightness(' + (themeOptions.dark === 'dark' ? '1' : '0.4') + ')'"
height: 18px
- component: f7-block
config:
style:
position: absolute
bottom: -65px
left: 16px
slots:
default:
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: "=props.temp ? true : false"
text: "=(items[props.temp].displayState ? items[props.temp].displayState : items[props.temp].state) + (props.settemp ? ' (' + items[props.settemp].state + ')' : '')"
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: thermometer
iconSize: 18
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: "=props.humidity ? true : false"
text: =items[props.humidity].displayState
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: drop
iconSize: 18
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: "=props.boiler_temp ? true : false"
text: =items[props.boiler_temp].state
slots:
media:
- component: oh-icon
config:
icon: waterheater2
style:
filter: "='invert(' + (themeOptions.dark === 'dark' ? '1' : '0') + ')'"
height: 18px
- component: oh-image
config:
url: ='/static/icons/' + props.iconimage + '.png'
style:
position: absolute
left: 16px
top: 10px
height: 25px
opacity: 0.7
visible: "=props.iconimage ? true : false"
- component: oh-link
config:
action: popup
actionModal: ='page:' + props.page
style:
position: absolute
left: 0px
top: 0px
height: 110px
width: 100%