CommandButton: button widget to send a command to an item

Add-on Marketplace UI Widgets
,
1

Header

This widget is derived from the ButtonON widget from @Bernd_Ritter. It adds the option to specify the command that is sent to the item when the button is activated. The button will remain in a visual activation stage filled with color as long as the item remains in that state.

Screenshots

Example:

Configuration

Example when active:

Example - Active

Configuration of the example:

Configuration

Changelog

Version 0.1

  • initial release

Resources

The YAML code for the widget:

uid: CommandButton
tags:
  - button
  - standalone
props:
  parameters:
    - default: Command Button
      description: Text to show as title.
      label: Title
      name: title
      required: true
      type: TEXT
      groupName: display
    - default: Start
      description: Text to show on the button.
      label: Button
      name: button
      required: true
      type: TEXT
      groupName: display
    - context: item
      description: Item to use with this button.
      label: Item
      name: item
      required: true
      type: TEXT
      groupName: item
    - default: ON
      description: Command to send to the item.
      label: Command
      name: command
      required: true
      type: TEXT
      groupName: item
  parameterGroups:
    - name: display
      label: Display Options
    - name: item
      label: Item
timestamp: Jan 21, 2023, 6:53:53 AM
component: f7-card
config:
  title: =props.title
slots:
  default:
    - component: f7-block
      config:
        class: bog
        style:
          display: flex
          flex-wrap: wrap
          justify-content: space-between
          align-content: space-between
          padding: 20px
      slots:
        default:
          - component: oh-button
            config:
              text: =props.button
              outline: true
              actionItem: =props.item
              actionCommand: =props.command
              action: command
              active: =(items[props.item].state === props.command)
              style:
                width: 100px
2

This modification adds a second button labeled “Off” that sends the specified “Command OFF” to the item when clicked. Adjust the button labels and styles as needed for your specific use case.

uid: OnOffButton
tags:
  - on - off button
  - standalone
props:
  parameters:
    - default: Command Button
      description: Text to show as title.
      label: Title
      name: title
      required: true
      type: TEXT
      groupName: display
    - default: Start
      description: Text to show on the button.
      label: Button
      name: button
      required: true
      type: TEXT
      groupName: display
    - context: item
      description: Item to use with this button.
      label: Item
      name: item
      required: true
      type: TEXT
      groupName: item
    - default: ON
      description: Command to send to the item when turning on.
      label: Command ON
      name: commandOn
      required: true
      type: TEXT
      groupName: item
    - default: OFF
      description: Command to send to the item when turning off.
      label: Command OFF
      name: commandOff
      required: true
      type: TEXT
      groupName: item
  parameterGroups:
    - name: display
      label: Display Options
    - name: item
      label: Item
timestamp: Jan 18, 2024, 10:05:02 PM
component: f7-card
config:
  title: =props.title
slots:
  default:
    - component: f7-block
      config:
        class: bog
        style:
          display: flex
          flex-wrap: wrap
          justify-content: space-between
          align-content: space-between
          padding: 20px
      slots:
        default:
          - component: oh-button
            config:
              text: =props.button
              outline: true
              actionItem: =props.item
              actionCommand: =props.commandOn
              action: command
              active: =(items[props.item].state === props.commandOn)
              style:
                width: 100px
          - component: oh-button
            config:
              text: OFF
              outline: true
              actionItem: =props.item
              actionCommand: =props.commandOff
              action: command
              active: =(items[props.item].state === props.commandOff)
              style:
                width: 100px