Simple widget for somfy device

[DrRSatzteil (Thomas Lauterbach)]

Hi,

I recycled some controls I made for my rollershutter widget and created a simple widget to control the sunblind on my terrace:

uid: markise_v1
tags: []
props:
  parameters:
    - description: Title of the card (empty for none)
      label: Title
      name: title
      required: false
      type: TEXT
    - description: The card footer (empty for none)
      label: Footer
      name: footer
      required: false
      type: TEXT
    - description: The label on top of the controls (empty for none)
      label: Label
      name: label
      required: false
      type: TEXT
    - context: item
      description: Sunblind control (receives Up, Down, My commands as String)
      label: Sunblind control
      name: control
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Feb 24, 2021, 1:57:03 PM
component: f7-card
config:
  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: 100%
                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
                          iconSize: 20
                          style:
                            background-color: rgba(246, 158, 81, 0.2)
                            border-radius: 15px 15px 0px 0px
                            padding: 10px
                            width: 40px
                      - component: oh-link
                        config:
                          actionItem: =props.control
                          actionCommand: My
                          action: command
                          text: my
                          style:
                            background-color: rgba(246, 158, 81, 0.2)
                            padding: 10px
                            width: 40px
                      - component: oh-link
                        config:
                          actionItem: =props.control
                          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
                            width: 40px
    - component: f7-card-footer
      slots:
        default:
          - component: Label
            config:
              text: =props.footer

Configuration is very straightforward since you only need an item that receives Up / Down / My command strings. The rest is up to you to handle (e.g. in a rule). Since I cannot get the actual state back from my sunblind I simply set the state to the last pressed button which may not be correct in all cases e.g. when the “my” button is pressed when the sunblinds are one of the end positions or someone uses the actual remote to move the blinds.

I ended up with this simple design after I tried some more weird prototypes like this:

Even though I decided not use it it might be interesting for someone elses project:

uid: markise_v2
tags: []
props:
  parameters:
    - description: Title of the card (empty for none)
      label: Title
      name: title
      required: false
      type: TEXT
    - description: The card footer (empty for none)
      label: Footer
      name: footer
      required: false
      type: TEXT
    - description: The label on top of the controls (empty for none)
      label: Label
      name: label
      required: false
      type: TEXT
    - description: The label on top of the controls (empty for none)
      label: State
      name: state
      required: false
      type: TEXT
    - context: item
      description: Sunblind control (receives Up, Down, My commands as String)
      label: Sunblind control
      name: control
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Feb 23, 2021, 10:14:07 PM
component: f7-card
config:
  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-center
                - align-items-center
              style:
                width: 100%
                height: 100px
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - justifiy-content-center
                      - align-items-center
                    style:
                      height: 150px
                  slots:
                    default:
                      - component: f7-block
                        config:
                          class:
                            - display-flex
                            - justify-content-center
                            - align-items-flex-end
                          style:
                            height: 100%
                            width: 200px
                            border: solid 1pt lightgray
                            border-bottom: none
                            transition: transform 10s
                            transform: '= props.state == "DRIN" ? "translate(0, -125px) scale(0.8, 0.05) perspective(250px) rotateX(60deg)": "translate(0, -85px) scale(1, 1) perspective(250px) rotateX(60deg)"'
                            transform-origin: bottom center
                        slots:
                          default:
                            - component: oh-repeater
                              config:
                                for: i
                                rangeStart: 0
                                rangeStop: 11
                                rangeStep: 1
                                sourceType: range
                                fragment: true
                              slots:
                                default:
                                  - component: f7-block
                                    config:
                                      class:
                                        - no-padding
                                        - flex-shrink-0
                                      style:
                                        height: 100%
                                        width: 20px
                                        background-color: '=loop.i % 2 == 0 ? "rgba(246, 158, 81, 0.25)" : "rgba(0,0,0,0.01)"'
                                        border: solid 1pt rgba(0, 0, 0, 0.1)
                      - component: f7-block
                        config:
                          class:
                            - display-flex
                            - justify-content-center
                          style:
                            width: 300px
                            transition: transform 10s
                            transform: '= props.state == "DRIN" ? "translate(0, -128px) scale(0.8, 0.8)": "translate(0, -85px) scale(1, 1)"'
                        slots:
                          default:
                            - component: oh-repeater
                              config:
                                for: i
                                rangeStart: 0
                                rangeStop: 11
                                rangeStep: 1
                                sourceType: range
                                fragment: true
                              slots:
                                default:
                                  - component: f7-block
                                    config:
                                      class:
                                        - no-padding
                                        - flex-shrink-0
                                      style:
                                        margin-top: 0px
                                        height: 15px
                                        width: 20px
                                        border-radius: 0 0 10px 10px
                                        background-color: '=loop.i % 2 == 0 ? "rgba(246, 158, 81, 0.2)" : "white"'
                                        border: solid 1pt rgba(0, 0, 0, 0.1)
                                        border-top: none
          - component: f7-row
            config:
              class:
                - display-flex
                - justify-content-center
                - align-items-center
              style:
                width: 100%
                height: 50px
            slots:
              default:
                - component: oh-link
                  config:
                    actionItem: =props.control
                    actionCommand: Up
                    action: command
                    colorTheme: gray
                    iconF7: arrowtriangle_up
                    iconSize: 20
                    style:
                      background-color: rgba(246, 158, 81, 0.2)
                      border-radius: 15px 0px 0px 15px
                      padding: 10px
                      height: 40px
                - component: oh-link
                  config:
                    actionItem: =props.control
                    actionCommand: My
                    action: command
                    text: MY
                    style:
                      background-color: rgba(246, 158, 81, 0.2)
                      padding: 10px
                      height: 40px
                - component: oh-link
                  config:
                    actionItem: =props.control
                    actionCommand: Down
                    action: command
                    colorTheme: gray
                    iconF7: arrowtriangle_down
                    iconSize: 20
                    style:
                      background-color: rgba(246, 158, 81, 0.2)
                      border-radius: 0px 15px 15px 0px
                      padding: 10px
                      height: 40px
    - component: f7-card-footer
      slots:
        default:
          - component: Label
            config:
              text: =props.footer

[Nico_R (Nico)]

Hi @DrRSatzteil ,

nice work!
I like your widgets.
These a good base for some new ideas!

[DrRSatzteil (Thomas Lauterbach)]

Thanks Nico!

I really like OH3 for allowing us to get really creative with our UI’s. I don’t have a huge number of devices in my home, I mainly want to have some handy controls for a couple of blinds and lights. For these few devices it’s just not very practical to click through the auto generated UI’s so instead I put a bit more effort in some nice looking controls that work well on my phone

I got a lot of inspiration from your heating widget as well, even though I cannot use it for myself. It’s great to see how these things evolve and get better every day

[Sleugner]

Hi @DrRSatzteil,
Thanks for the easy widget.
I tried to install it and found some little changes in the Binding which efffect the Widget.

The commands changed. So you have to replace the command “Up” with “UP” and “Down” with “DOWN”.
I was able to change the my-Button to “STOP”. Now I am able to stop my Rollerblinds.
I dont’ really get why the command is not “MY/STOP”.
Unfortunately I wasn’t able to make “MY” work.
Does anybody have an idea?

[DrRSatzteil (Thomas Lauterbach)]

Oh I’m not using a specific binding but a self made serial device based on a esp8266. So it might be that you need to change the commands. However this is easy enough to do. I’m afraid I can’t help you with the binding problems though

But actually I guess it is the same command just depending on the current state of the motor it does a different thing. If it is currently moving it stops and remembers the position. If you send the command when it is not moving (and not in the same position) it returns to this position.