- refactor: DRY template functions

docs/modules.md

@@ -35,7 +35,7 @@ a data URI string representing the final marker image.
 ```js
 const { MarkerModule, MATRIX_3X3_HAMMING_63 } = ARjsStudioBackend;
 
-// generate an SVG data URI for the value '8'
+// generate an SVG data URI for the value '7'
 const barcodeMarkerSVG = MarkerModule.getBarcodeMarkerSVGDataURI(MATRIX_3X3_HAMMING_63, 7);
 
 const barcodeImage = new Image();

docs/templates.md

@@ -1,30 +1,32 @@
-## Marker applications
+## Marker pattern
 
-**MarkerModule.generatePattern3dHtml(pattSrc, modelSrc)**
+**MarkerModule.generatePatternHtml(assetType, pattSrc, assetSrc)**
 
-Generates the `index.html` contents for an AR.js application using a marker pattern and 3d model as AR asset.
-Parameters are the relative paths for `.patt` and `.gltf` files.
+Generate the `index.html` contents for AR.js applications using marker pattern.
+Accepts an asset type (see exported `ASSET_*` constants) and relative paths for `.patt` and asset files.
 
-**MarkerModule.generatePatternImageHtml(pattSrc, imageSrc)**
+**Example**
 
-Generates the `index.html` contents for an AR.js application using a marker pattern and an image as AR asset.
-Parameters are the relative paths for `.patt` file and the image.
+```js
+const { MarkerModule, ASSET_AUDIO } = ARjsStudioBackend;
 
-**MarkerModule.generatePatternAudioHtml(pattSrc, audioSrc)**
+// generate the index.html for an AR application that uses marker pattern and an audio file as AR asset
+const content = MarkerModule.generatePatternHtml(ASSET_AUDIO, '/marker.patt', '/assets/audio.mp3');
+```
 
-Generates the `index.html` contents for an AR.js application using a marker pattern and an audio file as AR asset.
-Parameters are the relative paths for `.patt` file and the audio.
+## Marker barcode
 
-**MarkerModule.generatePatternVideoHtml(pattSrc, videoSrc)**
+**MarkerModule.generateBarcodeHtml(matrixType, markerValue, assetSrc)**
 
-Generates the `index.html` contents for an AR.js application using a marker pattern and a video file as AR asset.
-Parameters are the relative paths for `.patt` file and the video.
+Generate the `index.html` contents for AR.js applications using marker barcode.
+Accepts a matrix type (see exported `MATRIX_*` constants), the barcode value represented by the marker and
+asset file.
 
 **Example**
 
 ```js
-const { MarkerModule } = ARjsStudioBackend;
+const { MarkerModule, MATRIX_3X3_HAMMING_63 } = ARjsStudioBackend;
 
