[OH3] Main UI - main_widget - part 4 - The Rollershutter Card

[:crayon: Add a primary screenshot or a logo here. The first image of the post will be promoted seen in the add-on list in the UI.]

[:crayon: Replace with your description.]

Screenshots

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

Changelog

Version 0.1

  • initial release

Resources


uid: main_widget_Rollershutter_Card
props:
  parameters:
    - description: Title of the card
      label: Title
      name: Title
      required: false
      type: TEXT
    - context: item
      description: Item to control
      label: Rollershutter Item
      name: RollerItem
      required: true
      type: TEXT
timestamp: Sep 10, 2022, 10:38:07 PM
component: f7-card
config:
  noShadow: false
  padding: false
  style:
    padding: 0px
    border-radius: 10px
    box-shadow: 5px 5px 15px 1px rgba(0,0,0,0.05)
    --f7-card-header-border-color: transparent
    min-width: 90%
slots:
  default:
    - component: f7-card-header
      config:
        style:
          --f7-card-header-border-color: none
      slots:
        default:
          - component: oh-icon
            config:
              icon: iconify:mdi:window-shutter-alert
              height: 30px
              style:
                margin-top: 3%
                margin-bottom: 3%
    - component: Label
      config:
        text: =props.Title
        style:
          position: absolute
          top: 8%
          left: 17%
    - component: Label
      config:
        text: =items[props.RollerItem].state + "% " + " close"
        style:
          position: absolute
          top: 30%
          left: 17%
          background: gray
          border-radius: 9px
    - component: oh-button
      config:
        iconColor: teal
        iconF7: arrow_up_circle
        iconSize: 30
        action: command
        actionItem: =props.RollerItem
        actionCommand: UP
        style:
          position: absolute
          top: 15%
          right: 20%
          height: 33px
          background: transparent
          z-index: 98
    - component: oh-button
      config:
        iconColor: gray
        iconF7: stop_circle
        iconSize: 30
        action: command
        actionItem: =props.RollerItem
        actionCommand: STOP
        style:
          position: absolute
          top: 15%
          right: 10%
          height: 33px
          background: transparent
          z-index: 98
    - component: oh-button
      config:
        iconColor: teal
        iconF7: arrow_down_circle
        iconSize: 30
        action: command
        actionItem: =props.RollerItem
        actionCommand: DOWN
        style:
          position: absolute
          top: 15%
          right: 0%
          height: 33px
          background: transparent
          z-index: 98
    - component: f7-card-footer
      config:
        style:
          height: 60px
          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
      slots:
        default:
          - component: Label
            config:
              text: "Preset positions:"
              style:
                position: absolute
                top: 5%
                color: white
    - component: oh-button
      config:
        round: true
        text: "0"
        action: command
        actionItem: =(props.RollerItem)
        actionCommand: UP
        class:
          - margin
          - display-flex
          - flex-direction-column
        style:
          position: absolute
          height: 24px
          width: 10px
          top: 63%
          left: 20%
          z-index: 98
          background: '=items[props.RollerItem].state == "0" ? "teal" : "gray"'
          color: white
    - component: oh-button
      config:
        round: true
        text: 50
        action: command
        actionItem: =(props.RollerItem)
        actionCommand: 50
        class:
          - margin
          - display-flex
          - flex-direction-column
        style:
          position: absolute
          height: 24px
          width: 10px
          top: 63%
          left: 33%
          z-index: 98
          background: '=items[props.RollerItem].state == "50" ? "teal" : "gray"'
          color: white
    - component: oh-button
      config:
        round: true
        text: 75
        action: command
        actionItem: =(props.RollerItem)
        actionCommand: 75
        class:
          - margin
          - display-flex
          - flex-direction-column
        style:
          position: absolute
          height: 24px
          width: 10px
          top: 63%
          right: 33%
          z-index: 98
          background: '=items[props.RollerItem].state == "75" ? "teal" : "gray"'
          color: white
    - component: oh-button
      config:
        round: true
        text: 100
        action: command
        actionItem: =(props.RollerItem)
        actionCommand: DOWN
        class:
          - margin
          - display-flex
          - flex-direction-column
        style:
          position: absolute
          height: 24px
          width: 10px
          top: 63%
          right: 20%
          z-index: 98
          background: '=items[props.RollerItem].state == "100" ? "teal" : "gray"'
          color: white


1 Like