Images section for StationInfo Panel

[dcapslock]

Intro

I have been playing with the Bootstrap skin and really like its responsiveness, how clean it is, and MQTT realtime setup. I am now migrating from my own Responsive Skin to Bootstrap. My current website using Responsive Skin can be seen at Carlingford Weather. My Bootstrap versions so far at Carlingford Weather Bootstrap.

Need

I have a bunch of static images that link to either other pages or videos (radar, satellite, webcam 1, webcam 2). I was thinking to include in a side popout, but could not find an easy Boostrap element for such. So I thought the best option to be including a Carousel in the Station Info section.

Solution - Images section for StationInfo Panel

So is born the Images section/include for StationInfo Panel

• images.html.inc
• Sample skin.conf

[StationInfo]
    # This list determines which station info items will appear in the station info section, as well as in which order.
    # You can define a custom part, to do so, create a template called "customStationInfo.html.inc" and include it in the list
    station_info_items = location, sunRiseSet, moonphase, rain, uptime #, customStationInfo
    # You can add an images panel for static images like Radar, Satellite etc. See example Images section below
    # replace station_info_items above to add images. See example below.
    # station_info_items = images, location, sunRiseSet, moonphase, rain, uptime #, customStationInfo

    # Uncomment to use example Images section and replace with your own
    #[[Images]]
    #    carouselStyle = light               # Set to 'dark' to set carousel-dark class to the Bootstrap carousel 
    #                                        # You may need to asjudst carousel caption colour in carousel.css
    #    carouselNextPrevButtons = true      # Set to false to remove prev/next buttons
    #    carouselCaptions = true             # Set to false to remove the carousel caption section
    #    carouselIndicators = true           # Set to false to remove the carousel indicators
    # 
    #    image_items = sample-video, sample-image-link
    #
    #    [[[sample-video]]]
    #        imageUrl = https://carlingfordweather.sydney/BOM/radar.gif # the Url of teh image to display
    #        imageLink = https://carlingfordweather.sydney/BOM/radar.mp4 # the Link to go to when clicked (Lightbox available)
    #        imageCaptionHeading = "Radar" # Caption Heading when using captions
    #        imageCaptionText = "Click for animation" # Caption Text when using captions 
    #        imageReload = 5 # Reload image via Javascript every X minutes. No cache busting so server should be sending no-cache etc.
    #        useLightbox = true # Use a Lightbox for the imageLink
    #        lightboxStyle = video # video if the Link is a video which will use <video> tag in Lightbox
    #        lightboxVideoAspect = 4x3 # Video aspect. Defaults to 4x3. See https://getbootstrap.com/docs/5.2/helpers/ratio/ 
    #        lightboxSize = lg # Lightbox (Modal) size. See https://getbootstrap.com/docs/5.2/components/modal/#optional-sizes
    #        lightboxFullScreen = lg-down # When to use fullscreen Lightbox (Modal). See https://getbootstrap.com/docs/5.2/components/modal/#fullscreen-modal
    #
    #    [[[sample-image-link]]]
    #        imageUrl = https://carlingfordweather.sydney/WEBCAM/latest-sml.jpg
    #        imageLink = https://carlingfordweather.sydney/webcam.html
    #        imageCaptionHeading = "Webcam 1"
    #        imageCaptionText = "Click for videos"
    #        imagePadding = "3.8%" # When using images of different aspect rations, you use fine tune the top/bottom padding so all Carousel slides are same height.
    #        imageReload = 1 #minutes
    #        useLightbox = false

Skin.conf as per Carlingford Weather Bootstrap

