Images carousel in station info panel

install.py

@@ -24,6 +24,7 @@ def __init__(self):
              'skins/Bootstrap/graphMenu.html.inc',
              'skins/Bootstrap/head.html.inc',
              'skins/Bootstrap/history.html.tmpl',
+             'skins/Bootstrap/imaages.html.inc',
              'skins/Bootstrap/index.html.tmpl',
              'skins/Bootstrap/livegauges.html.inc',
              'skins/Bootstrap/location.html.inc',
@@ -58,7 +59,8 @@ def __init__(self):
            ('skins/Bootstrap/css',
             ['skins/Bootstrap/css/bootstrap.min.css',
              'skins/Bootstrap/css/bootstrap-icons.min.css',
-             'skins/Bootstrap/css/live.css']),
+             'skins/Bootstrap/css/live.css',
+             'skins/Boostrap/css/images.css']),
            ('skins/Bootstrap/css/fonts',
             ['skins/Bootstrap/css/fonts/bootstrap-icons.woff',
              'skins/Bootstrap/css/fonts/bootstrap-icons.woff2']),

skins/Bootstrap/css/images.css

@@ -0,0 +1,3 @@
+.carousel-caption {
+    background-color: rgba(0,0,0,0.2);
+}

skins/Bootstrap/images.html.inc

@@ -0,0 +1,123 @@
+#set $image_items = $StationInfo.Images.get('image_items', [])
+#if $image_items
+<div class="row $global_station_info_classes">
+    <div id="imageCarousel" class="carousel slide p-3 " data-bs-ride="carousel">
+    #if $StationInfo.Images.get('carouselIndicators','true').lower == 'true' 
+    <div class="carousel-indicators">
+        #set $imageCount = 0
+        #for $image_item_key in $image_items
+        #set $itemActive = $imageCount == 0 and 'active' or ''
+        #set $image_item = $StationInfo.Images[$image_item_key]
+        <button type="button" data-bs-target="#imageCarousel" data-bs-slide-to="$imageCount" 
+          class="$itemActive" aria-current="true" aria-label="$image_item.imageCaptionHeading">
+        </button>
+        #set $imageCount += 1    
+        #end for
+    </div>
+    #end if
+    <div class="carousel-inner">
+        #set $imageCount = 0
+        #for $image_item_key in $image_items
+        #set $itemActive = $imageCount == 0 and 'active' or ''
+        #set $image_item = $StationInfo.Images[$image_item_key]
+        <div class="carousel-item $itemActive">
+            #set $imagePadding = $image_item.get('imagePadding', '0')
+            #set $imageReload = $image_item.get('imageReload', '0')
+            #set $linkTarget = $image_item.get('linkTarget', '_self')
+            #if $image_item.get('useLightbox', 'true').lower == 'true'
+            <img src="$image_item.imageUrl" class="d-block w-100" data-bs-toggle="modal" 
+              data-bs-target="#imageCarousel-$imageCount-Modal" alt="$image_item.imageCaptionHeading" 
+              style="cursor: pointer; padding-top: $imagePadding; padding-bottom: $imagePadding;" 
+              onload='imageRefresh(this, $imageReload * 1000 * 60);'>
+            #else
+            <a href="$image_item.imageLink" target="$linkTarget"><img src="$image_item.imageUrl" class="d-block w-100" 
+              alt="$image_item.imageCaptionHeading" 
+              style="padding-top: $imagePadding; padding-bottom: $imagePadding;" 
+              onload='imageRefresh(this, $imageReload * 1000 * 60);'></a>
+            #end if
+            #if $StationInfo.Images.get('carouselCaptions', 'true').lower == 'true'
+            <div class="carousel-caption d-none d-md-block rounded-3" style="cursor: pointer;">
+                <h5>$image_item.imageCaptionHeading</h5>
+                <p>$image_item.imageCaptionText</p>
+            </div>
+            #end if
+        </div>
+        #set $imageCount += 1
+        #end for
+    </div>
+    #if $StationInfo.Images.get('carouselNextPrevButtons', 'true').lower == 'true'
+    <button class="carousel-control-prev" type="button" data-bs-target="#imageCarousel" data-bs-slide="prev">
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Previous</span>
+    </button>
+    <button class="carousel-control-next" type="button" data-bs-target="#imageCarousel" data-bs-slide="next">
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Next</span>
+    </button>
+    </div>
+    #end if
+</div>
+#set $imageCount = 0
+#for $image_item_key in $image_items
+#set $image_item = $StationInfo.Images[$image_item_key]
+#if $image_item.useLightbox == 'true'
+<div class="modal fade" id="imageCarousel-$imageCount-Modal" tabindex="-1" aria-modal="true">
+    <div class="modal-dialog modal-fullscreen-$image_item.get('lightboxFullScreen', 'lg-down') 
+      modal-$image_item.get('lightboxSize', 'lg')">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">$image_item.imageCaptionHeading</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"
+                        aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                #if $image_item.lightboxStyle == 'video'
+                <div class="d-flex justify-content-center">
+                    <div class="ratio ratio-$image_item.get('lightboxVideoApect', '4x3')">
+                        <video id="imageCarousel-$imageCount-ModalVideo" controls >
+                        </video>
+                    </div>
+                </div>
+                #else 
+                <img src="$image_item.imageUrl" alt="$image_item.imageCaptionHeading" class="mw-100">
+                #end if
+            </div>
+            <div class="modal-footer"></div>
+        </div>
+    </div>
+</div>
+<script>
+document.getElementById('imageCarousel-$imageCount-Modal').addEventListener('shown.bs.modal', function () {
+    var video= document.getElementById('imageCarousel-${imageCount}-ModalVideo');
+    video.load();
+    fetchVideoAndPlay(video, '$image_item.imageLink');
+})
+</script>
+#end if
+#set $imageCount += 1
+#end for
+#end if
+<script language='javascript'>
+ function imageRefresh(img, timeout) {
+    if (timeout > 0) {
+        setTimeout(function() {
+            img.src = img.src+'';
+        }, timeout);
+    }
+  }
+
+  function fetchVideoAndPlay(video, url) {
+    fetch(url)
+    .then(response => response.blob())
+    .then(blob => {
+        video.src = URL.createObjectURL(blob);
+        return video.play();
+    })
+    .then(_ => {
+        // Video playback started ;
+    })
+    .catch(e => {
+        // Video playback failed ;
+    })
+  }
+</script>

