added Caption based on fileName

Author: NaGeLBaileyVT

BrowserImageSlideshow.html

@@ -24,6 +24,19 @@
         margin: auto;
         overflow: hidden;
     }
+    #caption {
+        height: 30%;
+        width: 100%;
+        position: fixed;
+        bottom: 0;
+        color: white;
+        font-size: 7em;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        text-shadow: -2px 2px black, -2px -2px black, 2px -2px black, 2px 2px black, 5px 5px 2px black;
+    }
 </style>
 
 <script src="jquery-3.4.1.min.js"></script>
@@ -64,6 +77,11 @@
 let imageContainer = document.getElementById("imageContainer");
 imageContainer.appendChild(botImage);
 imageContainer.appendChild(topImage);
+if(captionEnabled) {
+    const caption = document.createElement("div");
+    caption.id = "caption";
+    imageContainer.appendChild(caption);
+}
 topImage.id = "topImage";
 botImage.id = "botImage";
 
@@ -137,6 +155,9 @@
             }
         }
     );
+    if(captionEnabled) {
+        setImageCaption(imageSrc);
+    }
 
     fadeInTop = !fadeInTop;
 }
@@ -161,6 +182,12 @@
     start();
 }
 
+function setImageCaption(imageSrc) {
+    let filename = imageSrc.replace(/^.*[\\/]/, '');
+    filename = filename.substr(0, filename.lastIndexOf('.')) || filename;
+    caption.innerText = filename;
+}
+
 // called once when the browser source loads or restarts
 function start() {
     topImage.style.opacity = "0.0";
@@ -175,6 +202,9 @@
         }
 
         botImage.src = images[indexes[index]];
+        if(captionEnabled) {
+            setImageCaption(images[indexes[index]]);
+        }
         $("#botImage").animate(
             { opacity: 1.0 },
             { duration: fadeDuration }

SlideshowSettings.lua

@@ -16,6 +16,7 @@ loopSlideshow = true
 startWithAutoplay = true
 browserSourceName = "Browser"
 local mode_options = {"Random Order", "Alphabetical Order", "Alphabetical order, start on random"}
+captionEnabled = false 
 
 HK_PAUSE = obs.OBS_INVALID_HOTKEY_ID
 HK_RESUME = obs.OBS_INVALID_HOTKEY_ID
@@ -57,6 +58,7 @@ function script_properties()
     obs.obs_properties_add_int(props, "slideDuration", "Slide duration (ms):", minSlideDuration, maxSlideDuration, 500)
     obs.obs_properties_add_bool(props, "startWithAutoplay", "Autoplay")
     obs.obs_properties_add_bool(props, "loopSlideshow", "Loop slideshow")
+    obs.obs_properties_add_bool(props, "captionEnabled", "Add Captaions based on filename")
     obs.obs_properties_add_text(props, "browserSourceName", "Browser source name:\n(for use with hotkeys)", obs.OBS_TEXT_DEFAULT)
     obs.obs_properties_add_button(props, "refreshButton", "Refresh", refresh_source)
     return props
@@ -130,6 +132,7 @@ function script_load(settings)
     obs.obs_data_set_default_int(settings, "slideDuration", defaultSlideDuration)
     obs.obs_data_set_default_bool(settings, "startWithAutoplay", true)
     obs.obs_data_set_default_bool(settings, "loopSlideshow", true)
+    obs.obs_data_set_default_bool(settings, "captionEnabled", false)
     obs.obs_data_set_default_string(settings, "browserSourceName", "Browser")
     update_image_list()
 
@@ -181,6 +184,7 @@ function script_update(settings)
     mode = obs.obs_data_get_int(settings, "mode")
     slideDuration = obs.obs_data_get_int(settings, "slideDuration")
     loopSlideshow = obs.obs_data_get_bool(settings, "loopSlideshow")
+    captionEnabled = obs.obs_data_get_bool(settings, "captionEnabled")
     startWithAutoplay = obs.obs_data_get_bool(settings, "startWithAutoplay")
     browserSourceName = obs.obs_data_get_string(settings, "browserSourceName")
 
@@ -198,6 +202,12 @@ function script_update(settings)
     else
         output:write('let startWithAutoplay = false;\n')
     end
+
+    if captionEnabled == true then
+        output:write('let captionEnabled = true;\n')
+    else
+        output:write('let captionEnabled = false;\n')
+    end
 
     output:close()
     -- log_slideshow_info()
@@ -281,5 +291,6 @@ function log_slideshow_info()
     "\" | mode: ".. mode_options[mode+1] ..
     " | slide duration: ".. slideDuration ..
     "ms | loop: " .. tostring(loopSlideshow) ..
-    " | autoplay: " .. tostring(startWithAutoplay))
+    " | autoplay: " .. tostring(startWithAutoplay) ..
+    " | captionEnabled: " .. tostring(captionEnabled))
 end

settings.js

@@ -1,4 +1,5 @@
 let mode = 0;
 let slideDuration = 4000;
 let loopSlideshow = true;
+let captionEnabled = false;
 let startWithAutoplay = true;