HabPanel doesn't evaluate itemValue when forced browser refresh

Hi @ysc

I’m experiencing strange behavior when using ng-init in HabPanel to retrieve a value that is stored in an OpenHab item.

The issue only occurs when you hit “refresh” in the browser. If you navigate to the page, it works fine.

This always works and returns the right value:

{{itemValue('spotify_device_list')}}  

This works only when you go the page the first time. When you click the refresh button, it results in “N/A”:

<div ng-init="x = itemValue('spotify_device_list')">{{x}}</div>

It looks like under some conditions the “itemValue” function is not called correctly.

Any idea?

FYI, I want to ng-init because I want to iterate through a JSON array later on.

Thanks!
P

This is a timing issue with the use of ng-init, not a problem with the itemValue function. “N/A” is returned when the item does not exist in the client side cache.

When you refresh the browser the user interface can be rendered before any item data has been fetched from the server. The directive ng-init only runs once and the item does not exist at that time.

When you navigate between pages the item data is already cached when the user interface is rendered for that page. This means that when ng-init executes the item will exist.

One solution to this issue is to delay the execution of the ng-init code until item data is present using ng-if.

<div ng-if="(getItem('spotify_device_list') != 'N/A')" ng-init="x = itemValue('spotify_device_list')">{{x}}</div>

FYI: For iterating through an array you can use ng-repeat, which, unlike ng-init, will respond to item data changes.

1 Like

Thanks! I’ll give that a try!

The problem also occurs with ng-repeat.

I strange this is that when you navigate to the page for the first time (open the browser and enter the URL) it works. I don’t understand why in that case it works.

@jjones is exactly right; and I believe his workaround with ng-if is quite clever and will work.

Currently the items are loaded “in the background” and they could or not could not be ready when the template is “compiled”, in AngularJS’ terminology. That’s why you have different results with seemingly the same action (loading or reloading the page), it depends on whether the items happen to be already loaded or not when the ng-init is evaluated… when refreshing the page some static content is perhaps loaded from the browser’s cache so the template compilation happens a bit earlier, before the items API call returned.

In other terms, using of ng-init to store an item state is not guaranteed to work.

Now, to be honest, the items management is quite poorly done in HABPanel as it is (it was one the first things implmented in the early days of this project, when it wasn’t much more than a dirty hack), normally a dashboard wouldn’t be rendered before the items are loaded. It’s a simple enough fix though, so it might be added before I decide to refactor the whole thing.

Thanks both of you! This is very helpful and solves my problem!

I may have a similar problem when creating/using custom widgets and accessing settings values in the widget. I have the newest openHab 2.2 version loaded and installed under Windows 10 and also on a Raspberry Pi3B. The complete package with addons was loaded within the last 2 days, so everything should by up to date.

When I define a settings field to be an “Item”, the access works OK, Homematic or Netatmo etc are retireved properly.
But when assigning a different type like “String” or “Number” or “Color” … I can call up the dialog to set the values, but in the preview / or finally in the panel itself, the associated field(s) stay with N/A or NaN resp.

I checked the above solution andd added div tags for ng-if / -init, but there is no change.

I would expect that Non-Item values should be quite simple to map into the html stream as the values are (more-or-less) static relative to accessing “Things” !?

Did you find a solution to this problem? I face the same issue:

I am about to create my own title widget as follows:

<div>
    {{itemValue(config.label_title)}}
</div>

Adding a string in the configuration setting label_title of the type «string» results in N/A.

Is this supposed to work correctly?

Anybody?

Can you provide a screen shot of your settings page in the custom widget editor?

If you only want to display the contents of the setting, you would use {{config.label_title}}.
What you did is try to retrieve the state of the item named like your setting, which probably doesn’t exist, so it returned N/A.

1 Like

Thanks for your answers. They resolved my issues.

I have attached my label + widget.

G.

Label .widget.json (688 Bytes)