At home Card

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:

image

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:


image

Hope you like it.
Regards.

Edit: Fixed visitors names not visible until reloading and a little restyling.

3 Likes