Widget dayjs (better) updating trick?

Add-ons UIs
1

Hi,

I’ve got a doorbell running on an ESP8266 playing a MP3 when someone rings. It also sends a message to openhab by changing an item (date-time last pressed). Of course I want it on my wall mounted tablet showing this time with an icon. And to grab attention I want a green icon when it was pressed today, else gray. I’m using dayjs for that. So far so good.

Problem was updating, since the item actually doesn’t change (until someone presses the doorbell again) my widget wasn’t updated and stays green forever. I solved this by using a trick I found for updating graphs. This required a changing item that you use in the key of a f7-card config. I’ve also added this to the formula of the color of the icon. Completely useless condition because its always true but it forces the widget formula to update and now the icon will turn grey.

My question is … it seems a strange workaround. Maybe there is a more logic/easy solution to this problem?

Below the code. The “LaatstGebeld” item contains the date-time the button was last pressed. Using dayjs I check if this is after the start of the current day. If so, color is green else gray. Works perfect but isn’t updated. So I included a fake condition on the “timertick” item (a rule changes it value every 15 minutes for updating graphs in my other widgets). And this makes it work, now (I presume) every 15 minutes it checks the condition and changes the color of the icon accordingly.

                - component: oh-icon
                  config:
                    color: '= items.timertick.state>=0 &&  dayjs(items.LaatstGebeld.state).isAfter(dayjs().startOf("d")) ? (props.iconColor ? props.iconColor : "green") : "gray"'
                    icon: '=props.mainIcon ? props.mainIcon : "f7:bell_fill"'
2

Your issue is due to the fact that the dayjs expression result isn’t a reactive property (for Vue.js):

In that article you’ll learn that for a re-render to occur (and therefore reevaluating the expression), an internal watcher has to be notified by calling a setter on one the dependencies (purple circle in the illustration). While the dayjs expression’s results would change when the day changes, no setters are called - there’s no event triggered by only the date changing that would trigger such a setter - so it’s never reevaluated.

As you’ve found out the best way to have a reactive dependency is to include an item’s state in the expression and change (or I think just update) that state.
You could justify the need for the item by having an “Acknowledge” button. You can also use the NTP - Bindings | openHAB to update the item at regular intervals using just a Thing so there would be no need for a rule.

2 Likes
3

Thanx, I suspected something like that. Works as designed. Nice to have a link how this works. Maybe I discover some more ‘hidden’ features.

I’ll look into the binding and see if I like this more than my current solution.

Funny, actually I was thinking of an acknowledge button. Do nothing and it remains green for the day. Or press it to that instantly.