render/base.css

@@ -244,6 +244,7 @@ body.min { /* split feature */
 #fail_images.padding .meta-block {
 	/*margin-block: 100vh;*/
 	padding-top: calc(var(--height-image));
+	padding-bottom: 2px;
 	/*padding-bottom: calc(50% - var(--height-image) );*/
 }
 #fail_images.padding .meta-block h2, .meta-block:first-child h2 {
@@ -327,3 +328,16 @@ details[open] summary:before {
 	content: "📂\FE0F −";
 }
 
+
+.red {
+	color: #f53200;
+	color: oklch(62.8% 0.25768330773615683 32.82);
+}
+.yellow {
+	color: #d3a100;
+	color: oklch(76.67% 0.17685825418032033 90.53);
+}
+.green {
+	color: #6b9a00;
+	color: oklch(62.8% 0.25768330773615683 128.19);
+}

render/index.js

@@ -19,6 +19,48 @@ function sectionLink(value, d) {
 	return [a];
 }
 
+function channelWithEmoji(value) {
+	const replacements = {
+		"full": "🖼",
+		"basecolor": "🎨",
+		"emissive": "☢",
+		"nshade": "🥬", //🏔
+		"ngeom": "🥒", //⛰
+		"lighting": "☀",//🗿
+		"direct": "🎇",
+		"direct_diffuse": "🎇🎆",
+		"direct_specular": "🎇💎",
+		"diffuse": "🎆",
+		"specular": "💎",
+		"material": "🖌",
+		"indirect": "🥏",//🏀🏓🥏
+		"indirect_specular": "🥏💎",
+		"indirect_diffuse": "🥏🎆"
+	}
+	const emoji = replacements[value];
+	if (emoji) {
+		return [Tag('span', {}, `${emoji}\uFE0F ${value}`)];
+	} else {
+		return [];
+	}
+}
+function colorPct(value) {
+	let css_class = "";
+	if (value < 1) {
+		css_class = "green";
+	} else
+	if (value < 5) {
+		css_class = "yellow";
+	} else {
+		css_class = "red";
+	}
+	return [Tag("span", {"class": css_class}, value.toFixed(3))];
+}
+
+function isPassed(value) {
+	return [Tag("span", {"class": "emoji"}, value ? "❌" : "✅")];
+}
+
 function makeTable(fields, data, attrs_func) {
 	const table = Tag('table', null, null, [
 		Tag('tr', null, null, (() => {
@@ -30,6 +72,7 @@ function makeTable(fields, data, attrs_func) {
 		})()),
 	]);
 
+
 	for (const di in data) {
 		let d = data[di];
 		const attrs = attrs_func ? attrs_func(d) : null;
@@ -42,11 +85,6 @@ function makeTable(fields, data, attrs_func) {
 					continue;
 				}
 
-				// TODO: remove ugly hack
-				if (f.field == "fail")  {
-					value = value ? "❌" : "✅";
-				}
-
 				const field_func = f.tags_func ? f.tags_func : fieldFuncDefault;
 				const tags = field_func(value, d);
 
@@ -71,9 +109,9 @@ function makeTable(fields, data, attrs_func) {
 function buildTestResultsTable(data) {
 	const fields = [
 		{label: 'Test', field: 'test', tags_func: sectionLink},
-		{label: 'Channel', field: 'channel', },
-		{label: 'Δ, %', field: 'diff_pct', },
-		{label: 'Failed', field: 'fail', },
+		{label: 'Channel', field: 'channel', tags_func: channelWithEmoji},
+		{label: 'Δ, %', field: 'diff_pct', tags_func: colorPct},
+		{label: 'Passed', field: 'fail', tags_func: isPassed},
 	];
 
 	return [makeTable(fields, data, rowAttribs)];
@@ -126,7 +164,7 @@ function buildData(table, images, data, sort) {
 			diffElement.classList.toggle("show_diff");
 		});
 	};
-	
+
 	for (let tr of document.querySelectorAll("table tr")) {
 		tr.addEventListener("click", function() {
 			this.querySelector("a").click();
@@ -202,7 +240,7 @@ window.onload = () => {
 
 	const tableSort = !!loadFromLocalStorage("rendertest_tablesort");
 	const sidebarPos = loadFromLocalStorage("rendertest_sidebarpos");
-	
+
 	function uglyChecked(value) { // fast hack
 		return value ? {"checked": "checked"} : {};
 	}