[OH3] Main UI - main_widget - part 3 - The Light Card

The Lights widget card used by main_widget will show all kind of lights equipment in a selected room and show controlls based on equipment group members.

Screenshots

[:crayon: Upload other screenshots if necessary or remove the section.]

Changelog

Version 0.1

  • initial release

Resources


uid: main_widget_Light_Card
tags: []
props:
  parameters:
    - context: item
      default: gLightsOffice
      description: Equipment Item (Group) to control
      label: Equipment Item
      name: equipmentItem
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Sep 10, 2022, 9:26:42 PM
component: f7-card
config:
  noShadow: false
  padding: false
  style:
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 15px 1px rgba(0,0,0,0.05)
    margin-left: 5px
    margin-right: 5px
  stylesheet: >
    .card-header:after {
      display: none;
    }
slots:
  content:
    - component: f7-card-header
      config:
        style:
          height: 4rem
      slots:
        default:
          - component: oh-repeater
            config:
              fetchMetadata: semantics,metadata,listWidget
              for: switchItem
              groupItem: =props.equipmentItem
              sourceType: itemsInGroup
              filter: '(loop.switchItem.type=="Switch") ? true : false'
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: f7:lightbulb_filled
                    height: 36
                    style:
                      color: '=(loop.switchItem.state == "ON") ? "yellow" : "gray"'
                      position: absolute
                      top: 15px
                      left: 20px
                - component: oh-toggle
                  config:
                    item: =loop.switchItem.name
                    color: yellow
                    style:
                      position: absolute
                      top: 15px
                      right: 20px
                      --f7-toggle-height: 30px
                      --f7-toggle-width: 60px
                - component: f7-block
                  config:
                    flex-direction: row
                    margin-left: 2.5rem
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =loop.switchItem.label
                          style:
                            font-size: 15px
                            font-weight: 600
                            margin-left: 30px
                            margin-top: 0px
                            line-height: 1.1
                      - component: Label
                        config:
                          text: =loop.switchItem.name
                          style:
                            color: var(--f7-list-item-footer-text-color)
                            font-size: 15px
                            font-weight: 400
                            margin-left: 30px
                            margin-top: 0px
                            line-height: 1.2
    - component: f7-card-content
      config:
        visible: true
        style:
          margin-bottom: -1rem
          --f7-range-bar-size: 2px
          --f7-range-bar-border-radius: 0
          --f7-range-bar-border-color: rgba(0, 0, 0, 0.2)
          --f7-range-knob-size: 30px
          --f7-range-knob-color: white
          --f7-range-knob-box-shadow: none
          --f7-range-bar-active-bg-color: transparent
        stylesheet: >
          .range-bar  {
            opacity: 0.3;
          } .range-knob {
            border-color: rgba(0, 0, 0, 0.3);
            border-width: 2px;
            border-style: solid;
          }
      slots:
        default:
          - component: oh-repeater
            config:
              fetchMetadata: semantics,metadata,listWidget
              for: dimmerItem
              groupItem: =props.equipmentItem
              sourceType: itemsInGroup
              filter: '(loop.dimmerItem.category=="slider") ? true : false'
            slots:
              default:
                - component: Label
                  config:
                    text: Brightness
                    style:
                      color: var(--f7-list-item-footer-text-color)
                      font-size: 13px
                      font-weight: var(--f7-list-item-footer-font-weight)
                      margin-left: 2rem
                      margin-top: 0px
                      margin-bottom: -1rem
                      line-height: 0.5
                - component: oh-slider
                  config:
                    item: =loop.dimmerItem.name
                    min: 0
                    max: 100
                    style:
                      margin: 2rem
                      width: calc(100% - 4rem)
          - component: oh-repeater
            config:
              fetchMetadata: semantics,metadata,listWidget
              for: colorItem
              groupItem: =props.equipmentItem
              sourceType: itemsInGroup
              filter: '(loop.colorItem.category=="colorlight") ? true : false'
            slots:
              default:
                - component: Label
                  config:
                    text: Red
                    style:
                      color: var(--f7-list-item-footer-text-color)
                      font-size: 13px
                      font-weight: var(--f7-list-item-footer-font-weight)
                      margin-left: 2rem
                      margin-top: 0px
                      margin-bottom: -1rem
                      line-height: 0.5
                - component: oh-slider
                  config:
                    item: =loop.colorItem.name
                    min: 0
                    max: 100
                    style:
                      margin: 2rem
                      width: calc(100% - 4rem)
                      --f7-range-knob-color: var(--f7-color-red)
                      --f7-range-bar-active-bg-color: var(--f7-color-red)
                - component: Label
                  config:
                    text: Green
                    style:
                      color: var(--f7-list-item-footer-text-color)
                      font-size: 13px
                      font-weight: var(--f7-list-item-footer-font-weight)
                      margin-left: 2rem
                      margin-top: 0px
                      margin-bottom: -1rem
                      line-height: 0.5
                - component: oh-slider
                  config:
                    item: =loop.colorItem.name
                    min: 0
                    max: 100
                    style:
                      margin: 2rem
                      width: calc(100% - 4rem)
                      --f7-range-knob-color: var(--f7-color-green)
                      --f7-range-bar-active-bg-color: var(--f7-color-green)
                - component: Label
                  config:
                    text: Blue
                    style:
                      color: var(--f7-list-item-footer-text-color)
                      font-size: 13px
                      font-weight: var(--f7-list-item-footer-font-weight)
                      margin-left: 2rem
                      margin-top: 0px
                      margin-bottom: -1rem
                      line-height: 0.5
                - component: oh-slider
                  config:
                    item: =loop.colorItem.name
                    min: 0
                    max: 100
                    style:
                      margin: 2rem
                      width: calc(100% - 4rem)
                      --f7-range-knob-color: var(--f7-color-blue)
                      --f7-range-bar-active-bg-color: var(--f7-color-blue)
    - component: f7-card-footer
      config:
        style:
          background: "=(vars.footercolor) ? 'rgba(var(--f7-color-' + vars.footercolor + '-rgb), 0.1)' : 'var(--f7-bars-bg-color)'"
          border-radius: 0 0 var(--f7-card-expandable-border-radius) var(--f7-card-expandable-border-radius)
          padding: 1rem 2rem


2 Likes