javascript/makemeahanzi
1
0
Fork 0
mirror of https://github.com/skishore/makemeahanzi.git synced 2025-11-03 22:18:19 +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', var COLORS = ['#0074D9', '#2ECC40', '#FFDC00', '#FF4136', '#7FDBFF',
'#001F3F', '#39CCCC', '#3D9970', '#01FF70', '#FF851B']; '#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 glyph = Session.get('glyph.data');
var name = glyph ? glyph.name : undefined; 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); Session.set('glyph.data', data);
}); });
} }
window.next_glyph = next_glyph;
Template.glyph.helpers({ Template.glyph.helpers({
size: function() { glyph: function() {
return SIZE; return !!Session.get('glyph.data');
},
transform: function() {
return TRANSFORM;
}, },
d: function() { d: function() {
var glyph = Session.get('glyph.data'); return Session.get('glyph.data').d;
return glyph ? glyph.d : undefined;
}, },
strokes: function() { strokes: function() {
var glyph = Session.get('glyph.data'); var glyph = Session.get('glyph.data');
if (!glyph) {
return [];
}
var result = []; var result = [];
var strokes = glyph.extractor.strokes; var strokes = glyph.extractor.strokes;
for (var i = 0; i < strokes.length; i++) { for (var i = 0; i < strokes.length; i++) {
@ -38,8 +41,27 @@ Template.glyph.helpers({
} }
return result; 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() { 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> <body>
{{> navbar}} {{> navbar}}
{{> progress}} {{> progress}}
<div class="centered"> {{> glyph}}
{{> glyph}}
</div>
</body> </body>
<template name="navbar"> <template name="navbar">
@ -43,12 +41,24 @@
<template name="glyph"> <template name="glyph">
<div id="glyph"> <div id="glyph">
<svg width="{{size}}" height="{{size}}"> <svg viewbox="0 0 1024 1024" class="svg">
<g transform="{{transform}}"> <g transform="scale(1, -1) translate(0, -900)">
<path d="{{d}}"></path> {{#if glyph}}
{{#each strokes}} <path d="{{d}}"></path>
<path fill="{{color}}" stroke="{{color}}" d="{{stroke}}"></path> {{#each strokes}}
{{/each}} <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> </g>
</svg> </svg>
</div> </div>

13
client/style.css
View File

@ -25,10 +25,19 @@
} }
.centered { .centered {
text-align: center;
} }
#glyph { #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; margin: 0 auto;
} }