How to change oh-image-card refreshInterval dynamically?

1

Hi,

how can I use a dynamic value for refreshInterval within an oh-image-card?

I want to reload a webcam image every x seconds, but this value should come from an expression or an item:

- component: oh-image-card
  config:
    refreshInterval: '=(items.light.state == "ON") ? 3000 : 1000000'
    title: Webcam
    url: http://192.168.100.7/...


- component: oh-image-card
  config:
    refreshInterval: =items.refreshcam.state
    title: Webcam
    url: http://192.168.100.7/...

Both does not work. Any hint? Thanks.

2

Not sure how to do what your asking, however the ipcamera binding has a feature that may be of interest. This is the autofps.mjpeg stream it can serve. This will serve one frame every eight seconds until the camera detects motion and then it ramps to 1fps until the motion stops. This is handled automatically and a mjpeg stream is just made up of snapshots, the eight seconds is because web browsers assume the stream is broken if the space is longer then this.

If your camera does not have support for motion detection built in, you can trigger this with any external zwave or other motion detection device that you can use in openhab. You can also use ffmpeg to detection motion and change the rate.

Hope someone helps with your question, but thought I would throw another way to achieve your end goal in case you or someone else is not aware this way exists.

3

refreshInterval does accept expressions, and there is no theoretical reason this code should not work. So, there is something else going on. Some things you can check to try and find out what’s going on are:

  • Are you sure that light is the name of an item? If that item state doesn’t ever equal “ON” then you’re always going to have 1000 seconds between refreshes.
  • Do you see any errors in the browser console when you bring this widget up?
  • Are you sure that your image source is changing that rapidly?

Also, what version of OH are you currently using?

4

Thank you. I use 3.4.4.

Tried it with both shown settings, but the refreshrate did not change. Of course the item exists and there were no errors in the log.

My image source must change this quick, because I only load .jpgs, not streams with the “url:”.

In my first example only the “else” branch is used, never the “if”.

PS: The “else” branch is always used, even when I change the expression to the opposite (== “OFF”).

5

Thank you, but I do not use a binding here.

6

This is pretty strong proof that as I suspected your light item is not giving you the state result you expect.

Open up the Developer Sidebar (alt + shift + d) and go to the expression tester (the image button). Then, in the text box, put

=items.light.state

and see what result you get.

7

I already did this and made the “title:” attribute of the oh-image-card to output the same:

=items.light.state

I get ON and OFF shown as text as expected. The item is already used on another element and works fine. It does not matter which item I use, I have plenty of them and tried several.

When I tried with the item

=items.refreshcam.state

I used a slider item with range 2000 to 5000, but then the image was not shown at all. Don’t know what I do wrong here.

Did not found any example in the forum with refreshInterval used with an expression, so are you sure this should work?

8

So I tested this approach as well and yes the regx is valid and it will evaluate the change but I am not sure that it will work as that refresh interval is only set on page load or on a page refresh.
look at your browser development tools and inspect and you can see exactly what is happening.
If you meet the condition and the state changes and then you do a page refresh the refresh interval does in fact change/update for that image card.

1 Like
9

Thanks. So I have to refresh to whole page? Hm, this is not good. How could I do this?

I have many items, sliders, bars, graphs etc on this page and e.g. a power chart is updated every 5 mins by an item timer, which works fine. So the refreshInterval can’t be updated like all the other items and elements?

10

What I am not clear on is why you need to change the refresh interval? why not just leave it at the faster rate. Are you trying to save system resources? The rendering of a static jpg should not be that expensive I would think.

11

Yes, I would like to stop the updates during the night (by setting the refreshInterval to some hours).

12

ok I understand your desire just not the rational. I guess you could puzzle out some rule that may trigger a page reload at the same time as the item state changes but that is definitely going to be a resource expensive approach. Even that is iffy at best since the client browser session may not honor a refresh /reload request.

13

No, you don’t have to refresh the whole page. You can just force the card component to refresh by putting it inside some other container that is using the key property.

It would look something like this:

- component: f7-block
  config:
    key: =Math.random() + items.light.state
    style:
      margin: 0
      padding: 0
  slots:
    default:
      - component: oh-image-card
        config:
          refreshInterval: '=(items.light.state == "ON") ? 3000 : 1000000'
          title: Webcam
          url: http://192.168.100.7/...

To understand a little more about the key property, you can read here:

1 Like
14

Thank you, I will try this out. I already use the key for my charts. Looks nice!

15

Justin, thank you again, it just works fine!

16

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