Skip to content

Commit 9aee2d6

Browse files
committed
Examples: Create index.html for Emscripten examples
1 parent f823dc3 commit 9aee2d6

File tree

3 files changed

+58
-5
lines changed

3 files changed

+58
-5
lines changed

README.md

+7-3
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ See [glfm.h](include/glfm.h)
176176
Use `cmake` to generate an Xcode project:
177177
178178
```Shell
179-
cmake -D GLFM_BUILD_EXAMPLES=ON -B build/apple -G Xcode
179+
cmake -D GLFM_BUILD_EXAMPLES=ON -B build/apple -G Xcode
180180
open build/apple/GLFM.xcodeproj
181181
```
182182

@@ -187,12 +187,16 @@ In Xcode, switch to the `glfm_touch` target and run on a simulator or a device.
187187
Use `emcmake` to set environmental variables for `cmake`, then build:
188188

189189
```Shell
190-
emcmake cmake -D GLFM_BUILD_EXAMPLES=ON -B build/emscripten
191-
cmake --build build/emscripten
190+
emcmake cmake -D GLFM_BUILD_EXAMPLES=ON -B build/emscripten && cmake --build build/emscripten
192191
```
193192

194193
Then run locally:
195194
```Shell
195+
emrun build/emscripten/examples
196+
```
197+
198+
Or run a specific example:
199+
```Shell
196200
emrun build/emscripten/examples/glfm_touch.html
197201
```
198202

examples/CMakeLists.txt

+21-2
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ list(APPEND CMAKE_MODULE_PATH "${CMAKE_CURRENT_LIST_DIR}/cmake")
77
set(GLFM_APP_ORGANIZATION_IDENTIFIER "com.brackeen")
88
set(GLFM_APP_VERSION "1.0")
99
set(GLFM_APP_VERSION_ITERATION 1)
10-
set(GLFM_APP_LIST "")
10+
set(GLFM_APP_TARGET_NAME_LIST "")
1111

1212
macro(add_target TARGET SRC_FILES)
13-
list(APPEND GLFM_APP_LIST ${TARGET})
13+
list(APPEND GLFM_APP_TARGET_NAME_LIST ${TARGET})
1414
set(GLFM_APP_TARGET_NAME ${TARGET})
1515
set(GLFM_APP_SRC ${SRC_FILES})
1616
include(GLFMAppTarget)
@@ -34,3 +34,22 @@ if (CMAKE_SYSTEM_NAME STREQUAL "Darwin")
3434
else()
3535
add_target(glfm_test_pattern "test_pattern.c;test_pattern_renderer.h;test_pattern_renderer_gles2.c")
3636
endif()
37+
38+
# Write index.html for Emscripten examples
39+
if (CMAKE_SYSTEM_NAME STREQUAL "Emscripten")
40+
file(COPY icons DESTINATION ${CMAKE_CURRENT_BINARY_DIR})
41+
file(READ index.html.in INDEX_HTML)
42+
43+
foreach(GLFM_APP_TARGET_NAME ${GLFM_APP_TARGET_NAME_LIST})
44+
set(GLFM_APP_HTML "
45+
<figure>
46+
<a href=\"${GLFM_APP_TARGET_NAME}.html\">
47+
<img src=\"icons/${GLFM_APP_TARGET_NAME}.png\">
48+
<figcaption>${GLFM_APP_TARGET_NAME}</figcaption>
49+
</a>
50+
</figure>")
51+
52+
string(REPLACE "<!-- #figure -->" "${GLFM_APP_HTML}\n<!-- #figure -->" INDEX_HTML "${INDEX_HTML}")
53+
endforeach()
54+
file(WRITE ${CMAKE_CURRENT_BINARY_DIR}/index.html "${INDEX_HTML}")
55+
endif()

examples/index.html.in

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<!-- Template for Emscripten examples -->
3+
<html>
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>GLFM Examples</title>
8+
<style type="text/css">
9+
body {
10+
background-color: #000; color: #fff; margin: 40px auto; padding: 0 10px; max-width: 800px;
11+
font-size: 14pt; line-height: 1.4; font-family: -apple-system, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
12+
}
13+
h1, h2, h3 { line-height: 1.2; text-align: center; }
14+
15+
a:link { color: #fff; text-decoration: none; }
16+
a:hover { color: #66f; }
17+
a:visited { color: #fff; }
18+
a:visited:hover { color: #66f; }
19+
20+
figure { position: relative; float: left; width: 200px; margin: 0 0 80px 0; text-align: center; }
21+
figure img { width: 128px; height: 128px; }
22+
</style>
23+
</head>
24+
<body>
25+
<h1>GLFM Examples</h1>
26+
27+
<!-- #figure -->
28+
29+
</body>
30+
</html>

0 commit comments

Comments
 (0)