[StationInfo]
    # This list determines which station info items will appear in the station info section, as well as in which order.
    # You can define a custom part, to do so, create a template called "customStationInfo.html.inc" and include it in the list
    station_info_items = images, location, sunRiseSet, moonphase, rain, lightning, uptime #, customStationInfo
    
    [[Images]]
        # Use below for a simple collection of images using Bootstrap carousel which will 
        # poplulate the images StationInfo section 

        carouselStyle = light               # Set to 'dark' to set carousel-dark class to the Bootstrap carousel 
                                            # You may need to asjudst carousel caption colour in carousel.css
        carouselNextPrevButtons = true      # Set to false to remove prev/next buttons
        carouselCaptions = true             # Set to false to remove the carousel caption section
        carouselIndicators = true           # Set to false to remove the carousel indicators
    
        image_items = radar, satellite, webcam1, webcam2

        [[[radar]]]
            imageUrl = https://carlingfordweather.sydney/BOM/radar.gif
            imageLink = https://carlingfordweather.sydney/BOM/radar.mp4
            imageCaptionHeading = "Radar"
            imageCaptionText = "Click for animation"
            imageReload = 5 #minutes
            useLightbox = true
            lightboxStyle = video
            lightboxVideoAspect = 4x3
            lightboxSize = lg
            lightboxFullScreen = lg-down

        [[[satellite]]]
            imageUrl = https://carlingfordweather.sydney/BOM/satellite.jpg
            imageLink =https://carlingfordweather.sydney/BOM/satellite.mp4
            imageCaptionHeading = "Satellite"
            imageCaptionText = "Click for animation"
            imagePadding = "12.5%"
            imageReload = 5 #minutes
            useLightbox = true
            lightboxStyle = video
            lightboxVideoAspect = 4x3
            lightboxSize = lg
            lightboxFullScreen = lg-down

        [[[webcam1]]]
            imageUrl = https://carlingfordweather.sydney/WEBCAM/latest-sml.jpg
            imageLink = https://carlingfordweather.sydney/webcam.html
            imageCaptionHeading = "Webcam 1"
            imageCaptionText = "Click for videos"
            imagePadding = "3.8%"
            imageReload = 1 #minutes
            useLightbox = false

        [[[webcam2]]]
            imageUrl = https://carlingfordweather.sydney/WEBCAM/latest2-sml.jpg
            imageLink = https://carlingfordweather.sydney/webcam2.html
            imageCaptionHeading = "Webcam 2"
            imageCaptionText = "Click for videos"
            imagePadding = "3.8%"
            imageReload = 1 #minutes
            useLightbox = false

[dcapslock]

Not sure if this can/should be part of the Bootstrap skin or if I just leave my Branch for others to Cherry Pick. Happy to hear thoughts.

[mKainzbauer]

I've just stumbled around this entry. I think it's worth considering integrating this into the skin, but as an optional feature that isn't activated by default, just due to the fact I have absolutely no idea of any image that would fit "every" station. The default config could include dummy images, for demonstration purposes.

[dcapslock]

A few thoughts for defaults (all image URLs are static):

1. Global Satellite & Surface Temperature Montage

https://www.ssec.wisc.edu/data/comp/latest_cmoll.gif [-> URL link] https://www.ssec.wisc.edu/data/comp/cmoll/cmoll.mp4

Credit: University of Wisconsin-Madison

2. Sun Spots The Sky Live

https://theskylive.com/objects/sun/sunspots/sunspots.jpg [-> URL link] https://theskylive.com/sun-info#sunspots

Credit: https://theskylive.com/about#acknowledgements

3. Moon Phase The Sky Live

https://theskylive.com/images/moonlive/downmoon_500.png [-> URL Link] https://theskylive.com/moon-info#moonphase

Credit: https://theskylive.com/about#acknowledgements

While putting together these ideas, I noted that to use a remote video needs a CORS proxy otherwise CORS blocking gets in the way. Hence these examples are all URL Links. I will be updating the branch to include specifying a target for the link (e.g. linkTarget = _blank.

[dcapslock]

I have updated https://carlingfordweather.sydney/ to have the 3 suggested images as the first 3 in my image carousel.

[dcapslock]

PR #181 has now been created.