example index template

openframeworks · Dec 6, 2023 · d8e59bb · d8e59bb
1 parent 0a25a22
commit d8e59bb
Show file tree

Hide file tree

Showing 2 changed files with 168 additions and 1 deletion.
diff --git a/scripts/ci/emscripten/examples_to_build.sh b/scripts/ci/emscripten/examples_to_build.sh
@@ -9,6 +9,7 @@ folders=(
     "examples/3d/ofxAssimpBoneControlExample"
 #   "examples/3d/ofxAssimpAdvancedExample" #broken currently
     "examples/3d/ofNodeExample"
+    "examples/3d/multiTexture3dExample"
     "examples/3d/modelNoiseExample"
 #gl
     "examples/gl/shadowsExample"
@@ -17,18 +18,31 @@ folders=(
     "examples/gl/vboMeshDrawInstancedExample"
 #math
     "examples/math/noise1dOctaveExample"
+    "examples/math/particlesExample"
+    "examples/math/periodicSignalsExample"
+    "examples/math/trigonometryExample"
+    "examples/math/trigonometricMotionExample"
+
     # Add more paths as needed
 )
 
 cur_root=$(pwd);
+script_path="$(cd "$(dirname "$0")" && pwd)"
+
 cd $cur_root;
 mkdir -p out
 out_folder="$cur_root/out"
 
+outPaths=""
+outThumbs=""
+
 # Iterate through the folder paths
 for folder in "${folders[@]}"; do
     # Check if the folder exists
     if [ -d "$folder" ]; then
+
+		parent_folder=$(dirname "$folder")
+		parent_folder_name=$(basename "$parent_folder")
 
         # Change to the directory
         cd $folder
@@ -41,7 +55,27 @@ for folder in "${folders[@]}"; do
 			echo "Couldn't build emscripten example: $folder"
 		else
 			folder_name=$(basename "$folder")
-			cp -r "bin/em/$folder_name" "$out_folder/"
+			mkdir -p "$out_folder/$parent_folder_name"
+			cp -r "bin/em/$folder_name" "$out_folder/$parent_folder_name/"
+
+			thumb_png="$folder_name.png"
+			thumb_gif="$folder_name.gif"
+			thumb_jpg="$folder_name.jpg"
+
+			if [ -e "$thumb_png" ]; then
+				cp -r $thumb_png "$out_folder/$parent_folder_name/$folder_name/"
+				outThumbs+="$thumb_png,"
+			elif [ -e "$thumb_gif" ]; then
+				cp -r $thumb_gif "$out_folder/$parent_folder_name/$folder_name/"
+				outThumbs+="$thumb_gif,"
+			elif [ -e "$thumb_jpg" ]; then
+				cp -r $thumb_jpg "$out_folder/$parent_folder_name/$folder_name/"
+				outThumbs+="$thumb_jpg,"
+			else
+				outThumbs+="of.png,"
+			fi
+
+			outPaths+="$parent_folder_name/$folder_name,"
 		fi
 
 		cd $cur_root
@@ -51,6 +85,21 @@ for folder in "${folders[@]}"; do
 done
 
 cd $cur_root;
+
+# Remove the trailing comma
+outPaths=${outPaths%,}
+outThumbs=${outThumbs%,}
+
+htmlFile="$out_folder/index.html"
+
+echo "outPaths is $outPaths"
+echo "html is $htmlFile"
+
+# Replace the placeholder in the template file
+cp -r $script_path/index.html $htmlFile
+sed -i "s|REPLACE_ME|$outPaths|g" $htmlFile
+sed -i "s|REPLACE_FILES|$outThumbs|g" $htmlFile
+
 DO_UPLOAD="false"
 
 if [[ "$GH_ACTIONS" = true && "${GH_BRANCH}" == "master" && -z "${GH_HEAD_REF}" ]]; then

diff --git a/scripts/ci/emscripten/index.html b/scripts/ci/emscripten/index.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #000;
+        }
+
+		a {
+            color:#333;
+        }
+
+		section {
+            padding: 20px;
+            background-color: #f0f0f0;
+            margin-bottom: 20px;
+        }
+
+        .gallery {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+            gap: 20px;
+        }
+
+        .exampleName{
+			padding-top:20px;
+		}
+
+        .gallery div {
+            background-color: #ccc;
+            width: 400px;
+            height: 200px;
+            padding: 15px;
+            padding-bottom:30px;
+            text-align: left;
+            border-radius: 8px;
+        }
+
+		.gallery div div {
+			padding: 0px;
+            padding-top: 2px;
+			height:18px;
+        }
+
+        .gallery img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover; /* Maintain aspect ratio and cover the entire container */
+            border-radius: 8px; /* Apply border-radius to the image */
+        }
+    </style>
+    <title>OF Examples Gallery</title>
+</head>
+<body>
+
+<script>
+        // Sample variable containing folder paths
+        var myExamples = "REPLACE_ME";
+        var myIndexFiles = "REPLACE_FILES";
+
+        // Split the string into an array of paths
+        var examplePaths = myExamples.split(',');
+        var thumbFiles = myIndexFiles.split(',');
+
+		var d = 0;
+        // Create sections and populate galleries
+        examplePaths.forEach(function (path) {
+            var parts = path.split('/');
+            var sectionHeader = parts[0];
+            var imagePath = parts[1];
+            var folderName = parts[1];
+
+            // Create section if it doesn't exist
+            var sectionId = sectionHeader.replace(/\s+/g, '');
+            var section = document.getElementById(sectionId);
+            if (!section) {
+                section = document.createElement('section');
+                section.id = sectionId;
+                document.body.appendChild(section);
+
+                var header = document.createElement('h2');
+                header.textContent = sectionHeader;
+                section.appendChild(header);
+
+                var gallery = document.createElement('div');
+                gallery.className = 'gallery';
+                gallery.id = sectionId + 'Gallery';
+                section.appendChild(gallery);
+            }
+
+            // Add image to the gallery
+            var gallery = document.getElementById(sectionId + 'Gallery');
+            var imageDiv = document.createElement('div');
+            var image = document.createElement('img');
+            var title = document.createElement('div');
+            var link = document.createElement('a');
+            link.href = path;
+            link.target = "_blank";
+
+            title.textContent = folderName;
+            image.src = path + '/' + thumbFiles[d]; // Assuming the image file has the same name as the folder
+            link.appendChild(image);
+            link.appendChild(title);
+            imageDiv.appendChild(link);
+            gallery.appendChild(imageDiv);
+
+            d++;
+        });
+    </script>
+
+
+</body>
+</html>