Beginners questions: how to display status, how to use RGB colors

[the-ninth (Robert)]

Hi,

I am trying to adapt the ButtonOn widget and add a kind of status badge. However, I am not sure which component to use for the badge.

It should look like the image below, with the status being displayed on the left side and a button to activate the device on the right side. For now I have been using the oh-button also for the badge, however even if I remove the action from the configuration, it remains clickable. I’d prefer to have something similar-looking but without an action associated. Is there any component like that?

My second question: is it possible to use any RGB values for the color? So far I can only get named colors like black, red or green to work, something like #FFFFFF does not work.

My configuration looks like this:

uid: ButtonOn
tags:
  - marketplace:138629
props:
  parameters:
    - context: item
      description: Control Item to operate the gates.
      label: Control Item
      name: control_item
      required: true
      type: TEXT
      groupName: general
    - context: item
      description: Sensor Item to determine the gates open/close status.
      label: Sensor Item
      name: sensor_item
      required: true
      type: TEXT
      groupName: general
    - description: The state of the Sensor Item when the door is closed.
      label: Sensor state when closed
      name: sensor_state_closed
      required: true
      type: TEXT
    - description: Text to show on the button.
      label: Button
      name: button
      required: false
      type: TEXT
    - description: Text to show as title.
      label: Title
      name: title
      required: false
      type: TEXT
  parameterGroups:
    - name: general
      label: Display options
timestamp: Jan 20, 2023, 8:39:18 AM
component: f7-card
config:
  title: '=(props.title) ? props.title : "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:  '=(items[props.sensor_item].state == props.sensor_state_closed) ? "Closed" : "Open"'
              color: '=(items[props.sensor_item].state == props.sensor_state_closed) ? "green" : "red"'
              large: true
              fill: true
              outline: true
              style:
                width: 100px
          - component: oh-button
            config:
              text: '=(props.button) ? props.button : "Activate"'
              large: true
              outline: true
              actionItem: =(props.control_item)
              actionCommand: true
              action: command
              active: =(items[props.control_item].state === 'ON')
              style:
                width: 100px

[JustinG]

@the-ninth

even if I remove the action from the configuration, it remains clickable. I’d prefer to have something similar-looking but without an action associated. Is there any component like that?

You can certainly use a Label component and add styling to it until it matches the the button, but that’s the long hard way to do it. See this thread here for the disabled property and how to revert the visual change when you use it:

Overview Page Items - Read Only?

The oh-toggle component (and I believe the -card and -item versions) has a disabled property. If you set this property to true then the component will be slightly grayed out and unavailable for user interaction but will still respond to changes of the linked item.

@the-ninth

My second question: is it possible to use any RGB values for the color? So far I can only get named colors like black, red or green to work, something like #FFFFFF does not work.

Most of the components are from the f7 library of vue elements or derived from combinations of those elements. The configuration properties (anything under the config header) are based on the f7 properties and the f7 library uses only a limited color palette with named colors:

Color Properties | Framework7 Vue Documentation

However, you can use any standard css color system you like if instead of using the built-in properties you add color via the style object:

- component: oh-button
  config:
    text: Button
    fill: true
    style:
      background-color: rgb(0,32,128)

Edit: if you want to use #FFFFFF then you have to put the value in quotes, because # is the yaml comment character:

background-color: '#FFFFFF'

[the-ninth (Robert)]

Perfect, both solutions work well, thanks a lot!