Implement adding Multimarkers & NFT-markers

src/ARController.js

@@ -58,17 +58,17 @@ export default class ARController {
     if(this.options.canvas) {
       // in case you use Node.js, create a canvas with node-canvas
       this.canvas = this.options.canvas;
-    } else {
+    } else if(typeof document !== 'undefined') {
       // try creating a canvas from document
-      if(typeof document === 'undefined') {
-        throw 'No canvas available';
-      }
       this.canvas = document.createElement('canvas');
     }
-
-    this.canvas.width = width;
-    this.canvas.height = height;
-    this.ctx = this.canvas.getContext('2d');
+    if(this.canvas) {
+      this.canvas.width = width;
+      this.canvas.height = height;
+      this.ctx = this.canvas.getContext('2d');
+    } else {
+      console.warn('No canvas available');
+    }
 
     // this is to workaround the introduction of "self" variable
     this.nftMarkerFound = false;

src/ARToolkit.js

@@ -123,12 +123,45 @@ export default class ARToolkit {
     return this.instance._addMarker(arId, target);
   }
 
-  addMultiMarker() {
+  async addMultiMarker(arId, url) {
 
+    const target = '/multi_marker_' + this.multiMarkerCount++;
+
+    const data = await Utils.fetchRemoteData(url);
+    const files = Utils.parseMultiFile(data);
+
+    const storeMarker = async function (file) {
+      const markerUrl = (new URL(file, url)).toString();
+      const data = await Utils.fetchRemoteData(markerUrl);
+      this._storeDataFile(data, file);
+    };
+
+    const promises = files.map(storeMarker, this);
+    await Promise.all(promises);
+
+    const markerId = this.instance._addMultiMarker(arId, target);
+    const markerNum = this.instance.getMultiMarkerNum(arId, markerId);
+
+    return [markerId, markerNum];
   }
 
-  addNFTMarker() {
+  async addNFTMarker(arId, url) {
+    // url doesn't need to be a valid url. Extensions to make it valid will be added here
+    const targetPrefix = '/markerNFT_' + this.markerCount++;
+    const extensions = ['fset', 'iset', 'fset3'];
+
+    const storeMarker = async function (ext) {
+      const fullUrl = url + '.' + ext;
+      const target = targetPrefix + '.' + ext;
+      const data = await Utils.fetchRemoteData(fullUrl);
+      this._storeDataFile(data, target);
+    };
 
+    const promises = extensions.map(storeMarker, this);
+    await Promise.all(promises);
+
+    // return the internal marker ID
+    return this.instance._addNFTMarker(arId, targetPrefix);
   }
   //----------------------------------------------------------------------------
 

src/Utils.js

@@ -19,4 +19,46 @@ export default class Utils {
     }
     return data;
   }
+
+  static uint8Data2String(uint8Data) {
+    return String.fromCharCode.apply(String, uint8Data);
+  }
+
+  static parseMultiFile(bytes) {
+    // Parse a multi-marker file to an array of file-paths
+    const str = Utils.uint8Data2String(bytes);
+
+    const lines = str.split('\n');
+
+    const files = [];
+
+    let state = 0; // 0 - read,
+    let markers = 0;
+
+    lines.forEach(function (line) {
+      line = line.trim();
+      if (!line || line.startsWith('#')) return; // FIXME: Should probably be `if (line.indexOf('#') === 0) { return; }`
+
+      switch (state) {
+        case 0:
+          markers = +line;
+          state = 1;
+          return;
+        case 1: // filename or barcode
+          if (!line.match(/^\d+$/)) {
+            files.push(line);
+          }
+        case 2: // width
+        case 3: // matrices
+        case 4:
+          state++;
+          return;
+        case 5:
+          state = 1;
+          return;
+      }
+    });
+
+    return files;
+  }
 }