Roller Shutter widget for MainUI

Setup, Configuration and Use Items & Sitemaps
1

Hi,
I am migrating from Domoticz to openhab and I am looking for an integration of my 10 Venetian Blinds.
They are all controlled by shelly 2.5 double relays

I plan to use the MainUI only.
So far I can only find the basic up-down buttons.

First of all a slider with a percentage value would be nice but I cannot seem to find anything like that.

In my Domoticz Integration I had a script for the possibility to select certain percentages and to select if the flaps should be open or closed.

The flaps would be close when coming from above and open when coming from below.
So basically the script checked the current percentage of the blinds and made sure they would reach the selected percentage from above or below depending on my selection.

In Openhab I feel rather lost at the moment and do not even begin to understand how I could achieve something like that.

Maybe one of you can point me in the right direction.

Thanks a lot in advance

2

You may want to have a look at the widget I created for myself: Custom rollershutter widget with preset configuration

It might at least serve you as a starting point for adjustments according to your own requirements.

3

Sliders are also available.

Have a look into the components reference:

4

Thank you for the quick help. The widget helped a bit.
My Problem still is, that I need to control the tilt and the percentage at the same time and I do not know how to pass this information from a widget to a script.

As far as I understand it I always need to use an item and there is no item that can hold both of these values.
Is there a way to create a dummy item for that?

As I said. I need to make sure that the blinds are coming from above or below depending on me wanting them open or closed.

My Idea is two other buttons with the slider in one widget to select if you want the blinds open or closed. But I would still need a script for that and therefore to pass information from the widget directly to the script.

5

Like so? I also use shelly 2.5 for my blinds (venetian and not venetian types):
image

Here is the widget code (used in lists):

uid: list_shutter_ext_v1
tags: []
props:
  parameters:
    - context: item
      description: Rollershutter control & position (receives UP, DOWN, STOP, 0 to 100 commands)
      label: Rollershutter control
      name: item
      required: true
      type: TEXT
    - context: item
      description: Rollershutter to position shine (ON command)
      label: Rollershutter shine item
      name: shine
      required: false
      type: TEXT
    - context: item
      description: Rollershutter to position no shine (ON command)
      label: Rollershutter no shine item
      name: noshine
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Aug 19, 2021, 8:25:43 AM
component: f7-list-item
config:
  title: =props.title
slots:
  default:
    - component: f7-list-item-row
      config:
        class:
          - display-flex
          - justify-content-space-evenly
          - align-items-center
        style:
          width: 100%
          height: 125px
      slots:
        default:
          - component: f7-col
            config:
              class:
                - display-flex
                - flex-direction-column
                - justify-content-space-evenly
                - align-items-flex-start
              style:
                height: calc(100% - 28px)
            slots:
              default:
                - component: oh-button
                  config:
                    round: true
                    action: command
                    actionItem: =props.shine
                    actionCommand: ON
                    text: Lamellen auf
                    fill: true
                    style:
                      width: 120px
                - component: oh-button
                  config:
                    round: true
                    action: command
                    actionItem: =props.noshine
                    actionCommand: ON
                    text: Lamellen zu
                    outline: true
                    style:
                      width: 120px
          - component: f7-col
            config:
              class:
                - display-flex
                - flex-direction-column
                - justify-content-space-evenly
                - align-items-flex-end
              style:
                height: calc(100% - 28px)
            slots:
              default:
                - component: oh-slider
                  config:
                    color: white
                    label: true
                    item: =props.item
                    vertical: true
                    scale: true
                    step: 1
                    scaleSteps: 5
                    scaleSubSteps: 2
                    unit: "%"
                    style:
                      --f7-range-bar-size: 18px
                      --f7-range-bar-border-radius: 10px
                      --f7-range-knob-size: 20px
                      --f7-range-bar-bg-color: rgba(246, 158, 81, 0.2)
                      --f7-range-bar-active-bg-color: linear-gradient(to top, rgba(246,158,81,0), rgba(246,158,81,0.8))
                      --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
                      --f7-range-label-text-color: black
          - 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.item
                    actionCommand: UP
                    action: command
                    colorTheme: gray
                    iconF7: arrowtriangle_up
                    iconSize: 20
                    style:
                      background-color: rgba(246, 158, 81, 0.2)
                      border-radius: 15px 15px 0px 0px
                      padding: 10px
                - component: oh-link
                  config:
                    actionItem: =props.item
                    actionCommand: STOP
                    action: command
                    iconF7: stop
                    iconSize: 20
                    style:
                      background-color: rgba(246, 158, 81, 0.2)
                      padding: 10px
                - component: oh-link
                  config:
                    actionItem: =props.item
                    actionCommand: DOWN
                    action: command
                    colorTheme: gray
                    iconF7: arrowtriangle_down
                    iconSize: 20
                    style:
                      background-color: rgba(246, 158, 81, 0.2)
                      border-radius: 0px 0px 15px 15px
                      padding: 10px

