Display width and height of image at each step (#1309)

publiclab · Nov 28, 2019 · f1c94fd · f1c94fd
1 parent 8962683
commit f1c94fd
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 3 deletions.
diff --git a/examples/demo.css b/examples/demo.css
@@ -258,7 +258,8 @@ a.name-header{
 }
 
 .trash-container button.btn-xs {
-  margin-top: -5px !important;
+  position: relative;
+  bottom: 7px;
 }
 
 .toggleIcon {
@@ -284,3 +285,22 @@ a.name-header{
 .toggle {
   cursor: default;
 }
+
+.dimension-tooltip:hover{
+  text-decoration: none;  
+}
+
+.dimension-tooltip:focus{
+  outline: none;
+}
+
+.dimension-tooltip:focus-within{
+  outline: none;
+}
+
+.dimension-tooltip{
+  position: relative;
+  bottom: 7px;
+  font-size: 16px;
+  color: #444;
+}
diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js
@@ -31,7 +31,7 @@ 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"></div>\
+              <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>\
               <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>\
@@ -59,7 +59,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
       </div>';
 
     var tools =
-    '<div class="trash">\
+    '<div class="trash" style="display: inline-block">\
       <button confirm="Are you sure?" class="remove btn btn-default btn-xs">\
         <i class="fa fa-trash"></i>\
       </button>\
@@ -319,6 +319,13 @@ function DefaultHtmlStepUi(_sequencer, options) {
             .val(step[i]);
       }
     }
+
+    $(function () {
+      $('[data-toggle="tooltip"]').tooltip();
+      _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>`;
+      });
+    });
   }
 
   function imageHover(step){

diff --git a/src/ImageSequencer.js b/src/ImageSequencer.js
@@ -329,6 +329,7 @@ ImageSequencer = function ImageSequencer(options) {
     log: log,
     objTypeOf: objTypeOf,
     copy: copy,
+    getImageDimensions: require('./util/getImageDimensions'),
 
     setInputStep: require('./ui/SetInputStep')(sequencer)
   };

diff --git a/src/util/getImageDimensions.js b/src/util/getImageDimensions.js
@@ -0,0 +1,10 @@
+module.exports = function getImageDimensions(img, cb) {
+  var getPixels = require('get-pixels');
+  var dimensions = { width: '', height: '' };
+  getPixels(img, function(err, pixels) {
+    dimensions.width = pixels.shape[0];
+    dimensions.height = pixels.shape[1];
+    cb(dimensions);
+  });
+};
+