Solar Plant Widget

[ajbastien (Al Bastien)]

Example Solar Plant Widget

Resources

Image file:

Widget Code:

uid: roof_solar
tags: []
props:
  parameters:
    - description: The name of the solar plant
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: The solar equipment group (prefix of the point item names)
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jan 29, 2021, 10:55:17 PM
component: f7-card
slots:
  default:
    - component: f7-block
      config:
        style:
          min-height: 200px
          background: url(/static/roofsolar-sm.png)
          background-size: cover
          background-position: right bottom
          border-radius: 12px
          display: flex
          flex-direction: column
          align-items: start
      slots:
        default:
          - component: Label
            config:
              text: =props.title
              iconF7: sun
              style:
                color: black
                margin: 0px 15px
                font-size: 28px
                font-weight: bold
          - component: oh-link
            config:
              text: =items[props.item + '_Energy_Today'].displayState
              action: analyzer
              actionAnalyzerItems: =[props.item + '_Energy_Today']
              iconF7: calendar_today
              iconSize: 24
              color: black
              style:
                margin: 0px 15px
                font-size: 24px
                font-weight: bold
          - component: oh-link
            config:
              text: =items[props.item + '_Current_Power'].displayState
              action: analyzer
              actionAnalyzerItems: =[props.item + '_Current_Power']
              iconF7: clock_fill
              color: black
              style:
                margin: 0px 15px
                font-size: 24px
                font-weight: bold
          - component: oh-link
            config:
              text: =items[props.item + '_Energy_Week'].displayState
              action: analyzer
              actionAnalyzerItems: =[props.item + '_Energy_Week']
              iconF7: W
              color: black
              style:
                margin: 0px 15px
                font-size: 24px
                font-weight: bold
          - component: oh-link
            config:
              text: =items[props.item + '_Modules_Online'].state
              action: analyzer
              actionAnalyzerItems: =[props.item + '_Modules_Online']
              iconF7: N
              color: black
              style:
                margin: 0px 15px
                font-size: 24px
                font-weight: bold

[rlkoshak (Rich Koshak)]

Thanks for the widget. I’ve moved it to the Add-ons - UIs category as that is where similar such widgets are being posted.

Also, it would help distinguish your example from the several others posted so far if you gave it a more descriptive title, e.g. “Solar Plan Widget”.