forked from mapbox/glyph-inspect
/
htmlify.js
5 lines (5 loc) · 2.14 KB
/
htmlify.js
1
2
3
4
5
module.exports = function(data) {
return "<!DOCTYPE html><html><head><meta charset='utf-8' /><title>SDF viewer</title><meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /><link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' /><style>body { margin:0; padding:0; } </style></head><body><div class='pad4 limiter clearfix margin1 col10'><table><thead><tr><th>id</th><th>sdf</th><th>width</th><th>height</th><th>left</th><th>top</th></tr></thead><tbody id='tablebody'></tbody></table></div><script>" +
"var glyphs = " + JSON.stringify(data) + ".stacks;" +
"var _r = glyphs[0].range.split('-'), start = parseInt(_r[0]), end = parseInt(_r[1]), range = Array.apply(null, Array(end - start + 1)).map((_, i) => start + i), _glyphs = glyphs[0].glyphs.slice(); var table = document.getElementById('tablebody'); function smoothstep(e0, e1, x) {x = Math.max(Math.min((x - e1) / (e1 - e0), 1), 0); return x * x * (3 - 2 * x); } function renderSDF(cell, glyph) {var canv = document.createElement('canvas'); var w = canv.width = glyph.width + 6; var h = canv.height = glyph.height + 6; var context = canv.getContext('2d'); var image = context.getImageData(0, 0, w, h); for (var i = 0, j = -1; i < w * h; ++i) {var a = glyph.bitmap.data[i]; image.data[++j] = 0; image.data[++j] = 0; image.data[++j] = 0; image.data[++j] = smoothstep(136, 168, a) * a; } context.putImageData(image, 0, 0); cell.appendChild(canv); } range.forEach(i => {var row = document.createElement('tr'), id = document.createElement('td'), sdf = document.createElement('td'), width = document.createElement('td'), height = document.createElement('td'), left = document.createElement('td'), top = document.createElement('td'); id.innerHTML = i; if (_glyphs.length && _glyphs[0].id === i) {var glyph = _glyphs.shift(); if (glyph.bitmap) renderSDF(sdf, glyph); width.innerHTML = glyph.width; height.innerHTML = glyph.height; left.innerHTML = glyph.left; top.innerHTML = glyph.top; } row.appendChild(id); row.appendChild(sdf); row.appendChild(width); row.appendChild(height); row.appendChild(left); row.appendChild(top); table.appendChild(row); }); </script> </body> </html>"
}