metadata shown underneeth image

parade.js

@@ -8,6 +8,8 @@ var config = {
     shapeWidth: 100, // 8 shape of animation: width
     shapeHeight: 1300, // 8 shape of animation: height;
     playDuration: 16, // seconds. how long should audio play after dragging/pressing next. Something like audio duration / nr of images. Note that if everything is sorted interview will just continue;
+    textColor: "orange",
+    font: "bold 70px Arial",
 }
 
 // polyfill
@@ -282,6 +284,12 @@ class Parade {
         this.changeSorterImage();
     }
 
+    reset() {
+        // for use in terminal only. Quick way to test
+        localStorage.clear();
+        location.reload();
+    }
+
     play() {
         // play audio for n seconds:
         // extend timeout if it's already playing
@@ -369,7 +377,7 @@ class Parade {
         
         for(let i in this.images) {
             // create the Meshes with the images in the scene
-            this.images[i].makeMesh(this.scene);
+            this.images[i].makeMesh(this.scene, this.config);
         }
 
 
@@ -403,7 +411,8 @@ class ParadeImage {
         this.target_position_time = time_complete;
     }
 
-    makeMesh(scene) {
+    makeMesh(scene, config) {
+        this.mesh = new BABYLON.TransformNode();
         var planeOptions = {
             // TODO: should size be dynamic?
             height: 5.4762,
@@ -411,14 +420,49 @@ class ParadeImage {
             sideOrientation: BABYLON.Mesh.DOUBLESIDE // texture should be visible from front and back
         };
 
-        this.mesh  = BABYLON.MeshBuilder.CreatePlane("plane", planeOptions, scene);
+        let imagePlane  = BABYLON.MeshBuilder.CreatePlane("image", planeOptions, scene);
         
-        var mat = new BABYLON.StandardMaterial("m", scene);
-
-        mat.diffuseTexture = new BABYLON.Texture(this.getImageUrl(), scene);
+        var imageMat = new BABYLON.StandardMaterial("m", scene);
+
+        imageMat.diffuseTexture = new BABYLON.Texture(this.getImageUrl(), scene);
+        imageMat.roughness = 1;
+        imageMat.emissiveColor = new BABYLON.Color3.White();
+        imagePlane.material = imageMat;
+        imagePlane.parent = this.mesh;
+
+        // text https://www.babylonjs-playground.com/#TMHF80
+        // TODO: cleanup this mess of the dynamic texture:
+        let text = this.info['image'];
+        var temp = new BABYLON.DynamicTexture("DynamicTexture", 64, scene);
+        var tmpctx = temp.getContext();
+        let maxWidth = 1700; // at some point texture starts doing messy things.. let's avoid that by squeezing text.
+        tmpctx.font = config['font'];
+        var DTWidth = Math.min(tmpctx.measureText(text).width, maxWidth);
+        var planeHeight = 3;
+        var DTHeight = 256; //or set as wished
+        var ratio = planeHeight/DTHeight;
+        var planeWidth = DTWidth * ratio;
+
+        var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", {width:DTWidth, height:DTHeight}, scene, false);
+        dynamicTexture.hasAlpha = true;
+        var ctx = dynamicTexture.getContext();
+        ctx.font = config['font'];
+        ctx.fillStyle = config['textColor'];
+        ctx.fillText(text, 0, 50, maxWidth);
+        dynamicTexture.update();
+        
+        var mat = new BABYLON.StandardMaterial("mat", scene);
+        mat.diffuseTexture = dynamicTexture;
+        mat.opacityTexture = dynamicTexture; // smoother transparency: https://www.html5gamedevs.com/topic/19647-quality-of-dynamictexture-text-with-transparent-background/?do=findComment&comment=111383
         mat.roughness = 1;
         mat.emissiveColor = new BABYLON.Color3.White();
-        this.mesh.material = mat;
+        
+        var textPlane = BABYLON.MeshBuilder.CreatePlane("text", {width:planeWidth, height:planeHeight, sideOrientation: BABYLON.Mesh.DOUBLESIDE}, scene);
+        textPlane.material = mat;
+        textPlane.parent = this.mesh;
+        textPlane.position.y = -4.3; // text sits below image
+
+        
 
         this.mesh.rotation.y = Math.PI; // rotate 180 deg. to avoid looking at backside from the start.