skins/Bootstrap/skin.conf

@@ -143,6 +143,67 @@ version = 4.3
     # 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. 
+    # These can link to a lightbox for localally served images and videos. 
+    # 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
+
+    [[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 images.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 = globalweather, sunspots, moonphaseimage
+
+        [[[globalweather]]]
+            imageUrl = "https://www.ssec.wisc.edu/data/comp/latest_cmoll.gif"
+            imageLink = "https://www.ssec.wisc.edu/data/composites/satsfctemp/animation/"
+            imageCaptionHeading = "Global Weather"
+            imageCaptionText = "Click for more"
+            imagePadding = "16.5%"
+            useLightbox = false
+            linkTarget = _blank
+
+        [[[sunspots]]]
+            imageUrl = "https://theskylive.com/objects/sun/sunspots/sunspots.jpg"
+            imageLink = "https://theskylive.com/sun-info#sunspots"
+            imageCaptionHeading = "Sun Spots"
+            imageCaptionText = "Click for more"
+            imagePadding = "4%"
+            useLightbox = false
+            linkTarget = _blank
+
+        [[[moonphaseimage]]]
+            imageUrl = "https://theskylive.com/images/moonlive/downmoon_500.png"
+            imageLink = "https://theskylive.com/moon-info#moonphase"
+            imageCaptionHeading = "Moon Phase"
+            imagePadding = "4%"
+            imageCaptionText = "Click for more"
+            useLightbox = false
+            linkTarget = _blank
+
+        # An example where images and link are local so a lightbox can be used
+        # If you wish to use a lightbox with remote images you will need to 
+        # use a local CORS proxy to fetch the image/video and serve it locally
+        #[[[radar]]]
+        #imageUrl = BOM/radar.gif # the Url of teh image to display
+        #imageLink = 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 
+        #imagePadding = "16.5%" # When using images of different aspect rations, you can fine tune the top/bottom padding so all Carousel slides are same height.
+        #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
+
 
 [Navigation]
     #this section lets you define Elements for the navbar