mirror of
https://github.com/chanind/hanzi-writer-data.git
synced 2025-07-19 15:28:54 +08:00
setting up a character data explorer
This commit is contained in:
David Chanin
commit
dd33af7831
103
explorer.js
Normal file
103
explorer.js
Normal file
@ -0,0 +1,103 @@
|
||||
var VERSION = '2.0';
|
||||
var getCharDataUrl = (char) => `https://cdn.jsdelivr.net/npm/hanzi-writer-data@${VERSION}/${char}.json`;
|
||||
|
||||
function loadData(char, onLoad, onError) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
if (xhr.overrideMimeType) {
|
||||
xhr.overrideMimeType('application/json');
|
||||
}
|
||||
xhr.open('GET', getCharDataUrl(char), true);
|
||||
xhr.onreadystatechange = () => {
|
||||
if (xhr.readyState !== 4) return;
|
||||
if (xhr.status === 200) {
|
||||
onLoad(JSON.parse(xhr.responseText));
|
||||
} else if (onError) {
|
||||
onError(xhr);
|
||||
}
|
||||
};
|
||||
xhr.send(null);
|
||||
};
|
||||
|
||||
function attr(elm, name, value) {
|
||||
elm.setAttributeNS(null, name, value);
|
||||
}
|
||||
|
||||
function createElm(elmType) {
|
||||
return document.createElementNS('http://www.w3.org/2000/svg', elmType);
|
||||
}
|
||||
|
||||
function renderCharacter(charData) {
|
||||
var target = document.querySelector('#target');
|
||||
document.body.classList.toggle('has-radical-data', !!charData.radStrokes);
|
||||
target.innerHTML = '';
|
||||
var svg = createElm('svg');
|
||||
attr(svg, 'width', '100%');
|
||||
attr(svg, 'height', '100%');
|
||||
target.appendChild(svg);
|
||||
var group = createElm('g');
|
||||
attr(group, 'transform', 'translate(0, 263.671875) scale(0.29296875, -0.29296875)');
|
||||
svg.appendChild(group);
|
||||
charData.strokes.forEach((stroke, i) => {
|
||||
var isRadical = (charData.radStrokes || []).indexOf(i) > -1;
|
||||
var path = createElm('path');
|
||||
attr(path, 'd', stroke);
|
||||
path.classList.toggle('radical-stroke', isRadical);
|
||||
group.appendChild(path);
|
||||
});
|
||||
}
|
||||
|
||||
function updateClasses() {
|
||||
var target = document.querySelector('#target');
|
||||
var transparent = document.querySelector('#transparent').checked;
|
||||
var radical = document.querySelector('#radical').checked;
|
||||
target.classList.toggle('transparent-strokes', transparent);
|
||||
target.classList.toggle('color-radical', radical);
|
||||
}
|
||||
|
||||
document.querySelectorAll('input[type=checkbox]').forEach(function(node) {
|
||||
node.addEventListener('change', updateClasses);
|
||||
});
|
||||
|
||||
function renderLoadPath(char) {
|
||||
var cdnTarget = document.querySelector('#cdn-path');
|
||||
var url = getCharDataUrl(char)
|
||||
cdnTarget.innerHTML = `<a href="${url}" target="blank">${url}</a>`;
|
||||
|
||||
var npmTarget = document.querySelector('#npm-path');
|
||||
npmTarget.innerHTML = `var charData = require('hanzi-writer-data/${char}.json');`;
|
||||
}
|
||||
|
||||
function loadAndRender() {
|
||||
var char = document.querySelector('#char-input').value;
|
||||
loadData(char, function(charData) {
|
||||
renderCharacter(charData);
|
||||
renderLoadPath(char);
|
||||
window.location.hash = char.codePointAt(0);
|
||||
}, function(err) {
|
||||
console.error(err);
|
||||
alert(`Unable to load data for ${char}`);
|
||||
});
|
||||
}
|
||||
|
||||
function setCharFromHash(defaultChar) {
|
||||
var hashChar = defaultChar;
|
||||
if (window.location.hash) {
|
||||
var codePoint = parseInt(window.location.hash.slice(1));
|
||||
if (!isNaN(codePoint)) {
|
||||
hashChar = String.fromCodePoint(codePoint);
|
||||
}
|
||||
}
|
||||
if (hashChar) {
|
||||
document.querySelector('#char-input').value = hashChar;
|
||||
}
|
||||
}
|
||||
|
||||
setCharFromHash('我');
|
||||
window.addEventListener('hashchange', function() {
|
||||
setCharFromHash(null);
|
||||
loadAndRender();
|
||||
});
|
||||
document.querySelector('#update-char').addEventListener('click', loadAndRender);
|
||||
updateClasses();
|
||||
loadAndRender();
|
||||
|
||||
46
index.html
Normal file
46
index.html
Normal file
@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Hanzi Writer Data Explorer</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">Hanzi Writer Data Explorer</h1>
|
||||
|
||||
<p class="description">
|
||||
Explore the Chinese character SVG data used by <a href="https://chanind.github.io/hanzi-writer/">Hanzi Writer</a>. These stroke paths come from the <a href="https://github.com/skishore/makemeahanzi">Make me a Hanzi</a> project.
|
||||
</p>
|
||||
|
||||
<div class="controls char-input-controls">
|
||||
<input type="text" class="char-input" id="char-input" size="1" maxlength="1" />
|
||||
<button type="submit" id="update-char">Update</button>
|
||||
</div>
|
||||
|
||||
<div id="target">
|
||||
|
||||
</div>
|
||||
<div class="controls">
|
||||
<label>
|
||||
<input type="checkbox" checked name="transparent" id="transparent" value="1" />
|
||||
Transparent strokes
|
||||
</label>
|
||||
<label class="radical-control">
|
||||
<input type="checkbox" checked name="radical" id="radical" value="1" />
|
||||
Color radical
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="do-it">Load this data via CDN</div>
|
||||
<div class="cdn-path" id="cdn-path"></div>
|
||||
<div>Or via NPM</div>
|
||||
<div class="npm-path" id="npm-path"></div>
|
||||
|
||||
<div class="license">
|
||||
The Character data Hanzi Writer uses is from the <a href="https://github.com/skishore/makemeahanzi">Make Me A Hanzi</a> project, which extracted the data from fonts by <a href="http://www.arphic.com/">Arphic Technology</a>, a Taiwanese font forge that released their work under a permissive license in 1999. You can redistribute and/or modify this data (in the <a href="https://github.com/chanind/hanzi-writer-data">hanzi-writer-data</a> github repository) under the terms of the <a href="http://ftp.gnu.org/non-gnu/chinese-fonts-truetype/LICENSE">Arphic Public License</a> as published by Arphic Technology Co., Ltd. A copy of this license can also be found in <a href="https://raw.githubusercontent.com/chanind/hanzi-writer-data/master/ARPHICPL.TXT">ARPHICPL.TXT</a> of the hanzi-writer-data repo.
|
||||
</div>
|
||||
|
||||
<script type="application/javascript" src="explorer.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
123
styles.css
Normal file
123
styles.css
Normal file
@ -0,0 +1,123 @@
|
||||
body, html {
|
||||
background: #f4f0ea;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
body {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input, button {
|
||||
outline: none;
|
||||
}
|
||||
#target, .title, .controls, .cdn-path, .npm-path {
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.description {
|
||||
max-width: 400px;
|
||||
margin: 30px auto 50px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.title {
|
||||
background: white;
|
||||
padding: 15px 0;
|
||||
margin: 0 0 30px;
|
||||
}
|
||||
|
||||
#target {
|
||||
background: white;
|
||||
clear: both;
|
||||
border: 1px solid black;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.controls {
|
||||
width: 300px;
|
||||
padding: 5px;
|
||||
background: white;
|
||||
border: 1px solid black;
|
||||
margin: 5px auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.char-input-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.char-input {
|
||||
padding: 5px;
|
||||
margin-right: 5px;
|
||||
font-size: 24px;
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.do-it {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.cdn-path, .npm-path {
|
||||
max-width: 600px;
|
||||
background: white;
|
||||
padding: 10px 30px;
|
||||
margin: 20px auto 40px;
|
||||
display: inline-block;
|
||||
user-select: all;
|
||||
}
|
||||
.npm-path {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.license {
|
||||
font-size: 12px;
|
||||
max-width: 600px;
|
||||
margin: 50px auto 0;
|
||||
}
|
||||
|
||||
.license, .license a {
|
||||
color: #999;
|
||||
text-shadow: 1px 1px 0 white;
|
||||
}
|
||||
|
||||
.controls label {
|
||||
display: block;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
path {
|
||||
fill: #555;
|
||||
stroke: #000;
|
||||
stroke-width: 0;
|
||||
transition: all 500ms;
|
||||
}
|
||||
|
||||
.transparent-strokes path {
|
||||
fill: rgba(0,0,0,0.4);
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.radical-control {
|
||||
color: #AAA;
|
||||
}
|
||||
|
||||
.has-radical-data .radical-control {
|
||||
color: initial;
|
||||
}
|
||||
|
||||
.color-radical .radical-stroke {
|
||||
fill: rgb(22, 110, 22);
|
||||
}
|
||||
.transparent-strokes.color-radical .radical-stroke {
|
||||
fill: rgba(22, 110, 22, 0.4);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user