Half-Life-RTX/HLRTest
2
0
Fork 1
Code Issues 12 Pull Requests 1 Packages Projects Releases Wiki Activity

new design for rendertest #8

Merged
provod merged 28 commits from NightFox/HLRTest:master into master 2024-02-15 23:35:42 +01:00
Conversation 4 Commits 28 Files Changed 14 +86 -35
2 changed files with 86 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 25993bb08c - Show all commits

27
render/base.css
View File

@ -276,7 +276,8 @@ body.min { /* split feature */
animation: flash var(--animation-duration) infinite; animation: flash var(--animation-duration) infinite;
} }
.block-gold.anim_off, .block-gold.anim_off,
.block-gold.anim_force_off { .block-gold.anim_force_off,
.all_diff .block-gold {
animation: none; animation: none;
} }
@ -308,13 +309,13 @@ body.min { /* split feature */
text-decoration: none; text-decoration: none;
} }
#fail_images.padding .meta-block { #fail_images.vpadding .meta-block {
/*margin-block: 100vh;*/ /*margin-block: 100vh;*/
padding-top: calc(var(--height-image)); padding-top: calc(var(--height-image));
padding-bottom: 2px; padding-bottom: 2px;
/*padding-bottom: calc(50% - var(--height-image) );*/ /*padding-bottom: calc(50% - var(--height-image) );*/
} }
#fail_images.padding .meta-block h3, .meta-block:first-child h3 { #fail_images.vpadding .meta-block h3, .meta-block:first-child h3 {
border-top: none; border-top: none;
} }
@ -326,11 +327,18 @@ body.min { /* split feature */
/*z-index: 10;*/ /*z-index: 10;*/
} }
.block-diff.show_diff { .block-diff.show_diff,
.all_diff .block-diff {
display: block; display: block;
z-index: 2; z-index: 2;
} }
.diff_separate .block-diff {
display: block;
position: relative;
top: auto;
}
.image-container, img, .block { .image-container, img, .block {
max-width: 100%; max-width: 100%;
@ -412,3 +420,14 @@ details[open] summary:before {
color: #6b9a00; color: #6b9a00;
color: oklch(62.8% 0.25768330773615683 128.19); color: oklch(62.8% 0.25768330773615683 128.19);
} }
table th:nth-child(3) {
text-align: center;
}
table td:nth-child(3) { /* Δ, % // TODO: add class */
text-align: right;
font-family: Consolas, monospace;
}
table td:nth-child(4) { /* Passed // TODO: add class */
text-align: center;
}

92
render/index.js
View File

@ -59,11 +59,6 @@ function emojiToTag(string) {
} }
return tagArray; return tagArray;
} }
function channelWithEmoji(value) { function channelWithEmoji(value) {
const replacements = { const replacements = {
"full": "🖼", "full": "🖼",
@ -93,6 +88,8 @@ function channelWithEmoji(value) {
} }
} }
function colorPct(value) { function colorPct(value) {
let fixedPercent = value.toFixed(3);
//fixedPercent = (fixedPercent < 10 ? '0' : '') + fixedPercent;
let css_class = ""; let css_class = "";
if (value < 1) { if (value < 1) {
css_class = "green"; css_class = "green";
@ -102,9 +99,8 @@ function colorPct(value) {
} else { } else {
css_class = "red"; css_class = "red";
} }
return [Tag("span", {"class": css_class}, value.toFixed(3))]; return [Tag("span", {"class": css_class}, fixedPercent)];
} }
function isPassed(value) { function isPassed(value) {
const font = value ? emojiFont("❌") : emojiFont("✔"); const font = value ? emojiFont("❌") : emojiFont("✔");
return [ return [
@ -234,7 +230,7 @@ function buildData(table, images, data, sort) {
const saveToLocalStorage = debounce((key, value) => { const saveToLocalStorage = debounce((key, value) => {
localStorage.setItem(key, value); localStorage.setItem(key, value);
}); });
const loadFromLocalStorage = (key) => { const loadFromLocalStorage = (key, default_option) => {
const value = localStorage.getItem(key); const value = localStorage.getItem(key);
if (isNaN(value)) { if (isNaN(value)) {
switch(value) { // ugly textual localStorage switch(value) { // ugly textual localStorage
@ -243,10 +239,13 @@ const loadFromLocalStorage = (key) => {
case "false": case "false":
return false; return false;
case "null": case "null":
return null; return default_option ? default_option : null;
default: default:
return value; return value;
} }
} else
if (value === null) {
return default_option ? default_option : null;
} }
return parseFloat(value); // fix !!"0" = true return parseFloat(value); // fix !!"0" = true
} }
@ -296,12 +295,16 @@ window.onload = () => {
saveToLocalStorage("rendertest_switchfrequency", value); saveToLocalStorage("rendertest_switchfrequency", value);
} }
let isPaused = false; let gridContainer, sidebarOptions, numberInput, rangeInput, table, images, vpaddin_input;
let gridContainer, sidebarOptions, numberInput, rangeInput, table, images;
const tableSort = !!loadFromLocalStorage("rendertest_tablesort");
const sidebarPos = loadFromLocalStorage("rendertest_sidebarpos");
const switchFrequency = loadFromLocalStorage("rendertest_switchfrequency", 700);
const tableSort = loadFromLocalStorage("rendertest_tablesort", false);
const sidebarPos = loadFromLocalStorage("rendertest_sidebarpos", "left");
const vpadding = loadFromLocalStorage("rendertest_vpadding", true);
const all_diff = loadFromLocalStorage("rendertest_all_diff", false);
const sidebarMode = loadFromLocalStorage("rendertest_sidebarmode", "minimize");
const diffMode = loadFromLocalStorage("rendertest_diffmode", "click");
let isPaused = loadFromLocalStorage("rendertest_paused", false);
function uglyChecked(value) { // fast hack function uglyChecked(value) { // fast hack
return value ? {"checked": "checked"} : {}; return value ? {"checked": "checked"} : {};
} }
@ -323,12 +326,18 @@ window.onload = () => {
Text(" Show diff mode on") Text(" Show diff mode on")
]), ]),
Tag("label", null, null, [ Tag("label", null, null, [
Tag("input", {"type": "radio", "name": "diff_mode", "value": "click", "checked": "checked"}), Tag("input", {"type": "radio", "name": "diff_mode", "value": "click", ...uglyChecked(diffMode === "click")}, null, null, "input", (e) => {
images.classList.toggle("diff_separate");
saveToLocalStorage("rendertest_diffmode", e.target.value);
}),
Tag("span", {"class": "emoji"}, "🖱"), Tag("span", {"class": "emoji"}, "🖱"),
Text(" Click (LMB)") Text(" Click (LMB)")
]), ]),
Tag("label", null, null, [ Tag("label", null, null, [
Tag("input", {"type": "radio", "name": "diff_mode", "value": "separate", "disabled": "disabled"}), Tag("input", {"type": "radio", "name": "diff_mode", "value": "separate", ...uglyChecked(diffMode === "separate")}, null, null, "input", (e) => {
images.classList.toggle("diff_separate");
saveToLocalStorage("rendertest_diffmode", e.target.value);
}),
Tag("span", {"class": "emoji"}, "🎏"), Tag("span", {"class": "emoji"}, "🎏"),
Text(" Separate") Text(" Separate")
]) ])
@ -354,14 +363,15 @@ window.onload = () => {
Tag("span", {"class": "emoji"}, "🎢"), Tag("span", {"class": "emoji"}, "🎢"),
Text(" Speed switch image") Text(" Speed switch image")
]), ]),
rangeInput = Tag("input", {"type": "range", "style": "width: 140px;", "min": "10", "max": "1000", "value": "700"}, null, null, "input", syncSliderValues), rangeInput = Tag("input", {"type": "range", "style": "width: 140px;", "min": "10", "max": "1000", "value": switchFrequency}, null, null, "input", syncSliderValues),
numberInput = Tag("input", {"type": "number", "size": "5", "min": "10", "max": "1000", "value": "700"}, null, null, "input", syncSliderValues), numberInput = Tag("input", {"type": "number", "size": "5", "min": "10", "max": "1000", "value": switchFrequency}, null, null, "input", syncSliderValues),
Text(" ms "), Text(" ms "),
Tag("button", null, "pause", null, "click", (e) => { Tag("button", null, isPaused ? "resume" : "pause", null, "click", (e) => {
//e.target.textContent = isPaused ? "❄ pause" : "🔥 resume"; //e.target.textContent = isPaused ? "❄ pause" : "🔥 resume";
e.target.textContent = isPaused ? "pause" : "resume"; e.target.textContent = isPaused ? "pause" : "resume";
changeAnimationDuration(isPaused ? numberInput.value : 0); changeAnimationDuration(isPaused ? numberInput.value : 0);
isPaused = !isPaused; isPaused = !isPaused;
saveToLocalStorage("rendertest_paused", isPaused);
}) })
]), ]),
/* future /* future
@ -376,14 +386,17 @@ window.onload = () => {
Text(" Sidebar") Text(" Sidebar")
]), ]),
Tag("label", null, null, [ Tag("label", null, null, [
Tag("input", {"type": "radio", "name": "sidebar-mode", "value": "minimize", "checked": "checked"}, null, null, "input", (e) => { Tag("input", {"type": "radio", "name": "sidebar-mode", "value": "minimize", ...uglyChecked(sidebarMode === "minimize")}, null, null, "input", (e) => {
sidebarOptions.classList.toggle("sticky") sidebarOptions.classList.toggle("sticky");
saveToLocalStorage("rendertest_sidebarmode", e.target.value);
}), }),
Text(" auto minimize") Text(" auto minimize")
]), ]),
Tag("label", null, null, [ Tag("label", null, null, [
Tag("input", {"type": "radio", "name": "sidebar-mode", "value": "always"}, null, null, "input", (e) => { Tag("input", {"type": "radio", "name": "sidebar-mode", "value": "always", ...uglyChecked(sidebarMode === "always")}, null, null, "input", (e) => {
sidebarOptions.classList.toggle("sticky") sidebarOptions.classList.toggle("sticky");
saveToLocalStorage("rendertest_sidebarmode", e.target.value);
}), }),
Text(" show always") Text(" show always")
]), ]),
@ -416,7 +429,7 @@ window.onload = () => {
Text(" default") Text(" default")
]), ]),
Tag("label", null, null, [ Tag("label", null, null, [
Tag("input", {"type": "radio", "name": "sidebar-size", "value": "minimize"}, null, null, "input", (e) => { Tag("input", {"type": "radio", "name": "sidebar-size", "value": "min"}, null, null, "input", (e) => {
document.body.classList.toggle("min"); document.body.classList.toggle("min");
}), }),
Text(" mini") Text(" mini")
@ -441,8 +454,9 @@ window.onload = () => {
Tag("span", {"class": "emoji Noto"}, "🖼"), Tag("span", {"class": "emoji Noto"}, "🖼"),
Tag("label", null, null, [ Tag("label", null, null, [
Text(" vertical padding"), Text(" vertical padding"),
Tag("input", {"type": "checkbox", "name": "all_diff", "checked": "checked"}, null, null, "input", (e) => { vpaddin_input = Tag("input", {"type": "checkbox", "name": "vpadding", ...uglyChecked(vpadding)}, null, null, "change", (e) => {
images.classList.toggle("padding"); images.classList.toggle("vpadding");
saveToLocalStorage("rendertest_vpadding", e.target.checked);
}) })
]) ])
]) ])
@ -452,7 +466,12 @@ window.onload = () => {
Tag("span", {"class": "emoji"}, "📷"), Tag("span", {"class": "emoji"}, "📷"),
Tag("label", null, null, [ Tag("label", null, null, [
Text(" Toggle diff for all"), Text(" Toggle diff for all"),
Tag("input", {"type": "checkbox", "name": "all_diff", "disabled": "disabled"}) Tag("input", {"type": "checkbox", "name": "all_diff", ...uglyChecked(all_diff)}, null, null, "change", (e) => {
images.classList.toggle("all_diff");
vpaddin_input.disabled = !vpaddin_input.disabled;
images.classList.toggle("vpadding");
saveToLocalStorage("rendertest_all_diff", e.target.checked);
})
]) ])
]) ])
]), ]),
@ -485,7 +504,7 @@ window.onload = () => {
Tag("h2", null, "Summary"), Tag("h2", null, "Summary"),
Tag("div", {"id": "summary"}, null, [...buildSummary(data)]), Tag("div", {"id": "summary"}, null, [...buildSummary(data)]),
Tag("h2", null, "Images of things that are not perfect"), Tag("h2", null, "Images of things that are not perfect"),
images = Tag("div", {"id": "fail_images", "class": "padding"}) images = Tag("div", {"id": "fail_images", "class": "vpadding"})
]) ])
]) ])
document.body.appendChild(gridContainer); document.body.appendChild(gridContainer);
@ -496,8 +515,21 @@ window.onload = () => {
if (sidebarPos == "right") { if (sidebarPos == "right") {
gridContainer.classList.toggle("reversed"); gridContainer.classList.toggle("reversed");
} }
if (!vpadding) {
images.classList.toggle("vpadding");
}
if (all_diff) { // TODO: better UX
images.classList.toggle("all_diff");
vpaddin_input.disabled = !vpaddin_input.disabled;
images.classList.toggle("vpadding");
}
if (diffMode == "separate") {
images.classList.toggle("diff_separate");
}
if (sidebarMode == "always") {
sidebarOptions.classList.toggle("sticky");
}
changeAnimationDuration(isPaused ? 0 : numberInput.value);
// stop animation when not in the viewport // stop animation when not in the viewport
function handleIntersection(entries, observer) { function handleIntersection(entries, observer) {