[OH3] Dimmer Opacity question

Add-ons UIs
1

Hi

I was hoping someone could help me work this coding issue out, i’m not a coder but i’ve been messing about with OH3 for a month now and looking to get the UI the way i would like it. I’ve been making a few widgets to display switches and dimmers and just basically messing about

In my dimmer widget i have a icon

    - component: f7-icon
      config:
        f7: lightbulb
        color: white
        size: 30
        style:
          position: absolute
          --my-opacity: =(items[props.item].state) +"%"
          left: 30px
          top: 30px
          filter: opacity(var(--my-opacity))

I managed to set the opacity level to match the dimmer light level and it kind of works, the issue is when the dimmer is at 0 then the icon disappears, i would like it to stay at 10% when the level is at 0 so i thought i could maybe do this (my steps are 10 so its 0 or >10)

--my-opacity: '=(items[props.item].state == "0") ? "10%" : "=(items[props.item].state) +"%""'

when at 0 it will set the opacity at 10% but when on it will not set the correct opacity level so i have something wrong with

: "'=(items[props.item].state) +"%"'"'

Any help would be great

Thanks

2

Hi,

i think your use of quotation marks is a bit off and you don’t need the second =.

: "=(items[props.item].state) +"%"

should really be:

: (items[props.item].state) +"%"

Bute even more elegant, you can use the Math.max(10,items.MyItem.state) function
Untested:

=Math.max(10,items.[props.item].state) + '%'
3

Bob you legend!!! removing the quotes and = did the trick and now able to match the opacity level with the dimmer level

image

image

image

image

Thanks for the help

1 Like
4

Thats one nice widget right there! Would you mind sharing the full yaml code? :slight_smile:

5

yeah sure, i’ve only just started to mess about with widgets so it might not be correct but it looks to work ok, i have one for dimmers and switches created. Looking to create a thermostat one next

uid: JS_Dimmer
props:
  parameters:
    - label: Device Name
      name: device
      required: true
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: true
      type: TEXT
timestamp: Feb 8, 2021, 7:16:13 PM
component: f7-card
config:
  style:
    height: 250px
    width: 250px
    background: '=(items[props.item].state >= "1") ? "linear-gradient(30deg, #20202e, #373749)" : "linear-gradient(30deg, #2a2a38, #4d4d64)"'
    border-radius: 25% 10%
    color: 255,255,255
    box-shadow: white
slots:
  default:
    - component: f7-icon
      config:
        f7: lightbulb
        color: white
        size: 30
        style:
          position: absolute
          --my-opacity: '=(items[props.item].state == "0") ? "10%" : (items[props.item].state) +"%"'
          left: 30px
          top: 30px
          filter: opacity(var(--my-opacity))
    - component: Label
      config:
        text: =props.device
        style:
          position: absolute
          left: 30px
          top: 70px
          color: white
          font-size: 22px
          font-weight: 600
          line-height: 32px
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis
          filter: opacity(80%)
    - component: oh-slider
      config:
        item: =props.item
        label: true
        min: 0
        max: 100
        step: 10
        scale: true
        style:
          position: absolute
          top: 121px
          left: 30px
          width: 200px
          --f7-range-knob-size: 20px
          --f7-range-knob-color: rgb(137, 117, 243)
          --f7-range-bar-size: 15px
          --f7-range-bar-border-radius: 10px
          --f7-range-bar-bg-color: rgb(29, 30, 40)
          --f7-range-bar-active-bg-color: rgb(13, 13, 13)
          --f7-range-label-size: 20px
          --f7-range-label-text-color: white
          --f7-range-label-bg-color: rgb(29, 30, 40)
          --f7-range-scale-step-color: white
    - component: Label
      config:
        text: '=(items[props.item].state >= "1") ? "On" : "Off"'
        style:
          position: absolute
          left: 150px
          top: 175px
          color: white
          font-size: 20px
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis
    - component: oh-toggle
      config:
        item: =props.item
        style:
          position: absolute
          top: 179px
          left: 30px
          --f7-toggle-handle-color: rgb(137, 117, 243)
          --f7-toggle-inactive-color: rgb(29, 30, 40)
          --f7-toggle-active-color: rgb(13, 13, 13)
          --f7-toggle-width: 50px
          --f7-toggle-height: 25px

uid: JS_Switch
props:
  parameters:
    - label: Device Name
      name: device
      required: true
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: true
      type: TEXT
timestamp: Feb 8, 2021, 7:18:59 PM
component: f7-card
config:
  style:
    height: 250px
    width: 250px
    background: '=(items[props.item].state >= "1") ? "linear-gradient(30deg, #20202e, #373749)" : "linear-gradient(30deg, #2a2a38, #4d4d64)"'
    border-radius: 25% 10%
    color: 255,255,255
    box-shadow: white
slots:
  default:
    - component: f7-icon
      config:
        f7: lightbulb
        color: white
        size: 30
        style:
          position: absolute
          left: 30px
          top: 30px
          filter: opacity(80%)
    - component: Label
      config:
        text: =props.device
        style:
          position: absolute
          left: 30px
          top: 70px
          color: white
          font-size: 22px
          font-weight: 600
          line-height: 32px
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis
          filter: opacity(80%)
    - component: Label
      config:
        text: '=(items[props.item].state >= "1") ? "On" : "Off"'
        style:
          position: absolute
          left: 150px
          top: 175px
          color: white
          font-size: 20px
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis
    - component: oh-toggle
      config:
        item: =props.item
        style:
          position: absolute
          top: 179px
          left: 30px
          --f7-toggle-handle-color: rgb(137, 117, 243)
          --f7-toggle-inactive-color: rgb(29, 30, 40)
          --f7-toggle-active-color: rgb(13, 13, 13)
          --f7-toggle-width: 50px
          --f7-toggle-height: 25px
6

opacity is for f7 icons set under style like this:

          style:
            opacity: 0.1

so i believe you can put the YALM like this for make it item state dependant, if state is 0 then opacity is 0.1, else e.g. 0.8

'=(items[props.item].state == "0") ? "0.1" : "0.8"'

no need to variable