Improve lighthouse example prompt (google#1564)

* updated lighthouse2 * made pre-prompt * updated second page * forgot svg * addressing feedback
sayinserdar · Sep 24, 2020 · 70e15d6 · 70e15d6
1 parent 3299964
commit 70e15d6
Show file tree

Hide file tree

Showing 4 changed files with 145 additions and 6 deletions.
diff --git a/packages/model-viewer/src/model-viewer-base.ts b/packages/model-viewer/src/model-viewer-base.ts
@@ -532,7 +532,9 @@ export default class ModelViewerElementBase extends UpdatingElement {
     } finally {
       updateSourceProgress(0.9);
       requestAnimationFrame(() => {
-        updateSourceProgress(1.0);
+        requestAnimationFrame(() => {
+          updateSourceProgress(1.0);
+        });
       });
     }
   }

diff --git a/packages/modelviewer.dev/assets/prompt.svg b/packages/modelviewer.dev/assets/prompt.svg
diff --git a/packages/modelviewer.dev/examples/lighthouse.html b/packages/modelviewer.dev/examples/lighthouse.html
@@ -59,19 +59,42 @@
       display: none;
     }
 
+    :defined > .poster > .pre-prompt {
+      display: none;
+    }
+
     /* This CSS should always be used at minimum for any slotted poster */
     .poster {
-      display: block;
+      display: flex;
+      justify-content: center;
+      align-items: center; 
       height: 100%;
-      left: 0;
-      right: 0;
       top: 0;
-      bottom: 0;
+      left: 0;
       background-size: contain;
       background-repeat: no-repeat;
       background-position: center;
     }
 
+    @keyframes wiggle {	
+      10%, 12% { transform: translateX(-25px); }	 
+      30%, 32% { transform: translateX(25px); }	
+      0%, 45%, 100% { transform: translateX(0%); }
+    }	
+
+    @keyframes fade {	
+      5%, 40% {	opacity: 1; }	
+      0%, 45%, 100% {	opacity: 0; }	 
+    }
+
+    .pre-prompt {
+      pointer-events: none;
+      animation-name: wiggle, fade;
+      animation-duration: 5s;
+      animation-iteration-count: infinite;
+      animation-timing-function: ease-in-out;
+    }
+
     .progress-bar {
       display: block;
       width: 33%;
@@ -177,7 +200,9 @@ <h2>Setting up <code>&lt;model-viewer&gt;</code> for good Lighthouse scores</h2>
         alt="3D model of a chair with footrest"
       >
 
-      <div class="poster" slot="poster" style="background-image: url(../assets/ShopifyModels/ChairPoster.png);"></div>
+      <div class="poster" slot="poster" style="background-image: url(../assets/ShopifyModels/ChairPoster.png);">
+        <img class="pre-prompt" src="../assets/prompt.svg">
+      </div>
 
       <div class="progress-bar" slot="progress-bar">
         <div class="update-bar"></div>

diff --git a/packages/modelviewer.dev/examples/lighthouse2.html b/packages/modelviewer.dev/examples/lighthouse2.html
@@ -62,6 +62,67 @@
       display: none;
     }
 
+    .center-pre-prompt {
+      display: flex;
+      justify-content: center;
+      align-items: center; 
+      height: 100%;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+    }
+
+    .center-pre-prompt.hide {
+      display: none;
+    }
+
+    @keyframes wiggle {	
+      10%, 12% { transform: translateX(-25px); }	 
+      30%, 32% { transform: translateX(25px); }	
+      0%, 45%, 100% { transform: translateX(0%); }
+    }	
+
+    @keyframes fade {	
+      5%, 40% {	opacity: 1; }	
+      0%, 45%, 100% {	opacity: 0; }	 
+    }
+
+    .pre-prompt {
+      pointer-events: none;
+      animation-name: wiggle, fade;
+      animation-duration: 5s;
+      animation-iteration-count: infinite;
+      animation-timing-function: ease-in-out;
+    }
+
+    .progress-bar {
+      display: block;
+      width: 33%;
+      height: 10%;
+      max-height: 2%;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate3d(-50%, -50%, 0);
+      border-radius: 25px;
+      box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 0.5), 0px 0px 5px 1px rgba(0, 0, 0, 0.6);
+      border: 1px solid rgba(255, 255, 255, 0.9);
+    }
+
+    .progress-bar.hide {
+      visibility: hidden;
+      transition: visibility 0.3s;
+    }
+
+    .update-bar {
+      background-color: rgba(255, 255, 255, 0.9);
+      width: 0%;
+      height: 100%;
+      border-radius: 25px;
+      float: left;
+      transition: width 0.3s;
+    }
+
     .ar-button {
       background-image: url(../assets/ic_view_in_ar_new_googblue_48dp.png);
       background-repeat: no-repeat;
@@ -134,12 +195,21 @@ <h2>Setting up <code>&lt;model-viewer&gt;</code> for decent Lighthouse scores</h
         poster="../assets/ShopifyModels/ChairPoster.png"
         reveal="interaction"
         camera-orbit="1.2195rad 1.362rad auto"
+        interaction-prompt-threshold="0"
         shadow-intensity="1"
         ar
         camera-controls
         alt="3D model of a chair with footrest"
       >
 
+      <div class="center-pre-prompt">
+        <img class="pre-prompt" src="../assets/prompt.svg">
+      </div>
+
+      <div class="progress-bar hide" slot="progress-bar">
+        <div class="update-bar"></div>
+      </div>
+
       <button slot="ar-button" class="ar-button">
         View in your space
       </button>
@@ -170,15 +240,21 @@ <h2>Setting up <code>&lt;model-viewer&gt;</code> for decent Lighthouse scores</h
 
     <!-- Second Example -->
     <model-viewer
+      id="second"
       src="../assets/ShopifyModels/Mixer.glb"
       poster="../assets/ShopifyModels/MixerPoster.png"
       camera-orbit="0.9677rad 1.2427rad auto"
+      interaction-prompt-threshold="0"
       shadow-intensity="1"
       ar
       camera-controls
       alt="3D model of a countertop mixer"
     >
 
+      <div class="progress-bar hide" slot="progress-bar">
+        <div class="update-bar"></div>
+      </div>
+
       <button slot="ar-button" class="ar-button">
         View in your space
       </button>
@@ -210,6 +286,23 @@ <h2>Setting up <code>&lt;model-viewer&gt;</code> for decent Lighthouse scores</h
     body.addEventListener('touchmove', onInteraction, {once:true});
     body.addEventListener('scroll', onInteraction, {once:true});
     body.addEventListener('keydown', onInteraction, {once:true});
+
+    const onProgress = (event) => {
+      const progressBar = event.target.querySelector('.progress-bar');
+      const updatingBar = event.target.querySelector('.update-bar');
+      updatingBar.style.width = `${event.detail.totalProgress*100}%`;
+      if (event.detail.totalProgress === 1) {
+        progressBar.classList.add('hide');
+      } else {
+        progressBar.classList.remove('hide');
+        if (event.detail.totalProgress === 0) {
+          event.target.querySelector('.center-pre-prompt')?.classList.add('hide');
+        }
+      }
+    };
+
+    document.querySelector('#first').addEventListener('progress', onProgress);
+    document.querySelector('#second').addEventListener('progress', onProgress);
   </script>
 </body>
 </html>