StateGrid to show status information of an equipment

Add-on Marketplace UI Widgets
,
1

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

image
image1441Ă—534 30.2 KB

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
2

You mention that we have to “provide the type of equipment according to semantics”… But this is based on “Tags” instead, right ?

v.

3

Not sure what you mean. A type of an equipment (e.g.SmokeDetector) is defined by tags.

4

Hi @Oliver2

I recently discovered your widget. I have been adding more power monitoring devices (mostly Shelly) and this widget is fantastic for displaying and organising the devices together.
Would you be able to help point me in the right direction to make a modification?
I’d like to add a toggle as the last column to turn the device On or Off.
I’ve been able to add a single column after the repeater for the column headings for this, but am struggling to figure out how to add a single column after the grid repeater to only have an oh-toggle-item. The item for the toggle switches would all be named as thingname_Power . For example Prusa_MK3Splus_Power, Coffee_Maker_Power
I’m beginning to wrap my head around how the repeater for the grid works but haven’t been able to sort out how to do this…

Thanks, Craig.

5

Add a f7-col and oh-toggle control at the end of your widget like this:

                      - 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
                        #add this:
                      - component: f7-col
                        config:
                          style:
                            background: "#222222"
                        slots:
                          default:
                            - component: oh-toggle
                              config:
                                item: =loop.rThing.name + "_Power"
1 Like
6

Great thank you very much! I was sooo close but not quite correct… :+1:

Craig