Hi,
With the help of all of you, but mostly from @JustinG (thank you so much!) I have built a card widget to display who is at home:
This card widget displays an image in a row for every member of the family in gray if not at home and in color if at home.
It also displays a list of non-family visitors if at home.
All items are linked to their analyzer.
Here is the code:
uid: At home Card
tags:
- presence
props:
parameters:
- default: At home
description: "Default: 'At home'"
label: Title
name: title
required: false
type: TEXT
- context: item
default: Family
description: Items group of people who are family members. Items must be switch and indicate presence.
label: Family group
name: family
required: true
type: TEXT
- default: "Visitors:"
description: "Default: 'Visitors:'"
label: Visitors title
name: visitorsTitle
required: false
type: TEXT
- context: item
default: NotFamily
description: Items group of people who are not family members. Items must be switch and indicate presence.
label: Not family group
name: notFamily
required: true
type: TEXT
- default: presence
description: Folder containing images ($OPENHAB_CONF/html/name-of-the-folder). One white space for no folder.
label: Image folder
name: imageFolder
required: true
type: TEXT
- default: png
description: Extension of files.
label: Extension
name: extension
required: true
type: TEXT
- default: rgba(245,210,210,1)
description: Card background gradient top color. Hex or RGBA.
label: Background gradient top color
name: bggradienttopcolor
required: false
type: TEXT
- default: rgba(255,245,245,1)
description: Card background gradient bottom color. Hex or RGBA.
label: Background gradient bottom color
name: bggradientbottomcolor
required: false
type: TEXT
parameterGroups: []
timestamp: Mar 23, 2023, 11:33:14 AM
component: f7-card
config:
class:
- padding
style:
--f7-card-header-border-color: transparent
--f7-card-header-font-weight: 700
background: ='linear-gradient(to bottom, '+props.bggradienttopcolor+', '+props.bggradientbottomcolor+')'
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
noShadow: false
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
style:
color: rgba(50,50,50,1)
font-size: 26px
font-weight: 600
letter-spacing: .75px
overflow: hidden
padding-bottom: 10px
text-overflow: ellipsis
text-shadow: 2px 2px rgba(80,80,80,.25)
white-space: nowrap
text: =props.title
- component: f7-row
slots:
default:
- component: oh-repeater
config:
filter: true
for: familyMember
fragment: true
groupItem: =props.family
sourceType: itemsInGroup
slots:
default:
- component: f7-col
slots:
default:
- component: f7-col
slots:
default:
- component: oh-image
config:
action: analyzer
actionAnalyzerItems:
- =loop.familyMember.name
style:
filter: =items[loop.familyMember.name].state=="ON"?"":"grayscale(100%) opacity(50%)"
object-fit: cover
width: 100%
url: ="/static/"+(props.imageFolder!=" "?props.imageFolder+"/":"")+loop.familyMember.name+"."+props.extension
- component: f7-row
slots:
default:
- component: oh-repeater
config:
filter: true
for: familyMember
fragment: true
groupItem: =props.family
sourceType: itemsInGroup
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
class:
- text-align-center
style:
color: =items[loop.familyMember.name].state=="ON"?"green":"grey"
font-size: 15px
text-shadow: 2px 2px rgba(80,80,80,.15)
text: =loop.familyMember.label
- component: f7-row
config:
style:
display: =(items[props.notFamily].state=="ON")?"":"none"
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
style:
font-size: 15px
font-weight: bold
padding-left: 15px
padding-top: 15px
text-shadow: 2px 2px rgba(80,80,80,.15)
text: =props.visitorsTitle
- component: f7-row
config:
style:
display: =(items[props.notFamily].state=="ON")?"":"none"
slots:
default:
- component: f7-col
slots:
default:
- component: oh-list
slots:
default:
- component: oh-repeater
config:
filter: loop.person.state == "ON"
for: person
groupItem: =props.notFamily
sourceType: itemsInGroup
slots:
default:
- component: oh-list-item
config:
action: analyzer
actionAnalyzerItems:
- =loop.person.name
icon: f7:person_alt
iconColor: green
item: =loop.person.name
style:
padding-left: 10px
title: =loop.person.label
You will need a switch item that indicates if a person is at home for every person you want to appear in the widget.
You will need a group (defined as switch, with OR) in which you will put your family members and another one for visitors.
You need every person’s name in the item label.
You will need an image for each family member in the html folder inside the openHAB configuration folder. If you don’t want to create a folder inside the html folder for these images, specify a white space (" ") in the widget configuration.
For example, to get the results of the image you need these groups and items:
Group:Switch:OR(ON, OFF) FakeFamily "Fake family [%d]"
Switch Alfred "Alfred" <presence> (FakeFamily) //ON
Switch Betty "Betty" <presence> (FakeFamily) //ON
Switch Cassandra "Cassandra" <presence> (FakeFamily) //OFF
Switch Daisy "Daisy" <presence> (FakeFamily) //OFF
Group:Switch:OR(ON, OFF) FakeNotFamily "Fake not family [%d]"
Switch Edgard "Edgard" <presence> (FakeNotFamily) //OFF
Switch Finn "Finn" <presence> (FakeNotFamily) //ON
Switch Gabriel "Gabriel" <presence> (FakeNotFamily) //OFF
Switch Henry "Henry" <presence> (FakeNotFamily) //ON
Switch Isabella "Isabella" <presence> (FakeNotFamily) //ON
And you will need four .png images: Alfred.png, Betty.png Cassandra.png and Daisy.png. These will go to a “presence” folder I created in the html folder inside the openHAB configuration folder. In my case it is /etc/openhab/html/presence:
$ ls /etc/openhab/html/presence
Alfred.png Betty.png Cassandra.png Daisy.png
You will then configure the widget like this:
Hope you like it.
Regards.
Edit: Fixed visitors names not visible until reloading and a little restyling.