Template widget with "on click" and frequent refresh

zacofunny · August 8, 2017, 8:07pm

Hi!
I have 2 dashboards as on the attached screenshots which shows view from 2 foscam cameras (each for one room) which I use to keep an eye on my children. 1 smaller and 1 bigger image combination depending on selected dashboard (each for one room).
In order to switch cameras I use Button widget (labeled as “PRZELACZ WIDOK”) which just navigates to the other dashboard showing exchanged view of cameras and different switches.
Both cameras provide MJPEG streams which are supported by Image widget. However Image widget doesn’t provide possibility for editing exact picture size. Also Image widget does not provide options “Don’t wrap in container” and “No background”. Therefore I decided to use Template widget.

The code in Template widget is as follows:

<a href="/habpanel/index.html#/view/Pokoj"><img src ="http://192.168.1.13:8888/cgi-bin/CGIStream.cgi?cmd=GetMJStream&usr=xxx&pwd=xxx" height="720" width="960" ></img></a>

Now, the ideas I’d like to implement are:

Instead of using Button to switch between 2 panels I would like to just click on any of Template widgets to switch between cameras view.
Due to MJPEG streams get lost sometimes i need something to refresh stream when it stops and here I see 2 options:
a) The easy way would be to refresh stream frequently in the same way as it is embedded in Image widget,
b) Best way would be to monitor MJPEG stream and refresh it when it failed.

Can anybody help me develop this, or at least can someone point me to the correct direction?
I’m not software developer but I’m keen to learn.

gersilex · August 9, 2017, 1:15pm

You can use the HABPanel widgets in your template as well. This is what I have done for cycling through Webcam images (basically multiple image widgets in a JavaScript carousel)

<div ng-init="image={url: 'http://yourstreamurl', refresh: 300} " >
   <widget-image ng-model="image"></widget-image>

…

You can get all configuration keys from the source code.

github.com

openhab/org.openhab.ui.habpanel/blob/5506efe30aafcf2d5b18f1bd72cf06e5f505bb80/web/app/widgets/image/image.widget.js#L95


$scope.items = OHService.getItems();


$scope.form = {
    name        : widget.name,
    sizeX       : widget.sizeX,
    sizeY       : widget.sizeY,
    col         : widget.col,
    row         : widget.row,
    image_source: widget.image_source || 'static',
    url         : widget.url,
    refresh     : widget.refresh,
    intervaltype: widget.intervaltype || 'seconds'
};
if (widget.image_source === 'item-string') $scope.form.item_string = widget.item;
if (widget.image_source === 'item-image') $scope.form.item_image = widget.item;


$scope.dismiss = function() {
    $modalInstance.dismiss();
};


$scope.remove = function() {

Syntax may be wrong. I am writing on a mobile.

zacofunny · August 9, 2017, 7:43pm

Thanks for that info!
It’s pretty interesting what you wrote and I have some idea how to use it in some other case.
However usage of Image widget within Template widget does not resolve the issues since it does not allow me to set custom picture size and also it doesn’t offer ‘on-click action’ option.

gersilex · August 10, 2018, 1:30pm

Just surround your image widget with an <a> tag (with a href attribute to have it react to clicks or taps).

Image size should be possible with css on the image widget, I believe.

barteke22 · July 1, 2019, 12:14am

This might be old, but for those wondering: Following gersilex’ suggestion with some trial and error I’ve managed to find the right css classes to make the ‘image inside image-widget inside a template widget’ resizeable.

Here’s a working example of an updating image that’s set to cover 100% of the template widget:

<style>
.image-content{
  width: 100%;
  height: 100%;
}
.box-content{
  padding: 0px;
}
</style>
<div ng-init="image={url: 'https://www.yr.no/sted/Norge/Hordaland/Oster%C3%B8y/Nedre_Raknes/meteogram.svg', refresh: 3600} " >
   <widget-image ng-model="image"></widget-image>

xsherlock · September 18, 2020, 9:42pm

Hi,
Got it working with your example but I I want to pass the url from the item and that will not work for a reason I do not understand.

This one works perfectly.

<div ng-init="image={url: 'http://172.16.10.135/snap.jpeg', refresh: 0.5} " >
<widget-image ng-model="image" ></widget-image>

While this will result in empty image

<div ng-init="image={url: '{{'%s' | sprintf: itemValue('trash_icon_url2')}}', refresh: 0.5} " >
<widget-image ng-model="image" ></widget-image>

And I see in inspect that it gets substituted perfectly

2020-09-18 23_38_41-HABPanel - Vivaldi

The only one diffrence I see in inspect that when I just enter url manualy it will for some reason get a timestamp added, I kind of do not understand why that does not happen when I pass that as item value.

2020-09-18 23_33_31-HABPanel - Vivaldi