Skip to content

Commit 9e85aa4

Browse files
jleedevjleedev
authored
Shieldtest ergonomics (#741)
- Don't mobile viewport, the table really is 900px wide. - Add a progress bar and avoid locking up the page. - Turn off the map hash. - Misc markup tweaks, src -> srcset, add a tbody.
1 parent 3dcee30 commit 9e85aa4

2 files changed

Lines changed: 100 additions & 46 deletions

File tree

‎src/shieldtest.html‎

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,57 @@
33
<head>
44
<meta charset="utf-8" />
55
<title>Shield Test</title>
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
76
<link rel="preconnect" href="https://fonts.googleapis.com" />
87
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
98
<link
109
href="https://fonts.googleapis.com/css2?family=Overpass:wght@500&display=block"
1110
rel="stylesheet"
1211
/>
1312
<style>
13+
body {
14+
background: #faf6f2;
15+
}
1416
th {
1517
border-bottom: 1px solid #b8b8b8;
1618
}
19+
div#progress-overlay {
20+
background: #fff8;
21+
bottom: 0;
22+
display: grid;
23+
font-size: 1.5em;
24+
left: 0;
25+
place-items: center;
26+
pointer-events: none;
27+
position: fixed;
28+
right: 0;
29+
top: 0;
30+
}
31+
progress {
32+
border-radius: 0; /* hack mozilla appearance */
33+
}
1734
</style>
35+
1836
<script type="module" src="shieldtest.js"></script>
1937
</head>
2038

21-
<body style="background: #faf6f2">
39+
<body>
2240
<table id="shield-table">
23-
<tr>
24-
<th>Network</th>
25-
<th colspan="14">Graphic</th>
26-
<th>Performance</th>
27-
</tr>
41+
<thead>
42+
<tr>
43+
<th>Network</th>
44+
<th colspan="14">Graphic</th>
45+
<th>Performance</th>
46+
</tr>
47+
</thead>
2848
</table>
2949

3050
<p style="font-family: Overpass; visibility: hidden">
3151
Invisible text so the font will load early
3252
</p>
3353
<div id="map" style="display: none"></div>
54+
55+
<div id="progress-overlay">
56+
<progress></progress>
57+
</div>
3458
</body>
3559
</html>

‎src/shieldtest.js‎

Lines changed: 69 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ var baseUrl = getUrl.protocol + "//" + getUrl.host + getUrl.pathname;
1212
window.maplibregl = maplibregl;
1313
export const map = (window.map = new maplibregl.Map({
1414
container: "map", // container id
15-
hash: "map",
1615
antialias: true,
1716
style: {
1817
version: 8,
@@ -273,46 +272,77 @@ function addShield(row, network, ref) {
273272
cell.appendChild(img);
274273
}
275274

275+
function getShieldImage(network, ref) {
276+
let shield_id = `shield\n${network}=${ref}`;
277+
let shieldCanvas = getShieldCanvas(shield_id);
278+
let img = document.createElement("img");
279+
img.srcset = `${shieldCanvas.toDataURL("image/png")} ${PXR}x`;
280+
return img;
281+
}
282+
276283
const PXR = gfx.getPixelRatio();
277284

278-
let table = document.querySelector("#shield-table");
279-
280-
for (let network of networks) {
281-
let row = table.insertRow();
282-
row.insertCell().append(`${network}`);
283-
for (let ref of refs) {
284-
performance.mark(`start-${network}`);
285-
let cell = row.insertCell();
286-
let shield_id = `shield\n${network}=${ref}`;
287-
let shieldCanvas = getShieldCanvas(shield_id);
288-
let img = document.createElement("img");
289-
img.src = shieldCanvas.toDataURL("image/png");
290-
img.width = shieldCanvas.width / PXR;
291-
img.height = shieldCanvas.height / PXR;
292-
performance.mark(`stop-${network}`);
293-
performance.measure(`${network}`, `start-${network}`, `stop-${network}`);
294-
cell.appendChild(img);
285+
const iterShields = function* () {
286+
for (const network of networks) {
287+
yield { network, refs };
295288
}
296-
let perfEntries = performance.getEntriesByName(`${network}`);
297-
var perfDuration = 0;
298-
for (let perf of perfEntries) {
299-
perfDuration += perf.duration;
289+
yield {
290+
network: "US:PA:Allegheny:Belt",
291+
refs: [
292+
"Red Belt",
293+
"Orange Belt",
294+
"Yellow Belt",
295+
"Green Belt",
296+
"Blue Belt",
297+
"Purple Belt",
298+
],
299+
};
300+
yield {
301+
network: "US:MO:Taney:Branson",
302+
refs: ["Red Route", "Yellow Route", "Blue Route"],
303+
};
304+
};
305+
306+
const renderAllShields = async () => {
307+
const allShields = Array.from(iterShields());
308+
const progress = document.querySelector("#progress-overlay progress");
309+
progress.max = allShields.flatMap((d) => d.refs).length;
310+
const columns = Math.max(...allShields.flatMap((d) => d.refs.length));
311+
const table = document.querySelector("#shield-table").createTBody();
312+
for (const { network, refs } of allShields) {
313+
const tr = table.insertRow();
314+
tr.insertCell().append(`${network}`);
315+
for (const ref of refs) {
316+
performance.mark(`start-${network}`);
317+
tr.insertCell().append(getShieldImage(network, ref));
318+
progress.value += 1;
319+
performance.mark(`stop-${network}`);
320+
performance.measure(`${network}`, `start-${network}`, `stop-${network}`);
321+
}
322+
let perfEntries = performance.getEntriesByName(`${network}`);
323+
var perfDuration = 0;
324+
for (let perf of perfEntries) {
325+
perfDuration += perf.duration;
326+
}
327+
let shieldRate = Math.round((1000 * perfEntries.length) / perfDuration);
328+
if (tr.cells.length < 1 + columns) {
329+
const gap = columns - tr.cells.length + 1;
330+
tr.insertCell().colSpan = gap;
331+
}
332+
tr.insertCell().append(`${shieldRate} shields/sec`);
333+
334+
await Promise.all(
335+
Array.from(tr.querySelectorAll("img"), (img) =>
336+
img.decode().catch(
337+
() =>
338+
/* occasionally fails for no reason */
339+
new Promise(requestAnimationFrame)
340+
)
341+
)
342+
);
300343
}
301-
let shieldRate = Math.round((1000 * perfEntries.length) / perfDuration);
302-
row.insertCell().append(`${shieldRate} shields/sec`);
303-
}
344+
};
304345

305-
let row = table.insertRow();
306-
row.insertCell().append(`Pittsburgh`);
307-
addShield(row, "US:PA:Allegheny:Belt", "Red Belt");
308-
addShield(row, "US:PA:Allegheny:Belt", "Orange Belt");
309-
addShield(row, "US:PA:Allegheny:Belt", "Yellow Belt");
310-
addShield(row, "US:PA:Allegheny:Belt", "Green Belt");
311-
addShield(row, "US:PA:Allegheny:Belt", "Blue Belt");
312-
addShield(row, "US:PA:Allegheny:Belt", "Purple Belt");
313-
314-
row = table.insertRow();
315-
row.insertCell().append(`Branson, MO`);
316-
addShield(row, "US:MO:Taney:Branson", "Red Route");
317-
addShield(row, "US:MO:Taney:Branson", "Yellow Route");
318-
addShield(row, "US:MO:Taney:Branson", "Blue Route");
346+
await renderAllShields().finally(() =>
347+
document.querySelector("#progress-overlay").remove()
348+
);

0 commit comments

Comments
 (0)