-// generate the index.html for an AR application that uses marker pattern and an audio file as AR asset
-const content = MarkerModule.generatePatternAudioTemplate('/marker.patt', '/assets/audio.mp3');
+// generate the index.html for an AR application that uses marker barcode and a 3d model file as AR asset
+const content = MarkerModule.generateBarcodeHtml(MATRIX_3X3_HAMMING_63, 7, '/assets/model.gltf');
 ```

src/index.js

@@ -1,6 +1,12 @@
 import 'regenerator-runtime/runtime';
 import { LocationModule } from './modules/location';
-import { MarkerModule } from './modules/marker';
+import {
+    MarkerModule,
+    ASSET_3D,
+    ASSET_IMAGE,
+    ASSET_AUDIO,
+    ASSET_VIDEO,
+} from './modules/marker';
 import { NFTModule } from './modules/nft';
 import {
     MATRIX_3X3_HAMMING_63,
@@ -34,6 +40,10 @@ export {
     MATRIX_4X4_BCH_1393,
     MATRIX_5X5_BCH_2277,
     MATRIX_5X5_BCH_22125,
+    ASSET_3D,
+    ASSET_IMAGE,
+    ASSET_AUDIO,
+    ASSET_VIDEO,
     MarkerModule,
     NFTModule,
     ENC_BASE64,

src/modules/marker/index.js

@@ -6,6 +6,18 @@ import patternImageTemplate from './templates/pattern.image.handlebars';
 import patternAudioTemplate from './templates/pattern.audio.handlebars';
 import patternVideoTemplate from './templates/pattern.video.handlebars';
 
+export const ASSET_3D = '3d';
+export const ASSET_IMAGE = 'image';
+export const ASSET_AUDIO = 'audio';
+export const ASSET_VIDEO = 'video';
+
+const TEMPLATES = {
+    [ASSET_3D]: pattern3dTemplate,
+    [ASSET_IMAGE]: patternImageTemplate,
+    [ASSET_AUDIO]: patternAudioTemplate,
+    [ASSET_VIDEO]: patternVideoTemplate,
+};
+
 export class MarkerModule {
     static getBarcodeMarkerSVGDataURI(matrixType, value) {
         return new BarcodeMarkerGenerator(matrixType, value).asSVGDataURI();
@@ -19,39 +31,18 @@ export class MarkerModule {
         return await new PatternMarkerGenerator(dataURI).toFullMarker(ratio, size, color);
     }
 
-    static generateBarcodeHtml(matrixType, markerValue, modelSrc) {
+    static generateBarcodeHtml(matrixType, markerValue, assetSrc) {
         return barcodeTemplate({
             matrixType,
             markerValue,
-            modelSrc,
-        });
-    }
-
-    static generatePattern3dHtml(pattSrc, modelSrc) {
-        return pattern3dTemplate({
-            pattSrc,
-            modelSrc,
-        });
-    }
-
-    static generatePatternImageHtml(pattSrc, imageSrc) {
-        return patternImageTemplate({
-            pattSrc,
-            imageSrc,
-        });
-    }
-
-    static generatePatternAudioTemplate(pattSrc, audioSrc) {
-        return patternAudioTemplate({
-            pattSrc,
-            audioSrc,
+            assetSrc,
         });
     }
 
-    static generatePatternVideoTemplate(pattSrc, videoSrc) {
-        return patternVideoTemplate({
+    static generatePatternHtml(assetType, pattSrc, assetSrc) {
+        return TEMPLATES[assetType]({
             pattSrc,
-            videoSrc,
+            assetSrc,
         });
     }
 }

src/modules/marker/templates/barcode.handlebars

@@ -17,7 +17,7 @@
             <a-assets>
                 <a-asset-item
                     id="animated-asset"
-                    src="{{modelSrc}}"
+                    src="{{assetSrc}}"
                 ></a-asset-item>
             </a-assets>
 

src/modules/marker/templates/pattern.3d.handlebars

@@ -17,7 +17,7 @@
             <a-assets>
                 <a-asset-item
                     id="animated-asset"
-                    src="{{modelSrc}}"
+                    src="{{assetSrc}}"
                 ></a-asset-item>
             </a-assets>
 

src/modules/marker/templates/pattern.audio.handlebars

@@ -15,7 +15,7 @@
             <a-assets>
                 <a-asset-item
                     id="sound"
-                    src="{{audioSrc}}"
+                    src="{{assetSrc}}"
                     response-type="arraybuffer"
                 ></a-asset-item>
             </a-assets>

src/modules/marker/templates/pattern.image.handlebars

@@ -18,7 +18,7 @@
                 preset="custom"
                 url="{{pattSrc}}"
             >
-                <a-image src="{{imageSrc}}"></a-image>
+                <a-image src="{{assetSrc}}"></a-image>
             </a-marker>
 
             <a-entity camera></a-entity>

src/modules/marker/templates/pattern.video.handlebars

@@ -16,7 +16,7 @@
             <a-assets>
                 <video
                     id="vid"
-                    src="{{videoSrc}}"
+                    src="{{assetSrc}}"
                     preload="auto"
                     response-type="arraybuffer"
                     loop