GarageDoorButton: a simple widget to display status of a garage door and a button to activate its operation

the-ninth · January 21, 2023, 7:46am

Header

A simple widget showing the status of a garage door (opened or closed) and a single button for activating the door’s operation.

The widget offers the following configuration options:

Control Item: control Item to operate the gates.
Command: the command to be sent to the Control Item on activation.
Sensor Item: sensor Item to determine the gates open/close status.
Sensor state when closed: The state of the Sensor Item when the door is closed. Any other state than closed or moving will be interpreted as opened.
Sensor state when moving: The state of the Sensor Item when the door is moving. Any other state than closed or moving will be interpreted as opened.
Title: text to show as title.
Button Label: text to show on the button.
Open Label: text to show on the status indicator if the gate is open.
Moving Label: text to show on the status indicator while the gate is moving.
Closed Label: text to show on the status indicator if the gate is closed.

Screenshots

The status badge when the door is opened:

Widget - Open

The configuration:

Changelog

Version 0.2

added support for an optional third state to be shown while the garage door/gates are for moving between open and close.

Version 0.1

initial release

Resources

The YAML code for the widget:

uid: GarageDoorButton
tags:
  - button
  - cell
  - garagedoor
  - status
props:
  parameters:
    - context: item
      description: Control Item to operate the gates.
      label: Control Item
      name: control_item
      required: true
      type: TEXT
      groupName: items
    - default: ON
      description: The command to be sent to the Control Item on activation.
      label: Command
      name: control_item_command
      required: true
      type: TEXT
      groupName: items
    - context: item
      description: Sensor Item to determine the gates open/close status.
      label: Sensor Item
      name: sensor_item
      required: true
      type: TEXT
      groupName: items
    - default: CLOSED
      description: The state of the Sensor Item when the door is closed. Any other state than closed or moving will be interpreted as opened.
      label: Sensor state when closed
      name: sensor_state_closed
      required: true
      type: TEXT
      groupName: items
    - default: MOVING
      description: The state of the Sensor Item when the door is moving. Any other state than closed or moving will be interpreted as opened.
      label: Sensor state when moving
      name: sensor_state_moving
      required: false
      type: TEXT
      groupName: items
    - default: Garage Door
      description: Text to show as title.
      label: Title
      name: title
      required: true
      type: TEXT
      groupName: labels
    - default: Activate
      description: Text to show on the button.
      label: Button Label
      name: button_label
      required: true
      type: TEXT
      groupName: labels
    - default: Open
      description: Text to show on the status indicator if the gate is open.
      label: Open Label
      name: open_label
      required: true
      type: TEXT
      groupName: labels
    - default: Moving
      description: Text to show on the status indicator when the gate is moving. Leave blank if your sensor item does not have a status for moving.
      label: Moving Label
      name: moving_label
      required: false
      type: TEXT
      groupName: labels
    - default: Closed
      description: Text to show on the status indicator if the gate is closed.
      label: Closed Label
      name: closed_label
      required: true
      type: TEXT
      groupName: labels
  parameterGroups:
    - name: items
      label: Items
    - name: labels
      label: Labels
timestamp: Jan 23, 2023, 2:25:48 PM
component: f7-card
config:
  title: =props.title
slots:
  default:
    - component: f7-block
      config:
        class: bog
        style:
          align-content: space-between
          align-items: center
          display: flex
          flex-wrap: wrap
          justify-content: flex-start
          padding: 10px
      slots:
        default:
          - component: oh-button
            config:
              color: '=(items[props.sensor_item].state == props.sensor_state_closed) ? "green" : ((items[props.sensor_item].state == props.sensor_state_moving) ? "yellow" : "red")'
              disabled: true
              fill: true
              outline: true
              style:
                margin: 10px
                opacity: 1 !important
                width: 100px
              text: "=(items[props.sensor_item].state == props.sensor_state_closed) ? props.closed_label : ((items[props.sensor_item].state == props.sensor_state_moving) ? props.moving_label : props.open_label)"
          - component: oh-button
            config:
              action: command
              actionCommand: =props.control_item_command
              actionItem: =props.control_item
              active: =(items[props.control_item].state === props.control_item_command)
              outline: true
              style:
                margin: 10px
                width: 100px
              text: =props.button_label

K_Herrijgers · March 26, 2023, 4:17pm

Hello robert,

When i trying to install the UI Widget from the markt place it fails i use

openHAB 3.4.2
Release Build

When install another UI Widget “gäragedoor” no problem to install.

the-ninth · March 27, 2023, 7:41am

Hi,

How does it fail? Do you get any error message?

Regards, Robert

ubeaut · March 28, 2023, 10:14pm

I made a simple widget for the remote for a gate but can be used for any door/gate:

