[OH3] Main UI - main_widget - Part 5 - The Scenes Card

To use this widget you need to create a scenes groups which has to be configured in the main_widget. All members of this groups are of type switch and can then be used as trigger in certain rules to activate or deactivate scenes.

Screenshots

Changelog

Version 0.1

  • initial release

Resources

uid: main_widget_Scene_Card
tags: []
props:
  parameters:
    - context: item
      label: Item to control a scene
      name: scene
      required: true
      type: TEXT
    - context: Text
      label: Item Label to control a scene
      name: sceneName
      required: true
      type: TEXT
timestamp: Sep 18, 2022, 12:14:39 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
    background: '=items[props.scene].state == "ON" ? "linear-gradient(to bottom right, rgba(230, 230, 0) 0%, rgba(255, 255, 255) 100%)" : "linear-gradient(to bottom right, rgba(255, 255, 255) 0%, rgba(255, 255, 255) 100%)"'
  stylesheet: >
    .card-header:after {
      display: none;
    }
slots:
  content:
    - component: f7-card-content
      config:
        style:
          height: 4rem
      slots:
        default:
          - component: oh-icon
            config:
              icon: f7:rectangle_on_rectangle_angled
              height: 36
              style:
                color: '=items[props.scene].state == "ON" ? "orange" : "black"'
                position: absolute
                top: 25px
                left: 20px
          - component: Label
            config:
              text: =props.sceneName
              style:
                color: black
                font-weight: 600
                font-size: 15px
                position: absolute
                top: 20px
                margin-left: 4rem
          - component: Label
            config:
              text: SCENE
              style:
                color: black
                font-weight: 400
                font-size: 10px
                position: absolute
                top: 45px
                margin-left: 5rem
          - component: oh-toggle
            config:
              item: =props.scene
              color: yellow
              style:
                position: absolute
                top: 30px
                right: 20px
                --f7-toggle-height: 30px
                --f7-toggle-width: 60px
1 Like