OH3 - Rollershutter - Widget

Tags: #<Tag:0x00007fc8faf9e690>

Hello everybody,

I want to design a roller shutter widget with buttons and information. In the left part, up / stop / down buttons should be made available and in the right part I would like to accommodate 5 lines according to the following scheme:

Text1 and value from Item1
Text2 and value from Item2
Text3 and value from Item3
Text4 and value from Item4
Text5 and value from Item5

The size of the left part should be 33% and that of the right part 67% of the total width.

I have already been able to design the switches in the left part, the right part gives me considerable difficulties.

The left Side:

uid: shutter_widget_v1
tags: []
props:
  parameters:
    - description: Titel der Karte (leer für keine)
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Die Kartenfußzeile (leer für keine)
      label: Footer
      name: footer
      required: false
      type: TEXT
    - context: item
      description: Rollershutter Temperature wählen
      label: Item
      name: mod0
      required: true
      type: TEXT
    - context: item
      description: Rollershutter Meter total kwh wählen
      label: Item
      name: mod1
      required: true
      type: TEXT
    - context: item
      description: Rollershutter control (receives UP, DOWN, STOP commands)
      label: Rollershutter control
      name: control
      required: false
    - description: Hintergrundfarbe festlegen (leer für keine)
      name: background
      required: true
      type: TEXT
      advanced: false
  parameterGroups: []
timestamp: Apr 4, 2021, 11:33:21 PM
component: f7-card
config:
  style:
    background: '=(props.background) ? props.background : ""'
  title: =props.title
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              class:
                - display-flex
                - justify-content-center
                - align-items-flex-start
              style:
                height: 25px
            slots:
              default:
                - component: f7-block-header
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =props.label
          - component: f7-row
            config:
              class:
                - display-flex
                - justify-content-space-evenly
                - align-items-center
              style:
                width: 33%
                height: 150px
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - justify-content-center
                      - align-items-center
                    style:
                      height: calc(100% - 20px)
                  slots:
                    default:
                      - component: oh-link
                        config:
                          actionItem: =props.control
                          actionCommand: UP
                          action: command
                          colorTheme: gray
                          iconF7: arrowtriangle_up_circle_fill
                          iconSize: 20
                          style:
                            background-color: rgba(246, 158, 81, 0.8)
                            border-radius: 15px 15px 0px 0px
                            padding: 10px
                      - component: oh-link
                        config:
                          actionItem: =props.control
                          actionCommand: STOP
                          action: command
                          iconF7: stop_circle_fill
                          iconSize: 20
                          style:
                            background-color: rgba(246, 158, 81, 0.8)
                            padding: 10px
                      - component: oh-link
                        config:
                          actionItem: =props.control
                          actionCommand: DOWN
                          action: command
                          colorTheme: gray
                          iconF7: arrowtriangle_down_circle_fill
                          iconSize: 20
                          style:
                            background-color: rgba(246, 158, 81, 0.8)
                            border-radius: 0px 0px 15px 15px
                            padding: 10px
          - component: f7-card-footer
            slots: {}
          - component: Label
            config:
              style:
                height: 25px
              text: =props.footer

Can someone from the experts help me?

Best regards

It sounds like you are going to want to use an oh-repeater for this (there are lots of examples on the forums) but you’re going to need to be a little more specific before there’s much in the way of more specific guidance we can give you.

Do you mean a just a list with 5 items in it or is there some kind of interaction involved as well?

How is this information stored in this item? Do you mean the label of the item and the item state, or other information stored in the item’s metadata maybe? Are these always the same 5 items for each use of this widget, or does the user set these in the properties? Are they all members of a certain group or do they all have a similar item name?

Many thanks for the answer. Specifically, it should look like this:

Text1 = “Interne Temperatur:” Item1 = item.RollBuero8DeviceInternalTemp.state or (?) item.RollBuero8DeviceInternalTemp.displaystate
Text2 = “Gesamtverbrauch:” Item2 = item.RollBuero8MeterTotalKWH.state or (?) item.RollBuero8MeterTotalKWH.displaystate
Text3 = “Signalstärke:” Item3 = item.RollBuero8DeviceWifiSignal.state or (?) item.RollBuero8DeviceWifiSignal.displaystate
Text4 = “Firmware:” Item4 = item.RollBuero8DeviceUpdateAvailable.state or (?) item.RollBuero8DeviceUpdateAvailable.displaystate
Text5 = “Position:” Item5 = item.RollBuero8RollerControl.state or (?) item.RollBuero8RollerControl.displaystate

These are the current values the item channels.

I hope this answer helps you.!

screenshot_3|690x369

This link might help with your spacing. The f7-row you put your two areas in is a flex-box and so you just have to set the flex properties of your two areas to 1 for the 33% and 2 for the 67% (the second one will always try to take twice the space of the first one).

