Webcams and Externals Page
The skin provides Support for embedding a radar image/iFrame and also the possibility to embed an unlimited number of images/iFrames/videos (free HTML allowed) from external devices, for example webcams or from external services (via iFrame).
The radar can be changed via the radar_html key, see https://github.com/Daveiano/weewx-wdc/wiki/Configuration#extras
For your Webcams (externals) modify the example given in the skin.conf at [Extras][[externals]] and add optionally even more externals.
[[externals]]
description = 'This description will be shown at the Webcams/Externlas page.' #1
[[[current_backyard_image]]] #2
source = '<img src="https://my-server.com/current/image.jpg" />' #3
title = Current image #4
title_long = "Webcam facing North" #5
description = 'The image is updated every 80 seconds.' #6
show_on_front = True #7
show_on_page = True #8
#1 An optional description for the Webcams/Externals page, will only be shown on the page.
#2 The name of the external, only used internal by th skin.
#3 The source of the external, this can be a raw HTML string (<image>, <video>, <iframe> etc.)
#4 The title of the external
#5 The long title of the external, this is shown above the title
#6 An optional description only shown on the Webcams/Externals page
#7 If True, the external is shown on the front page
#8 If True, the external is shown on the Webcams/Externals page
When enabling an external, a Tab switcher is shown on the front page to switch between radar and externals:
You can also enable a seperate "Webcams/Externals" Page. To do so, un-comment the entry under [CheetahGenerator][[Static]]:
[[[externals]]]
template = externals.html.tmpl
title = Webcams/Externals
This will generate a simple page with a 2-Column layout to show your webcams. For help on cusomizing this page, please have a look at https://github.com/Daveiano/weewx-wdc/wiki/Code-Snippets#basic-layouts
Here is my personal configuration of my webcam page, showing multiple images and two embedded videos:
[[externals]]
description = 'Here are some images taken by my Allsky cam (on a Raspberry Pi 4, 4GB) in my backyard, running the <a href="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/thomasjacquin/allsky" target="_blank">allsky</a> software.'
[[[current_image]]]
source = '<a href="https://allsky-hbt.s3.eu-west-1.amazonaws.com/current/image.jpg" target="_blank"><img src="https://allsky-hbt.s3.eu-west-1.amazonaws.com/current/image.jpg" /></a>'
title = Allsky cam
title_long = "Live image"
description = 'Daytime images updated every 80 seconds, nighttime every 100 seconds.'
show_on_front = True
show_on_page = True
[[[startrails]]]
source = '<a href="https://allsky-hbt.s3.eu-west-1.amazonaws.com/current/startrails.jpg" target="_blank"><img src="https://allsky-hbt.s3.eu-west-1.amazonaws.com/current/startrails.jpg" /></a>'
title = Startrails
title_long = "Stacked nighttime images"
description = 'Generated at the end of each night.'
show_on_front = True
show_on_page = True
[[[keogram]]]
source = '<a href="https://allsky-hbt.s3.eu-west-1.amazonaws.com/current/keogram.jpg" target="_blank"><img src="https://allsky-hbt.s3.eu-west-1.amazonaws.com/current/keogram.jpg" /></a>'
title = Keogram
title_long = "Quick view of the day's activity"
description = 'Generated at the end of each night. The green/black at the bottom are the trees in my backyard.'
show_on_front = True
show_on_page = True
[[[timelapse_mini]]]
source = '<a href="https://allsky-hbt.s3.eu-west-1.amazonaws.com/current/mini-timelapse.mp4" target="_blank"><video controls><source src="https://allsky-hbt.s3.eu-west-1.amazonaws.com/current/mini-timelapse.mp4" type="video/mp4"></video></a>'
title = Mini Timelapse
title_long = "Generated every half hour"
description = 'A mini timelapse covering around the last hour.'
show_on_front = True
show_on_page = False
[[[timelapse]]]
source = '<a href="https://allsky-hbt.s3.eu-west-1.amazonaws.com/current/timelapse.mp4" target="_blank"><video controls><source src="https://allsky-hbt.s3.eu-west-1.amazonaws.com/current/timelapse.mp4" type="video/mp4"></video></a>'
title = Timelapse
title_long = "Yesterday's timelapse"
description = 'Generated at the end of each night with all images of the previous 24h.'
show_on_front = False
show_on_page = True