Weather with Webcam

User Stories and Project Showcase
1

My example might be not very important, but I like ‘hidden features’ in Xibo as the one I did use here.

I made a weather page to show nearly all data from Open Weather. Then I realised, that I could use my own pictures as background, in the preset they were predefined according to the weather. The company I work for has a few webcams running, so I use the URLs from the webcam as background, and they are changing when the weather is changing.

wetter-webcam
wetter-webcam960×1224 277 KB

5 Likes
2

wow…genius you! is open weather free to use?

3

The genius is Xibo, I only use it :wink:
You can get a free API key from Pricing - OpenWeatherMap

4

Great example, thank you for sharing :+1:

5

Nice, great work!
Thank you for sharing.

6

Hello @natasha, I did the CMS update to 3.1.1 and now I do not find the possibility to use a URL as background picture in the new weather module.
Is it no longer possible or do I just not realise where to find it?

7

Hi, if you click on Templates, use the drop down to select your template and then scroll down further you should see the items that can be replaced:

image
image398×647 8.48 KB

8

Thank you for the answer. Yes, I can use pictures from the library there, but no URL from a webcam.
Or is there a workaround for that case?

9

The intention is to use library media rather than image by URL as the images would not be stored locally on the Player and will break if the device goes offline. However, it is still possible using the options below:

To use the same image regardless of the weather, use the Background Image dropdown and set to None:

image
image398×736 15.3 KB

Then add the following CSS:

#content {
    background-image: url("https://ceu.xibo.co.uk/mediarss/image1.jpg") !important;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
}

Alternatively, you can override one or some of the conditions:

.bg-partly-cloudy-day {
    background-image: url("https://ceu.xibo.co.uk/mediarss/image1.jpg") !important;
}

(in both cases substituting the image URL for the URL to be used)

1 Like