Gold plate example page (#147)

mooman219 · Nov 27, 2023 · 9fa7ae9 · 9fa7ae9
1 parent d00a8d4
commit 9fa7ae9
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -13,11 +13,22 @@ wasm-pack build
 ### Start a local webserver
 ```
 cd www
+npm ci
 npm run start
 ```
 
+(Note: `webpack` is currently dealing with an ssl issue (11/2023), and you may need to set `$env:NODE_OPTIONS = "--openssl-legacy-provider"` to work around it)
+
 ### 🔬 Test in Headless Browsers with `wasm-pack test`
 
 ```
 wasm-pack test --headless --firefox
 ```
+
+### Build docs folder
+```
+rm ./docs/*.wasm
+cd www
+npm ci
+npm run build
+```
diff --git a/docs/0.bootstrap.js b/docs/0.bootstrap.js
diff --git a/docs/4b7c6c5e2ff7066c8858.module.wasm b/docs/4b7c6c5e2ff7066c8858.module.wasm
diff --git a/docs/9ba67513cebc4b90a306.module.wasm b/docs/9ba67513cebc4b90a306.module.wasm
diff --git a/docs/bootstrap.js b/docs/bootstrap.js
@@ -55,14 +55,14 @@
 /******/ 		"../pkg/fontdue_you_see_it_bg.wasm": function() {
 /******/ 			return {
 /******/ 				"./fontdue_you_see_it_bg.js": {
-/******/ 					"__wbg_new_693216e109162396": function() {
-/******/ 						return installedModules["../pkg/fontdue_you_see_it_bg.js"].exports["__wbg_new_693216e109162396"]();
+/******/ 					"__wbg_new_abda76e883ba8a5f": function() {
+/******/ 						return installedModules["../pkg/fontdue_you_see_it_bg.js"].exports["__wbg_new_abda76e883ba8a5f"]();
 /******/ 					},
-/******/ 					"__wbg_stack_0ddaca5d1abfb52f": function(p0i32,p1i32) {
-/******/ 						return installedModules["../pkg/fontdue_you_see_it_bg.js"].exports["__wbg_stack_0ddaca5d1abfb52f"](p0i32,p1i32);
+/******/ 					"__wbg_stack_658279fe44541cf6": function(p0i32,p1i32) {
+/******/ 						return installedModules["../pkg/fontdue_you_see_it_bg.js"].exports["__wbg_stack_658279fe44541cf6"](p0i32,p1i32);
 /******/ 					},
-/******/ 					"__wbg_error_09919627ac0992f5": function(p0i32,p1i32) {
-/******/ 						return installedModules["../pkg/fontdue_you_see_it_bg.js"].exports["__wbg_error_09919627ac0992f5"](p0i32,p1i32);
+/******/ 					"__wbg_error_f851667af71bcfc6": function(p0i32,p1i32) {
+/******/ 						return installedModules["../pkg/fontdue_you_see_it_bg.js"].exports["__wbg_error_f851667af71bcfc6"](p0i32,p1i32);
 /******/ 					},
 /******/ 					"__wbindgen_object_drop_ref": function(p0i32) {
 /******/ 						return installedModules["../pkg/fontdue_you_see_it_bg.js"].exports["__wbindgen_object_drop_ref"](p0i32);
@@ -171,7 +171,7 @@
 /******/ 				promises.push(installedWasmModuleData);
 /******/ 			else {
 /******/ 				var importObject = wasmImportObjects[wasmModuleId]();
-/******/ 				var req = fetch(__webpack_require__.p + "" + {"../pkg/fontdue_you_see_it_bg.wasm":"4b7c6c5e2ff7066c8858"}[wasmModuleId] + ".module.wasm");
+/******/ 				var req = fetch(__webpack_require__.p + "" + {"../pkg/fontdue_you_see_it_bg.wasm":"9ba67513cebc4b90a306"}[wasmModuleId] + ".module.wasm");
 /******/ 				var promise;
 /******/ 				if(importObject instanceof Promise && typeof WebAssembly.compileStreaming === 'function') {
 /******/ 					promise = Promise.all([WebAssembly.compileStreaming(req), importObject]).then(function(items) {

diff --git a/docs/index.html b/docs/index.html
@@ -41,6 +41,7 @@
         <label for="input">enter a character:</label>
         <input type="text" placeholder="¾" id="input">
       </div>
+      <div class="flex"><p style="flex: 1 0 auto; text-align: center;" id="warning"></p></div>
       <div class="flex">
         <div style="flex: auto"></div>
         <div class="col">

diff --git a/src/lib.rs b/src/lib.rs
@@ -66,3 +66,14 @@ pub fn render(size: f32, input: char) -> CharRender {
         underlying: bitmap
     }
 }
+
+#[wasm_bindgen]
+pub fn has_glyph(input: char) -> bool {
+    set_panic_hook();
+    let settings = fontdue::FontSettings {
+        scale: 24.0,
+        ..fontdue::FontSettings::default()
+    };
+    let font = Font::from_bytes(ROBOTO_MONO_REGULAR_TTF, settings).unwrap();
+    font.has_glyph(input)
+}
diff --git a/www/index.html b/www/index.html
@@ -41,6 +41,7 @@
         <label for="input">enter a character:</label>
         <input type="text" placeholder="¾" id="input">
       </div>
+      <div class="flex"><p style="flex: 1 0 auto; text-align: center;" id="warning"></p></div>
       <div class="flex">
         <div style="flex: auto"></div>
         <div class="col">

diff --git a/www/index.js b/www/index.js
@@ -100,8 +100,11 @@ function renderBuiltinCharacter(char = "¾", xmin, ymin, height = 200, width = 2
 function init() {
     const input = /** @type {HTMLInputElement} */(document.getElementById("input"));
     input.addEventListener("change", function () {
-        const [height, width, xmin, ymin] = renderFontdueCharacter(this.value);
-        renderBuiltinCharacter(this.value, xmin, ymin, height, width);
+        const present = wasm.has_glyph(this.value);
+        const char = present ? this.value : "?";
+        const [height, width, xmin, ymin] = renderFontdueCharacter(char);
+        renderBuiltinCharacter(char, xmin, ymin, height, width);
+        /** @type {HTMLElement} */(document.getElementById("warning")).innerHTML = present ? "" : "Character missing from font bundled into page.";
     });
     const [height, width, xmin, ymin] = renderFontdueCharacter();
     renderBuiltinCharacter(undefined, xmin, ymin, height, width);