Widget with changing icon and title

Add-ons UIs
1

Hi,
I’m trying to add an oh-label-item component to a list that would change it’s icon and text based on the item it displays.
So far, I have two separte labels displaying power grid draw and supply, but as they are mutually exclusive I would rather display one label that switches it’s state depending on the values.

These are my two labels I currently have.

          - component: oh-label-item
            config:
              icon: iconify:akar-icons:arrow-back-thick-fill
              iconColor: red
              item: =props.senecHomeGridDrawItem
              style:
                --f7-list-item-after-font-size: 15px
                --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-title-font-size: 15px
                --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
              title: =props.senecHomeGridDrawItemTitle
          - component: oh-label-item
            config:
              icon: iconify:akar-icons:arrow-forward-thick-fill
              iconColor: green
              item: =props.senecHomeGridSupplyItem
              style:
                --f7-list-item-after-font-size: 15px
                --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-title-font-size: 15px
                --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
              title: =props.senecHomeGridSupplyItemTitle

I tried to combine them in the following way without success:

          - component: oh-label-item
            config:
              icon: '=(items[props.senecHomeGridSupplyItem] > 0) ? "iconify:akar-icons:arrow-forward-thick-fill" : "iconify:akar-icons:arrow-back-thick-fill"'
              iconColor: '=(items[props.senecHomeGridSupplyItem] > 0) ? "green" : "red"'
              item: =props.senecHomeGridSupplyItem
              style:
                --f7-list-item-after-font-size: 15px
                --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-title-font-size: 15px
                --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
              title: '=(items[props.senecHomeGridSupplyItem] > 0) ? =(items[senecHomeGridSupplyItemTitle]) : =(items[senecHomeGridDrawItemTitle])'

These are my problems:

  • I can’t find a working syntax for the item (value) definition to display either the value from =props.senecHomeGridSupplyItem or =props.senecHomeGridDrawItem depending on the value of =props.senecHomeGridSupplyItem being > 0
  • The tite is displayed as undefined and not changing as exptected
  • Icon and icon color are not changing as expected

Can someone advise?

2

Just using items[itemName] is not enough. You want items[itemName].state to actually get the state of the item.

3

Hi @JustinG, thanks for your hint!

I finally got it working.
The missing .state was a copy&paste mess, thanks for the hint!
The items I use for the comparison have a trailing ’ W’ so I needed to cut and parse them as well.
The final code below, FYI.

Is it possible to use variables here?
It looks quite messy to have the comparison for all these attributes :frowning:

          - component: oh-label-item
            config:
              icon: '=(Number.parseFloat(items[props.senecHomeGridSupplyItem].state.substring(0, items[props.senecHomeGridSupplyItem].state.length -2))) ? "iconify:akar-icons:arrow-forward-thick-fill" : "iconify:akar-icons:arrow-back-thick-fill"'
              iconColor: '=(Number.parseFloat(items[props.senecHomeGridSupplyItem].state.substring(0, items[props.senecHomeGridSupplyItem].state.length -2))) ? "green" : "red"'
              item: '=(Number.parseFloat(items[props.senecHomeGridSupplyItem].state.substring(0, items[props.senecHomeGridSupplyItem].state.length -2))) ? props.senecHomeGridSupplyItem : props.senecHomeGridDrawItem'
              style:
                --f7-list-item-after-font-size: 15px
                --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-title-font-size: 15px
                --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
              title: '=(Number.parseFloat(items[props.senecHomeGridSupplyItem].state.substring(0, items[props.senecHomeGridSupplyItem].state.length -2))) ? props.senecHomeGridSupplyItemTitle : props.senecHomeGridDrawItemTitle'
4

Since you are using Number.parseFloat to convert to a numerical value, you don’t need to worry about trimming off the unit, parseFloat will do that automatically for you.

No, you can’t do variable assignment in the widget expressions. However, if you are on the latest snapshot (or upgrade to the newest milestone when it comes out soon) there is a new shortcut you can use that cleans things up nicely. @@'itemName' will work in place of items[itemName].state, so you your case all you would need would be Number.parseFloat(@@props.senecHomeGridSupplyItem)

5

Nice!
I’ll remove the trimming and wait for the @@ shortcut to become available in the next release.
I’d rather let my system run on stable…
Thanks a lot!

I’ll check this in to the marketplace, when it’s ready might be helpful for others too, as it’s relying on the standard senec binding only and I couldn’t find anything nice to display the data.

Thanks for your help!

1 Like
6

Just for the visibility, if anyone is interested to follow:

7

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.