uid: remote-letron-gate
tags: []
props:
  parameters:
    - context: item
      description: Gate item
      label: Gate item
      name: item
      required: true
      type: TEXT
    - context: item
      description: Gate status
      label: Gate status item
      name: gatestatus
      required: true
      type: TEXT
timestamp: Oct 30, 2022, 4:40:50 PM
component: f7-block
config:
  style:
    --f7-card-margin-horizontal: 0px
    background-color: rgb(192, 192, 192)
    border-radius: 30px
    box-shadow: 2px 3px rgb(150,150,150)
    height: 15rem
    width: 10rem
slots:
  default:
    - component: oh-link
      config:
        style:
          color: =((items[props.item].state)==="ON")?('green'):('white')
          left: 35px
          position: absolute
          top: 30px
        text: =((items[props.item].state)==="ON")?('Press registered'):('Press to activate')
    - component: f7-badge
      config:
        bgColor: black
        style:
          border-radius: 12px
          height: 40px
          left: 35px
          position: absolute
          top: 80px
          width: 95px
    - component: oh-link
      config:
        action: command
        actionCommand: ON
        actionItem: =props.item
        style:
          color: white
          left: 63px
          position: absolute
          top: 90px
        text: PRESS
    - component: oh-link
      config:
        color: black
        style:
          display: flex
          font-size: 25px
          height: 40px
          left: 35px
          position: absolute
          top: 140px
          width: 100px
        text: Letron
    - component: oh-link
      config:
        color: black
        style:
          display: flex
          font-size: 25px
          height: 40px
          left: 35px
          position: absolute
          top: 180px
          width: 100px
      slots:
        default:
          - component: f7-icon
            config:
              color: =((items[props.gatestatus].state)==="OPEN")?('red'):('green')
              f7: =((items[props.gatestatus].state)==="OPEN")?('lock_open_fill'):('lock_fill')
              size: 50

It looks like this when closed:

when open:

I have it so it pops up when I click this cell on the overview page:

brononius · April 6, 2023, 12:56pm

Hey Greg,

Just tried your widget.

Maybe you can change the ‘Press to activate’ and ‘Letron’ to some free text?
I’m missing for example the possibility to add the name of your (garage)door/gate/…

Would be a big + if you want to use your widget different times, for different end results.

ubeaut · April 6, 2023, 8:07pm

You can add that if you want.
It’s just the props part at the start of the code and then instead of the text you use the props data.

If you do a good modification I might use your modified widget.

If you can’t modify it to how you want let me know and I can change it.

ubeaut · April 7, 2023, 12:53am

Today is raining so I have modified the remote fob to have extra props set so you can change the text on the remote fob and also if you don’t have a device status set it doesn’t show on the fob.

uid: remote-fob-universal
tags: []
props:
  parameters:
    - context: item
      description: Control item ON OFF
      label: Item to control
      name: item
      required: true
      type: TEXT
    - context: item
      description: Device status OPEN CLOSED will not display if not set
      label: Device status item
      name: devicestatus
      required: false
      type: TEXT
    - default: Remote
      description: Remote text
      label: Remote text
      name: remotetext
      required: true
      type: TEXT
timestamp: Apr 7, 2023, 10:32:15 AM
component: f7-block
config:
  style:
    --f7-card-margin-horizontal: 0px
    background-color: rgb(192, 192, 192)
    border-radius: 30px
    box-shadow: 2px 3px rgb(150,150,150)
    height: 15rem
    width: 10rem
slots:
  default:
    - component: oh-link
      config:
        style:
          color: =((items[props.item].state)==="ON")?('green'):('white')
          left: 35px
          position: absolute
          top: 30px
        text: =((items[props.item].state)==="ON")?('Press registered'):('Press to activate')
    - component: f7-badge
      config:
        bgColor: black
        style:
          border-radius: 12px
          height: 40px
          left: 35px
          position: absolute
          top: 80px
          width: 95px
    - component: oh-link
      config:
        action: command
        actionCommand: ON
        actionItem: =props.item
        style:
          color: white
          left: 63px
          position: absolute
          top: 90px
        text: PRESS
    - component: oh-link
      config:
        color: black
        style:
          display: flex
          font-size: 15px
          height: 40px
          left: 35px
          position: absolute
          top: 140px
          width: 100px
        text: =props.remotetext
    - component: oh-link
      config:
        color: black
        style:
          display: flex
          font-size: 25px
          height: 40px
          left: 35px
          position: absolute
          top: 180px
          width: 100px
      slots:
        default:
          - component: f7-chip
            config:
              class:
                - margin-left
              style:
                font-size: 15px
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              iconColor: =((items[props.devicestatus].state)==="OPEN")?('red'):('green')
              iconF7: =((items[props.devicestatus].state)==="OPEN")?('lock_open_fill'):('lock_fill')
              text: =((items[props.devicestatus].state)==="OPEN")?('Open'):('Closed')
              visible: =items[props.devicestatus].state != "-"
              iconSize: 30