Merge pull request #618 from Kitware/fix-progress

Fix progress
Kitware · Feb 28, 2018 · f357e2e · f357e2e
2 parents 1a4b6a5 + 91a67c5
commit f357e2e
Show file tree

Hide file tree

Showing 5 changed files with 79 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, {

diff --git a/Sources/macro.js b/Sources/macro.js
@@ -76,6 +76,38 @@ export function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
+// ----------------------------------------------------------------------------
+// Convert byte size into a well formatted string
+// ----------------------------------------------------------------------------
+
+export function formatBytesToProperUnit(size, precision = 2, chunkSize = 1000) {
+  const units = ['TB', 'GB', 'MB', 'KB'];
+  let value = Number(size);
+  let currentUnit = 'B';
+  while (value > chunkSize) {
+    value /= chunkSize;
+    currentUnit = units.pop();
+  }
+  return `${value.toFixed(precision)} ${currentUnit}`;
+}
+// ----------------------------------------------------------------------------
+// Convert thousand number with proper seperator
+// ----------------------------------------------------------------------------
+
+export function formatNumbersWithThousandSeparator(n, separator = ' ') {
+  const sections = [];
+  let size = n;
+  while (size > 1000) {
+    sections.push(`000${size % 1000}`.slice(-3));
+    size = Math.floor(size / 1000);
+  }
+  if (size > 0) {
+    sections.push(size);
+  }
+  sections.reverse();
+  return sections.join(separator);
+}
+
 // ----------------------------------------------------------------------------
 // Array helper
 // ----------------------------------------------------------------------------
@@ -1313,4 +1345,6 @@ export default {
   proxy,
   proxyPropertyMapping,
   proxyPropertyState,
+  formatBytesToProperUnit,
+  formatNumbersWithThousandSeparator,
 };