diff --git a/build-scripts/build-web-examples.pl b/build-scripts/build-web-examples.pl index 4b9b5fed6f..51c23c6064 100755 --- a/build-scripts/build-web-examples.pl +++ b/build-scripts/build-web-examples.pl @@ -71,17 +71,41 @@ sub build_latest { } } +sub get_category_description { + my $category = shift; + my $retval = ucfirst($category); + + if (open(my $fh, '<', "$examples_dir/$category/description.txt")) { + $retval = <$fh>; + chomp($retval); + close($fh); + } + + return $retval; +} + sub get_categories { my @categories = (); - opendir(my $dh, $examples_dir) or die("Couldn't opendir '$examples_dir': $!\n"); - foreach my $dir (sort readdir $dh) { - next if ($dir eq '.') || ($dir eq '..'); # obviously skip current and parent entries. - next if not -d "$examples_dir/$dir"; # only care about subdirectories. - - push @categories, $dir; + if (open(my $fh, '<', "$examples_dir/categories.txt")) { + while (<$fh>) { + chomp; + s/\A\s+//; + s/\s+\Z//; + next if $_ eq ''; + next if /\A\#/; + push @categories, $_; + } + close($fh); + } else { + opendir(my $dh, $examples_dir) or die("Couldn't opendir '$examples_dir': $!\n"); + foreach my $dir (sort readdir $dh) { + next if ($dir eq '.') || ($dir eq '..'); # obviously skip current and parent entries. + next if not -d "$examples_dir/$dir"; # only care about subdirectories. + push @categories, $dir; + } + closedir($dh); } - closedir($dh); return @categories; } @@ -131,10 +155,16 @@ sub handle_example_dir { $basefname = "$category-$basefname"; my $jsfname = "$basefname.js"; my $wasmfname = "$basefname.wasm"; + my $thumbnailfname = 'thumbnail.png'; + my $onmouseoverfname = 'onmouseover.webp'; my $jssrc = "$compile_dir/examples/$jsfname"; my $wasmsrc = "$compile_dir/examples/$wasmfname"; + my $thumbnailsrc = "$examples_dir/$category/$example/$thumbnailfname"; + my $onmouseoversrc = "$examples_dir/$category/$example/$onmouseoverfname"; my $jsdst = "$dst/$jsfname"; my $wasmdst = "$dst/$wasmfname"; + my $thumbnaildst = "$dst/$thumbnailfname"; + my $onmouseoverdst = "$dst/$onmouseoverfname"; my $description = ''; if (open(my $readmetxth, '<', "$examples_dir/$category/$example/README.txt")) { @@ -150,6 +180,8 @@ sub handle_example_dir { do_mkdir($dst); do_copy($jssrc, $jsdst); do_copy($wasmsrc, $wasmdst); + do_copy($thumbnailsrc, $thumbnaildst) if ( -f $thumbnailsrc ); + do_copy($onmouseoversrc, $onmouseoverdst) if ( -f $onmouseoversrc ); my $highlight_cmd = "highlight '--outdir=$dst' --style-outfile=highlight.css --fragment --enclose-pre --stdout --syntax=c '--plug-in=$examples_dir/highlight-plugin.lua'"; print("$highlight_cmd\n"); @@ -184,11 +216,14 @@ sub handle_example_dir { } $other_examples_html .= ""; + my $category_description = get_category_description($category); + my $html = ''; open my $htmltemplate, '<', "$examples_dir/template.html" or die("Couldn't open '$examples_dir/template.html': $!\n"); while (<$htmltemplate>) { s/\@project_name\@/$project/g; s/\@category_name\@/$category/g; + s/\@category_description\@/$category_description/g; s/\@example_name\@/$example/g; s/\@javascript_file\@/$jsfname/g; s/\@htmlified_source_code\@/$htmlified_source_code/g; @@ -203,6 +238,51 @@ sub handle_example_dir { close($htmloutput); } +sub generate_example_thumbnail { + my $project = shift; + my $category = shift; + my $example = shift; + + my $example_no_num = "$example"; + $example_no_num =~ s/\A\d+\-//; + + my $example_image_url; + if ( -f "$examples_dir/$category/$example/thumbnail.png" ) { + $example_image_url = "/$project/$category/$example/thumbnail.png"; + } elsif ( -f "$examples_dir/$category/thumbnail.png" ) { + $example_image_url = "/$project/$category/thumbnail.png"; + } else { + $example_image_url = "/$project/thumbnail.png"; + } + + my $example_mouseover_html = ''; + if ( -f "$examples_dir/$category/$example/onmouseover.webp" ) { + $example_mouseover_html = "onmouseover=\"this.src='/$project/$category/$example/onmouseover.webp'\" onmouseout=\"this.src='$example_image_url'\";"; + } elsif ( -f "$examples_dir/$category/onmouseover.webp" ) { + $example_mouseover_html = "onmouseover=\"this.src='/$project/$category/onmouseover.webp'\" onmouseout=\"this.src='$example_image_url'\";"; + } + + return " + +
+ +
$example_no_num
+
+ " + ; +} + +sub generate_example_thumbnails_for_category { + my $project = shift; + my $category = shift; + my @examples = get_examples_for_category($category); + my $retval = ''; + foreach my $example (@examples) { + $retval .= generate_example_thumbnail($project, $category, $example); + } + return $retval; +} + sub handle_category_dir { my $category = shift; @@ -220,26 +300,22 @@ sub handle_category_dir { closedir($dh); - my $examples_list_html = ""; - foreach my $example (get_examples_for_category($category)) { - # !!! FIXME: image - my $example_image_url = "/$project/placeholder.png"; - $examples_list_html .= " - -
- -
$category/$example
-
- "; - } + my $examples_list_html = generate_example_thumbnails_for_category($project, $category); + + my $dst = "$output_dir/$category"; + + do_copy("$examples_dir/$category/thumbnail.png", "$dst/thumbnail.png") if ( -f "$examples_dir/$category/thumbnail.png" ); + do_copy("$examples_dir/$category/onmouseover.webp", "$dst/onmouseover.webp") if ( -f "$examples_dir/$category/onmouseover.webp" ); + + my $category_description = get_category_description($category); # write category page - my $dst = "$output_dir/$category"; my $html = ''; open my $htmltemplate, '<', "$examples_dir/template-category.html" or die("Couldn't open '$examples_dir/template-category.html': $!\n"); while (<$htmltemplate>) { s/\@project_name\@/$project/g; s/\@category_name\@/$category/g; + s/\@category_description\@/$category_description/g; s/\@examples_list_html\@/$examples_list_html/g; $html .= $_; } @@ -276,7 +352,7 @@ do_mkdir($output_dir); build_latest(); do_copy("$examples_dir/template.css", "$output_dir/examples.css"); -do_copy("$examples_dir/template-placeholder.png", "$output_dir/placeholder.png"); +do_copy("$examples_dir/template-placeholder.png", "$output_dir/thumbnail.png"); opendir(my $dh, $examples_dir) or die("Couldn't opendir '$examples_dir': $!\n"); @@ -292,19 +368,10 @@ closedir($dh); # write homepage my $homepage_list_html = ""; foreach my $category (get_categories()) { - $homepage_list_html .= "

$category

"; + my $category_description = get_category_description($category); + $homepage_list_html .= "

$category_description

"; $homepage_list_html .= "
"; - foreach my $example (get_examples_for_category($category)) { - # !!! FIXME: image - my $example_image_url = "/$project/placeholder.png"; - $homepage_list_html .= " - -
- -
$category/$example
-
- "; - } + $homepage_list_html .= generate_example_thumbnails_for_category($project, $category); $homepage_list_html .= "
"; } diff --git a/examples/asyncio/01-load-bitmaps/thumbnail.png b/examples/asyncio/01-load-bitmaps/thumbnail.png new file mode 100644 index 0000000000..4f8be2a82c Binary files /dev/null and b/examples/asyncio/01-load-bitmaps/thumbnail.png differ diff --git a/examples/asyncio/description.txt b/examples/asyncio/description.txt new file mode 100644 index 0000000000..c3aafe13e1 --- /dev/null +++ b/examples/asyncio/description.txt @@ -0,0 +1 @@ +Asynchronous I/O \ No newline at end of file diff --git a/examples/audio/onmouseover.webp b/examples/audio/onmouseover.webp new file mode 100644 index 0000000000..1f3ba4b208 Binary files /dev/null and b/examples/audio/onmouseover.webp differ diff --git a/examples/audio/thumbnail.png b/examples/audio/thumbnail.png new file mode 100644 index 0000000000..10bc6c830f Binary files /dev/null and b/examples/audio/thumbnail.png differ diff --git a/examples/camera/01-read-and-draw/onmouseover.webp b/examples/camera/01-read-and-draw/onmouseover.webp new file mode 100644 index 0000000000..1d414e6671 Binary files /dev/null and b/examples/camera/01-read-and-draw/onmouseover.webp differ diff --git a/examples/camera/01-read-and-draw/thumbnail.png b/examples/camera/01-read-and-draw/thumbnail.png new file mode 100644 index 0000000000..98fe4e0754 Binary files /dev/null and b/examples/camera/01-read-and-draw/thumbnail.png differ diff --git a/examples/categories.txt b/examples/categories.txt new file mode 100644 index 0000000000..8a9b5ecb37 --- /dev/null +++ b/examples/categories.txt @@ -0,0 +1,13 @@ +# Blank lines and lines that start with '#' in this file are ignored. + +# Categories, by directory name, go in here, in the order they should be +# listed on the main page. If this file is missing, it'll assume any +# subdirectory is a category and sort them alphabetically. + +renderer +input +audio +camera +asyncio +pen +demo diff --git a/examples/demo/01-snake/onmouseover.webp b/examples/demo/01-snake/onmouseover.webp new file mode 100644 index 0000000000..1757202c37 Binary files /dev/null and b/examples/demo/01-snake/onmouseover.webp differ diff --git a/examples/demo/01-snake/thumbnail.png b/examples/demo/01-snake/thumbnail.png new file mode 100644 index 0000000000..f0e27c5675 Binary files /dev/null and b/examples/demo/01-snake/thumbnail.png differ diff --git a/examples/demo/02-woodeneye-008/onmouseover.webp b/examples/demo/02-woodeneye-008/onmouseover.webp new file mode 100644 index 0000000000..2e7f44f924 Binary files /dev/null and b/examples/demo/02-woodeneye-008/onmouseover.webp differ diff --git a/examples/demo/02-woodeneye-008/thumbnail.png b/examples/demo/02-woodeneye-008/thumbnail.png new file mode 100644 index 0000000000..c8d1eface6 Binary files /dev/null and b/examples/demo/02-woodeneye-008/thumbnail.png differ diff --git a/examples/demo/03-infinite-monkeys/onmouseover.webp b/examples/demo/03-infinite-monkeys/onmouseover.webp new file mode 100644 index 0000000000..f522974770 Binary files /dev/null and b/examples/demo/03-infinite-monkeys/onmouseover.webp differ diff --git a/examples/demo/03-infinite-monkeys/thumbnail.png b/examples/demo/03-infinite-monkeys/thumbnail.png new file mode 100644 index 0000000000..418390be90 Binary files /dev/null and b/examples/demo/03-infinite-monkeys/thumbnail.png differ diff --git a/examples/demo/04-bytepusher/onmouseover.webp b/examples/demo/04-bytepusher/onmouseover.webp new file mode 100644 index 0000000000..b99e7ddc46 Binary files /dev/null and b/examples/demo/04-bytepusher/onmouseover.webp differ diff --git a/examples/demo/04-bytepusher/thumbnail.png b/examples/demo/04-bytepusher/thumbnail.png new file mode 100644 index 0000000000..891aa8f532 Binary files /dev/null and b/examples/demo/04-bytepusher/thumbnail.png differ diff --git a/examples/demo/description.txt b/examples/demo/description.txt new file mode 100644 index 0000000000..77bcbb7c2b --- /dev/null +++ b/examples/demo/description.txt @@ -0,0 +1 @@ +Full game and app demos \ No newline at end of file diff --git a/examples/input/01-joystick-polling/onmouseover.webp b/examples/input/01-joystick-polling/onmouseover.webp new file mode 100644 index 0000000000..484539c32c Binary files /dev/null and b/examples/input/01-joystick-polling/onmouseover.webp differ diff --git a/examples/input/01-joystick-polling/thumbnail.png b/examples/input/01-joystick-polling/thumbnail.png new file mode 100644 index 0000000000..4faebbad26 Binary files /dev/null and b/examples/input/01-joystick-polling/thumbnail.png differ diff --git a/examples/input/02-joystick-events/onmouseover.webp b/examples/input/02-joystick-events/onmouseover.webp new file mode 100644 index 0000000000..05a9b42671 Binary files /dev/null and b/examples/input/02-joystick-events/onmouseover.webp differ diff --git a/examples/input/02-joystick-events/thumbnail.png b/examples/input/02-joystick-events/thumbnail.png new file mode 100644 index 0000000000..07f3ff153d Binary files /dev/null and b/examples/input/02-joystick-events/thumbnail.png differ diff --git a/examples/pen/01-drawing-lines/onmouseover.webp b/examples/pen/01-drawing-lines/onmouseover.webp new file mode 100644 index 0000000000..f9c4d3dc98 Binary files /dev/null and b/examples/pen/01-drawing-lines/onmouseover.webp differ diff --git a/examples/pen/01-drawing-lines/thumbnail.png b/examples/pen/01-drawing-lines/thumbnail.png new file mode 100644 index 0000000000..3403d3577f Binary files /dev/null and b/examples/pen/01-drawing-lines/thumbnail.png differ diff --git a/examples/renderer/01-clear/onmouseover.webp b/examples/renderer/01-clear/onmouseover.webp new file mode 100644 index 0000000000..a0062fe0d9 Binary files /dev/null and b/examples/renderer/01-clear/onmouseover.webp differ diff --git a/examples/renderer/01-clear/thumbnail.png b/examples/renderer/01-clear/thumbnail.png new file mode 100644 index 0000000000..b255675da9 Binary files /dev/null and b/examples/renderer/01-clear/thumbnail.png differ diff --git a/examples/renderer/02-primitives/thumbnail.png b/examples/renderer/02-primitives/thumbnail.png new file mode 100644 index 0000000000..4ddf2ab86a Binary files /dev/null and b/examples/renderer/02-primitives/thumbnail.png differ diff --git a/examples/renderer/03-lines/onmouseover.webp b/examples/renderer/03-lines/onmouseover.webp new file mode 100644 index 0000000000..5d3b3fce51 Binary files /dev/null and b/examples/renderer/03-lines/onmouseover.webp differ diff --git a/examples/renderer/03-lines/thumbnail.png b/examples/renderer/03-lines/thumbnail.png new file mode 100644 index 0000000000..9d0ff10b9c Binary files /dev/null and b/examples/renderer/03-lines/thumbnail.png differ diff --git a/examples/renderer/04-points/onmouseover.webp b/examples/renderer/04-points/onmouseover.webp new file mode 100644 index 0000000000..04582da55a Binary files /dev/null and b/examples/renderer/04-points/onmouseover.webp differ diff --git a/examples/renderer/04-points/thumbnail.png b/examples/renderer/04-points/thumbnail.png new file mode 100644 index 0000000000..56271136c9 Binary files /dev/null and b/examples/renderer/04-points/thumbnail.png differ diff --git a/examples/renderer/05-rectangles/onmouseover.webp b/examples/renderer/05-rectangles/onmouseover.webp new file mode 100644 index 0000000000..cdfd376ee0 Binary files /dev/null and b/examples/renderer/05-rectangles/onmouseover.webp differ diff --git a/examples/renderer/05-rectangles/thumbnail.png b/examples/renderer/05-rectangles/thumbnail.png new file mode 100644 index 0000000000..64e66882f9 Binary files /dev/null and b/examples/renderer/05-rectangles/thumbnail.png differ diff --git a/examples/renderer/06-textures/onmouseover.webp b/examples/renderer/06-textures/onmouseover.webp new file mode 100644 index 0000000000..467afd85a4 Binary files /dev/null and b/examples/renderer/06-textures/onmouseover.webp differ diff --git a/examples/renderer/06-textures/thumbnail.png b/examples/renderer/06-textures/thumbnail.png new file mode 100644 index 0000000000..b33ba317db Binary files /dev/null and b/examples/renderer/06-textures/thumbnail.png differ diff --git a/examples/renderer/07-streaming-textures/onmouseover.webp b/examples/renderer/07-streaming-textures/onmouseover.webp new file mode 100644 index 0000000000..7c2969368e Binary files /dev/null and b/examples/renderer/07-streaming-textures/onmouseover.webp differ diff --git a/examples/renderer/07-streaming-textures/thumbnail.png b/examples/renderer/07-streaming-textures/thumbnail.png new file mode 100644 index 0000000000..60c2a9f2ac Binary files /dev/null and b/examples/renderer/07-streaming-textures/thumbnail.png differ diff --git a/examples/renderer/08-rotating-textures/onmouseover.webp b/examples/renderer/08-rotating-textures/onmouseover.webp new file mode 100644 index 0000000000..69735cee84 Binary files /dev/null and b/examples/renderer/08-rotating-textures/onmouseover.webp differ diff --git a/examples/renderer/08-rotating-textures/thumbnail.png b/examples/renderer/08-rotating-textures/thumbnail.png new file mode 100644 index 0000000000..12c51e17f5 Binary files /dev/null and b/examples/renderer/08-rotating-textures/thumbnail.png differ diff --git a/examples/renderer/09-scaling-textures/onmouseover.webp b/examples/renderer/09-scaling-textures/onmouseover.webp new file mode 100644 index 0000000000..bcc967c93f Binary files /dev/null and b/examples/renderer/09-scaling-textures/onmouseover.webp differ diff --git a/examples/renderer/09-scaling-textures/thumbnail.png b/examples/renderer/09-scaling-textures/thumbnail.png new file mode 100644 index 0000000000..c0a24c20ef Binary files /dev/null and b/examples/renderer/09-scaling-textures/thumbnail.png differ diff --git a/examples/renderer/10-geometry/onmouseover.webp b/examples/renderer/10-geometry/onmouseover.webp new file mode 100644 index 0000000000..37a518c316 Binary files /dev/null and b/examples/renderer/10-geometry/onmouseover.webp differ diff --git a/examples/renderer/10-geometry/thumbnail.png b/examples/renderer/10-geometry/thumbnail.png new file mode 100644 index 0000000000..89195fba89 Binary files /dev/null and b/examples/renderer/10-geometry/thumbnail.png differ diff --git a/examples/renderer/11-color-mods/onmouseover.webp b/examples/renderer/11-color-mods/onmouseover.webp new file mode 100644 index 0000000000..2157063bc1 Binary files /dev/null and b/examples/renderer/11-color-mods/onmouseover.webp differ diff --git a/examples/renderer/11-color-mods/thumbnail.png b/examples/renderer/11-color-mods/thumbnail.png new file mode 100644 index 0000000000..d471112868 Binary files /dev/null and b/examples/renderer/11-color-mods/thumbnail.png differ diff --git a/examples/renderer/14-viewport/thumbnail.png b/examples/renderer/14-viewport/thumbnail.png new file mode 100644 index 0000000000..bad5521486 Binary files /dev/null and b/examples/renderer/14-viewport/thumbnail.png differ diff --git a/examples/renderer/15-cliprect/onmouseover.webp b/examples/renderer/15-cliprect/onmouseover.webp new file mode 100644 index 0000000000..943eeef7a4 Binary files /dev/null and b/examples/renderer/15-cliprect/onmouseover.webp differ diff --git a/examples/renderer/15-cliprect/thumbnail.png b/examples/renderer/15-cliprect/thumbnail.png new file mode 100644 index 0000000000..127e6fa095 Binary files /dev/null and b/examples/renderer/15-cliprect/thumbnail.png differ diff --git a/examples/renderer/17-read-pixels/onmouseover.webp b/examples/renderer/17-read-pixels/onmouseover.webp new file mode 100644 index 0000000000..bb4e5c4aeb Binary files /dev/null and b/examples/renderer/17-read-pixels/onmouseover.webp differ diff --git a/examples/renderer/17-read-pixels/thumbnail.png b/examples/renderer/17-read-pixels/thumbnail.png new file mode 100644 index 0000000000..8da02ac768 Binary files /dev/null and b/examples/renderer/17-read-pixels/thumbnail.png differ diff --git a/examples/renderer/18-debug-text/thumbnail.png b/examples/renderer/18-debug-text/thumbnail.png new file mode 100644 index 0000000000..f08e469187 Binary files /dev/null and b/examples/renderer/18-debug-text/thumbnail.png differ diff --git a/examples/template-category.html b/examples/template-category.html index 9872e9ad8e..3ff57b8ae9 100644 --- a/examples/template-category.html +++ b/examples/template-category.html @@ -4,7 +4,7 @@ - @project_name@ Examples: @category_name@ + @project_name@ Examples: @category_description@
- SDL Examples + @project_name@ Examples
-

@project_name@ examples: @category_name@

+

@project_name@ examples: @category_description@

@examples_list_html@
diff --git a/examples/template-homepage.html b/examples/template-homepage.html index 3dfbc9ef52..1c3620c3ca 100644 --- a/examples/template-homepage.html +++ b/examples/template-homepage.html @@ -28,8 +28,6 @@

@project_name@ examples

-

Check out the @project_name@ examples here!

- @homepage_list_html@ diff --git a/examples/template-placeholder.png b/examples/template-placeholder.png index 04ce3ef601..202df95901 100644 Binary files a/examples/template-placeholder.png and b/examples/template-placeholder.png differ