[OH3] Main UI - main_widget - part 4 - The Rollershutter Card [3.3.0;3.4.9)

image

The main_widget rollershutter card is one of the sub widgets to let you control your rollershutters with a unique look and feel.
Apart from just controling your rollershutters with sending up and down commands, you can also send predefined values like 50% to your device.
Latest version now supports to control time based opening and closing of rollershutters with the new DateTime-trigger for rules.

Installation and Setup

This widget can be installed via the marketplace. For basic operation, no configuration is needed. If you would like to have “fancy names” for your rollershutter cards, please add the uiSemantics to your Equipment groups like described here

To use the time based triggers, there eare some additional steps needed.

  • Install the timepicker widget from the marketplace.
  • You will need 5 additional items in your rollershutter equipment group, here we take the rollershutters in the childroom as an example
    • A Switch item to enable/disable the automatic/time control [mandatory]

      • Name: modeBlindsChildAuto
      • Label: Timecontrol blinds childroom
      • Type: Switch
      • Category: Switch
      • Semantic Class: Control
      • Semantic Property: Level
    • 4 DateTime items for holding the different Times, openWeekday, closeWeekday, openWeekend, closeWeekend [optional]

      • Name: openBlindsChildWeekday
      • Label: Open Blinds Child Weekdays
      • Type: DateTime
      • Category: time
      • Semantic Class: Point
      • Semantic Property: Timestamp
        Please add the following State Description (pattern) as a metadata to al 4 of those items
        • %1$tH:%1$tM
      • You will then need to add initial states to the 4 items via API-Explorer.
    • Create 4 rules for opening and closing the rollershutter [optional]

      • When : it is a daten and time specified in an item → choose item “openBlindsChildWeekday”
      • Then : Send command up to rollershutter item
      • But only if
      • Ephemeris : it is a weekday
      • If modeBlindsChildAuto = ON
      • If Rollershutter state != 0

      Codepage for the rule:

      ‘’'csv
      configuration: {}
      triggers:

    • id: “1”
      configuration:
      itemName: openBlindsChildWeek
      timeOnly: true
      type: timer.DateTimeTrigger
      conditions:

    • inputs: {}
      id: “3”
      configuration:
      offset: 0
      type: ephemeris.WeekdayCondition

    • inputs: {}
      id: “4”
      configuration:
      itemName: modeBlindsChildAuto
      state: ON
      operator: =
      type: core.ItemStateCondition

    • inputs: {}
      id: “5”
      configuration:
      itemName: rollershutterChild_Control
      state: “0”
      operator: “!=”
      type: core.ItemStateCondition
      actions:

    • inputs: {}
      id: “2”
      configuration:
      command: UP
      itemName: rollershutterChild_Control
      type: core.ItemCommandAction
      ‘’’

      Repeat this for all 4 times to control.

Screenshots

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

Changelog

Version 0.5

  • minor styling update

Version 0.4

  • changed some colors for better readability in dark mode

Version 0.3

  • fixed some design issues

Version 0.2

  • added time control and uiSemantics

Version 0.1

  • initial release

Resources

uid: main_widget_Rollershutter_Card
tags: []
props:
  parameters:
    - description: Title of the card
      label: Title
      name: Title
      required: false
      type: TEXT
    - context: item
      description: Group to control
      label: Rollershutter Group
      name: RollerGroup
      required: true
      type: TEXT
    - context: item
      description: Item to control
      label: Rollershutter Item
      name: RollerItem
      required: true
      type: TEXT
    - context: item
      description: Rollershutter Mode
      label: Rollershutter Mode Item
      name: RollerMode
      required: true
      type: TEXT
timestamp: Nov 3, 2022, 10:16:58 PM
component: f7-block
config:
  style:
    background: "#F7F7F7"
    border-bottom-left-radius: var(--f7-card-expandable-border-radius)
    border-bottom-right-radius: var(--f7-card-expandable-border-radius)
    border-top-left-radius: var(--f7-card-expandable-border-radius)
    border-top-right-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 15px 1px rgba(0,0,0,0.05)
    padding: 0px
