Room Card with status overview

full data

The room card widget provides a quick overview for many states in one room and is fully configurable.
You can use a background image and you may use a header.
Color scheme and opacity is fully configurable for the columns.

Data displayed

The widget can display up to three columns of data, each data field can and has to be configured:

  1. Humidity and illumination
  2. Current temperature, target temperature (in braces), heating & cooling state
  3. Lights state (on/off + number of lights on), windows/doors (for each open/closed + number of open), one or two blinds position, speaker state

The widget was inspired by the cards of the location tab and credits for the basic concept go to @Integer at [OH3] Main UI Examples - #22 by Integer.

Screenshots

minimalistic

Changelog

Version 0.2

  • Fallback to state if displayState is not available for an Item

Version 0.1

  • initial release

Resources

uid: roomCard
# description: room card with background image & state overview
# author: Copyright (c) 2021 Florian Hotze under MIT License
# credits: Mike P (@integer) at https://community.openhab.org/t/oh3-main-ui-examples/117928/22 for the concept
tags: []
props:
  parameters:
    - description: Title to display in upper right corner
      label: Header
      name: text_header
      required: false
      type: TEXT
    - description: web address of background image
      label: Background image
      name: image
      required: false
      type: TEXT
    - description: HEX, rgba or name, e.g. white or black
      label: Background color
      name: bgcolor
      required: true
      type: TEXT
    - description: decimal, e.g. 0.6
      label: Background opacity
      name: bgopacity
      required: true
      type: TEXT
    - description: icon & text color, e.g. black or white
      label: Icon & text color
      name: color
      required: true
      type: TEXT
    - description: Page which will be navigated to
      label: Page ID
      name: page
      required: false
    - context: item
      description: item/group for light(s)
      label: Light(s) item
      name: light
      required: false
      type: TEXT
    - context: item
      description: Group:Number:COUNT(ON) item for numbers of lights on
      label: Number of lights on
      name: lights_number
      required: false
      type: TEXT
    - context: item
      description: item for windows(s)
      label: Window(s) item
      name: window
      required: false
      type: TEXT
    - context: item
      description: Group:Number:COUNT(CLOSED) item for numbers of windows open
      label: Number of windows open
      name: windows_number
      required: false
      type: TEXT
    - context: item
      description: item for temperature
      label: Temperature item
      name: temp
      required: false
      type: TEXT
    - context: item
      description: item for set temperature
      label: Set temperature item
      name: settemp
      required: false
      type: TEXT
    - context: item
      description: item for blinds
      label: Blind(s) item
      name: blinds
      required: false
      type: TEXT
    - context: item
      description: item for blinds
      label: Blind 2 item
      name: blinds2
      required: false
      type: TEXT
    - context: item
      description: item for speaker(s)
      label: Speaker(s) item
      name: speaker
      required: false
      type: TEXT
    - context: item
      description: item for heating state
      label: Heating state item
      name: heating
      required: false
      type: TEXT
    - context: item
      description: item for cooling state
      label: Cooling state item
      name: cooling
      required: false
      type: TEXT
    - context: item
      description: item for humidity
      label: Humidity item
      name: humidity
      required: false
      type: TEXT
    - context: item
      description: item for illuminance
      label: Illuminance item
      name: illuminance
      required: false
      type: TEXT
    - context: item
      description: item for door state(s)
      label: Door state(s)
      name: door_state
      required: false
      type: TEXT
    - context: item
      description: item for door lock(s)
      label: Door lock(s)
      name: door_lock
      required: false
      type: TEXT
timestamp: Dec 24, 2021, 4:27:46 PM
component: f7-card
config:
  style:
    background-image: ='url(' + props.image + ')'
    background-position: center
    background-size: cover
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    class:
      - padding: 0px
    height: 130px
    margin-left: 5px
    margin-right: 5px
    noShadow: false
