Skip to content

Commit d8e59bb

Browse files
ofTheoofTheo
committed
example index template
1 parent 0a25a22 commit d8e59bb

File tree

2 files changed

+168
-1
lines changed

2 files changed

+168
-1
lines changed

‎scripts/ci/emscripten/examples_to_build.sh‎

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ folders=(
99
"examples/3d/ofxAssimpBoneControlExample"
1010
# "examples/3d/ofxAssimpAdvancedExample" #broken currently
1111
"examples/3d/ofNodeExample"
12+
"examples/3d/multiTexture3dExample"
1213
"examples/3d/modelNoiseExample"
1314
#gl
1415
"examples/gl/shadowsExample"
@@ -17,18 +18,31 @@ folders=(
1718
"examples/gl/vboMeshDrawInstancedExample"
1819
#math
1920
"examples/math/noise1dOctaveExample"
21+
"examples/math/particlesExample"
22+
"examples/math/periodicSignalsExample"
23+
"examples/math/trigonometryExample"
24+
"examples/math/trigonometricMotionExample"
25+
2026
# Add more paths as needed
2127
)
2228

2329
cur_root=$(pwd);
30+
script_path="$(cd "$(dirname "$0")" && pwd)"
31+
2432
cd $cur_root;
2533
mkdir -p out
2634
out_folder="$cur_root/out"
2735

36+
outPaths=""
37+
outThumbs=""
38+
2839
# Iterate through the folder paths
2940
for folder in "${folders[@]}"; do
3041
# Check if the folder exists
3142
if [ -d "$folder" ]; then
43+
44+
parent_folder=$(dirname "$folder")
45+
parent_folder_name=$(basename "$parent_folder")
3246

3347
# Change to the directory
3448
cd $folder
@@ -41,7 +55,27 @@ for folder in "${folders[@]}"; do
4155
echo "Couldn't build emscripten example: $folder"
4256
else
4357
folder_name=$(basename "$folder")
44-
cp -r "bin/em/$folder_name" "$out_folder/"
58+
mkdir -p "$out_folder/$parent_folder_name"
59+
cp -r "bin/em/$folder_name" "$out_folder/$parent_folder_name/"
60+
61+
thumb_png="$folder_name.png"
62+
thumb_gif="$folder_name.gif"
63+
thumb_jpg="$folder_name.jpg"
64+
65+
if [ -e "$thumb_png" ]; then
66+
cp -r $thumb_png "$out_folder/$parent_folder_name/$folder_name/"
67+
outThumbs+="$thumb_png,"
68+
elif [ -e "$thumb_gif" ]; then
69+
cp -r $thumb_gif "$out_folder/$parent_folder_name/$folder_name/"
70+
outThumbs+="$thumb_gif,"
71+
elif [ -e "$thumb_jpg" ]; then
72+
cp -r $thumb_jpg "$out_folder/$parent_folder_name/$folder_name/"
73+
outThumbs+="$thumb_jpg,"
74+
else
75+
outThumbs+="of.png,"
76+
fi
77+
78+
outPaths+="$parent_folder_name/$folder_name,"
4579
fi
4680

4781
cd $cur_root
@@ -51,6 +85,21 @@ for folder in "${folders[@]}"; do
5185
done
5286

5387
cd $cur_root;
88+
89+
# Remove the trailing comma
90+
outPaths=${outPaths%,}
91+
outThumbs=${outThumbs%,}
92+
93+
htmlFile="$out_folder/index.html"
94+
95+
echo "outPaths is $outPaths"
96+
echo "html is $htmlFile"
97+
98+
# Replace the placeholder in the template file
99+
cp -r $script_path/index.html $htmlFile
100+
sed -i "s|REPLACE_ME|$outPaths|g" $htmlFile
101+
sed -i "s|REPLACE_FILES|$outThumbs|g" $htmlFile
102+
54103
DO_UPLOAD="false"
55104

56105
if [[ "$GH_ACTIONS" = true && "${GH_BRANCH}" == "master" && -z "${GH_HEAD_REF}" ]]; then

‎scripts/ci/emscripten/index.html‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<style>
7+
body {
8+
font-family: Arial, sans-serif;
9+
margin: 0;
10+
padding: 0;
11+
background-color: #000;
12+
}
13+
14+
a {
15+
color:#333;
16+
}
17+
18+
section {
19+
padding: 20px;
20+
background-color: #f0f0f0;
21+
margin-bottom: 20px;
22+
}
23+
24+
.gallery {
25+
display: grid;
26+
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
27+
gap: 20px;
28+
}
29+
30+
.exampleName{
31+
padding-top:20px;
32+
}
33+
34+
.gallery div {
35+
background-color: #ccc;
36+
width: 400px;
37+
height: 200px;
38+
padding: 15px;
39+
padding-bottom:30px;
40+
text-align: left;
41+
border-radius: 8px;
42+
}
43+
44+
.gallery div div {
45+
padding: 0px;
46+
padding-top: 2px;
47+
height:18px;
48+
}
49+
50+
.gallery img {
51+
width: 100%;
52+
height: 100%;
53+
object-fit: cover; /* Maintain aspect ratio and cover the entire container */
54+
border-radius: 8px; /* Apply border-radius to the image */
55+
}
56+
</style>
57+
<title>OF Examples Gallery</title>
58+
</head>
59+
<body>
60+
61+
<script>
62+
// Sample variable containing folder paths
63+
var myExamples = "REPLACE_ME";
64+
var myIndexFiles = "REPLACE_FILES";
65+
66+
// Split the string into an array of paths
67+
var examplePaths = myExamples.split(',');
68+
var thumbFiles = myIndexFiles.split(',');
69+
70+
var d = 0;
71+
// Create sections and populate galleries
72+
examplePaths.forEach(function (path) {
73+
var parts = path.split('/');
74+
var sectionHeader = parts[0];
75+
var imagePath = parts[1];
76+
var folderName = parts[1];
77+
78+
// Create section if it doesn't exist
79+
var sectionId = sectionHeader.replace(/\s+/g, '');
80+
var section = document.getElementById(sectionId);
81+
if (!section) {
82+
section = document.createElement('section');
83+
section.id = sectionId;
84+
document.body.appendChild(section);
85+
86+
var header = document.createElement('h2');
87+
header.textContent = sectionHeader;
88+
section.appendChild(header);
89+
90+
var gallery = document.createElement('div');
91+
gallery.className = 'gallery';
92+
gallery.id = sectionId + 'Gallery';
93+
section.appendChild(gallery);
94+
}
95+
96+
// Add image to the gallery
97+
var gallery = document.getElementById(sectionId + 'Gallery');
98+
var imageDiv = document.createElement('div');
99+
var image = document.createElement('img');
100+
var title = document.createElement('div');
101+
var link = document.createElement('a');
102+
link.href = path;
103+
link.target = "_blank";
104+
105+
title.textContent = folderName;
106+
image.src = path + '/' + thumbFiles[d]; // Assuming the image file has the same name as the folder
107+
link.appendChild(image);
108+
link.appendChild(title);
109+
imageDiv.appendChild(link);
110+
gallery.appendChild(imageDiv);
111+
112+
d++;
113+
});
114+
</script>
115+
116+
117+
</body>
118+
</html>

0 commit comments

Comments
 (0)