CommandButton: button widget to send a command to an item

[the-ninth (Robert)]

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:

Example when active:

Configuration of the example:

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