[Widget] Image Carousel

Apps & Services HABPanel
, ,
1

Image Carousel

Rotates a list of images

Image Carousel.widget.json (4.5 KB)

imgCarousel
imgCarousel.gif695×465 920 KB

image
image.png570×690 44.6 KB

Settings are self-explanatory.

2 Likes
2

Nice!

3

I’m liking it!

I have some security cameras and it doesn’t seem to be refreshing the images based on the Camera Feed Refresh Interval…

4

Check you network traffic either through the dev tools or fiddler. If requests are too often, they may be canceling each other out. I would suggest keeping the refresh interval a bit higher.

5

Hi Lucky

Great widget - thanks!

I have the same issue as Tommy above though, in that the image is not refreshing.

I have three IP camera image URLs, rotating every 5 seconds, with a refresh interval of 60 seconds.

The console looks ok - but the image is not updated (I can tell by the timestamp on camera image)

Updating ipcamera_HTTPONLY_c78fd7c7_image state from data:image/jpeg;base64,/9j/4AA.........<snip>
Updating ipcamera_HTTPONLY_c78fd7c7_image state from data:image/jpeg;base64,/9j/4AA.........<snip>
.........

I do have this error - not sure if it is related -

Source map error: request failed with status 404
Resource URL: http://localhost:8080/habpanel/vendor/vendor.js
Source Map URL: aCKolor.min.js.map[Learn More]

Thanks
Mike

6

Is there a way to turn off the circles and the arrows? Nothing jumps out in the code.

7

The indicators?

.carousel-indicators { display: none }

I’ll probably modify it to make it a configurable setting.

8

Excellent. That did the circles. What about the arrows?
Tried:

  .icon-next {display: none}
  .icon-prev {display: none}

But that wasn’t it.

9

Done. Just reimport the widget from widget gallery. Indicators and arrows are configurable now

image

10

That is really cool how fast you did that. Perfect. Thanks again!!

1 Like
11

If I could make the pics full screen that’d be great. If I stretch the widget too much I get scroll bars. But, man this is wonderful!

12

For those interested, I’m running OH2 and HABPanel on the same device, so far with no problems. To display the pictures, I copied them to a folder in the config/html folder. You can then access them via localhost:8080/static//. Put a string of those, comma separated in the “List of Image URLs” blank.

Pro tip: when installing the widget, follow the instructions. I thought I knew what I was doing, did it wrong, and got to do it twice. :slight_smile:

13

I’ll probably add an image list feature to my screensaver so users can choose between dashboard rotation or photos

14

Hi,
Is it possible to use a list with names of image files (e.g. txt)?
I want to use it with dynamically uploaded files in one folder!

And another question: What if the images are in different sizes. Is there a chance for a fix sizing to fit the screen?

15

Currently, no. But I can add that when I get more free time. So basically, as list of Image URLs, delimited by either a comma or a new line.

image

16

Thanks for quick support - I will try the wrap “thing”. But It looks that I havn’t this option yet so I have to update the widget I think.

Maybe a text file will help or all image files in one folder will automatically used for it?

17

what if camera ask for user name & password?

http://user:password@192.168.xx.xx/tmpfs/auto.jpg

above format doesnt give me a image. but if i remove “user:password@” it ask for username and password and have to input manually.

18

You can use the ipCamera binding to solve that problem, the readme for the binding goes in to detail on how.

19

How to use locally stored image in this widget?

20

Hi
I want to automatically integrate different sizes of pictures.
If I don’t fit the pics to the container it only considers the width.
But not the height.

So it always completly fits with width to 100% of the widget.
So it stretches vertical pics.
Can you fix this issue?
THis would be really great, as I like the app :slight_smile:
KR