126 lines
4.3 KiB
HTML
126 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Tileserver-gl tests</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script>
|
|
const module = {};
|
|
</script>
|
|
<script src="pixelmatch-5.3.0.0.js"></script>
|
|
<style>
|
|
img, canvas {
|
|
margin: 0 6px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body onload="loaded()">
|
|
<h1>Tileserver-gl tests</h1>
|
|
<div>A fast way to visually check for regressions. Each row shows: a test picture, the expected output, then the difference with <a href="https://github.com/mapbox/pixelmatch#pixelmatch">pixelmatch</a>.</div>
|
|
<div>Put <i>zurich_switzerland.mbtiles</i> in public/resources/gallery/ then run with:</div>
|
|
<pre>docker build . && docker run --rm -it -p 8080:8080 $(docker build -q .) -V --config /usr/src/app/public/resources/gallery/config.json</pre>
|
|
|
|
<h2>Interactive vector</h2>
|
|
<iframe src="/styles/basic-preview/#11/47.379/8.5375" width="400" height="300"></iframe>
|
|
<img src="interactive-vector.png" />
|
|
|
|
<h2>Interactive raster</h2>
|
|
<iframe src="/styles/basic-preview/?raster#12/47.379/8.5375" width="400" height="300"></iframe>
|
|
<img src="interactive-raster.png" />
|
|
|
|
<h1 id="result">Loading...</h1>
|
|
|
|
<script>
|
|
const width = 400;
|
|
const height = 300;
|
|
|
|
const tests = [
|
|
['static-lat-lng', '/styles/basic-preview/static/8.5375,47.379,12/400x300.png'],
|
|
['static-bearing', '/styles/basic-preview/static/8.5375,47.379,12@180/400x300.png'],
|
|
['static-bearing-pitch', '/styles/basic-preview/static/8.5375,47.379,12@15,80/400x300.png'],
|
|
['static-pixel-ratio-2x', '/styles/basic-preview/static/8.5375,47.379,11/200x150@2x.png'],
|
|
['path-auto', '/styles/basic-preview/static/auto/400x300.png?fill=%23ff000080&path=8.53180,47.38713|8.53841,47.38248|8.53320,47.37457'],
|
|
['encoded-path-auto', '/styles/basic-preview/static/auto/400x300.png?stroke=red&width=5&path=enc:wwg`Hyu}r@fNgn@hKyh@rR{ZlP{YrJmM`PJhNbH`P`VjUbNfJ|LzM~TtLnKxQZ'],
|
|
['linecap-linejoin-round-round', '/styles/basic-preview/static/8.5375,47.379,12/400x300.png?width=30&linejoin=round&linecap=round&path=enc:uhd`Hqk_s@kiA}nAnfAqpA'],
|
|
['linecap-linejoin-bevel-square', '/styles/basic-preview/static/8.5375,47.379,12/400x300.png?width=30&linejoin=bevel&linecap=square&path=enc:uhd`Hqk_s@kiA}nAnfAqpA'],
|
|
['markers', '/styles/basic-preview/static/8.5375,47.379,12/400x300.png?marker=8.53180,47.38713|http://localhost:8080/images/logo.png|scale:0.3&marker=8.53180,47.37457|http://localhost:8080/images/logo.png|scale:0.3'],
|
|
];
|
|
|
|
function getImgData(id) {
|
|
const img = document.getElementById(id);
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = img.width;
|
|
canvas.height = img.height;
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.drawImage(img, 0, 0);
|
|
return ctx.getImageData(0, 0, img.width, img.height);
|
|
}
|
|
|
|
function compare(a, b, c) {
|
|
const img1 = getImgData(a);
|
|
const img2 = getImgData(b);
|
|
|
|
const cc = document.getElementById(c);
|
|
const ctx = cc.getContext('2d');
|
|
const diff = ctx.createImageData(width, height);
|
|
const numDiffPixels = pixelmatch(img1.data, img2.data, diff.data, width, height, { threshold: 0.1 });
|
|
ctx.putImageData(diff, 0, 0);
|
|
|
|
return numDiffPixels;
|
|
}
|
|
|
|
for (const [id, url] of tests) {
|
|
const h2 = document.createElement('h2');
|
|
h2.innerText = id;
|
|
const a = document.createElement('img');
|
|
a.src = url;
|
|
a.id = 'a_' + id;
|
|
const b = document.createElement('img');
|
|
b.src = id + '.png';
|
|
b.id = 'b_' + id;
|
|
const c = document.createElement('canvas');
|
|
c.width = width;
|
|
c.height = height;
|
|
c.id = 'c_' + id;
|
|
document.body.appendChild(h2);
|
|
document.body.appendChild(a);
|
|
document.body.appendChild(b);
|
|
document.body.appendChild(c);
|
|
}
|
|
console.log('Init done.');
|
|
|
|
function loaded() {
|
|
console.log('Loading done.');
|
|
|
|
let success = true;
|
|
for (const [id, url] of tests) {
|
|
const numDiffPixels = compare('a_' + id, 'b_' + id, 'c_' + id);
|
|
if (numDiffPixels > 0) {
|
|
success = false;
|
|
}
|
|
}
|
|
const r = document.getElementById('result');
|
|
r.innerText = success ? 'Success' : 'Failure';
|
|
r.style.color = success ? 'green' : 'red';
|
|
|
|
console.log('Compare done.');
|
|
}
|
|
</script>
|
|
|
|
<br>
|
|
<br>
|
|
<br>
|
|
More tests we could write:
|
|
<br>
|
|
- endpoint /styles/{id}/static/{minx},{miny},{maxx},{maxy}/{width}x{height}[@2x].{format} (area-based)
|
|
<br>
|
|
- arg latlng - indicates coordinates are in lat,lng
|
|
<br>
|
|
- padding
|
|
<br>
|
|
- border + borderwidth
|
|
<br>
|
|
- fill|stroke|width global vs local
|
|
|
|
</body>
|
|
</html>
|