Add callout to install ImageMagick

Author: danvk

webdiff/app.py

@@ -140,17 +140,27 @@ def get_image(side, path):
 def get_pdiff(idx):
     idx = int(idx)
     pair = DIFF[idx]
-    _, pdiff_image = util.generate_pdiff_image(pair['a_path'], pair['b_path'])
-    dilated_image = util.generate_dilated_pdiff_image(pdiff_image)
+    try:
+        _, pdiff_image = util.generate_pdiff_image(pair['a_path'], pair['b_path'])
+        dilated_image = util.generate_dilated_pdiff_image(pdiff_image)
+    except util.ImageMagickNotAvailableError:
+        return 'ImageMagick is not available', 501
+    except util.ImageMagickError as e:
+        return 'ImageMagick error %s' % e, 501
     return send_file(dilated_image)
 
 
 @app.route("/pdiffbbox/<int:idx>")
 def get_pdiff_bbox(idx):
     idx = int(idx)
     pair = DIFF[idx]
-    _, pdiff_image = util.generate_pdiff_image(pair['a_path'], pair['b_path'])
-    bbox = util.get_pdiff_bbox(pdiff_image)
+    try:
+        _, pdiff_image = util.generate_pdiff_image(pair['a_path'], pair['b_path'])
+        bbox = util.get_pdiff_bbox(pdiff_image)
+    except util.ImageMagickNotAvailableError:
+        return 'ImageMagick is not available', 501
+    except util.ImageMagickError as e:
+        return 'ImageMagick error %s' % e, 501
     return jsonify(bbox)
 
 
@@ -165,6 +175,7 @@ def file_diff(idx):
     idx = int(idx)
     return render_template('file_diff.html',
                            idx=idx,
+                           has_magick=util.is_imagemagick_available(),
                            pairs=DIFF)
 
 

webdiff/static/css/style.css

