add progressbar

index.html

@@ -31,7 +31,7 @@
       var video = document.getElementById("qualitative-video");
       video.src = "media/videos/quali_" +
         task +
-        ".mp4";
+        "_tqdm.mp4";
       video.play();
     }
 
@@ -165,7 +165,7 @@ <h1 class="title is-1 publication-title">CuriousBot: Interactive Mobile Explorat
       <div class="container">
         <div class="columns is-vcentered  is-centered">
           <video id="teaser" autoplay muted loop height="60%" width="60%">
-            <source src="media/videos/teaser_2.mp4"
+            <source src="media/videos/teaser_2_tqdm.mp4"
                     type="video/mp4">
           </video>
           </br>
@@ -184,7 +184,7 @@ <h2 class="subtitle has-text-centered">
       <div id="method_video" class="columns is-centered has-text-centered">
         <div class="column is-two-thirds no-bottom-padding">
           <center>
-            <video playsinline autoplay loop muted controls src="media/videos/teaser_2.mp4" width="100%"
+            <video playsinline autoplay loop muted controls src="media/videos/teaser_2_tqdm.mp4" width="100%"
               preload="metadata" style="border-radius:10px;"></video>
           </center>
         </div>
@@ -258,7 +258,7 @@ <h2 class="title is-3">Interactive Mobile Exploration</h2>
           <div class="column has-text-centered">
             <p style="text-align:center;">
               <video id="qualitative-video" width="100%" height="100%" controls autoplay loop muted>
-                <source src="media/videos/quali_house.mp4" type="video/mp4">
+                <source src="media/videos/quali_house_tqdm.mp4" type="video/mp4">
               </video>
             </p>
           </div>
@@ -273,7 +273,7 @@ <h2 class="title is-5">Push Chair Away to Reveal Space Behind It</h2>
           <div class="column has-text-centered">
             <p style="text-align:center;">
               <video id="qualitative-video" width="100%" height="100%" controls autoplay loop muted>
-                <source src="media/videos/quali_chair.mp4" type="video/mp4">
+                <source src="media/videos/quali_chair_tqdm.mp4" type="video/mp4">
               </video>
             </p>
           </div>
@@ -288,7 +288,7 @@ <h2 class="title is-5">Flip Open Boxes to See What is Inside</h2>
           <div class="column has-text-centered">
             <p style="text-align:center;">
               <video id="qualitative-video" width="100%" height="100%" controls autoplay loop muted>
-                <source src="media/videos/quali_flip_box.mp4" type="video/mp4">
+                <source src="media/videos/quali_flip_box_tqdm.mp4" type="video/mp4">
               </video>
             </p>
           </div>
@@ -303,7 +303,7 @@ <h2 class="title is-5">Sit Down to Check the Space Under the Table</h2>
           <div class="column has-text-centered">
             <p style="text-align:center;">
               <video id="qualitative-video" width="100%" height="100%" controls autoplay loop muted>
-                <source src="media/videos/quali_check_bottom.mp4" type="video/mp4">
+                <source src="media/videos/quali_check_bottom_tqdm.mp4" type="video/mp4">
               </video>
             </p>
           </div>
@@ -318,7 +318,7 @@ <h2 class="title is-5">Lift the Cloth to Find Out the Bottle Under It</h2>
           <div class="column has-text-centered">
             <p style="text-align:center;">
               <video id="qualitative-video" width="100%" height="100%" controls autoplay loop muted>
-                <source src="media/videos/quali_cloth.mp4" type="video/mp4">
+                <source src="media/videos/quali_cloth_tqdm.mp4" type="video/mp4">
               </video>
             </p>
           </div>
@@ -333,7 +333,7 @@ <h2 class="title is-5">Open Cabinet and Check the Space Inside It</h2>
           <div class="column has-text-centered">
             <p style="text-align:center;">
               <video id="qualitative-video" width="100%" height="100%" controls autoplay loop muted>
-                <source src="media/videos/quali_cabinet.mp4" type="video/mp4">
+                <source src="media/videos/quali_cabinet_tqdm.mp4" type="video/mp4">
               </video>
             </p>
           </div>
