[GCI] Added Lightning Bolt for WASM accelerated modules (#1365)

* wasmSuccess * modules use wasmSuccess * modules use wasmSuccess * add the tooltip
publiclab · Dec 19, 2019 · 6476b8d · 6476b8d
1 parent b7d5a98
commit 6476b8d
Show file tree

Hide file tree

Showing 41 changed files with 119 additions and 173 deletions.
diff --git a/examples/demo.css b/examples/demo.css
@@ -296,19 +296,19 @@ a.name-header{
   cursor: default;
 }
 
-.dimension-tooltip:hover{
+.general-tooltip:hover{
   text-decoration: none;
 }
 
-.dimension-tooltip:focus{
+.general-tooltip:focus{
   outline: none;
 }
 
-.dimension-tooltip:focus-within{
+.general-tooltip:focus-within{
   outline: none;
 }
 
-.dimension-tooltip{
+.general-tooltip{
   position: relative;
   bottom: 7px;
   font-size: 16px;

diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js
@@ -28,7 +28,14 @@ function DefaultHtmlStepUi(_sequencer, options) {
       <div class="container-fluid step-container">\
           <div class="panel panel-default">\
             <div class="panel-heading">\
-              <div class="trash-container pull-right"><button type="button" class="btn btn-link ' + step.name + ' dimension-tooltip" data-toggle="tooltip" data-html="true" title="" data-original-title=""><i class="fa fa-info-circle"></i></button></div>\
+              <div class="trash-container pull-right">\
+                <a type="button" target="_blank" href="https://developer.mozilla.org/en-US/docs/WebAssembly" style="display: none;" class="btn btn-link general-tooltip wasm-tooltip" data-toggle="tooltip" data-html="true" data-original-title="<div style=\'text-align: center\'><p>This step is Web Assembly accelerated. Click to Read More</div>">\
+                  <i class="fa fa-bolt"></i>\
+                </a>\
+                <button type="button" class="btn btn-link ' + step.name + ' general-tooltip dimension-tooltip" data-toggle="tooltip" data-html="true" data-original-title="">\
+                  <i class="fa fa-info-circle"></i>\
+                </button>\
+              </div>\
               <h3 class="panel-title">' +
                 '<span class="toggle mouse">' + step.name + ' <span class="caret toggleIcon rotated"></span>\
                  <span class="load-spin pull-right" style="display:none;padding:1px 8px;"><i class="fa fa-circle-o-notch fa-spin"></i></span>\
@@ -335,7 +342,15 @@ function DefaultHtmlStepUi(_sequencer, options) {
       _sequencer.getImageDimensions(step.imgElement.src, function (dim) {
         step.ui.querySelector('.' + step.name).attributes['data-original-title'].value = `<div style="text-align: center"><p>Image Width: ${dim.width}<br>Image Height: ${dim.height}</br></div>`;
       });
-    });
+    })
+
+    // Handle the wasm bolt display
+
+    if (step.useWasm) {
+      if (step.wasmSuccess) $step('.wasm-tooltip').fadeIn();
+      else $step('.wasm-tooltip').fadeOut();
+    }
+    else $step('.wasm-tooltip').fadeOut();
   }
 
   function imageHover(step){

diff --git a/src/Run.js b/src/Run.js
@@ -45,6 +45,8 @@ function Run(ref, json_q, callback, ind, progressObj) {
 
           // This output is accessible by UI
           ref.steps[i].options.step.output = ref.steps[i].output.src;
+          ref.steps[i].options.step.wasmSuccess = ref.steps[i].output.wasmSuccess || false;
+          ref.steps[i].options.step.useWasm = ref.steps[i].output.useWasm || false;
 
           // Tell UI that step has been drawn.
           ref.steps[i].UI.onComplete(ref.steps[i].options.step);

diff --git a/src/modules/AddQR/Module.js b/src/modules/AddQR/Module.js
@@ -25,9 +25,11 @@ module.exports = function AddQR(options, UI) {
         }
         require('./QR')(options, pixels, oldPixels, generateOutput);
       }
-      function output(image, datauri, mimetype) {
-        step.output = { src: datauri, format: mimetype };
+
+      function output(image, datauri, mimetype, wasmSuccess) {
+        step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
       }
+
       return require('../_nomodule/PixelManipulation.js')(input, {
         output: output,
         ui: options.step.ui,
@@ -40,7 +42,6 @@ module.exports = function AddQR(options, UI) {
         useWasm:options.useWasm
       });
     });
-
   }
 
   return {

diff --git a/src/modules/Average/Module.js b/src/modules/Average/Module.js
@@ -47,13 +47,8 @@ module.exports = function Average(options, UI) {
       return pixels;
     }
 
-    function output(image, datauri, mimetype) {
-
-      // This output is accessible by Image Sequencer
-      step.output = {
-        src: datauri,
-        format: mimetype
-      };
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
     }
 
     return require('../_nomodule/PixelManipulation.js')(input, {

diff --git a/src/modules/Blend/Module.js b/src/modules/Blend/Module.js
@@ -47,11 +47,8 @@ module.exports = function Dynamic(options, UI, util) {
         );
       }
 
-      function output(image, datauri, mimetype) {
-
-        // This output is accessible by Image Sequencer
-        step.output = { src: datauri, format: mimetype };
-
+      function output(image, datauri, mimetype, wasmSuccess) {
+        step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
       }
 
       // run PixelManipulatin on second image's pixels

diff --git a/src/modules/BlobAnalysis/Module.js b/src/modules/BlobAnalysis/Module.js
@@ -18,9 +18,8 @@ module.exports = function BlobAnalysis(options, UI){
       return pixels;
     }
 
-    function output(image, datauri, mimetype){
-
-      step.output = { src: datauri, format: mimetype};
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
     }
 
     return require('../_nomodule/PixelManipulation.js')(input, {

diff --git a/src/modules/Blur/Module.js b/src/modules/Blur/Module.js
@@ -20,11 +20,8 @@ module.exports = function Blur(options, UI) {
       return pixels;
     }
 
-    function output(image, datauri, mimetype) {
-
-      // This output is accessible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
     }
 
     return require('../_nomodule/PixelManipulation.js')(input, {

diff --git a/src/modules/Brightness/Module.js b/src/modules/Brightness/Module.js
@@ -31,11 +31,8 @@ module.exports = function Brightness(options, UI) {
       return [r, g, b, a];
     }
 
-    function output(image, datauri, mimetype) {
-
-      // This output is accessible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
     }
 
     return require('../_nomodule/PixelManipulation.js')(input, {

diff --git a/src/modules/CanvasResize/Module.js b/src/modules/CanvasResize/Module.js
@@ -35,11 +35,8 @@ module.exports = function canvasResize(options, UI) {
       return newPixels;
     }
 
-    function output(image, datauri, mimetype) {
-
-      // This output is accessible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
     }
 
     return require('../_nomodule/PixelManipulation.js')(input, {

diff --git a/src/modules/Channel/Module.js b/src/modules/Channel/Module.js
@@ -22,11 +22,8 @@ module.exports = function Channel(options, UI) {
       if (options.channel === 'blue') return [0, 0, b, a];
     }
 
-    function output(image, datauri, mimetype) {
-
-      // This output is accesible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
     }
 
     return require('../_nomodule/PixelManipulation.js')(input, {

diff --git a/src/modules/ColorTemperature/Module.js b/src/modules/ColorTemperature/Module.js
@@ -52,10 +52,8 @@ module.exports = function ColorTemperature(options, UI) {
       return pixels;
     }
 
-    function output(image, datauri, mimetype) {
-
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
     }
 
     return require('../_nomodule/PixelManipulation.js')(input, {

diff --git a/src/modules/Colormap/Module.js b/src/modules/Colormap/Module.js
@@ -16,12 +16,10 @@ module.exports = function Colormap(options, UI) {
       return [res[0], res[1], res[2], 255];
     }
 
-    function output(image, datauri, mimetype) {
-
-      // This output is accessible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
     }
+
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,
       ui: options.step.ui,

diff --git a/src/modules/Contrast/Module.js b/src/modules/Contrast/Module.js
@@ -20,11 +20,8 @@ module.exports = function Contrast(options, UI) {
       return pixels;
     }
 
-    function output(image, datauri, mimetype) {
-
-      // This output is accessible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
     }
 
     return require('../_nomodule/PixelManipulation.js')(input, {

diff --git a/src/modules/Convolution/Module.js b/src/modules/Convolution/Module.js
@@ -19,10 +19,8 @@ module.exports = function Convolution(options, UI) {
       return pixels;
     }
 
-    function output(image, datauri, mimetype) {
-
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
     }
 
     return require('../_nomodule/PixelManipulation.js')(input, {

diff --git a/src/modules/DecodeQr/Module.js b/src/modules/DecodeQr/Module.js
@@ -28,13 +28,10 @@ module.exports = function DoNothing(options, UI) {
       options.step.qrval = (decoded) ? decoded.data : 'undefined';
     });
 
-    function output(image, datauri, mimetype) {
-      // This output is accessible by Image Sequencer
-      step.output = {
-        src: datauri,
-        format: mimetype
-      };
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
     }
+
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,
       ui: options.step.ui,

diff --git a/src/modules/Dither/Module.js b/src/modules/Dither/Module.js
@@ -15,10 +15,8 @@ module.exports = function Dither(options, UI) {
       return pixels;
     }
 
-    function output(image, datauri, mimetype) {
-      // This output is accessible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
     }
 
     return require('../_nomodule/PixelManipulation.js')(input, {

diff --git a/src/modules/DrawRectangle/Module.js b/src/modules/DrawRectangle/Module.js
@@ -19,10 +19,8 @@ module.exports = function DrawRectangle(options, UI) {
       return pixels;
     }
 
-    function output(image, datauri, mimetype) {
-
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
     }
 
     return require('../_nomodule/PixelManipulation.js')(input, {

diff --git a/src/modules/Dynamic/Module.js b/src/modules/Dynamic/Module.js
@@ -71,12 +71,10 @@ module.exports = function Dynamic(options, UI) {
       }
     }
 
-    function output(image, datauri, mimetype) {
-
-      // This output is accessible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
     }
+
     return require('../_nomodule/PixelManipulation.js')(input, {
       output: output,
       ui: options.step.ui,

diff --git a/src/modules/EdgeDetect/Module.js b/src/modules/EdgeDetect/Module.js
@@ -38,8 +38,8 @@ module.exports = function edgeDetect(options, UI) {
             return require('./EdgeUtils')(blurPixels, options.highThresholdRatio, options.lowThresholdRatio, options.hysteresis);
           }
 
-          function output(image, datauri, mimetype) {
-            step.output = { src: datauri, format: mimetype };
+          function output(image, datauri, mimetype, wasmSuccess) {
+            step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
           }
 
           return require('../_nomodule/PixelManipulation.js')(input, {

diff --git a/src/modules/Exposure/Module.js b/src/modules/Exposure/Module.js
@@ -24,11 +24,8 @@ module.exports = function Exposure(options, UI) {
       return [r, g, b, a];
     }
 
-    function output(image, datauri, mimetype) {
-
-      // This output is accessible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
     }
 
     return require('../_nomodule/PixelManipulation.js')(input, {

diff --git a/src/modules/FlipImage/Module.js b/src/modules/FlipImage/Module.js
@@ -25,8 +25,9 @@ module.exports = function FlipImage(options, UI) {
         }
         return require('./flipImage')(oldPixels, pixels, options.Axis);
       }
-      function output(image, datauri, mimetype) {
-        step.output = { src: datauri, format: mimetype };
+
+      function output(image, datauri, mimetype, wasmSuccess) {
+        step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
       }
 
       return require('../_nomodule/PixelManipulation.js')(input, {

diff --git a/src/modules/GammaCorrection/Module.js b/src/modules/GammaCorrection/Module.js
@@ -21,10 +21,8 @@ module.exports = function Gamma(options, UI) {
       return [r, g, b, a];
     }
 
-    function output(image, datauri, mimetype) {
-
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
     }
 
     return require('../_nomodule/PixelManipulation.js')(input, {

diff --git a/src/modules/Gradient/Module.js b/src/modules/Gradient/Module.js
@@ -44,11 +44,8 @@ module.exports = function Invert(options, UI) {
       });
     });
 
-    function output(image, datauri, mimetype) {
-
-      // This output is accessible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
     }
   }
 

diff --git a/src/modules/GridOverlay/Module.js b/src/modules/GridOverlay/Module.js
@@ -15,11 +15,8 @@ module.exports = function GridOverlay(options, UI) {
       return pixels;
     }
 
-    function output(image, datauri, mimetype) {
-
-      // This output is accesible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
     }
 
     return require('../_nomodule/PixelManipulation.js')(input, {

diff --git a/src/modules/Histogram/Module.js b/src/modules/Histogram/Module.js
@@ -63,11 +63,8 @@ module.exports = function Channel(options, UI) {
       return pixels;
     }
 
-    function output(image, datauri, mimetype) {
-
-      // This output is accesible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
     }
 
     return require('../_nomodule/PixelManipulation.js')(input, {