@@ -154,3 +154,9 @@ table .side-a, table .side-b {
 .diff-box-disabled {
   color: gray;
 }
+.pdiff-options {
+  margin-left: 10px;
+}
+.magick {
+  font-style: italic;
+}

webdiff/static/js/image.jsx

@@ -89,33 +89,44 @@ var ImageDiff = React.createClass({
     });
     var diffBoxEnabled = isSameSizeImagePair(pair);
     var boxClasses = diffBoxEnabled ? '' : 'diff-box-disabled';
+    var boxStyles = { display: HAS_IMAGE_MAGICK ? '' : 'none' };
+    var imageMagickCallout = !HAS_IMAGE_MAGICK ? (
+        <span className="magick">Install{' '}
+        <a href="http://www.imagemagick.org/script/binary-releases.php">ImageMagick</a>{' '}
+        to see perceptual diffs</span>
+    ) : null;
 
     return <div>
       <div className="image-diff-controls">
         <ImageDiffModeSelector {...this.props} />
         <input type="checkbox" id="shrink-to-fit" checked={this.state.shrinkToFit} onChange={this.toggleShrinkToFit} />
         <label htmlFor="shrink-to-fit"> Shrink to fit</label>
         &nbsp;
-        <span className={boxClasses}>
-          Perceptual Diff:
-          <input type="radio" name="pdiff-mode"
-                 id="pdiff-off"
-                 checked={this.props.pdiffMode == PDIFF_MODE.OFF}
-                 disabled={!diffBoxEnabled}
-                 onChange={() => this.setPdiffMode(PDIFF_MODE.OFF)} />
-          <label htmlFor="pdiff-off"> None</label>
-          <input type="radio" name="pdiff-mode"
-                 id="pdiff-bbox"
-                 checked={this.props.pdiffMode == PDIFF_MODE.BBOX}
-                 disabled={!diffBoxEnabled}
-                 onChange={() => this.setPdiffMode(PDIFF_MODE.BBOX)} />
-          <label htmlFor="pdiff-bbox"> Box</label>
-          <input type="radio" name="pdiff-mode"
-                 id="pdiff-pixels"
-                 checked={this.props.pdiffMode == PDIFF_MODE.PIXELS}
-                 disabled={!diffBoxEnabled}
-                 onChange={() => this.setPdiffMode(PDIFF_MODE.PIXELS)} />
-          <label htmlFor="pdiff-pixels"> Differing Pixels</label>
+        <span className="pdiff-options">
+          <span className={boxClasses} style={boxStyles}>
+            Perceptual Diff:&nbsp;
+            <input type="radio" name="pdiff-mode"
+                   id="pdiff-off"
+                   checked={this.props.pdiffMode == PDIFF_MODE.OFF}
+                   disabled={!diffBoxEnabled}
+                   onChange={() => this.setPdiffMode(PDIFF_MODE.OFF)} />
+            <label htmlFor="pdiff-off"> None</label>
+            &nbsp;
+            <input type="radio" name="pdiff-mode"
+                   id="pdiff-bbox"
+                   checked={this.props.pdiffMode == PDIFF_MODE.BBOX}
+                   disabled={!diffBoxEnabled}
+                   onChange={() => this.setPdiffMode(PDIFF_MODE.BBOX)} />
+            <label htmlFor="pdiff-bbox"> Box</label>
+            &nbsp;
+            <input type="radio" name="pdiff-mode"
+                   id="pdiff-pixels"
+                   checked={this.props.pdiffMode == PDIFF_MODE.PIXELS}
+                   disabled={!diffBoxEnabled}
+                   onChange={() => this.setPdiffMode(PDIFF_MODE.PIXELS)} />
+            <label htmlFor="pdiff-pixels"> Differing Pixels</label>
+          </span>
+          {imageMagickCallout}
         </span>
       </div>
       <div className={'image-diff ' + mode}>

webdiff/templates/file_diff.html

@@ -14,6 +14,7 @@
 <script>
 var pairs = {{pairs|tojson}};
 var initialIdx = {{idx|tojson}};
+var HAS_IMAGE_MAGICK = {{has_magick|tojson}};
 </script>
 
 <script type="text/jsx;harmony=true" src="/static/js/util.js"></script>

webdiff/util.py

@@ -121,6 +121,8 @@ def _annotate_file_pair(d, a_dir, b_dir):
                 d['are_same_pixels'], _ = generate_pdiff_image(a_path, b_path)
             except ImageMagickError:
                 d['are_same_pixels'] = False
+            except ImageMagickNotAvailableError:
+                pass
 
     if a_path and b_path:
         d['no_changes'] = _are_files_identical(a_path, b_path)
@@ -260,6 +262,7 @@ def diff_for_args(args):
         return [a_dir, b_dir] + [find_diff(a_dir, b_dir)]
 
 
+@memoize
 def is_imagemagick_available():
     try:
         # this swallows stdout/stderr
@@ -307,6 +310,8 @@ def generate_pdiff_image(before_path, after_path):
 @memoize
 def generate_dilated_pdiff_image(diff_path):
     '''Given a pdiff image, dilate it to highlight small differences.'''
+    if not is_imagemagick_available():
+        raise ImageMagickNotAvailableError()
 
     # Dilate the diff image (to highlight small differences) and make it red.
     _, diff_dilate_path = tempfile.mkstemp(suffix='.png')
@@ -326,6 +331,9 @@ def generate_dilated_pdiff_image(diff_path):
 @memoize
 def get_pdiff_bbox(diff_path):
     '''Returns {top,left,width,height} for the content of a pdiff.'''
+    if not is_imagemagick_available():
+        raise ImageMagickNotAvailableError()
+
     out = subprocess.check_output(['identify', '-format', '%@', diff_path])
     # This looks like "26x94+0+830"
     m = re.match(r'^(\d+)x(\d+)\+(\d+)\+(\d+)', out)