To get your list of information it looks like you just need to use a list widget and populate that with the one `oh-label-item’ for each of your 5 items.

Something like this:

uid: widget_oh-list
component: f7-card
config:
  title: List test
slots:
  default:
    - component: oh-list
      config: {}
      slots:
        default:
          - component: oh-label-item
            config:
              item: AutomationTime
              title: Text goes here
          - component: oh-label-item
            config:
              item: Door_MudRoom_Status
              title: Mud Room Door

Produces

1 Like

Thank you very much, I have to deal with that first to understand it (creating widgets is new to me). However, I have another idea: how do I have to create a popup with this “information” that my widget can open?


might help with your spacing. The f7-row you put your two areas in is a flex-box and so you just have to set the flex properties of your two areas to 1 for the 33% and 2 for the 67% (the second one will always try to take twice the space of the first one).

This is exactly where I have problems with the configuration. I can’t get any further with the link. Which wording and where do I have to enter in the widget to get to the right part?

Here’s a very simplified version of a 1:2 ratio. Note the row you want to divide gets the display-flex class and the columns you want to space each get the flex style with numbers giving the ratio of space they should take up:

uid: widget_demo
component: f7-card
config:
  title: Flex 1:2 test
slots:
  default:
    - component: f7-row
      config:
        class:
           - display-flex
      slots:
        default:
          - component: f7-col
            config:
              style:
                flex: 1
            slots:
              default:
                - component: oh-list
                  config: {}
                  slots:
                    default:
                      - component: oh-label-item
                        config:
                          item: AutomationTime
                          title: 33% side
          - component: f7-col
            config:
              style:
                flex: 2
            slots:
              default:
                - component: oh-list
                  config: {}
                  slots:
                    default:
                      - component: oh-label-item
                        config:
                          item: BehrendWeather_Temperature
                          title: 66% side

image

That looks good and could work. It is a basic framework that can be expanded. Thank you first of all, I’ll get back to you later.

Unfortunately, I was only able to create this variant. Maybe someone else has an idea how to arrange the shutter buttons horizontally.

timestamp: Apr 6, 2021, 8:12:16 AM
component: f7-card
config:
  icon: oh:rollershutter
  style:
    background: '=(props.background) ? props.background : ""'
    filter: brightness(95%)
  title: =props.title
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              class:
                - display-flex
                - justify-content-space-evenly
                - align-items-center
              style:
                width: 100px
                height: 160px
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - justify-content-center
                      - align-items-center
                    style:
                      height: calc(100% - 30px)
                  slots:
                    default:
                      - component: oh-link
                        config:
                          actionItem: =props.control
                          actionCommand: UP
                          action: command
                          colorTheme: gray
                          iconF7: arrowtriangle_up_circle_fill
                          iconSize: 28
                          style:
                            margin-left: 60px
                            background-color: rgba(246, 158, 81, 0.9)
                            border-radius: 15px 15px 0px 0px
                            padding: 10px
                      - component: oh-link
                        config:
                          actionItem: =props.control
                          actionCommand: STOP
                          action: command
                          iconF7: stop_circle_fill
                          iconSize: 28
                          style:
                            margin-left: 60px
                            background-color: rgba(246, 158, 81, 0.9)
                            padding: 10px
                      - component: oh-link
                        config:
                          actionItem: =props.control
                          actionCommand: DOWN
                          action: command
                          colorTheme: gray
                          iconF7: arrowtriangle_down_circle_fill
                          iconSize: 28
                          style:
                            margin-left: 60px
                            background-color: rgba(246, 158, 81, 0.9)
                            border-radius: 0px 0px 15px 15px
                            padding: 10px

Have you tried the default oh-rollershutter widget instead of constructing your own?

uid: widget
component: f7-card
config:
  title: Default oh-rollershutter
slots:
  default:
    - component: f7-row
      config: {}
      slots:
        default:
          - component: oh-rollershutter
            config:
              item: Door_GarageDoor_OpenClose

image

1 Like

Yes, first I used the standard wiget. However, I did not succeed in the optics (size, color, etc.). to modify.
I once read a config statement somewhere, something like this: horizontal: true. However, it doesn’t work in my widget. Horizontal would be better, it doesn’t take up that much space.

Now I decided on the standard Rollershutter widget because there weren’t any major problems with the design. In case anyone is interested, I’ll put all of the code here.

Thank you again for your support!

uid: shutter_widget_v5
tags: []
props:
  parameters:
    - description: Title of the card (blank for none)
      label: Title
      name: title
      required: false
      type: TEXT
    - description: The card footer (no footer!!)
      label: Footer
      name: footer
      required: false
      type: TEXT
    - description: Description Info 1 (<u>Suggestion:</u> <b>Interne Temperatur</b>)
      label: Info1
      name: title1
      required: true
      type: TEXT
    - description: Description Info 2 (<u>Suggestion:</u> <b>Total consumption</b>)
      label: Info2
      name: title2
      required: true
      type: TEXT
    - description: Description Info 3 (<u>Suggestion:</u> <b>Signal strength</b>)
      label: Info3
      name: title3
      required: true
      type: TEXT
    - description: Description Info 4 (<u>Suggestion:</u> <b>Firmware</b>)
      label: Info4
      name: title4
      required: true
      type: TEXT
    - description: Description Info 5 (<u>Suggestion:</u> <b>Shutter-Position</b>)
      label: Info5
      name: title5
      required: true
      type: TEXT
    - context: item
      description: Item for info 1 (<u>Example:</u> <b>RollBuero8DeviceInternalTemp</b>)
      label: Item
      name: item1
      required: true
      type: TEXT
    - context: item
      description: Item for info 2 (<u>Example:</u> <b>RollBuero8MeterTotalKWH</b>)
      label: Item
      name: item2
      required: true
      type: TEXT
    - context: item
      description: Item for info 3 (<u>Example:</u> <b>RollBuero8DeviceWifiSignal</b>)
      label: Item
      name: item3
      required: true
      type: TEXT
    - context: item
      description: Item for info 4 (<u>Example:</u> <b>RollBuero8DeviceUpdateAvailable</b>)
      label: Item
      name: item4
      required: true
      type: TEXT
    - context: item
      description: Item for info 5 (<u>Example:</u> <b>RollBuero8RollerControl</b>)
      label: Item
      name: item5
      required: true
      type: TEXT
    - context: item
      description: Item for Rollershutter Control (<u>Example:</u> <b>RollBuero8RollerControl</b>)
      label: Item
      name: control
      required: true
      type: TEXT
    - description: Set background color (blank for none)
      name: background
      required: false
      type: TEXT
    - description: Set text color (blank for none)
      name: color
      required: false
      type: TEXT
      advanced: false
  parameterGroups: []
timestamp: Apr 7, 2021, 8:32:43 AM
component: f7-card
config:
  style:
    width: 250px
    background: '=(props.background) ? props.background : ""'
    color: '=(props.color) ? props.color : ""'
    filter: brightness(95%)
  title: =props.title
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              class:
                - display-flex flex-direction-row
                - justify-content-space-evenly
                - align-items-center
              style:
                width: 250px
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - justify-content-center
                      - align-items-center
                    style:
                      height: calc(100% - 30px)
          - component: oh-rollershutter-card
            config:
              item: =props.control
              dirIconsStyle: chevron_{dir}_square_fill
              stopIconStyle: stop_circle_fill
              style:
                background-color: rgba(246, 158, 81, 0.2)
          - component: f7-col
            slots:
              default:
                - component: oh-list
                  config: {}
                  slots:
                    default:
                      - component: oh-label-item
                        config:
                          style:
                            width: 220px
                            font-size: 13px
                            margin-left: 0px
                            margin-bottom: 0px
                            margin-top: 5px
                            z-index: 1
                          title: =props.title1
                          item: =props.item1
                      - component: oh-label-item
                        config:
                          style:
                            width: 220px
                            font-size: 13px
                            margin-left: 0px
                            margin-bottom: 0px
                            margin-top: 5px
                            margin-right: 0px
                            z-index: 1
                          title: =props.title2
                          item: =props.item2
                      - component: oh-label-item
                        config:
                          style:
                            width: 220px
                            font-size: 13px
                            margin-left: 0px
                            margin-bottom: 0px
                            margin-top: 5px
                            z-index: 1
                          title: =props.title3
                          item: =props.item3
                      - component: oh-label-item
                        config:
                          style:
                            width: 220px
                            font-size: 13px
                            margin-left: 0px
                            margin-bottom: 0px
                            margin-top: 5px
                            z-index: 1
                          title: =props.title4
                          item: =props.item4
                      - component: oh-label-item
                        config:
                          style:
                            width: 220px
                            font-size: 13px
                            margin-left: 0px
                            margin-bottom: 0px
                            margin-top: 5px
                            z-index: 1
                          title: =props.title5
                          item: =props.item5

screenshot_5

2 Likes

I now want to add this label component to the shutter widget:

uid: shutter_label_v2
tags: []
props:
  parameters:
    - description: Set the Labeltitel (<u>Suggestion:</u> <b>Gemeinsame Steuerung</b>)
      label: Labeltitel
      name: label1
      required: false
      type: TEXT
timestamp: Apr 8, 2021, 3:52:02 AM
component: f7-card
config:
  padding: true
  style:
    position: relative
    border-radius: 20px
    border-color: lime
    height: 50px
    background-color: silver
slots:
  default:
    - component: Label
      config:
        text: =(props.label1)
        style:
          height: 25px
          position: relative
          left: 480px
          top: 10px
          width: 100%
          letter-spacing: .75px
          font-size: min(max(15px, 4vw), 20px)
          fontWeight: bold
          color: rgba(0,0,0,.9)

How do I get the text to be centered?

I figured out the solution:

component: f7-card
config:
  class: text-align-center