Google Git
Sign in
gerrit / plugins / image-diff / 86aa7ec3b6dfe0af31213e60d5a213aa94b108d7
commit86aa7ec3b6dfe0af31213e60d5a213aa94b108d7[log] [tgz]
authorBen Rohlfs <brohlfs@google.com>Tue Mar 19 11:50:42 2019 +0000
committerBen Rohlfs <brohlfs@google.com>Tue Mar 19 11:50:42 2019 +0000
treeebad6b5e8b96e3b783ad294b0d8e7f2a30c0cc79
parent5fd94f1d9e2cffef675f36dcca4fc504b15c55b4 [diff]
Revert "Fix typo in "Gerrit-Module""

This reverts commit 5fd94f1d9e2cffef675f36dcca4fc504b15c55b4.

Reason for revert: Became obsolete, because Change 205530 is also reverted. 

Change-Id: I1beaedd01f7cf68c547de86e10fb892333ff0a4b
1 file changed
tree: ebad6b5e8b96e3b783ad294b0d8e7f2a30c0cc79
  1. assets/
  2. gr-image-diff-tool/
  3. gr-opacity-diff-mode/
  4. gr-resemble-diff-mode/
  5. java/
  6. test/
  7. .gitignore
  8. BUILD
  9. LICENSE
  10. package.json
  11. plugin.html
  12. README.md
  13. yarn.lock
README.md

Image Diff

A plugin that provides a rich image diffing experience in PolyGerrit. Currently, the plugin features two modes: Highlight Mode and Onion Skin.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

Yarn - Node package manager

Installing

Use Homebrew to install yarn on macOS:

brew install yarn

Reference here for instruction on how to install on other systems.

Clone the repo and run

yarn install

to install the dependencies.

Highlight Mode

Highlight example

This mode uses the Resemble.JS (1.2.1) library in its development The following features are included in this mode:

  • Percentage of difference between the images
  • Ability to ignore color in the comparison
  • Ability to make the diff color more discernible
  • Change the diff color
  • View the diff in full screen

Onion Skin

Opacity example

Onion Skin mode is a great way for users to notice changes in the images that might be overlooked when you look at them side by side. By overlaying the new image on top of the old image, the users can change the opacity to see the transition that were made.

The following features are included in this mode:

  • Scale the new image to the same size as the old image
  • Changing the opacity of the top image

Testing

This plugin uses polymer-cli to test.

Inside your image-diff repo, run polymer serve to start a local web server and open localhost:8080/test to view your tests. See here for more info.

Development

Reference here on how to set up your Gerrit testsite and here for PolyGerrit plugin development.

Authors