Skip to content

Commit cfe6cb8

Browse files
rvilarlrvilarl
authored
Merge pull request #1484 from ronyeh/compare-images
Easily compare images in the current/ and reference/ folders
2 parents 3e13629 + b369ee9 commit cfe6cb8

File tree

9 files changed

+910
-0
lines changed

9 files changed

+910
-0
lines changed

‎tools/compare/README.md‎

Whitespace-only changes.

‎tools/compare/compare.js‎

Lines changed: 628 additions & 0 deletions
Large diffs are not rendered by default.

‎tools/compare/index.html‎

Lines changed: 282 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,282 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="author" content="Ron B. Yeh" />
5+
<style>
6+
body {
7+
font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
8+
'Segoe UI Symbol';
9+
font-size: 20px;
10+
margin: 22px;
11+
color: #111;
12+
background-color: #f3faff;
13+
}
14+
15+
code {
16+
font-weight: bold;
17+
}
18+
19+
a {
20+
color: #04f;
21+
padding: 8px 10px;
22+
}
23+
24+
a:hover {
25+
color: #aef;
26+
background-color: #789;
27+
}
28+
29+
/* button at the top right */
30+
#help-button {
31+
font-weight: bold;
32+
text-decoration: none;
33+
position: fixed;
34+
top: 0;
35+
right: 0;
36+
padding: 8px 14px 16px 20px;
37+
border-bottom-left-radius: 8px;
38+
}
39+
40+
#help-text {
41+
background-color: #333;
42+
color: #ddd;
43+
padding: 20px;
44+
}
45+
46+
button {
47+
font-size: 18px;
48+
padding: 0.5em 1em;
49+
border: 1px solid #ccc;
50+
border-radius: 0.5em;
51+
background: #eee;
52+
cursor: pointer;
53+
}
54+
button:hover {
55+
background: #dff;
56+
}
57+
button:active {
58+
background: #6cc;
59+
}
60+
61+
.centered {
62+
display: flex;
63+
justify-content: center;
64+
}
65+
66+
.centered select {
67+
margin: 0;
68+
width: 45%;
69+
text-indent: 10px;
70+
font-size: 12px;
71+
font-family: ui-monospace, Menlo, Monaco, 'Droid Sans Mono', 'Courier New', monospace;
72+
overflow: auto;
73+
height: 180px;
74+
}
75+
76+
#currentImages {
77+
margin-right: 10px;
78+
}
79+
80+
#referenceImages {
81+
margin-left: 10px;
82+
}
83+
84+
#filter {
85+
width: 90%;
86+
padding: 12px 20px;
87+
margin: 0 0 10px 0;
88+
font-size: 16px;
89+
box-sizing: border-box;
90+
}
91+
92+
#images {
93+
margin-top: 20px;
94+
position: relative;
95+
overflow: visible;
96+
}
97+
98+
#images img {
99+
background-color: white;
100+
margin: 5px;
101+
padding: 6px;
102+
border: 1px solid #777;
103+
}
104+
105+
.label {
106+
background-color: #404040;
107+
padding: 6px 0;
108+
width: 45%;
109+
text-align: center;
110+
color: #eee;
111+
box-sizing: border-box;
112+
}
113+
114+
.label a {
115+
color: #6af;
116+
padding: 2px 20px;
117+
}
118+
119+
.label a:hover {
120+
color: #aef;
121+
background-color: #123;
122+
}
123+
124+
#labelCurrent {
125+
border-top: 8px solid #4bd;
126+
border-left: 2px solid #4bd;
127+
border-right: 2px solid #4bd;
128+
}
129+
130+
#labelReference {
131+
border-top: 8px solid #d4a;
132+
border-left: 2px solid #d4a;
133+
border-right: 2px solid #d4a;
134+
}
135+
136+
#drop-target-overlay {
137+
position: absolute;
138+
top: 0;
139+
left: 0;
140+
width: 100%;
141+
height: 100%;
142+
background-color: rgba(10, 10, 10, 0.35);
143+
z-index: 100;
144+
display: none;
145+
font-size: 120px;
146+
text-align: center;
147+
font-family: monospace;
148+
color: white;
149+
}
150+
151+
#drop-target-images {
152+
position: absolute;
153+
top: 0;
154+
left: 0;
155+
width: 100%;
156+
height: 40%;
157+
background-color: rgba(0, 100, 200, 0.3);
158+
display: flex;
159+
justify-content: center;
160+
align-items: center;
161+
box-sizing: border-box;
162+
border: 12px solid #44d;
163+
}
164+
165+
#drop-target-current {
166+
position: absolute;
167+
top: 40%;
168+
left: 0;
169+
width: 50%;
170+
height: 60%;
171+
background-color: rgba(90, 200, 80, 0.2);
172+
display: flex;
173+
justify-content: center;
174+
align-items: center;
175+
box-sizing: border-box;
176+
border: 12px solid #284;
177+
}
178+
179+
#drop-target-reference {
180+
position: absolute;
181+
top: 40%;
182+
left: 50%;
183+
width: 50%;
184+
height: 60%;
185+
background-color: rgba(200, 80, 90, 0.2);
186+
display: flex;
187+
justify-content: center;
188+
align-items: center;
189+
box-sizing: border-box;
190+
border: 12px solid #714;
191+
}
192+
</style>
193+
<script src="compare.js"></script>
194+
<script type="module">
195+
// Image Diff: https://github.com/mapbox/pixelmatch
196+
import pixelmatch from 'https://cdn.skypack.dev/[email protected]';
197+
document.addEventListener('DOMContentLoaded', () => {
198+
app(pixelmatch);
199+
});
200+
</script>
201+
</head>
202+
<body>
203+
<!-- OVERLAY -->
204+
<div id="drop-target-overlay">
205+
<div id="drop-target-images">images/</div>
206+
<div id="drop-target-current">current/</div>
207+
<div id="drop-target-reference">reference/</div>
208+
</div>
209+
<!-- HELP SCREEN -->
210+
<p id="help-text" style="display: none">
211+
<code>vexflow/build/images/</code> contains these folders:<br />
212+
&nbsp;&nbsp;&nbsp;&nbsp;<code>current/</code><br />
213+
&nbsp;&nbsp;&nbsp;&nbsp;<code>diff/</code><br />
214+
&nbsp;&nbsp;&nbsp;&nbsp;<code>reference/</code><br /><br />
215+
Use these commands to generate the necessary images:<br />
216+
&nbsp;&nbsp;&nbsp;&nbsp;<code>grunt reference</code><br />
217+
&nbsp;&nbsp;&nbsp;&nbsp;<code>grunt generate:current</code><br />
218+
&nbsp;&nbsp;&nbsp;&nbsp;<code>grunt generate:reference</code><br /><br />
219+
Shortcuts:<br />
220+
&nbsp;&nbsp;&nbsp;&nbsp;<code>CTRL + SHIFT + I</code> - select the <code>images/</code> folder. This folder needs
221+
to contain <code>current/</code> and <code>reference/</code> subfolders.<br />
222+
&nbsp;&nbsp;&nbsp;&nbsp;<code>CTRL + SHIFT + C</code> - select the <code>current/</code> folder. This can be any
223+
folder, and does not need to be named "current". This allows you to choose arbitrary folders to compare (e.g.,
224+
from two different repos).<br />
225+
&nbsp;&nbsp;&nbsp;&nbsp;<code>CTRL + SHIFT + R</code> - select the <code>reference/</code> folder. This can be any
226+
folder, and does not need to be named "reference". This allows you to choose arbitrary folders to compare (e.g.,
227+
from two different repos).<br /><br />
228+
229+
&nbsp;&nbsp;&nbsp;&nbsp;<code>1</code> - Show images side-by-side<br />
230+
&nbsp;&nbsp;&nbsp;&nbsp;<code>2</code> - Flip between current / reference image. Use LEFT | RIGHT arrow keys.<br />
231+
&nbsp;&nbsp;&nbsp;&nbsp;<code>3</code> - Stack / Overlay the current / reference images on top of each other. The
232+
top image is translucent with 50% opacity. Use LEFT | RIGHT arrow keys to change the order.<br />
233+
&nbsp;&nbsp;&nbsp;&nbsp;<code>4</code> - Show an image diff. Red regions highlight the differing pixels. Use LEFT
234+
| RIGHT arrow keys to adjust the threshold for the diff.<br />
235+
<br /><br />
236+
<button onclick="hideHelpText(); return false;">AWESOME! I'M DONE READING</button>
237+
</p>
238+
<a id="help-button" href="#" onclick="showHelpText(); return false;">???</a>
239+
<!-- INFORMATION -->
240+
<p>
241+
Click to open:
242+
<a id="chooseImagesFolder" href="#"><code>vexflow/build/images/</code></a
243+
><br />If a "Let site view files?" pop-up appears, choose <b>View Files</b>.
244+
</p>
245+
<p>
246+
You can also drag &amp; drop the <code>vexflow/build/images/</code> or <code>current/</code> or
247+
<code>reference/</code> folders onto this page.
248+
</p>
249+
<p>
250+
Number Keys: <b>1, 2, 3, 4</b> - Change view modes (side-by-side | alternate | stacked | diff).<br />
251+
Arrow Keys: <b>UP / DOWN</b> - Select the previous / next image in the list. <b>LEFT / RIGHT</b> - Flip between
252+
current / reference images, in alternating or stacked view modes.
253+
</p>
254+
<!-- SEARCH BOX -->
255+
<div class="centered">
256+
<input
257+
id="filter"
258+
type="text"
259+
placeholder="Search terms separated by spaces..."
260+
onkeyup="filterResults()"
261+
/><br />
262+
</div>
263+
<!-- LIST OF IMAGES -->
264+
<div class="centered">
265+
<div id="labelCurrent" class="label">
266+
<a id="chooseCurrentFolder" href="#">CURRENT</a>
267+
</div>
268+
<div id="labelReference" class="label">
269+
<a id="chooseReferenceFolder" href="#">REFERENCE</a>
270+
</div>
271+
</div>
272+
<div class="centered">
273+
<select id="selectBoxCurrent" size="5" onchange="if (this.selectedIndex > -1) selectedCurrentImage();"></select>
274+
<select
275+
id="selectBoxReference"
276+
size="5"
277+
onchange="if (this.selectedIndex > -1) selectedReferenceImage();"
278+
></select>
279+
</div>
280+
<div id="images" class="centered"></div>
281+
</body>
282+
</html>

‎tools/compare/test/current/Image1.png‎

12.6 KB
Loading

‎tools/compare/test/current/Image2.png‎

13.9 KB
Loading

‎tools/compare/test/current/Image3.png‎

18.8 KB
Loading

‎tools/compare/test/reference/Image1.png‎

34.1 KB
Loading

‎tools/compare/test/reference/Image2.png‎

12.7 KB
Loading

‎tools/compare/test/reference/Image3.png‎

15 KB
Loading

0 commit comments

Comments
 (0)