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:

Webcams/Externals Page

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

Example

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="/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