Add diff tool to screenshots.py

Adds a diff tool to the student and grader views for the HTML generated by screenshots.py.

How Tolerance Works

Suppose p1 and p2 represent the actual and expected values of some pixel (respectively).

Then, defining Δr = p1.r - p2.r, Δg = p1.g - p2.g, Δb = p1.g - p2.g, Δa = p1.a - p2.a, if Δr² + Δg² + Δb² + Δa² ≥ tolerance, then the two pixels are considered different.

Adjusting Tolerance

Tolerance can be adjusted through the HTML page's URL. For example, if viewing file:///tmp/mozilla_selenite0/Screenshots-3-2.html, navigate to file:///tmp/mozilla_selenite0/Screenshots-3-2.html?tolerance=256 for a version with tolerance=256.

Screenshots

To-do

☑ Test locally

☑ Test with Ed

Example Diffs (somewhat buggy solution)

• Example diffs with a solution that incorrectly calculates the bounding box of a circle. (default tolerance = 64)