javascript/makemeahanzi
1
0
Fork 0
mirror of https://github.com/skishore/makemeahanzi.git synced 2025-11-02 13:01:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add code to switch between glyphs

Browse Source
This commit is contained in:
Shaunak Kishore
2015-08-29 14:09:07 -04:00
parent de5f86c6d6
commit 499bcf153d
3 changed files with 69 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
client/glyph.js
View File

@ -2,35 +2,38 @@ Session.setDefault('glyph.data', undefined);
var COLORS = ['#0074D9', '#2ECC40', '#FFDC00', '#FF4136', '#7FDBFF',
'#001F3F', '#39CCCC', '#3D9970', '#01FF70', '#FF851B'];
var SCALE = 0.16;
var SIZE = Math.floor(1024*SCALE);
var TRANSFORM = 'scale(' + SCALE + ', -' + SCALE + ') translate(0, -900)'
function next_glyph() {
function change_glyph(method) {
var glyph = Session.get('glyph.data');
var name = glyph ? glyph.name : undefined;
Meteor.call('get_next_glyph', name, function(error, data) {
Meteor.call(method, name, function(error, data) {
Session.set('glyph.data', data);
});
}
function to_line(pairs) {
return {x1: pairs[0][0], y1: pairs[0][1], x2: pairs[1][0], y2: pairs[1][1]};
}
function to_point(pair) {
return {x: pair[0], y: pair[1]};
}
Glyphs.get = function(name) {
Meteor.call('get_glyph', name, function(error, data) {
Session.set('glyph.data', data);
});
}
window.next_glyph = next_glyph;
Template.glyph.helpers({
size: function() {
return SIZE;
},
transform: function() {
return TRANSFORM;
glyph: function() {
return !!Session.get('glyph.data');
},
d: function() {
var glyph = Session.get('glyph.data');
return glyph ? glyph.d : undefined;
return Session.get('glyph.data').d;
},
strokes: function() {
var glyph = Session.get('glyph.data');
if (!glyph) {
return [];
}
var result = [];
var strokes = glyph.extractor.strokes;
for (var i = 0; i < strokes.length; i++) {
@ -38,8 +41,27 @@ Template.glyph.helpers({
}
return result;
},
bridges: function() {
return Session.get('glyph.data').extractor.bridges.map(to_line);
},
corners: function() {
return Session.get('glyph.data').extractor.corners.map(to_point);
},
points: function() {
return Session.get('glyph.data').extractor.points.map(to_point);
},
});
Meteor.startup(function() {
next_glyph();
$('body').on('keypress', function(e) {
var key = String.fromCharCode(e.which);
if (key == 'a') {
change_glyph('get_previous_glyph');
} else if (key == 'd') {
change_glyph('get_next_glyph');
}
});
if (!Session.get('glyph.data')) {
change_glyph('get_next_glyph');
}
});

28
client/index.html
View File

@ -4,9 +4,7 @@
<body>
{{> navbar}}
{{> progress}}
<div class="centered">
{{> glyph}}
</div>
{{> glyph}}
</body>
<template name="navbar">
@ -43,12 +41,24 @@
<template name="glyph">
<div id="glyph">
<svg width="{{size}}" height="{{size}}">
<g transform="{{transform}}">
<path d="{{d}}"></path>
{{#each strokes}}
<path fill="{{color}}" stroke="{{color}}" d="{{stroke}}"></path>
{{/each}}
<svg viewbox="0 0 1024 1024" class="svg">
<g transform="scale(1, -1) translate(0, -900)">
{{#if glyph}}
<path d="{{d}}"></path>
{{#each strokes}}
<path fill="{{color}}" stroke="{{color}}" d="{{stroke}}"></path>
{{/each}}
{{#each bridges}}
<line x1={{x1}} y1={{y1}} x2={{x2}} y2={{y2}}
style="stroke:red; stroke-width:4"></line>
{{/each}}
{{#each points}}
<circle cx={{x}} cy={{y}} r="4"></circle>
{{/each}}
{{#each corners}}
<circle fill="red" stroke="red" cx={{x}} cy={{y}} r="4"></circle>
{{/each}}
{{/if}}
</g>
</svg>
</div>

13
client/style.css
View File

@ -25,10 +25,19 @@
}
.centered {
text-align: center;
}
#glyph {
display: inline-block;
position: absolute;
top: 60px;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
text-align: center;
}
#glyph .svg {
height: 100%;
margin: 0 auto;
}