@@ -348,37 +348,37 @@ <h2 class="title is-5">Open Cabinet and Check the Space Inside It</h2>
         <div id="results-carousel" class="carousel results-carousel">
           <div class="item">
             <video poster="" autoplay muted loop height="100%">
-              <source src="media/videos/cabinet_x16_web_small_comp.mp4" type="video/mp4">
+              <source src="media/videos/cabinet_x16_web_small_comp_tqdm.mp4" type="video/mp4">
             </video>
           </div>
           <div class="item">
             <video poster="" autoplay muted loop height="100%">
-              <source src="media/videos/chair_x16_web_small_comp.mp4" type="video/mp4">
+              <source src="media/videos/chair_x16_web_small_comp_tqdm.mp4" type="video/mp4">
             </video>
           </div>
           <div class="item">
             <video poster="" autoplay muted loop height="100%">
-              <source src="media/videos/check_bottom_x16_web_small.mp4" type="video/mp4">
+              <source src="media/videos/check_bottom_x16_web_small_tqdm.mp4" type="video/mp4">
             </video>
           </div>
           <div class="item">
             <video poster="" autoplay muted loop height="100%">
-              <source src="media/videos/cloth_x16_web_small_comp.mp4" type="video/mp4">
+              <source src="media/videos/cloth_x16_web_small_comp_tqdm.mp4" type="video/mp4">
             </video>
           </div>
           <div class="item">
             <video poster="" autoplay muted loop height="100%">
-              <source src="media/videos/flip_box_x16_web_small_comp.mp4" type="video/mp4">
+              <source src="media/videos/flip_box_x16_web_small_comp_tqdm.mp4" type="video/mp4">
             </video>
           </div>
           <div class="item">
             <video poster="" autoplay muted loop height="100%">
-              <source src="media/videos/house_x16_web_small_comp.mp4" type="video/mp4">
+              <source src="media/videos/house_x16_web_small_comp_tqdm.mp4" type="video/mp4">
             </video>
           </div>
           <div class="item">
             <video poster="" autoplay muted loop height="100%">
-              <source src="media/videos/teaser_x16_web_small_comp.mp4" type="video/mp4">
+              <source src="media/videos/teaser_x16_web_small_comp_tqdm.mp4" type="video/mp4">
             </video>
           </div>
         </div>

media/videos/add_progressbar.sh

@@ -0,0 +1,48 @@
+#!/usr/bin/env bash
+
+# Usage:
+#   ./add_progress_all.sh [bar_height]
+#
+#   bar_height (optional) => defaults to 10 pixels if not supplied.
+#
+# Description:
+#   Iterates over all *.mp4 videos in the current directory, 
+#   adds a progress bar of 'bar_height' pixels, 
+#   and saves them as <originalname>_tqdm.mp4.
+
+bar_height="${1:-10}"  # default to 10 if no argument given
+
+# Loop over all MP4 files in the folder
+for input in *.mp4; do
+  # If there are no .mp4 files, the loop won't run. This check skips "no match" errors.
+  [ -e "$input" ] || continue
+
+  echo "Processing: $input"
+
+  # Strip .mp4 from the filename for the output name
+  base="${input%.mp4}"
+  output="${base}_tqdm.mp4"
+
+  # Extract duration, width, height for each file
+  duration=$(ffprobe -v error -show_entries format=duration -of csv=p=0 "$input")
+  width=$(ffprobe -v error -select_streams v:0 -show_entries stream=width  -of csv=p=0 "$input")
+  height=$(ffprobe -v error -select_streams v:0 -show_entries stream=height -of csv=p=0 "$input")
+
+  # Run ffmpeg to add progress bar
+  ffmpeg -i "$input" \
+    -filter_complex "
+      [0:v]pad=width=${width}:height=${height}+${bar_height}:x=0:y=0:color=black[padded];
+      color=c=0x4c72b0:s=${width}x${bar_height}[bar];
+      [padded][bar]overlay=
+        x='-W + (W/${duration})*t':
+        y=${height}:
+        shortest=1
+    " \
+    -c:a copy \
+    "$output"
+
+  echo "Completed: $output"
+  echo
+done
+
+echo "All conversions completed!"