slots:
  default:
    - component: f7-block
      config:
        style:
          align-items: center
          background: transparent
          display: flex
          flex-direction: row
          height: 60px
      slots:
        default:
          - component: oh-icon
            config:
              icon: iconify:mdi:window-shutter
              style:
                margin-left: 5px
                color: rgb(106,106,106)
                padding-right: 15px
              width: 40px
          - component: f7-row
            config:
              style:
                display: flex
                flex-direction: column
                flex-wrap: nowrap
            slots:
              default:
                - component: Label
                  config:
                    style:
                      align-self: flex-end
                      display: flex
                      flex: 1 1 auto
                      flex-direction: row
                      flex-wrap: nowrap
                      font-size: 14px
                      font-weight: 400
                      justify-content: flex-end
                      padding-top: 10px
                      color: black
                    text: =props.Title
                - component: f7-row
                  config:
                    style:
                      display: flex
                      flex-direction: row
                  slots:
                    default:
                      - component: f7-chip
                        config:
                          style:
                            background-color: '=(Number(items[props.RollerItem].state.split(" ")[0])==0) ? "#6A6A6A" : (Number(items[props.RollerItem].state.split(" ")[0])==100) ? "#6A6A6A" : "Transparent"'
                            color: '=(Number(items[props.RollerItem].state.split(" ")[0])==0) ? "white" : (Number(items[props.RollerItem].state.split(" ")[0])==100) ? "white" : "#6A6A6A"'
                            font-size: 16px
                            font-weight: 200
                            justify-content: flex-end
                          text: '=(Number(items[props.RollerItem].state.split(" ")[0])==0) ? "OPEN" : (Number(items[props.RollerItem].state.split(" ")[0])==100) ? "CLOSED" : items[props.RollerItem].displayState ? items[props.RollerItem].displayState : items[props.RollerItem].state'
          - component: f7-row
            config:
              style:
                align-self: flex-end
                display: flex
                flex: 1 1 auto
                flex-direction: row
                flex-wrap: nowrap
                justify-content: flex-end
            slots:
              default:
                - component: oh-link
                  config:
                    action: toggle
                    actionCommand: ON
                    actionCommandAlt: OFF
                    actionItem: =props.RollerMode
                    style:
                      align-self: flex-end
                      display: flex
                      flex-direction: row
                      justify-content: flex-end
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          icon: iconify:material-symbols:astrophotography-auto
                          style:
                            color: '=items[props.RollerMode].state=="ON" ? "green" : "gray"'
                            margin-right: 10px
                          width: 40px
    - component: f7-block
      config:
        style:
          align-items: center
          background: transparent
          display: flex
          flex-direction: row
          height: 10px
      slots:
        default:
          - component: f7-row
            config:
              style:
                margin-left: 5px
                align-self: flex-start
                display: flex
                flex: 1 1 auto
                flex-direction: row
                flex-wrap: nowrap
                justify-content: flex-start
            slots:
              default:
                - component: oh-repeater
                  config:
                    fetchMetadata: semantics,metadata
                    filter: loop.openWeek.type=="DateTime" && loop.openWeek.name.includes("open") && !(loop.openWeek.name.includes("Weekend"))
                    for: openWeek
                    groupItem: =props.RollerGroup
                    sourceType: itemsInGroup
                  slots:
                    default:
                      - component: oh-link
                        config:
                          action: popover
                          popoverOpen: ="."+loop.openWeek.name
                          style:
                            background: transparent
                            color: black
                            height: 35px
                          text: Weekday
                          visible: '=items[props.RollerMode].state=="ON" ? true : false'
                        slots:
                          default:
                            - component: f7-chip
                              config:
                                style:
                                  background-color: "#D3D3D3"
                                  color: black
                                text: =items[loop.openWeek.name].displayState
                              slots:
                                media:
                                  - component: oh-icon
                                    config:
                                      color: red
                                      icon: f7:chevron_up
                            - component: f7-popover
                              config:
                                backdrop: false
                                class: =loop.openWeek.name
                                closeByBackdropClick: true
                                closeByOutsideClick: true
                                closeOnEscape: true
                                style:
                                  --f7-popover-border-radius: 4px
                                  --f7-popover-width: 300px
                              slots:
                                default:
                                  - component: widget:timepicker
                                    config:
                                      item: =loop.openWeek.name
                                      timeFormat: 24h
                - component: oh-repeater
                  config:
                    fetchMetadata: semantics,metadata
                    filter: loop.closeWeek.type=="DateTime" && loop.closeWeek.name.includes("close") && !(loop.closeWeek.name.includes("Weekend"))
                    for: closeWeek
                    groupItem: =props.RollerGroup
                    sourceType: itemsInGroup
                  slots:
                    default:
                      - component: oh-link
                        config:
                          action: popover
                          popoverOpen: ="."+loop.closeWeek.name
                          style:
                            background: transparent
                            height: 35px
                          visible: '=items[props.RollerMode].state=="ON" ? true : false'
                        slots:
                          default:
                            - component: f7-chip
                              config:
                                style:
                                  background-color: "#D3D3D3"
                                  color: black
                                text: =items[loop.closeWeek.name].displayState
                              slots:
                                media:
                                  - component: oh-icon
                                    config:
                                      color: red
                                      icon: f7:chevron_down
                            - component: f7-popover
                              config:
                                backdrop: false
                                class: =loop.closeWeek.name
                                closeByBackdropClick: true
                                closeByOutsideClick: true
                                closeOnEscape: true
                                style:
                                  --f7-popover-border-radius: 4px
                                  --f7-popover-width: 300px
                              slots:
                                default:
                                  - component: widget:timepicker
                                    config:
                                      item: =loop.closeWeek.name
                                      timeFormat: 24h
          - component: f7-row
            config:
              style:
                align-items: center
                display: flex
                flex: 1 1 auto
                flex-direction: row
                justify-content: flex-end
                margin-top: 25px
            slots:
              default:
                - component: oh-button
                  config:
                    action: command
                    actionCommand: UP
                    actionItem: =props.RollerItem
                    iconColor: "#E74239"
                    iconF7: arrow_up_circle
                    iconSize: 35
                    style:
                      align-self: flex-end
                      background: transparent
                      display: flex
                      flex-direction: row
                      flex-wrap: nowrap
                      height: 35px
                      justify-content: flex-end
                - component: oh-button
                  config:
                    action: command
                    actionCommand: STOP
                    actionItem: =props.RollerItem
                    iconColor: "#E74239"
                    iconF7: stop_circle
                    iconSize: 35
                    style:
                      align-self: flex-end
                      background: transparent
                      display: flex
                      flex-direction: row
                      flex-wrap: nowrap
                      height: 35px
                      justify-content: flex-end
                - component: oh-button
                  config:
                    action: command
                    actionCommand: DOWN
                    actionItem: =props.RollerItem
                    iconColor: "#E74239"
                    iconF7: arrow_down_circle
                    iconSize: 35
                    style:
                      align-self: flex-end
                      background: transparent
                      display: flex
                      flex-direction: row
                      flex-wrap: nowrap
                      height: 35px
                      justify-content: flex-end
    - component: f7-block
      config:
        style:
          align-items: left
          background: transparent
          display: flex
          flex-direction: row
          height: 15px
      slots:
        default:
          - {}
          - component: f7-row
            config:
              style:
                margin-left: 5px
                align-self: flex-start
                display: flex
                flex: 1 1 auto
                flex-direction: row
                flex-wrap: nowrap
                justify-content: flex-start
            slots:
              default:
                - component: oh-repeater
                  config:
                    fetchMetadata: semantics,metadata
                    filter: loop.openWeekend.type=="DateTime" && loop.openWeekend.name.includes("open") && (loop.openWeekend.name.includes("Weekend"))
                    for: openWeekend
                    groupItem: =props.RollerGroup
                    sourceType: itemsInGroup
                  slots:
                    default:
                      - component: oh-link
                        config:
                          action: popover
                          popoverOpen: ="."+loop.openWeekend.name
                          style:
                            background: transparent
                            color: black
                            height: 35px
                          text: Weekend
                          visible: '=items[props.RollerMode].state=="ON" ? true : false'
                        slots:
                          default:
                            - component: f7-chip
                              config:
                                style:
                                  background-color: "#D3D3D3"
                                  color: black
                                text: =items[loop.openWeekend.name].displayState
                              slots:
                                media:
                                  - component: oh-icon
                                    config:
                                      color: red
                                      icon: f7:chevron_up
                            - component: f7-popover
                              config:
                                backdrop: false
                                class: =loop.openWeekend.name
                                closeByBackdropClick: true
                                closeByOutsideClick: true
                                closeOnEscape: true
                                style:
                                  --f7-popover-border-radius: 4px
                                  --f7-popover-width: 300px
                              slots:
                                default:
                                  - component: widget:timepicker
                                    config:
                                      item: =loop.openWeekend.name
                                      timeFormat: 24h
                - component: oh-repeater
                  config:
                    fetchMetadata: semantics,metadata
                    filter: loop.closeWeekend.type=="DateTime" && loop.closeWeekend.name.includes("close") && (loop.closeWeekend.name.includes("Weekend"))
                    for: closeWeekend
                    groupItem: =props.RollerGroup
                    sourceType: itemsInGroup
                  slots:
                    default:
                      - component: oh-link
                        config:
                          action: popover
                          popoverOpen: ="."+loop.closeWeekend.name
                          style:
                            background: transparent
                            height: 35px
                          visible: '=items[props.RollerMode].state=="ON" ? true : false'
                        slots:
                          default:
                            - component: f7-chip
                              config:
                                style:
                                  color: black
                                  background-color: "#D3D3D3"
                                text: =items[loop.closeWeekend.name].displayState
                              slots:
                                media:
                                  - component: oh-icon
                                    config:
                                      color: red
                                      icon: f7:chevron_down
                            - component: f7-popover
                              config:
                                backdrop: false
                                class: =loop.closeWeekend.name
                                closeByBackdropClick: true
                                closeByOutsideClick: true
                                closeOnEscape: true
                                style:
                                  --f7-popover-border-radius: 4px
                                  --f7-popover-width: 300px
                              slots:
                                default:
                                  - component: widget:timepicker
                                    config:
                                      item: =loop.closeWeekend.name
                                      timeFormat: 24h
    - component: f7-block
      config:
        style:
          --f7-card-footer-border-color: transparent
          align-items: center
          background: "#F2F2F2"
          border-radius: 0 0 var(--f7-card-expandable-border-radius) var(--f7-card-expandable-border-radius)
          display: flex
          flex-direction: row
          height: 50px
      slots:
        default:
          - component: f7-row
            config:
              style:
                align-items: center
                display: flex
                flex: 1 1 auto
                flex-direction: row
                justify-content: space-around
            slots:
              default:
                - component: oh-link
                  config:
                    action: command
                    actionCommand: 20
                    actionItem: =props.RollerItem
                  slots:
                    default:
                      - component: f7-chip
                        config:
                          style:
                            color: black
                            background-color: '=(Number(items[props.RollerItem].state.split(" ")[0])==20) ? "#E74239" : "#D3D3D3"'
                          text: 20
                - component: oh-link
                  config:
                    action: command
                    actionCommand: 32
                    actionItem: =props.RollerItem
                  slots:
                    default:
                      - component: f7-chip
                        config:
                          style:
                            color: black
                            background-color: '=(Number(items[props.RollerItem].state.split(" ")[0])==32) ? "#E74239" : "#D3D3D3"'
                          text: 32
                - component: oh-link
                  config:
                    action: command
                    actionCommand: 50
                    actionItem: =props.RollerItem
                  slots:
                    default:
                      - component: f7-chip
                        config:
                          style:
                            color: black
                            background-color: '=(Number(items[props.RollerItem].state.split(" ")[0])==50) ? "#E74239" : "#D3D3D3"'
                          text: 50
                - component: oh-link
                  config:
                    action: command
                    actionCommand: 60
                    actionItem: =props.RollerItem
                  slots:
                    default:
                      - component: f7-chip
                        config:
                          style:
                            color: black
                            background-color: '=(Number(items[props.RollerItem].state.split(" ")[0])==60) ? "#E74239" : "#D3D3D3"'
                          text: 60
                - component: oh-link
                  config:
                    action: command
                    actionCommand: 80
                    actionItem: =props.RollerItem
                  slots:
                    default:
                      - component: f7-chip
                        config:
                          style:
                            color: black
                            background-color: '=(Number(items[props.RollerItem].state.split(" ")[0])==80) ? "#E74239" : "#D3D3D3"'
                          text: 80
                - component: oh-link
                  config:
                    action: command
                    actionCommand: 90
                    actionItem: =props.RollerItem
                  slots:
                    default:
                      - component: f7-chip
                        config:
                          style:
                            color: black
                            background-color: '=(Number(items[props.RollerItem].state.split(" ")[0])==90) ? "#E74239" : "#D3D3D3"'
                          text: 90```
1 Like

Hi @hmerk:
I propose a small change to remove the repetition for the bottom row - and use a range-based repeater instead:

uid: main_widget_Rollershutter_Card
tags: []
props:
  parameters:
    - description: Title of the card
      label: Title
      name: Title
      required: false
      type: TEXT
    - context: item
      description: Group to control
      label: Rollershutter Group
      name: RollerGroup
      required: true
      type: TEXT
    - context: item
      description: Item to control
      label: Rollershutter Item
      name: RollerItem
      required: true
      type: TEXT
    - context: item
      description: Rollershutter Mode
      label: Rollershutter Mode Item
      name: RollerMode
      required: true
      type: TEXT
timestamp: Nov 13, 2022, 9:57:05 PM
component: f7-block
config:
  style:
    background: "#F7F7F7"
    border-bottom-left-radius: var(--f7-card-expandable-border-radius)
    border-bottom-right-radius: var(--f7-card-expandable-border-radius)
    border-top-left-radius: var(--f7-card-expandable-border-radius)
    border-top-right-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 15px 1px rgba(0,0,0,0.05)
    padding: 0px
slots:
  default:
    - component: f7-block
      config:
        style:
          align-items: center
          background: transparent
          display: flex
          flex-direction: row
          height: 60px
      slots:
        default:
          - component: oh-icon
            config:
              icon: iconify:mdi:window-shutter
              style:
                color: rgb(106,106,106)
                margin-left: 5px
                padding-right: 15px
              width: 40px
          - component: f7-row
            config:
              style:
                display: flex
                flex-direction: column
                flex-wrap: nowrap
            slots:
              default:
                - component: Label
                  config:
                    style:
                      align-self: flex-end
                      color: black
                      display: flex
                      flex: 1 1 auto
                      flex-direction: row
                      flex-wrap: nowrap
                      font-size: 14px
                      font-weight: 400
                      justify-content: flex-end
                      padding-top: 10px
                    text: =props.Title
                - component: f7-row
                  config:
                    style:
                      display: flex
                      flex-direction: row
                  slots:
                    default:
                      - component: f7-chip
                        config:
                          style:
                            background-color: '=(Number(items[props.RollerItem].state.split(" ")[0])==0) ? "#6A6A6A" : (Number(items[props.RollerItem].state.split(" ")[0])==100) ? "#6A6A6A" : "Transparent"'
                            color: '=(Number(items[props.RollerItem].state.split(" ")[0])==0) ? "white" : (Number(items[props.RollerItem].state.split(" ")[0])==100) ? "white" : "#6A6A6A"'
                            font-size: 16px
                            font-weight: 200
                            justify-content: flex-end
                          text: '=(Number(items[props.RollerItem].state.split(" ")[0])==0) ? "OPEN" : (Number(items[props.RollerItem].state.split(" ")[0])==100) ? "CLOSED" : items[props.RollerItem].displayState ? items[props.RollerItem].displayState : items[props.RollerItem].state'
          - component: f7-row
            config:
              style:
                align-self: flex-end
                display: flex
                flex: 1 1 auto
                flex-direction: row
                flex-wrap: nowrap
                justify-content: flex-end
            slots:
              default:
                - component: oh-link
                  config:
                    action: toggle
                    actionCommand: ON
                    actionCommandAlt: OFF
                    actionItem: =props.RollerMode
                    style:
                      align-self: flex-end
                      display: flex
                      flex-direction: row
                      justify-content: flex-end
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          icon: iconify:material-symbols:astrophotography-auto
                          style:
                            color: '=items[props.RollerMode].state=="ON" ? "green" : "gray"'
                            margin-right: 10px
                          width: 40px
    - component: f7-block
      config:
        style:
          align-items: center
          background: transparent
          display: flex
          flex-direction: row
          height: 10px
      slots:
        default:
          - component: f7-row
            config:
              style:
                align-self: flex-start
                display: flex
                flex: 1 1 auto
                flex-direction: row
                flex-wrap: nowrap
                justify-content: flex-start
                margin-left: 5px
            slots:
              default:
                - component: oh-repeater
                  config:
                    fetchMetadata: semantics,metadata
                    filter: loop.openWeek.type=="DateTime" && loop.openWeek.name.includes("open") && !(loop.openWeek.name.includes("Weekend"))
                    for: openWeek
                    groupItem: =props.RollerGroup
                    sourceType: itemsInGroup
                  slots:
                    default:
                      - component: oh-link
                        config:
                          action: popover
                          popoverOpen: ="."+loop.openWeek.name
                          style:
                            background: transparent
                            color: black
                            height: 35px
                          text: Weekday
                          visible: '=items[props.RollerMode].state=="ON" ? true : false'
                        slots:
                          default:
                            - component: f7-chip
                              config:
                                style:
                                  background-color: "#D3D3D3"
                                  color: black
                                text: =items[loop.openWeek.name].displayState
                              slots:
                                media:
                                  - component: oh-icon
                                    config:
                                      color: red
                                      icon: f7:chevron_up
                            - component: f7-popover
                              config:
                                backdrop: false
                                class: =loop.openWeek.name
                                closeByBackdropClick: true
                                closeByOutsideClick: true
                                closeOnEscape: true
                                style:
                                  --f7-popover-border-radius: 4px
                                  --f7-popover-width: 300px
                              slots:
                                default:
                                  - component: widget:timepicker
                                    config:
                                      item: =loop.openWeek.name
                                      timeFormat: 24h
                - component: oh-repeater
                  config:
                    fetchMetadata: semantics,metadata
                    filter: loop.closeWeek.type=="DateTime" && loop.closeWeek.name.includes("close") && !(loop.closeWeek.name.includes("Weekend"))
                    for: closeWeek
                    groupItem: =props.RollerGroup
                    sourceType: itemsInGroup
                  slots:
                    default:
                      - component: oh-link
                        config:
                          action: popover
                          popoverOpen: ="."+loop.closeWeek.name
                          style:
                            background: transparent
                            height: 35px
                          visible: '=items[props.RollerMode].state=="ON" ? true : false'
                        slots:
                          default:
                            - component: f7-chip
                              config:
                                style:
                                  background-color: "#D3D3D3"
                                  color: black
                                text: =items[loop.closeWeek.name].displayState
                              slots:
                                media:
                                  - component: oh-icon
                                    config:
                                      color: red
                                      icon: f7:chevron_down
                            - component: f7-popover
                              config:
                                backdrop: false
                                class: =loop.closeWeek.name
                                closeByBackdropClick: true
                                closeByOutsideClick: true
                                closeOnEscape: true
                                style:
                                  --f7-popover-border-radius: 4px
                                  --f7-popover-width: 300px
                              slots:
                                default:
                                  - component: widget:timepicker
                                    config:
                                      item: =loop.closeWeek.name
                                      timeFormat: 24h
          - component: f7-row
            config:
              style:
                align-items: center
                display: flex
                flex: 1 1 auto
                flex-direction: row
                justify-content: flex-end
                margin-top: 25px
            slots:
              default:
                - component: oh-button
                  config:
                    action: command
                    actionCommand: UP
                    actionItem: =props.RollerItem
                    iconColor: "#E74239"
                    iconF7: arrow_up_circle
                    iconSize: 35
                    style:
                      align-self: flex-end
                      background: transparent
                      display: flex
                      flex-direction: row
                      flex-wrap: nowrap
                      height: 35px
                      justify-content: flex-end
                - component: oh-button
                  config:
                    action: command
                    actionCommand: STOP
                    actionItem: =props.RollerItem
                    iconColor: "#E74239"
                    iconF7: stop_circle
                    iconSize: 35
                    style:
                      align-self: flex-end
                      background: transparent
                      display: flex
                      flex-direction: row
                      flex-wrap: nowrap
                      height: 35px
                      justify-content: flex-end
                - component: oh-button
                  config:
                    action: command
                    actionCommand: DOWN
                    actionItem: =props.RollerItem
                    iconColor: "#E74239"
                    iconF7: arrow_down_circle
                    iconSize: 35
                    style:
                      align-self: flex-end
                      background: transparent
                      display: flex
                      flex-direction: row
                      flex-wrap: nowrap
                      height: 35px
                      justify-content: flex-end
    - component: f7-block
      config:
        style:
          align-items: left
          background: transparent
          display: flex
          flex-direction: row
          height: 15px
      slots:
        default:
          - {}
          - component: f7-row
            config:
              style:
                align-self: flex-start
                display: flex
                flex: 1 1 auto
                flex-direction: row
                flex-wrap: nowrap
                justify-content: flex-start
                margin-left: 5px
            slots:
              default:
                - component: oh-repeater
                  config:
                    fetchMetadata: semantics,metadata
                    filter: loop.openWeekend.type=="DateTime" && loop.openWeekend.name.includes("open") && (loop.openWeekend.name.includes("Weekend"))
                    for: openWeekend
                    groupItem: =props.RollerGroup
                    sourceType: itemsInGroup
                  slots:
                    default:
                      - component: oh-link
                        config:
                          action: popover
                          popoverOpen: ="."+loop.openWeekend.name
                          style:
                            background: transparent
                            color: black
                            height: 35px
                          text: Weekend
                          visible: '=items[props.RollerMode].state=="ON" ? true : false'
                        slots:
                          default:
                            - component: f7-chip
                              config:
                                style:
                                  background-color: "#D3D3D3"
                                  color: black
                                text: =items[loop.openWeekend.name].displayState
                              slots:
                                media:
                                  - component: oh-icon
                                    config:
                                      color: red
                                      icon: f7:chevron_up
                            - component: f7-popover
                              config:
                                backdrop: false
                                class: =loop.openWeekend.name
                                closeByBackdropClick: true
                                closeByOutsideClick: true
                                closeOnEscape: true
                                style:
                                  --f7-popover-border-radius: 4px
                                  --f7-popover-width: 300px
                              slots:
                                default:
                                  - component: widget:timepicker
                                    config:
                                      item: =loop.openWeekend.name
                                      timeFormat: 24h
                - component: oh-repeater
                  config:
                    fetchMetadata: semantics,metadata
                    filter: loop.closeWeekend.type=="DateTime" && loop.closeWeekend.name.includes("close") && (loop.closeWeekend.name.includes("Weekend"))
                    for: closeWeekend
                    groupItem: =props.RollerGroup
                    sourceType: itemsInGroup
                  slots:
                    default:
                      - component: oh-link
                        config:
                          action: popover
                          popoverOpen: ="."+loop.closeWeekend.name
                          style:
                            background: transparent
                            height: 35px
                          visible: '=items[props.RollerMode].state=="ON" ? true : false'
                        slots:
                          default:
                            - component: f7-chip
                              config:
                                style:
                                  background-color: "#D3D3D3"
                                  color: black
                                text: =items[loop.closeWeekend.name].displayState
                              slots:
                                media:
                                  - component: oh-icon
                                    config:
                                      color: red
                                      icon: f7:chevron_down
                            - component: f7-popover
                              config:
                                backdrop: false
                                class: =loop.closeWeekend.name
                                closeByBackdropClick: true
                                closeByOutsideClick: true
                                closeOnEscape: true
                                style:
                                  --f7-popover-border-radius: 4px
                                  --f7-popover-width: 300px
                              slots:
                                default:
                                  - component: widget:timepicker
                                    config:
                                      item: =loop.closeWeekend.name
                                      timeFormat: 24h
    - component: f7-block
      config:
        style:
          --f7-card-footer-border-color: transparent
          align-items: center
          background: "#F2F2F2"
          border-radius: 0 0 var(--f7-card-expandable-border-radius) var(--f7-card-expandable-border-radius)
          display: flex
          flex-direction: row
          height: 50px
      slots:
        default:
          - component: f7-row
            config:
              style:
                align-items: center
                display: flex
                flex: 1 1 auto
                flex-direction: row
                justify-content: space-around
            slots:
              default:
                - component: oh-repeater
                  config:
                    sourceType: array
                    for: buttonLabel
                    in: ["20","32","50","60","80"]
                    fragment: true
                  slots:
                    default:
                      - component: oh-link
                        config:
                          action: command
                          actionCommand: =loop.buttonLabel
                          actionItem: =props.RollerItem
                        slots:
                          default:
                            - component: f7-chip
                              config:
                                style:
                                  background-color: '=(Number(items[props.RollerItem].state.split(" ")[0])==loop.buttonLabel) ? "#E74239" : "#D3D3D3"'
                                  color: black
                                text: =loop.buttonLabel

1 Like

Nice, reduces some lines of code.
Will check later.

Good to hear, that you like it.
Your widgets are really great :slight_smile:

1 Like

Thanks, but the kudos go to the team, I am just one part of it.

Hello Hans-Jörg,
I am using your widget right now, thank you very much for that.
I tried to use 4 rules for all shutters grouping the DateTime items.
However, it turns out the DateTime groups can not be used as a trigger:

Do you have an idea how to make this more elegant to combine some rules?
Thanks
Marco

Please let‘s move discussion to development topic, will answer there.

Hi Jörg,
found your widget. Looks great. One questions for my understanding.
For what do I need the RollerGroup?
I thought that one card belongs to one rollershutter?

Hi Thorsten,
Thanks, great you like it.
We need the group cause it will also hold the 4 DateTime Items for the schedules and the Switch Item for enabling/disabling the schedules.

Hi Hans-Jörg,
no I have some questions about getting it to work.

I have installed the timepicker, created the group , and the date-time items.
I also set initila state with the rest api.

But I will not show everything on the run-mode screen.

Here you will see pictures from the run-mode, from the development view, and the config.

So what is missing that the items with the time is not shown on the run view?

I did not create the rules. Is it that?

The rules will run at scheduled tim, so without them, DateTime Items don‘t make sense.

Please show us your Item definitions.

Edit: Is the switch item set to ON? If not, items are not shown.

OK, thanks. It was the switch. Set it to off,because have not created the rules.

1 Like

For those, who like textual rules.
I had issues with the rules created in Paper UI. After a restart the rules were not triggered anymore.
Textual rules do not have this issue.


rule "Rolllaeden runter Wochentags"
when
	Time is closeBlindsWeekday timeOnly
then
  if (Ephemeris.isWeekend() == false && SwitchTimeControlRollladen.state == ON) {
        Rollaeden.sendCommand(DOWN)
    } 
end 

Thanks for sharing

This is a different issue, disabling and reenabling makes them work again.