diff --git a/public/index.html b/public/index.html
new file mode 120000
index 0000000..3938661
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1 @@
+../views/index.html
\ No newline at end of file
diff --git a/public/js/index.js b/public/js/index.js
index bc5f1e7..f4fcd9f 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -1,7 +1,6 @@
// Code from
// http://nodebox.github.io/opentype.js/
-var fileButton, fontFamily;
var pageSelected, font, fontScale, fontSize, fontBaseline, glyphScale, glyphSize, glyphBaseline;
var cellCount = 200,
@@ -23,19 +22,28 @@ function cellSelect(event) {
}
}
+function onSearchUnicode(e) {
+ if (!font) return;
+ // get the index by unicode, e.target.value
+ var inputValue = e.target.value.trim().toLowerCase();
+ for (var i = 0; i < font.numGlyphs; i++) {
+ var unicode = font.glyphs.glyphs[i].unicode;
+ if (unicode !== undefined && inputValue == unicode.toString(16)) {
+ displayGlyph(i);
+ displayGlyphData(i);
+ break;
+ }
+ }
+}
+
$(document).ready(function() {
- fontFamily = document.getElementById('font-family');
- fileButton = document.getElementById('file');
+ var fontUrl = document.getElementById("font-url");
+ fontUrl.addEventListener('input', onFetchFile);
+ var fileButton = document.getElementById('file');
fileButton.addEventListener('change', onReadFile, false);
- var fontFileName = 'fonts/arialbd.ttf';
- opentype.load(fontFileName, function(err, font) {
- var amount, glyph, ctx, x, y, fontSize;
- if (err) {
- showErrorMessage(err.toString());
- return;
- }
- onFontLoaded(font);
- });
+ var searchButton = document.getElementById('search-unicode');
+ searchButton.addEventListener('input', onSearchUnicode);
+ fetchFile('fonts/arialbd.ttf');
prepareGlyphList();
$(".nicescroll-left").niceScroll({
@@ -150,7 +158,7 @@ function renderGlyphItem(canvas, glyphIndex) {
ctx.fillStyle = '#AAA';
ctx.font = '9px "Open Sans"';
ctx.fillText(glyphIndex, 2, cellHeight - 2);
- var glyph = font.glyphs[glyphIndex],
+ var glyph = font.glyphs.glyphs[glyphIndex],
glyphWidth = glyph.advanceWidth * fontScale,
xmin = (cellWidth - glyphWidth) / 2,
xmax = (cellWidth + glyphWidth) / 2,
@@ -209,20 +217,33 @@ function initGlyphDisplay() {
hline('Descender', font.tables.os2.sTypoDescender);
}
+function onFetchFile(e) {
+ fetchFile(e.target.value);
+}
+
+function fetchFile(filename) {
+ console.log("fetch file: " + filename);
+ if (filename.trim().length === 0) return;
+ fetch(filename)
+ .then(res => {
+ if (res.status !== 200) {
+ throw new Error("Network error " + res.status);
+ }
+ return res.arrayBuffer()
+ })
+ .then(data => loadFont(data))
+ .catch(err => {
+ console.log(err)
+ });
+}
+
function onReadFile(e) {
var file = e.target.files[0];
+ console.log("read file: " + file.name);
var reader = new FileReader();
reader.onload = function(e) {
- try {
- font = opentype.parse(e.target.result);
- // fontFamily.innerHTML = font.familyName || this.files[0].name.replace(/\.[^/.]+$/, "");
- showErrorMessage('');
- onFontLoaded(font);
- } catch (err) {
- showErrorMessage(err.toString());
- throw (err);
- }
+ loadFont(e.target.result);
};
reader.onerror = function(err) {
showErrorMessage(err.toString());
@@ -231,6 +252,27 @@ function onReadFile(e) {
reader.readAsArrayBuffer(file);
}
+function loadFont(buffer) {
+ try {
+ if (window.Module.decompress === undefined) {
+ font = opentype.parse(buffer);
+ } else {
+ var decompressResult = window.Module.decompress(buffer);
+ if (!decompressResult) {
+ // decompress failed, use opentype to parse the file content directly.
+ font = opentype.parse(buffer);
+ } else {
+ // use opentype to parse decompress result.
+ font = opentype.parse(decompressResult);
+ }
+ }
+ onFontLoaded(font);
+ } catch (err) {
+ console.log(err)
+ showErrorMessage(err.toString());
+ }
+}
+
function displayGlyphData(glyphIndex) {
var container = document.getElementById('glyph-data');
var holdtext = document.getElementById('copy-char');
@@ -239,7 +281,7 @@ function displayGlyphData(glyphIndex) {
container.innerHTML = '';
return;
}
- var glyph = font.glyphs[glyphIndex],
+ var glyph = font.glyphs.glyphs[glyphIndex],
html;
html = 'name' + glyph.name + '';
@@ -289,7 +331,7 @@ function displayGlyph(glyphIndex) {
if (glyphIndex < 0) return;
- var glyph = font.glyphs[glyphIndex],
+ var glyph = font.glyphs.glyphs[glyphIndex],
glyphWidth = glyph.advanceWidth * glyphScale,
xmin = (canvas.width / window.devicePixelRatio - glyphWidth) / 2,
xmax = (canvas.width / window.devicePixelRatio + glyphWidth) / 2,
@@ -331,7 +373,7 @@ function drawPoints(glyph, ctx, x, y, fontSize) {
x = x !== undefined ? x : 0;
y = y !== undefined ? y : 0;
fontSize = fontSize !== undefined ? fontSize : 24;
- scale = 1 / glyph.font.unitsPerEm * fontSize;
+ scale = 1 / font.unitsPerEm * fontSize;
blueCircles = [];
redCircles = [];
diff --git a/views/index.html b/views/index.html
index 222a217..87fed54 100644
--- a/views/index.html
+++ b/views/index.html
@@ -9,7 +9,8 @@
-
+
+
@@ -35,6 +36,16 @@