Here are the rules for switching the blinds between open and closed (not up or down). As the blinds do not support separate channels for positioning the shutter slats, I counted the time used to change between the positions using only up and down and it works fine:

var Timer shutterTimer = null
var Timer shutterTimer2 = null
var Timer shutterTimer3 = null
var Timer shutterTimer4 = null

rule "LivingDining_Floorwindow_Let_Shine" 
	when
        Item LivingDining_BigWindow_Shine changed from OFF to ON
	then
        logInfo("RULE", "Wohnzimmmer Rolladen Bodenfenster - Let shine")
        var Number blindState = LivingDining_BigWindow_Shutter_Slider.state
        LivingDining_BigWindow_Shutter_Slider.sendCommand(blindState - 3)
        if(shutterTimer !== null) {
            shutterTimer.cancel()
            shutterTimer = null
        }
        shutterTimer = createTimer(now.plusSeconds(3), [ |   
            LivingDining_BigWindow_Shutter_Slider.sendCommand(blindState - 2)
            shutterTimer.cancel()
            shutterTimer = null
            shutterTimer2 = createTimer(now.plusSeconds(1), [ |   
                LivingDining_BigWindow_Shutter_Slider.sendCommand(STOP)
                shutterTimer2.cancel()
                shutterTimer2 = null
            ]) 
        ]) 
        LivingDining_BigWindow_Shine.sendCommand(OFF)
end

rule "LivingDining_Floorwindow_No_Shine" 
	when
        Item LivingDining_BigWindow_No_Shine changed from OFF to ON
	then
        logInfo("RULE", "Wohnzimmmer Rolladen Bodenfenster - No shine")
        var Number blindState = LivingDining_BigWindow_Shutter_Slider.state
        LivingDining_BigWindow_Shutter_Slider.sendCommand(blindState - 3)
        LivingDining_BigWindow_No_Shine.sendCommand(OFF)
end

rule "LivingDining_Veranda_Let_Shine" 
	when
        Item LivingDining_Veranda_Shine changed from OFF to ON
	then
        logInfo("RULE", "Wohnzimmmer Rolladen Balkon - Let shine")
        var Number blindState2 = LivingDining_Veranda_Shutter_Slider.state
        LivingDining_Veranda_Shutter_Slider.sendCommand(blindState2 - 3)
        if(shutterTimer3 !== null) {
            shutterTimer3.cancel()
            shutterTimer3 = null
        }
        shutterTimer3 = createTimer(now.plusSeconds(3), [ |   
            LivingDining_Veranda_Shutter_Slider.sendCommand(blindState2 - 2)
            shutterTimer3.cancel()
            shutterTimer3 = null
            shutterTimer4 = createTimer(now.plusSeconds(1), [ |   
                LivingDining_Veranda_Shutter_Slider.sendCommand(STOP)
                shutterTimer4.cancel()
                shutterTimer4 = null
            ]) 
        ]) 
        LivingDining_Veranda_Shine.sendCommand(OFF)
end

rule "LivingDining_Veranda_No_Shine" 
	when
        Item LivingDining_Veranda_No_Shine changed from OFF to ON
	then
        logInfo("RULE", "Wohnzimmmer Rolladen Balkon - No shine")
        var Number blindState2 = LivingDining_Veranda_Shutter_Slider.state
        LivingDining_Veranda_Shutter_Slider.sendCommand(blindState2 - 3)
        LivingDining_Veranda_No_Shine.sendCommand(OFF)
end