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.
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.
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)
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.
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:
And I see in inspect that it gets substituted perfectly
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.