update

Author: vagrant

source/_static/js/viz.js

@@ -155,7 +155,7 @@ $(document).ready(function() {
       return M;
     }
 
-    function start() {
+    function start(callback) {
       const container = document.getElementById('viz-canvas');
 
       var renderer = new THREE.WebGLRenderer();
@@ -199,8 +199,12 @@ $(document).ready(function() {
 
         const sMeshes = getSMeshes(font, matLite, width);
         sMeshes.forEach(m => scene.add(m));
-          
+        
         console.log('done');
+        if (callback) {
+          callback();
+        }
+        
       });
 
       function animate() {
@@ -219,7 +223,21 @@ $(document).ready(function() {
 
     const canvas = $('#viz-canvas');
     if (canvas.length > 0) {
-      console.log('starting viz now');
-      start();
+      const btn = $('#viz-btn');
+      const msg = $('#viz-msg');
+      
+      btn.click(() => {
+        console.log('starting viz now');
+        msg.css('visibility', 'visible');
+
+        start(() => {
+          console.log('callback');
+          btn.toggle();
+          msg.toggle();
+        });
+      });
     }
+    
+    
+    
 });

source/viz.rst

@@ -1,9 +1,13 @@
 Visualization
 =============
 
-Here's a 3D visualization of the CVT space. Hold the ``shift`` key while pressing the ``left`` mouse key to pan. Use the mouse ``scroll wheel`` to zoom in and out. It takes a while to render this page, please be patient.
+Here's a 3D visualization of the CVT space. Hold the ``shift`` key while pressing the ``left`` mouse key to pan. Use the mouse ``scroll wheel`` to zoom in and out. It takes a while to render this page, please be patient. To start loading the visualization, press the ``Load`` button.dfsd
 
 .. raw:: html
 
-    <div id="viz-canvas">
-    </div>
+    <div>
+        <button id="viz-btn">Load</button>
+        <span id="viz-msg" style="color:red;visibility:hidden;">loading...</span>
+    </div>
+
+    <div id="viz-canvas"></div>