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 
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:
- I created a page for the above RS controls and “linked” to a label (pop-up) in the overview page.
- In the RS page I added a list card with media list option set to true
- 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