GSRunner: Add modal comparison

Click on a dump to open.
Left/right arrow keys switch between dumps.
Space bar toggles between before/after.
Escape closes.
This commit is contained in:
Stenzek 2023-07-22 01:38:56 +10:00 committed by refractionpcsx2
parent 3991ff5d3a
commit 1929b20a6c
3 changed files with 235 additions and 3 deletions

View File

@ -0,0 +1,97 @@
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
.modal-content {
position: relative;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.item img {
cursor: pointer;
}
#compareTitle {
color: white;
font-size: 20px;
font-family: sans-serif;
margin-bottom: 10px;
}
#compareCaption {
color: white;
font-family: sans-serif;
}
#compareState {
display: block;
position: absolute;
right: 0;
top: 0;
color: red;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
}
#compareImage {
display: block;
margin: 0 auto;
width: 100%;
height: auto;
}

111
pcsx2-gsrunner/comparer.js Normal file
View File

@ -0,0 +1,111 @@
/* Worst script known to man */
/* Sources:
https://www.w3schools.com/howto/howto_js_lightbox.asp
https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/
*/
function openModal() {
document.body.style.position = 'fixed';
document.body.style.top = `-${window.scrollY}px`;
document.getElementById("myModal").style.display = "block";
document.getElementById("myModal").focus();
setImageIndex(0);
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
const scrollY = document.body.style.top;
document.body.style.position = '';
document.body.style.top = '';
window.scrollTo(0, parseInt(scrollY || '0') * -1);
}
function isModalOpen() {
return (document.getElementById("myModal").style.display == "block");
}
function formatLines(str) {
let lines = str.split("\n")
lines = lines.filter(line => !line.startsWith("Difference in frames"))
return lines.join("<br>")
}
function extractItem(elem) {
return {
name: elem.querySelector("h1").innerText,
beforeImg: elem.querySelector(".before").getAttribute("src"),
afterImg: elem.querySelector(".after").getAttribute("src"),
details: formatLines(elem.querySelector("pre").innerText)
};
}
const items = [...document.querySelectorAll(".item")].map(extractItem)
let currentImage = 0;
let currentState = 0;
function getImageIndexForUri(uri) {
for (let i = 0; i < items.length; i++) {
if (items[i].beforeImg == uri || items[i].afterImg == uri)
return i;
}
return -1;
}
function setImageState(state) {
const item = items[currentImage]
const uri = (state === 0) ? item.beforeImg : item.afterImg;
const stateText = (state === 0) ? "BEFORE" : "AFTER";
const posText = "(" + (currentImage + 1).toString() + "/" + (items.length).toString() + ") ";
document.getElementById("compareImage").setAttribute("src", uri);
document.getElementById("compareState").innerText = stateText;
document.getElementById("compareTitle").innerText = posText + item.name;
document.getElementById("compareCaption").innerHTML = item.details;
currentState = state;
}
function setImageIndex(index) {
if (index < 0 || index > items.length)
return;
currentImage = index;
setImageState(0);
}
function handleKey(key) {
if (key == " ") {
setImageState((currentState === 0) ? 1 : 0);
return true;
} else if (key == "ArrowLeft") {
setImageIndex(currentImage - 1);
return true;
} else if (key == "ArrowRight") {
setImageIndex(currentImage + 1);
return true;
} else if (key == "Escape") {
closeModal();
return true;
} else {
console.log(key);
return false;
}
}
document.getElementById("myModal").addEventListener("keydown", function(ev) {
if (ev.defaultPrevented)
return;
if (handleKey(ev.key))
ev.preventDefault();
});
document.querySelector("#myModal .prev").addEventListener("click", function() {
setImageIndex(currentImage - 1);
});
document.querySelector("#myModal .next").addEventListener("click", function() {
setImageIndex(currentImage + 1);
});
document.querySelectorAll(".item img").forEach(elem => elem.addEventListener("click", function() {
if (!isModalOpen())
openModal();
setImageIndex(getImageIndexForUri(this.getAttribute("src")));
}));

View File

@ -7,17 +7,35 @@ import hashlib
from pathlib import Path
MAX_DIFF_FRAMES = 9999
SCRIPTDIR = os.path.abspath(os.path.dirname(__file__))
CSS_PATH = Path(os.path.join(SCRIPTDIR, "comparer.css")).as_uri()
JS_PATH = Path(os.path.join(SCRIPTDIR, "comparer.js")).as_uri()
FILE_HEADER = """
<!DOCTYPE html>
<html>
<head>
<title>Comparison</title>
""" + f"<link rel=\"stylesheet\" href=\"{CSS_PATH}\" />" + """
</head>
<body>
"""
FILE_FOOTER = """
<div id="myModal" class="modal" tabindex="0">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">
<div id="compareTitle"></div>
<img id="compareImage" />
<div id="compareState"></div>
<a class="prev">&#10094;</a>
<a class="next">&#10095;</a>
<div id="compareCaption"></div>
</div>
</div>
""" + f"<script src=\"{JS_PATH}\"></script>\n" + """
</body>
</html>
"""
@ -103,6 +121,7 @@ def check_regression_test(baselinedir, testdir, name):
diff_frames.append(framenum)
if first_fail:
write("<div class=\"item\">")
write("<h1>{}</h1>".format(name))
write("<table width=\"100%\">")
first_fail = False
@ -110,14 +129,17 @@ def check_regression_test(baselinedir, testdir, name):
imguri1 = Path(path1).as_uri()
imguri2 = Path(path2).as_uri()
write("<tr><td colspan=\"2\">Frame %d</td></tr>" % (framenum))
write("<tr><td><img src=\"%s\" /></td><td><img src=\"%s\" /></td></tr>" % (imguri1, imguri2))
write("<tr><td><img class=\"before\" src=\"%s\" /></td><td><img class=\"after\" src=\"%s\" /></td></tr>" % (imguri1, imguri2))
if len(diff_frames) == MAX_DIFF_FRAMES:
break
if len(diff_frames) > 0:
write("</table>")
write("<pre>Difference in frames [%s] for %s</pre>" % (",".join(map(str, diff_frames)), name))
write("<pre>Difference in frames [%s] for %s%s%s</pre>" % (",".join(map(str, diff_frames)), name, "\n" if len(stats) > 0 else "", "\n".join(stats)))
write("</div>")
print("*** Difference in frames [%s] for %s" % (",".join(map(str, diff_frames)), name))
if len(stats) > 0:
write("<pre>%s</pre>" % "\n".join(stats))
print(stats)
elif len(stats) > 0:
write("<h1>{}</h1>".format(name))
@ -149,9 +171,11 @@ if __name__ == "__main__":
parser = argparse.ArgumentParser(description="Check frame dump images for regression tests")
parser.add_argument("-baselinedir", action="store", required=True, help="Directory containing baseline frames to check against")
parser.add_argument("-testdir", action="store", required=True, help="Directory containing frames to check")
parser.add_argument("-maxframes", type=int, action="store", required=False, default=9999, help="Max frames to compare")
parser.add_argument("outfile", action="store", help="The file to write the output to")
args = parser.parse_args()
MAX_DIFF_FRAMES = args.maxframes
outfile = open(args.outfile, "w")
write(FILE_HEADER)