doc(Example): Improve progress handler

Kitware · Feb 28, 2018 · 91a67c5 · 91a67c5
1 parent 541fed7
commit 91a67c5
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 16 deletions.
diff --git a/Examples/Applications/GeometryViewer/index.js b/Examples/Applications/GeometryViewer/index.js
@@ -3,6 +3,7 @@
 
 import 'vtk.js/Sources/favicon';
 
+import macro from 'vtk.js/Sources/macro';
 import HttpDataAccessHelper from 'vtk.js/Sources/IO/Core/DataAccessHelper/HttpDataAccessHelper';
 import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
 import vtkColorMaps from 'vtk.js/Sources/Rendering/Core/ColorTransferFunction/ColorMaps';
@@ -402,10 +403,16 @@ export function load(container, options) {
     container.appendChild(progressContainer);
 
     const progressCallback = (progressEvent) => {
-      const percent = Math.floor(
-        100 * progressEvent.loaded / progressEvent.total
-      );
-      progressContainer.innerHTML = `Loading ${percent}%`;
+      if (progressEvent.lengthComputable) {
+        const percent = Math.floor(
+          100 * progressEvent.loaded / progressEvent.total
+        );
+        progressContainer.innerHTML = `Loading ${percent}%`;
+      } else {
+        progressContainer.innerHTML = macro.formatBytesToProperUnit(
+          progressEvent.loaded
+        );
+      }
     };
 
     createViewer(container);

diff --git a/Examples/Applications/OBJViewer/index.js b/Examples/Applications/OBJViewer/index.js
@@ -4,6 +4,8 @@
 import 'vtk.js/Sources/favicon';
 import JSZip from 'jszip';
 
+import macro from 'vtk.js/Sources/macro';
+
 import HttpDataAccessHelper from 'vtk.js/Sources/IO/Core/DataAccessHelper/HttpDataAccessHelper';
 import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
 import vtkURLExtract from 'vtk.js/Sources/Common/Core/URLExtract';
@@ -164,10 +166,16 @@ export function load(container, options) {
     container.appendChild(progressContainer);
 
     const progressCallback = (progressEvent) => {
-      const percent = Math.floor(
-        100 * progressEvent.loaded / progressEvent.total
-      );
-      progressContainer.innerHTML = `Loading ${percent}%`;
+      if (progressEvent.lengthComputable) {
+        const percent = Math.floor(
+          100 * progressEvent.loaded / progressEvent.total
+        );
+        progressContainer.innerHTML = `Loading ${percent}%`;
+      } else {
+        progressContainer.innerHTML = macro.formatBytesToProperUnit(
+          progressEvent.loaded
+        );
+      }
     };
 
     HttpDataAccessHelper.fetchBinary(options.fileURL, {

diff --git a/Examples/Applications/SceneExplorer/index.js b/Examples/Applications/SceneExplorer/index.js
@@ -3,6 +3,7 @@
 
 import 'vtk.js/Sources/favicon';
 
+import macro from 'vtk.js/Sources/macro';
 import DataAccessHelper from 'vtk.js/Sources/IO/Core/DataAccessHelper';
 import HttpDataAccessHelper from 'vtk.js/Sources/IO/Core/DataAccessHelper/HttpDataAccessHelper';
 import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
@@ -77,10 +78,16 @@ export function load(container, options) {
     container.appendChild(progressContainer);
 
     const progressCallback = (progressEvent) => {
-      const percent = Math.floor(
-        100 * progressEvent.loaded / progressEvent.total
-      );
-      progressContainer.innerHTML = `Loading ${percent}%`;
+      if (progressEvent.lengthComputable) {
+        const percent = Math.floor(
+          100 * progressEvent.loaded / progressEvent.total
+        );
+        progressContainer.innerHTML = `Loading ${percent}%`;
+      } else {
+        progressContainer.innerHTML = macro.formatBytesToProperUnit(
+          progressEvent.loaded
+        );
+      }
     };
 
     HttpDataAccessHelper.fetchBinary(options.fileURL, {

diff --git a/Examples/Applications/VolumeViewer/index.js b/Examples/Applications/VolumeViewer/index.js
@@ -3,6 +3,7 @@
 
 import 'vtk.js/Sources/favicon';
 
+import macro from 'vtk.js/Sources/macro';
 import HttpDataAccessHelper from 'vtk.js/Sources/IO/Core/DataAccessHelper/HttpDataAccessHelper';
 import vtkBoundingBox from 'vtk.js/Sources/Common/DataModel/BoundingBox';
 import vtkColorTransferFunction from 'vtk.js/Sources/Rendering/Core/ColorTransferFunction';
@@ -191,10 +192,16 @@ export function load(container, options) {
     container.appendChild(progressContainer);
 
     const progressCallback = (progressEvent) => {
-      const percent = Math.floor(
-        100 * progressEvent.loaded / progressEvent.total
-      );
-      progressContainer.innerHTML = `Loading ${percent}%`;
+      if (progressEvent.lengthComputable) {
+        const percent = Math.floor(
+          100 * progressEvent.loaded / progressEvent.total
+        );
+        progressContainer.innerHTML = `Loading ${percent}%`;
+      } else {
+        progressContainer.innerHTML = macro.formatBytesToProperUnit(
+          progressEvent.loaded
+        );
+      }
     };
 
     HttpDataAccessHelper.fetchBinary(options.fileURL, {