Enhancement in the tools/makem.js script and other fixes

README.md

@@ -2,20 +2,22 @@
 
 Emscripten port of [ARToolKit](https://github.com/artoolkitx/artoolkit5) to JavaScript.
 
-## MArkers Types
+## Markers Types
 
 JSARToolKit5 support these types of markers:
+
 - Square pictorial markers
 - Square barcode markers
 - Multi square markers set
 - NFT (natural feature tracking) markers
 
----
+--------------------------------------------------------------------------------
+
 **NOTE:**
 
 When writing JavaScript and making changes be aware that the emscripten uglifier does not support the ES6 syntax.
 
----
+--------------------------------------------------------------------------------
 
 ## Project Structure
 
@@ -24,31 +26,35 @@ When writing JavaScript and making changes be aware that the emscripten uglifier
 - `emscripten/` (source code for ARToolKit.js)
 - `examples/` (demos and examples using ARToolKit.js)
 - `js/` (compiled versions of ARToolKit.js with Three.js helper api)
+- `tests/` (tests for compiled versions of ARToolKit.js)
 - `tools/` (build scripts for building ARToolKit.js)
 
 ## WebAssembly
 
-JSARToolKit5 supports WebAssembly. The libary builds two WebAssembly artifacts during the build process. These are ```build/artoolkit_wasm.js``` and ```build/artoolkit_wasm.wasm```. To use those, include the artoolkit_wasm.js into your html page and define ```var artoolkit_wasm_url = '<<PATH TO>>/artoolkit_wasm.wasm';``` before loading the artoolkit_wasm.js file, like this:
+JSARToolKit5 supports WebAssembly. The libary builds two WebAssembly artifacts during the build process. These are `build/artoolkit_wasm.js` and `build/artoolkit_wasm.wasm`. To use those, include the artoolkit_wasm.js into your html page and define `var artoolkit_wasm_url = '<<PATH TO>>/artoolkit_wasm.wasm';` before loading the artoolkit_wasm.js file, like this:
 
-```js
+```javascript
 <script type='text/javascript'>
       var artoolkit_wasm_url = '../build/artoolkit_wasm.wasm';
 </script>
 <script src="../build/artoolkit_wasm.js"></script>
 ```
+
 As loading the WebAssembly artifact is done asynchronously, there is a callback that is called when everything is ready.
 
-```js
+```javascript
 window.addEventListener('artoolkit-loaded', () => {
     //do artoolkit stuff here
 });
 ```
+
 See examples/simple_image_wasm.html for details.
 
 ## Clone the repository
 
 1. Clone this repository
 2. Clone ARToolKit5 project to get the latest source files. From within jsartoolkit5 directory do `git submodule update --init`. If you already cloned ARToolKit5 to a different directory you can:
+
   - create a link in the `jsartoolkit5/emscripten/` directory that points to ARToolKit5 (`jsartoolkit5/emscripten/artoolkit5`) (Linux and macOS only)
   - or, set the `ARTOOLKIT5_ROOT` environment variable to point to your ARToolKit5 clone
   - or, change the `tools/makem.js` file to point to your artoolkit5 clone (line 20)
@@ -62,48 +68,51 @@ See examples/simple_image_wasm.html for details.
 3. `npm install`
 4. From inside jsartoolkit5 directory run `docker run -dit --name emscripten -v $(pwd):/src trzeci/emscripten-slim:latest bash` to download and start the container, in preparation for the build
 5. `docker exec emscripten npm run build-local` to build JS version of artoolkit5
-6. `docker stop emscripten` to stop the container after the build, if needed
-7. `docker rm emscripten` to remove the container
-8. `docker rmi trzeci/emscripten-slim:latest` to remove the Docker image, if you don't need it anymore
-9. The build artifacts will appear in `/build`. There's a build with debug symbols in `artoolkit.debug.js` file and the optimized build with bundled JS API in `artoolkit.min.js`; also, a WebAssembly build artoolkit_wasm.js and artoolkit_wasm.wasm
+6. `docker exec emscripten npm run build-local-no-libar` to build JS version of artoolkit5 without rebuilding libar.bc
+7. `docker stop emscripten` to stop the container after the build, if needed
+8. `docker rm emscripten` to remove the container
+9. `docker rmi trzeci/emscripten-slim:latest` to remove the Docker image, if you don't need it anymore
+10. The build artifacts will appear in `/build`. There's a build with debug symbols in `artoolkit.debug.js` file and the optimized build with bundled JS API in `artoolkit.min.js`; also, a WebAssembly build artoolkit_wasm.js and artoolkit_wasm.wasm
 
 ### ⚠️ Not recommended ⚠️ : Build local with manual emscripten setup
 
-To prevent issues with Emscripten setup and to not have to maintain several build environments (macOS, Windows, Linux) we only maintain the **Build using Docker**. Following are the instructions of the last know build on Linux which we verified are working. **Use at own risk.**
-** Not working on macOS!**
+To prevent issues with Emscripten setup and to not have to maintain several build environments (macOS, Windows, Linux) we only maintain the **Build using Docker**. Following are the instructions of the last know build on Linux which we verified are working. **Use at own risk.** **Not working on macOS!**
 
 1. Install build tools
-  1. Install node.js (https://nodejs.org/en/)
-  2. Install python2 (https://www.python.org/downloads/)
-  3. Install emscripten (https://emscripten.org/docs/getting_started/downloads.html#download-and-install)
-     We used emscripten version **1.39.5-fastcomp** ~~1.38.44-fastcomp~~
 
-jsartoolkit5 aim is to create a Javascript version of artoolkit5. First, you need the artoolkit5 repository on your machine:
+  1. Install node.js (<https://nodejs.org/en/>)
+  2. Install python2 (<https://www.python.org/downloads/>)
+  3. Install emscripten (<https://emscripten.org/docs/getting_started/downloads.html#download-and-install>) We used emscripten version **1.39.5-fastcomp** ~~1.38.44-fastcomp~~
+
+jsartoolkit5 aim is to create a Javascript version of artoolkit5\. First, you need the artoolkit5 repository on your machine:
+
 2. Clone ARToolKit5 project to get the latest source files. From within jsartoolkit5 directory do `git submodule update --init`. If you already cloned ARToolKit5 to a different directory you can:
+
   - create a link in the `jsartoolkit5/emscripten/` directory that points to ARToolKit5 (`jsartoolkit5/emscripten/artoolkit5`)
   - or, set the `ARTOOLKIT5_ROOT` environment variable to point to your ARToolKit5 clone
   - or, change the `tools/makem.js` file to point to your artoolkit5 clone (line 20)
 
 3. Building
+
   1. Make sure `EMSCRIPTEN` env variable is set (e.g. `EMSCRIPTEN=/usr/lib/emsdk_portable/emscripten/master/ node tools/makem.js`
-  3. Run `npm install`
-  4. Run `npm run build-local`
+  2. Run `npm install`
+  3. Run `npm run build-local`
 
-During development, you can run ```npm run watch```, it will rebuild the library everytime you change ```./js/``` directory.
+During development, you can run `npm run watch`, it will rebuild the library everytime you change `./js/` directory. You can also run the script with the option `npm run build-local-no-libar` if you have already build libar.bc and you don't want to rebuild.
 
 4. The built ASM.js files are in `/build`. There's a build with debug symbols in `artoolkit.debug.js` and the optimized build with bundled JS API in `artoolkit.min.js`.
 
 ## ARToolKit JS API
 
-```js
+```javascript
 <script src="../build/artoolkit.min.js">
 // include optimized ASM.js build and JS API
 </script>
 ```
 
 ## ARToolKit JS debug build
 
-```js
+```javascript
 <script async src="../build/artoolkit.debug.js">
 // - include debug build
 </script>
@@ -114,7 +123,7 @@ During development, you can run ```npm run watch```, it will rebuild the library
 
 ## ARToolKit Three.js helper API
 
-```js
+```javascript
 <script src="../build/artoolkit.min.js">
 // - include optimized ASM.js build and JS API
 </script>
@@ -149,7 +158,7 @@ The basic operation goes like this:
 
 ### Basic example with an image source and a pattern marker ( hiro )
 
-```js
+```javascript
 <script src="../build/artoolkit.min.js"></script>
 <script>
   var param = new ARCameraParam();
@@ -188,8 +197,7 @@ The basic operation goes like this:
 
 In the code below a summarized example:
 
-
-```js
+```javascript
 <div id="container">
     <video id="video"></video>
     <canvas style="position: absolute; left:0; top:0" id="canvas_draw"></canvas>
@@ -227,7 +235,7 @@ if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
 
 ## Constants
 
-*prepend all these constants with `Module.` or `artoolkit.CONSTANTS` to access them*
+_prepend all these constants with `Module.` or `artoolkit.CONSTANTS` to access them_
 
 ```
 - AR_DEBUG_DISABLE

examples/barcode_threejs.html

@@ -23,7 +23,7 @@
 
 <h1>Barcode marker example with Three.js</h1>
 <p>On Chrome on Android, tap the screen to start playing video stream.</p>
-<p>Show <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Matrix%20code%203x3%20(72dpi)/20.png">3x3 marker id 20</a> to camera to display a colorful sphere on top of it. Tap the sphere to rotate it.
+<p>Show <a href="https://github.com/artoolkitx/artoolkit5/blob/master/doc/patterns/Matrix%20code%203x3%20(72dpi)/20.png">3x3 marker id 20</a> to camera to display a colorful sphere on top of it. Tap the sphere to rotate it.
 
 <p>&larr; <a href="index.html">Back to examples</a></p>
 

examples/index.html

@@ -32,15 +32,15 @@ <h2>Three.js examples</h2>
 				Barcode tracking
 			</a>
 			<p>Uses device camera.
-			<p>Use <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Matrix%20code%203x3%20(72dpi)/20.png">3x3 marker id 20</a>
+			<p>Use <a href="https://github.com/artoolkitx/artoolkit5/blob/master/doc/patterns/Matrix%20code%203x3%20(72dpi)/20.png">3x3 marker id 20</a>
 		</div>
 
 		<div class="example">
 			<a href="pattern_threejs.html">
 				Pattern marker tracking
 			</a>
 			<p>Uses device camera.
-			<p>Use <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Hiro%20pattern.pdf">Hiro pattern</a> and <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Kanji%20pattern.pdf">Kanji pattern</a>
+			<p>Use <a href="https://github.com/artoolkitx/artoolkit5/blob/master/doc/patterns/Hiro%20pattern.pdf">Hiro pattern</a> and <a href="https://github.com/artoolkitx/artoolkit5/blob/master/doc/patterns/Kanji%20pattern.pdf">Kanji pattern</a>
 		</div>
 
 		<div class="example">
@@ -49,25 +49,25 @@ <h2>Three.js examples</h2>
 			</a>
 			<p>Uses device camera.
 			<p>Use
-			<a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Matrix%20code%203x3%20(72dpi)/5.png">3x3 marker id 5</a>,
-			<a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Matrix%20code%203x3%20(72dpi)/20.png">3x3 marker id 20</a>,
-			<a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Hiro%20pattern.pdf">Hiro pattern</a> and <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Kanji%20pattern.pdf">Kanji pattern</a>
+			<a href="https://github.com/artoolkitx/artoolkit5/blob/master/doc/patterns/Matrix%20code%203x3%20(72dpi)/5.png">3x3 marker id 5</a>,
+			<a href="https://github.com/artoolkitx/artoolkit5/blob/master/doc/patterns/Matrix%20code%203x3%20(72dpi)/20.png">3x3 marker id 20</a>,
+			<a href="https://github.com/artoolkitx/artoolkit5/blob/master/doc/patterns/Hiro%20pattern.pdf">Hiro pattern</a> and <a href="https://github.com/artoolkitx/artoolkit5/blob/master/doc/patterns/Kanji%20pattern.pdf">Kanji pattern</a>
 		</div>
 
 		<div class="example">
 			<a href="multimarker_barcode_threejs.html">
 				Barcode multimarker tracking
 			</a>
 			<p>Uses device camera.
-			<p>Use <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Multi%20pattern%204x3%20(A4).pdf">Multi pattern 4x3</a>
+			<p>Use <a href="https://github.com/artoolkitx/artoolkit5/blob/master/doc/patterns/Multi%20pattern%204x3%20(A4).pdf">Multi pattern 4x3</a>
 		</div>
 
 		<div class="example">
 			<a href="multimarker_pattern_threejs.html">
 				Pattern multimarker tracking
 			</a>
 			<p>Uses device camera.
-			<p>Use <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Multi%20pattern%20(template%2C%20A4).pdf">Multi pattern (template)</a>
+			<p>Use <a href="https://github.com/artoolkitx/artoolkit5/blob/master/doc/patterns/Multi%20pattern%20(template%2C%20A4).pdf">Multi pattern (template)</a>
 		</div>
 
 		<div class="example">
@@ -146,7 +146,7 @@ <h2>Wasm esamples</h2>
 				nft with threejs and Wasm
 			</a>
 			<p>Using NFT with three.js and Wasm (and no webworker)
-			<p>Use this <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/Marker%20images/pinball.jpg">Pinball image</a>
+			<p>Use this <a href="https://github.com/artoolkitx/artoolkit5/blob/master/doc/Marker%20images/pinball.jpg">Pinball image</a>
 				as marker.
 		</div>
 

examples/intro_example.html

@@ -23,7 +23,7 @@
 
 <h1>Box demo with Three.js</h1>
 <p>On Chrome on Android, tap the screen to start playing video stream.</p>
-<p>Show <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Matrix%20code%203x3%20(72dpi)/20.png">3x3 marker id 20</a> to camera to display a box on top of it. Tap the box to open it.
+<p>Show <a href="https://github.com/artoolkitx/artoolkit5/blob/master/doc/patterns/Matrix%20code%203x3%20(72dpi)/20.png">3x3 marker id 20</a> to camera to display a box on top of it. Tap the box to open it.
 
 
 <p>&larr; <a href="index.html">Back to examples</a></p>

examples/multimarker_barcode_threejs.html

@@ -23,7 +23,7 @@
 
 <h1>Barcode multimarker example with Three.js</h1>
 <p>On Chrome on Android, tap the screen to start playing video stream.</p>
-<p>Show <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Multi%20pattern%204x3%20(A4).pdf">Multi pattern 4x3</a> to camera to display objects on top of it.
+<p>Show <a href="https://github.com/artoolkitx/artoolkit5/blob/master/doc/patterns/Multi%20pattern%204x3%20(A4).pdf">Multi pattern 4x3</a> to camera to display objects on top of it.
 
 <p>&larr; <a href="index.html">Back to examples</a></p>
 

examples/multimarker_pattern_threejs.html

@@ -23,7 +23,7 @@
 
 <h1>Pattern multimarker example with Three.js</h1>
 <p>On Chrome on Android, tap the screen to start playing video stream.</p>
-<p>Show <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Multi%20pattern%20(template%2C%20A4).pdf">Multi pattern (template)</a> to camera to display objects on top of it.
+<p>Show <a href="https://github.com/artoolkitx/artoolkit5/blob/master/doc/patterns/Multi%20pattern%20(template%2C%20A4).pdf">Multi pattern (template)</a> to camera to display objects on top of it.
 
 <p>&larr; <a href="index.html">Back to examples</a></p>
 

examples/nft_improved_worker/index.html

@@ -1,13 +1,13 @@
 <html>
 <head>
-    <title>nft pages</title>
+    <title>NFT examples</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1">
 </head>
 
 <body>
     <link rel="stylesheet" href="../css/index.css">
-    <h3>jsartoolkit5 demos with ar2Tracking</h3>
-    <div>Image to recognize for the following examples <a href="https://imgur.com/HvcmRVl">https://imgur.com/HvcmRVl</a></div>
+    <h3>Jsartoolkit5 demos with ar2Tracking</h3>
+    <div>Image to recognize for the following examples <a href="https://github.com/artoolkitx/artoolkit5/blob/master/doc/Marker%20images/pinball.jpg">Pinball image</a></div>
     <p>Examples:</p>
     <ul>
         <li><a href="threejs_worker_gltf.html">Show a 3D, animated model. Uses web worker. Has loader. Has interpolation.</a></li>

examples/nft_improved_worker/main_threejs_wasm_worker.html

@@ -6,7 +6,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1">
 	<link rel="stylesheet" href="../css/video-style.css">
 </head>
-<body class="loading">
+<body>
 	<div id="loading" >
 			<img  src="../Data/logo.gif"/>
 			<span class="loading-text">Loading, please wait</span>
@@ -52,7 +52,7 @@
       </div>
 
       <a
-          href="https://raw.githubusercontent.com/artoolkit/artoolkit5/master/doc/Marker%20images/pinball.jpg"
+          href="https://raw.githubusercontent.com/artoolkitx/artoolkit5/master/doc/Marker%20images/pinball.jpg"
           class="ui marker"
           target="_blank">
           🖼 Marker Image

examples/nft_improved_worker/main_threejs_worker.html

@@ -6,7 +6,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1">
 	<link rel="stylesheet" href="../css/video-style.css">
 </head>
-<body class="loading">
+<body>
 	<div id="loading" >
 			<img  src="../Data/logo.gif"/>
 			<span class="loading-text">Loading, please wait</span>
@@ -52,7 +52,7 @@
       </div>
 
       <a
-          href="https://raw.githubusercontent.com/artoolkit/artoolkit5/master/doc/Marker%20images/pinball.jpg"
+          href="https://raw.githubusercontent.com/artoolkitx/artoolkit5/master/doc/Marker%20images/pinball.jpg"
           class="ui marker"
           target="_blank">
           🖼 Marker Image

examples/nft_improved_worker/threejs_wasm_worker.js

@@ -56,7 +56,7 @@ function start2(container, marker, video, input_width, input_height, canvas_draw
     var w, h;
     var pw, ph;
     var ox, oy;
-    var camera_para = './../../Data/camera_para-iPhone 5 rear 640x480 1.0m.dat'
+    var camera_para = './../../Data/camera_para.dat'
 
     var canvas_process = document.createElement('canvas');
     var context_process = canvas_process.getContext('2d');
@@ -97,14 +97,7 @@ function start2(container, marker, video, input_width, input_height, canvas_draw
 
         sw = vw * sscale;
         sh = vh * sscale;
-        video.style.width = sw + "px";
-        video.style.height = sh + "px";
-        container.style.width = sw + "px";
-        container.style.height = sh + "px";
-        canvas_draw.style.clientWidth = sw + "px";
-        canvas_draw.style.clientHeight = sh + "px";
-        canvas_draw.width = sw;
-        canvas_draw.height = sh;
+
         w = vw * pscale;
         h = vh * pscale;
         pw = Math.max(w, h / 3 * 4);
@@ -140,11 +133,17 @@ function start2(container, marker, video, input_width, input_height, canvas_draw
                 }
 
                 case "endLoading": {
-                  if (msg.end == true)
-                    // removing loader page if present
-                    document.body.classList.remove("loading");
-                    document.getElementById("loading").remove();
-                  break;
+                    if (msg.end == true) {
+                        // removing loader page if present
+                        var loader = document.getElementById('loading');
+                        if (loader) {
+                            loader.querySelector('.loading-text').innerText = 'Start the tracking!';
+                            setTimeout(function(){
+                                loader.parentElement.removeChild(loader);
+                            }, 2000);
+                        }
+                    }
+                    break;
                 }
 
                 case "found": {