Presence

[rlkoshak (Rich Koshak)]

@DanielMalmgren

but how could I get the icon from the item settings instead?

I think if you omit the icon property it will pull the icon from the Item’s category. If you are using oh icons you probably will need to omit the iconColor property too and set the option to make the widget use the Items’s state. OH icons work differently from all the rest.

@DanielMalmgren

icon: '="oh:" + items[props.item].category'

In the widget context, items is an Array of maps with each map containing only state and displayState. Nothing else about the Item is available (the one exception is when using the repeater widget which has more info about the Item but not the category I think).

Overall, it will probably be easier for you to configure the widget yourself on the Item. Set the “default list item widget” metadata on the Item, select oh-label-item from the list and it should be apparant what you need to set for each of the properties. Once you are happy you can copy the YAML to the widgets page, add in some properties and apply that to all your presence Items same as you do for this one.

There really is nothing special about this widget. You can and should easily be able to create it yourself if it wasn’t posted to the marketplace. I mainly posted it here as an example to see how easy it can be.

[DanielMalmgren]

@rlkoshak

Overall, it will probably be easier for you to configure the widget yourself on the Item. Set the “default list item widget” metadata on the Item, select oh-label-item from the list and it should be apparant what you need to set for each of the properties.

Ah, this is a metadata I’ve never used before, seems to mostly do the trick. However, now instead I don’t succeed with the badge text or badge color. Obviously the following doesn’t work, but how do I change it?

badgeColor: '=(items[props.item].state === "ON") ? "green" : "red"'

[rlkoshak (Rich Koshak)]

Sicne you don’t have props, replace props.item with the name of the Item you are editing.

[DanielMalmgren]

That’s what I thought as well, but I’ve tried that (along with loads of other variants I could think of. The item I’m fiddling with is named “DanielsMobil_Online”, so I’ve tried this now, doesn’t work…

badgeColor: '=(items[DanielsMobil_Online].state == "ON") ? "green" : "red"'

(always ends up with a red badge, although I know for sure the state of the item is ON)
Feels like I’m fiddling in the dark when working with this…

[rlkoshak (Rich Koshak)]

I think you need to put the name of the item in quotes. It’s a String.

[Mark_VG (Mark)]

@DanielMalmgren

badgeColor: '=(items[DanielsMobil_Online].state == "ON") ? "green" : "red"'

I think this should be:

badgeColor: '=(items.DanielsMobil_Online.state=== "ON") ? "green"  : "red"'

[DanielMalmgren]

Nope. Can’t get it working no matter what I try. I’m starting to think though that I misunderstood how to use the widget. Can any of you detail what the correct way would be to use it on a page? What I’ve done now is things like adding a list and then adding my item as label list item.

[Mark_VG (Mark)]

Maybe share your code so we can see what you have and are trying to do?

[DanielMalmgren]

Ok. The default list item widget metadata for my item currently looks like this:

value: ""
config:
  badgeColor: '=(items.DanielsMobil_Online.state == "ON") ? "green" : "red"'
  badge: '=(items.DanielsMobil_Online.state == "ON") ? "hemma" : "borta"'
  item: DanielsMobil_Online
  color: gray
  icon: oh:man_3
  title: Daniel

This seems to work fine now when I look in the items settings in main UI, the badge changes as it should. I just don’t understand how to add this to my page so I can see it correctly in the OH app…

[Mark_VG (Mark)]

@DanielMalmgren

I just don’t understand how to add this to my page so I can see it correctly in the OH app…

This is not exactly what you are trying to do I don’t think, but this is what I did when I was trying out Presence:

This is a popup from the Overview page. You can add the below YAML as the code for a cell off the Overview page.

component: oh-cell
config:
  title: Presence - Danie
slots:
  default:
    - component: f7-block
      config: null
      slots:
        default:
          - component: f7-list
            config:
              class:
                - padding-bottom
            slots:
              default:
                - component: Label
                  config:
                    style:
                      font-weight: 500
                      line-height: 20px
                      padding-left: 20px
                    text: Home
                - component: oh-list-item
                  config:
                    color: '=(items.GPSMarkatHome.state === "OFF") ? "red" :
                      (items.GPSMarkatHome.state === "ON") ? "green" : "yellow"'
                    icon: f7:person_circle
                    iconColor: '=(items.GPSMarkatHome.state === "OFF") ? "red" :
                      (items.GPSMarkatHome.state === "ON") ? "green" : "yellow"'
                    iconUsesState: true
                    item: GPSMarkatHome
                    title: Mark's Phone

Hope it gives you a place to start

[DanielMalmgren]

@Mark_VG

This is not exactly what you are trying to do I don’t think, but this is what I did when I was trying out Presence:

Hmmm… I’ll try this out. But I thought the point of using that metadata was that it would be easy to then just add it to a page? Still trying to puzzle together all this…

[rlkoshak (Rich Koshak)]

@DanielMalmgren

I just don’t understand how to add this to my page so I can see it correctly in the OH app…

This is a list Item widget, right and you’ve set it as the “default list item widget” for the Item, right? Anywhere that Item is shown in the UI as part of a list card (e.g. the overview tabs) this widget will be used.

If you added “default stand alone widget” or “default card widget” metadata for the Item, then you just add the Item to a page and it will use these widgets.

A lot of this is covered in the Getting Started Tutorial UI sections.

[DanielMalmgren]

@rlkoshak

A lot of this is covered in the Getting Started Tutorial UI sections.

Yep, seems I simply need to read up on this. All this stuff didn’t exist when I started using OH (only classic UI and sitemaps back then) and I never really got around learning it when it was introduced

[rlkoshak (Rich Koshak)]

@DanielMalmgren

I never really got around learning it when it was introduced

In my experience, those who have the hardest time with OH 3/4 are old OH 2.x users who don’t read Getting Started. It really is a “what’s new” kind of tutorial so if you skip it, you miss all the new stuff.

[anne_hh (Anne W)]

I abused the widget for some “is that network device online” issue. Looks almost fine in widget editor and live:

…except the gray “on” text at the end. What could be wrong there?
Here’s the changed code:

config:
  icon: f7:checkmark
  iconColor: '=(items[props.item].state == "ON") ? "green" : "red"'
  color: '=(items[props.item].state == "ON") ? "yellow" : "gray"'
  title: =props.title
  item: =props.item
  badgeColor: '=(items[props.item].state === "ON") ? "green" : "red"'
  badge: '=(items[props.item].state === "ON") ? "online" : "offline  "'

[rlkoshak (Rich Koshak)]

I’m not sure but the first thing I would try is setting the state description pattern to a space. That should make it not print out the state.

[anne_hh (Anne W)]

This in fact does work. So this is intended behaviour?

[rlkoshak (Rich Koshak)]

I don’t know what is and is not intended behavior but it has always been the case that when you don’t want to show the state of the Item, on sitemaps or MainUI, you supporess it in the Item’s label (.items files) or state description pattern.

[anne_hh (Anne W)]

I see. Thanks so much for pointing that out.