slots:
  content:
    - component: f7-block
      config:
        style:
          background: =props.bgcolor
          border-radius: 7px
          opacity: =props.bgopacity
          position: absolute
          right: 16px
          top: -5px
        visible: "=props.text_header ? true : false"
      slots:
        default:
          - component: Label
            config:
              style:
                color: =props.color
                font-size: 20px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
              text: =props.text_header
    - component: f7-block
      config:
        style:
          background: =props.bgcolor
          border-radius: 7px
          bottom: -75px
          left: 16px
          opacity: =props.bgopacity
          position: absolute
      slots:
        default:
          - component: f7-chip
            config:
              iconColor: =props.color
              iconF7: "=items[props.light].state == 'ON' ? 'lightbulb_fill' : 'lightbulb_slash'"
              iconSize: 18
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              text: "=props.lights_number ? ((items[props.light].state == 'ON') ? items[props.lights_number].state : '') : ''"
              textColor: =props.color
              visible: "=props.light ? true : false"
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=props.door_state ? true : false"
            slots:
              media:
                - component: oh-icon
                  config:
                    icon: "=items[props.door_state].state === 'CLOSED' ? 'door-closed' : 'door-open'"
                    iconSize: 24
                    style:
                      height: 24px
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              text: "=(items[props.window].state == 'OPEN') ? (props.windows_number ? items[props.windows_number].state : '') : ''"
              textColor: =props.color
              visible: "=props.window ? true : false"
            slots:
              media:
                - component: oh-icon
                  config:
                    icon: "=items[props.window].state === 'CLOSED' ? 'window-closed' : 'window-open'"
                    iconSize: 24
                    style:
                      height: 24px
          - component: f7-chip
            config:
              iconColor: =props.color
              iconF7: "=items[props.door_lock].state === 'ON' ? 'lock_open' : 'lock'"
              iconSize: 18
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              text: "=items[props.door_lock].state === 'ON' ? '' : ''"
              visible: "=props.door_lock ? true : false"
          - component: f7-chip
            config:
              iconColor: =props.color
              iconF7: arrow_up_arrow_down
              iconSize: 18
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              text: "=props.blinds2 ? items[props.blinds].state + ' | ' + items[props.blinds2].displayState : items[props.blinds].displayState"
              textColor: =props.color
              visible: "=props.blinds ? true : false"
          - component: f7-chip
            config:
              iconColor: =props.color
              iconF7: "=items[props.speaker].state === 'ON' ? 'speaker_3_fill' : 'speaker_slash'"
              iconSize: 18
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=props.speaker ? true : false"
    - component: f7-block
      config:
        style:
          background: =props.bgcolor
          border-radius: 7px
          bottom: -45px
          left: 16px
          opacity: =props.bgopacity
          position: absolute
      slots:
        default:
          - component: f7-chip
            config:
              iconColor: =props.color
              iconF7: thermometer
              iconSize: 18
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              text: "=(items[props.temp].displayState ? items[props.temp].displayState : items[props.temp].state) +  (props.settemp ? ' (' + (items[props.settemp].displayState ? items[props.settemp].displayState : items[props.settemp].state) + ')' : '')"
              textColor: =props.color
              visible: "=props.temp ? true : false"
          - component: f7-chip
            config:
              iconColor: =props.color
              iconF7: flame
              iconSize: 18
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: =items[props.heating].state === 'ON'
          - component: f7-chip
            config:
              iconColor: =props.color
              iconF7: circle_grid_hex
              iconSize: 18
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: =items[props.cooling].state === 'ON'
    - component: f7-block
      config:
        style:
          background: =props.bgcolor
          border-radius: 7px
          bottom: -15px
          left: 16px
          opacity: =props.bgopacity
          position: absolute
      slots:
        default:
          - component: f7-chip
            config:
              iconColor: =props.color
              iconF7: drop
              iconSize: 18
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              text: "=items[props.humidity].displayState ? items[props.humidity].displayState : items[props.humidity].state"
              textColor: =props.color
              visible: "=props.humidity ? true : false"
          - component: f7-chip
            config:
              iconColor: =props.color
              iconF7: sun_min
              iconSize: 18
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              text: "=items[props.illuminance].displayState ? items[props.illuminance].displayState : items[props.illuminance].state"
              textColor: =props.color
              visible: "=props.illuminance ? true : false"
    - component: oh-link
      config:
        action: navigate
        actionPage: ='page:' + props.page
        style:
          height: 125px
          left: 0px
          position: absolute
          top: 0px
          width: 100%
        visible: "=props.page ? true : false"
2 Likes

Line 254 (actual temperature) should be

“=(items[props.temp].displayState ? items[props.temp].displayState : items[props.temp].state) + (props.settemp ? ’ (’ + items[props.settemp].state + ‘)’ : ‘’)”

instead of

“=(items[props.temp].displayState) + (props.settemp ? ’ (’ + items[props.settemp].displayState + ‘)’ : ‘’)”

in case of using innogy thermostat, but maybe on all other thermostats as well

@Andy_Eichhorst
Thanks for that tip.

I had no problems only using displayState, but yeah, sometimes displayState is not available, so I updated the whole widget to always fall back to state when displayState is not available.

1 Like