StateGrid to show status information of an equipment

This is not about clicking and something is happening in the real word :slight_smile:
It is just about getting status information (e.g. signal strength, battery level, temperature, etc) of an equipment element presented in a space saving table view.
Just wanted to share in case someone needs a template to adapt from.

Just provide the type of equipment according to semantics e.g. SmokeDetector and name of points in a comma-seperated way.
Furthermore it puts the location at the beginning of each row (which was painful to find out)

The widget asumes that the item name follows the standard syntax: thingName_channel

You can also specify individual column headers and an overall header

Code

uid: StateGrid
tags: []
props:
  parameters:
    - description: Name of equipment tag, i.e. SmokeDetector. All equipments with this tag will be included in the query
      label: Tag name
      name: varTag
      required: false
      type: TEXT
    - description: Suffix(es) of items (comma-separated) to be queried within all equipments with the above tag. Syntax:itemSuffix=columnHeader, e.g. BatteryLevel=Battery,SignalStrength=Signal,ErrorCode=Error
      label: Item Suffixes und Label
      name: varItem
      required: false
      type: TEXT
    - label: Header
      name: varHeader
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Feb 10, 2021, 9:36:19 PM
component: f7-card
config:
  style:
    color: var(--my-font-color)
    fontSize: 1.0em
    font-weight: bold
    --f7-card-bg-color: "#111111"
    --f7-card-margin-vertical: 0px
    --f7-card-margin-horizontal: 0px
    --f7-card-content-padding-horizontal: 0px
    --f7-card-content-padding-vertical: 0px
    --f7-card-border-radius: 0px
slots:
  default:
    - component: f7-card-content
      config:
        style:
          align-items: center
          text-align: center
      slots:
        default:
          - component: f7-row
            config:
              style:
                height: 35px
                padding-left: 10px
                fontSize: 150%
                text-align: left
            slots:
              default:
                - component: f7-col
                  slots:
                    default:
                      - component: Label
                        config:
                          text: '=(props.varHeader == NULL) ? "" : props.varHeader'
          - component: f7-row
            config:
              noGap: true
              style:
                height: 35px
            slots:
              default:
                - component: f7-col
                - component: oh-repeater
                  config:
                    for: rHeader
                    sourceType: array
                    in: =props.varItem.split(",")
                    fragment: true
                  slots:
                    default:
                      - component: f7-col
                        slots:
                          default:
                            - component: Label
                              config:
                                text: =loop.rHeader.split("=")[1]
          - component: oh-repeater
            config:
              for: rThing
              sourceType: itemsWithTags
              itemTags: '=(props.varTag == NULL) ? "" : props.varTag'
              fetchMetadata: semantics
              fragment: true
            slots:
              default:
                - component: f7-row
                  config:
                    style:
                      height: 35px
                      --f7-grid-row-gap: 1px
                      --f7-grid-gap: 1px
                  slots:
                    default:
                      - component: f7-col
                        slots:
                          default:
                            - component: Label
                              config:
                                text: =loop.rThing.metadata.semantics.config.hasLocation
                                style:
                                  padding-left: 10px
                                  text-align: left
                      - component: oh-repeater
                        config:
                          for: rItem
                          sourceType: array
                          in: =props.varItem.split(",")
                          fragment: true
                        slots:
                          default:
                            - component: f7-col
                              config:
                                style:
                                  background: "#222222"
                                  font-weight: normal
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: =items[loop.rThing.name + "_" + loop.rItem.split("=")[0]].state
                                      style:
                                        height: 35px
                                      class:
                                        - justify-content-center
                                        - display-flex
                                        - flex-direction-column
2 Likes