[OH3] Rollershutter simple (oh-list-item) widget

Hi everyone,
since I’ve got a lot from this community, I’d like to share my first attempt in creating a widget, hoping this could be useful for someone.
Also, any implementation is (obviusly) welcome :slight_smile:

Background
My home is composed by ground floor, first floor and attic. I have all of my rollershutter motorized and connected via an old Bticino gateway (I use openwebnet binding to control my RS).
I made 3 groups of RS, one for each floor, plus one for all the RS.

I wanted a simple way to display and control my RS.
I chose to start from a oh-list-item.
I also liked a lot the presets idea of this widget:

https://community.openhab.org/t/custom-rollershutter-widget-with-preset-configuration/116270

…but since I’m not interested in setting 100 different positions, I did’nt need the position (slider) widget.

So, here’s the result (on mobile):

How to get it working:

  1. I created a page for the above RS controls and “linked” to a label (pop-up) in the overview page.
  2. In the RS page I added a list card with media list option set to true
  3. In the list card I added my widget for all the elements I needed

Note: the presets are hard coded in the widget, since I just wanted those positions.

…and finally, here’s the widget code:

uid: RS-list-item
tags: []
props:
  parameters:
    - description: Item title
      label: Title
      name: title
      required: true
      type: TEXT
    - description: Description
      label: Description
      name: subtitle
      required: false
      type: TEXT
    - context: item
      description: Rollershutter (or group of rollershutters) to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Sep 22, 2021, 11:44:35 AM
component: f7-list-item
config:
  title: =props.title
  subtitle: =props.subtitle
slots:
  default:
    - component: f7-row
      slots:
        default:
          - component: f7-col
            config:
              style:
                width: 25%
                margin-top: 10px
            slots:
              default:
                - component: oh-button
                  config:
                    text: SET
                    outline: true
                    large: true
                    fill: true
                    action: options
                    actionOptions: 75=25%,50=50%,25=75%
                    actionItem: =props.item
          - component: f7-col
            config:
              style:
                width: 75%
                margin-right: -20px
            slots:
              default:
                - component: oh-rollershutter-item
                  config:
                    dirIconsStyle: chevron_{dir}
                    item: =props.item

Clicking on the “SET” button, an option list come up to select a preset.

I know this is not very refined, but I’m not a programmer and I still have a lot to learn.

Enjoy :slight_smile:

1 Like

Looks really nice, thanks for sharing!