Custom widget: reduce dimmer by 10 to zero does not work

Add-ons UIs
1

Hi,
I have created my own widget. Reduced to the essentials: With 2 buttons I control a dimmer. Plus button for +10%, minus button for -10%. The item takes the value as expected 0+10=10… 90+10=100. More is not possible (value range of the dimmer 0-100%). Backwards it works only up to 10%: 10-10 should be 0. However, the operation is not executed, the value remains at 10%. I don’t quite understand why, I calculate with integers, so it can’t be a rounding error (that the value falls below 0 during the calculation, which would be outside the value range for a dimmer).

screenshot

- component: f7-col
  config:
    class:
      - text-align-center
    style:
      width: 44px
  slots:
    default:
      - component: oh-button
        config:
          action: command
          actionCommand: =Number(items[props.setStufe].state) + 10
          actionItem: =props.setStufe
        slots:
          default:
            - component: f7-icon
              config:
                f7: plus_circle
                style:
                  color: green
      - component: Label
        config:
          text: =Number.parseFloat(items[props.setStufe].state) + "%"
      - component: oh-button
        config:
          action: command
          actionCommand: =Number(items[props.setStufe].state) - 10
          actionItem: =props.setStufe
        slots:
          default:
            - component: f7-icon
              config:
                f7: minus_circle
                style:
                  color: green

Regards

2

Have you looked in your server events.log to see what command (if any) it does send?

3

FYI: Add-on marketplace is for posting complete widgets that other uses can install on their systems, not for asking questions about widgets. I’ve moved this to a more appropriate category.

This is a small quirk of the system. 0 is falsy value which means it can be used in place of a literal false value. However, when the yaml keys are set to any falsy value, they are ignored, so when your actionCommand property evaluates to 0 that property actually doesn’t exist in the end, so no command is being sent.

There are a couple of ways around this. You can use a ternary statement to test for the zero result and send an alternate command such as OFF instead:

actionCommand: =(Number(items[props.setStufe].state) - 10 == 0)?('OFF'):(Number(items[props.setStufe].state) - 10)

The other alternative is to take advantage of the fact that although the numeral 0 is a falsy value, the string "0" is not and have the other number commands as strings is still acceptable.

actionCommand: =(Number(items[props.setStufe].state) - 10).toString()
1 Like