@ -1,162 +1,695 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<script src="../../static/jquery.min.js" type="text/javascript"></script> |
||||
<link href="../../static/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"> |
||||
<link href="../../static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css"> |
||||
<link href="../../static/shoofle.css" rel="stylesheet" type="text/css"> |
||||
<script src="circle_setter_utils.js" type="text/javascript"></script> |
||||
<script src="circle_setter.js" type="text/javascript"></script> |
||||
</head> |
||||
<body> |
||||
<style type="text/css"> |
||||
svg circle, svg path { fill: none; } |
||||
svg .glyph { stroke: #600; fill: none; } |
||||
svg .vowel { stroke: #044; } |
||||
svg .radical { stroke: #004; } |
||||
svg circle.radical { fill: black; } |
||||
svg circle { stroke: #044; } |
||||
.highlit { fill: red; } |
||||
.veryhighlit { fill: green; } |
||||
.clicked { fill: darkgreen; } |
||||
|
||||
svg .enclosure { stroke: #000; } |
||||
</style> |
||||
<div class="row-fluid"> |
||||
<div class="span6 offset3"> |
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="400px" preserveAspectRatio="xMidYMax" id="arena" viewBox="-105 -105 210 210"> |
||||
<defs> |
||||
<path id="mound" d="M-10,0 H-8 A9,8 0,0,1 8,0 H10" class="glyph"></path> |
||||
<g id="mound2"> |
||||
<path d="M-10,0 H-8 A9,8 0 0,1 8,0 H10" class="glyph"></path> |
||||
<path d="M-6,0 A7,6 0,0,1 6,0" class="glyph"></path> |
||||
</g> |
||||
<path id="omega" d="M-10,0 H-4 A7,7 0,1,1 4,0 H10" class="glyph"></path> |
||||
<g id="omega2"> |
||||
<path d="M-10,0 H-4 A7,7 0,1,1 4,0 H10" class="glyph"></path> |
||||
<path d="M-1,-1 A4.5,4.5 0,1,1 1,-1" class="glyph"></path> |
||||
</g> |
||||
<path id="angle" d="M-10,0 H-6 L0,-8 L6,0 H10" class="glyph"></path> |
||||
<g id="angle2"> |
||||
<path d="M-10,0 H-6 L0,-8 L6,0 H10" class="glyph"></path> |
||||
<path d="M-4,0 L0,-5.3333 L4,0" class="glyph"></path> |
||||
</g> |
||||
<path id="chalice" d="M-10,0 H-6 A15,15 0,0,1 -10,-6 A15,10 0,0,0 10,-6 A15,15 0,0,1 6,0 H10" class="glyph"></path> |
||||
<g id="chalice2"> |
||||
<path d="M-10,0 H-6 A15,15 0,0,1 -10,-6 A15,10 0,0,0 10,-6 A15,15 0,0,1 6,0 H10" class="glyph"></path> |
||||
<path d="M-8.5,-3 A 14,9 0,0,0 8.5,-3" class="glyph"></path> |
||||
</g> |
||||
<path id="loop" d="M-10,0 H-8 C6,0 6,-10 0,-10 C-6,-10 -6,0 6,0 H10" class="glyph"></path> |
||||
<g id="loop2"> |
||||
<path d="M-10,0 H-8 C6,0 6,-10 0,-10 C-6,-10 -6,0 6,0 H10" class="glyph"></path> |
||||
<circle r="2" cx="0" cy="-6" class="glyph"></circle> |
||||
</g> |
||||
<path id="weird_up" d="M -4,-4 A 4,6 0,0,0 0,-8 A 4,6 0,0,0 4,-4" class="vowel"></path> |
||||
<path id="weird_down" d="M -4,-8 A 4,6 0,0,0 0,-4 A 4,6 0,0,0 4,-8" class="vowel"></path> |
||||
</defs> |
||||
</svg> |
||||
</div> |
||||
</div> |
||||
<hr> |
||||
<input type="text" value="shoof~l ihs ~ bihg dohrk" /> |
||||
<h3>Available Sounds:</h3> |
||||
<p id="sounds_list"></p> |
||||
<script type="text/javascript"> |
||||
function ns_elem () { if (typeof arguments[0] === "undefined") { console.log('There was an error in the element assist function. Called with no valid tag name!');} var elem; if (typeof arguments[1] === "string") { elem = document.createElementNS(arguments[1], arguments[0]); for (var i=2; i<arguments.length; i+=2) { if (typeof arguments[i+1] === "undefined") { for (var key in arguments[i]) { elem.setAttribute(key, arguments[i][key]); } break; } else { for (var key in arguments[i]) { elem.setAttributeNS(arguments[i+1], key, arguments[i][key]); } } } } else { elem = document.createElement(arguments[0]); for (var i=1; i<arguments.length; i+=2) { if (typeof arguments[i+1] === "undefined") { for (var key in arguments[i]) { elem.setAttribute(key, arguments[i][key]); } break; } else { for (var key in arguments[i]) { elem.setAttributeNS(arguments[i+1], key, arguments[i][key]); } } } } return elem;} |
||||
|
||||
function svg_from_dom(point, svg) { |
||||
const pt = svg.createSVGPoint(); |
||||
pt.x = point.x; |
||||
pt.y = point.y; |
||||
|
||||
return pt.matrixTransform(svg.getScreenCTM().inverse()); |
||||
} |
||||
function point_from_circle(circle) { |
||||
return {x:parseFloat(circle.attr('cx')), y:parseFloat(circle.attr('cy'))}; |
||||
} |
||||
</script> |
||||
<script type="text/javascript"> |
||||
var svg_ns = "http://www.w3.org/2000/svg"; |
||||
var xlink_ns = "http://www.w3.org/1999/xlink"; |
||||
var svg; |
||||
|
||||
var current_selection = null; |
||||
$(document).ready(function() { |
||||
svg = $('svg')[0]; |
||||
}); |
||||
|
||||
function norm (vector) { |
||||
var norm = Math.sqrt(vector.x*vector.x + vector.y*vector.y); |
||||
return {x: vector.x / norm, y: vector.y / norm}; |
||||
#testbed { display: none; } |
||||
td svg { |
||||
width: 100px; |
||||
} |
||||
th label svg { |
||||
display: none; |
||||
} |
||||
#consonant-grid, #vowel-grid { |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
} |
||||
function len (vector) { |
||||
return Math.sqrt(vector.x*vector.x + vector.y*vector.y); |
||||
td { |
||||
padding: 0.25em; |
||||
} |
||||
function sub (a, b) { return {x: a.x-b.x, y: a.y-b.y}; } |
||||
function add (a, b) { return {x: a.x+b.x, y: a.y+b.y}; } |
||||
function mul (a, b) { |
||||
if ("x" in a) { return {x: a.x*b, y: a.y*b}; } |
||||
return a*b; |
||||
.vowel-example { |
||||
padding: 1em; |
||||
} |
||||
td, .vowel-sequence { |
||||
border: 2px solid gray; |
||||
} |
||||
table > img { |
||||
width: 50%; |
||||
height: 50%; |
||||
} |
||||
|
||||
const selection_thresh = 10; |
||||
const major_radius = 60; |
||||
var angles = [0, 1.5, 4]; |
||||
var points = $.map(angles, function(elem, index) { |
||||
return {x:major_radius * Math.cos(elem), y:major_radius * Math.sin(elem)}; |
||||
}); |
||||
console.log('points!', points); |
||||
const circles = $.map(points, function(point, index) { |
||||
return $(ns_elem('circle', svg_ns)).attr('cx', point.x).attr('cy', point.y).attr('r', 10); |
||||
}); |
||||
|
||||
$(document).ready(function() { |
||||
$.each(circles, function(idx, circ) { |
||||
$(svg).append(circ); |
||||
}) |
||||
}); |
||||
|
||||
function highlight_nearest(mouse) { |
||||
var testmag = 900000000; |
||||
var closest_idx = 0; |
||||
svg#arena circle, svg#arena path { fill: none; stroke: #600; } |
||||
svg#arena .consonant { stroke: #600; fill: none; } |
||||
svg#arena .radical { stroke: #004; } |
||||
svg#arena circle.radical { fill: black; } |
||||
svg#arena circle { stroke: #044; } |
||||
.highlit { fill: red; } |
||||
.veryhighlit { fill: green; } |
||||
.clicked { fill: darkgreen; } |
||||
.placeholder { fill: lightblue; } |
||||
|
||||
$.each(circles, function(idx, circ) { |
||||
const mag = len(sub(point_from_circle(circ), mouse)); |
||||
if (mag < testmag) { |
||||
testmag = mag; |
||||
closest_idx = idx; |
||||
} |
||||
}); |
||||
.chosen { fill: blue;stroke: red; } |
||||
|
||||
$.each(circles, function(idx, circle) { |
||||
$(circle).removeClass('highlit').removeClass('veryhighlit'); |
||||
}); |
||||
rect { fill:transparent; } |
||||
#delete { fill:pink; } |
||||
|
||||
current_selection = null; |
||||
svg#arena .enclosure { stroke: #000; } |
||||
|
||||
if (testmag < selection_thresh) { |
||||
$(circles[closest_idx]).attr('class', 'veryhighlit'); |
||||
current_selection = circles[closest_idx]; |
||||
} else { |
||||
$(circles[closest_idx]).attr('class', 'highlit'); |
||||
} |
||||
#vowel-grid { |
||||
display: block; |
||||
} |
||||
.vowel-sequence { |
||||
display: block; |
||||
} |
||||
.vowel-example { |
||||
display: inline-block; |
||||
} |
||||
.vowel-example * { |
||||
vertical-align: middle; |
||||
} |
||||
.vowel-example > svg { |
||||
width: 3.5em; |
||||
height: 3.5em; |
||||
} |
||||
.unverified { |
||||
color: lightgray; |
||||
} |
||||
</style> |
||||
<svg id="testbed" width=800><g |
||||
inkscape:label="Layer 1" |
||||
inkscape:groupmode="layer" |
||||
class="angle-1" class="megaglyph"><path |
||||
style="opacity:1;fill:none;stroke:#000000;stroke-width:2.88527;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M -14.06223,75.917879 H 39.968325 L 39.843832,126.71158" |
||||
class="glyph" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 5.6174494,75.22561 C 6.0813724,41.977797 -0.2589083,-1.1670398 -0.2589083,-1.1670398" |
||||
class="line_2" |
||||
sodipodi:nodetypes="cc" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 22.988704,75.145855 C 23.452627,41.898043 28.865062,-0.93751155 28.865062,-0.93751155" |
||||
class="line_3" |
||||
sodipodi:nodetypes="cc" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="m 14.502302,74.634887 c 0.463923,-33.247813 0,-74.22767555 0,-74.22767555" |
||||
class="line_1" /> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M -6.0317653,62.94798 C 7.2673588,45.937471 9.7416152,47.32924 13.298357,50.576701" |
||||
id="path1720" class="dot_2"/> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 4.9623979,42.300769 C 18.261522,25.29026 20.735778,26.682029 24.292521,29.92949" |
||||
id="path1720-7" class="dot_1"/> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 16.096549,63.950507 C 29.395673,46.939999 31.86993,48.331768 35.426672,51.579229" |
||||
id="path1720-1" class="dot_3"/> |
||||
</g></svg> |
||||
<div class="row-fluid"> |
||||
|
||||
$(document).mousemove(function(event) { |
||||
const mouse_position = {x:event.clientX, y:event.clientY}; |
||||
var s_position = svg_from_dom(mouse_position, svg); |
||||
// get the position inside the svg tag for the mouse |
||||
<div class="span4"><!-- consonants --> |
||||
<form id="consonant_form"> |
||||
<table id="consonant-grid"> |
||||
<thead> |
||||
<tr class="header"> |
||||
<th></th> |
||||
<th scope="col" class="diacritic-header"> |
||||
<input type="radio" id="rad_1" name="radicals" value="example-diacritic-1.svg"> |
||||
<label for="rad_1"><img src="example-diacritic-1.svg" /></label> |
||||
</th> |
||||
<th scope="col" class="diacritic-header"> |
||||
<input type="radio" id="rad_2" name="radicals" value="example-diacritic-2.svg"> |
||||
<label for="rad_2"><img src="example-diacritic-2.svg" /></label> |
||||
</th> |
||||
<th scope="col" class="diacritic-header"> |
||||
<input type="radio" id="rad_3" name="radicals" value="example-diacritic-3.svg"> |
||||
<label for="rad_3"><img src="example-diacritic-3.svg" /></label> |
||||
</th> |
||||
<th scope="col" class="diacritic-header"> |
||||
<input type="radio" id="rad_4" name="radicals" value="example-diacritic-4.svg"> |
||||
<label for="rad_4"><img src="example-diacritic-4.svg" /></label> |
||||
</th> |
||||
<th scope="col" class="diacritic-header"> |
||||
<input type="radio" id="rad_5" name="radicals" value="example-diacritic-5.svg"> |
||||
<label for="rad_5"><img src="example-diacritic-5.svg" /></label> |
||||
</th> |
||||
<th></th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr> |
||||
<th scope="row" class="consonant-shape"> |
||||
<input type="radio" id="shape_1_u" name="glyphs" value="consonant-mound-1.svg"> |
||||
<label for="shape_1_u"><svg> |
||||
<g |
||||
inkscape:label="Layer 1" |
||||
inkscape:groupmode="layer" |
||||
class="mound-1 megaglyph" |
||||
transform="translate(25,0)"><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.38618;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M -22.108869,113.14142 C -14.825778,68.277574 38.195123,67.792033 47.420373,112.9472" |
||||
class="glyph" |
||||
sodipodi:nodetypes="cc" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="m 12.100818,78.237112 c 0.463923,-33.247812 0,-74.2276752 0,-74.2276752" |
||||
class="line_1" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 3.5161518,80.328763 C 3.9800748,47.08095 -2.3602059,3.9361133 -2.3602059,3.9361133" |
||||
class="line_2" |
||||
sodipodi:nodetypes="cc" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 20.887406,80.249008 C 21.351329,47.001196 26.763764,4.1656416 26.763764,4.1656416" |
||||
class="line_3" |
||||
sodipodi:nodetypes="cc" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M -6.9323217,68.201226 C 6.3668024,51.190717 8.8410588,52.582486 12.397801,55.829947" |
||||
class="dot_2" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 4.0618415,47.554015 C 17.360965,30.543506 19.835221,31.935275 23.391964,35.182736" |
||||
class="dot_1" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 15.195992,69.203753 C 28.495116,52.193245 30.969373,53.585014 34.526115,56.832475" |
||||
class="dot_3" /></g> |
||||
</svg></label> |
||||
</th> |
||||
<td>[m]<svg/></td> |
||||
<td>[n]<svg/></td> |
||||
<td class="unverified">[ñ]</td> |
||||
<td>[ŋ]<svg/></td> |
||||
<td></td> |
||||
<th scope="row" class="consonant-shape"> |
||||
<input type="radio" id="shape_1_v" name="glyphs" value="consonant-mound-2.svg"> |
||||
<label for="shape_1_v"><img src="consonant-mound-2.svg" /></label> |
||||
</th> |
||||
</tr> |
||||
<tr> |
||||
<th scope="row" class="consonant-shape"> |
||||
<input type="radio" id="shape_2_u" name="glyphs" value="consonant-ohm-1.svg"> |
||||
<label for="shape_2_u"><svg> |
||||
<g |
||||
inkscape:label="Layer 1" |
||||
inkscape:groupmode="layer" |
||||
class="omega-1 megaglyph" |
||||
transform="translate(25,0)"> |
||||
<path |
||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.3829;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="m -20.755057,77.343458 c 0,0 0,30.618622 0.380829,46.994252 C -23.040029,95.204323 -6.4362494,84.506425 8.6829945,92.576601 23.802242,100.64678 20.107856,123.61413 -0.07606316,123.80455 H 44.10006" |
||||
class="glyph" |
||||
sodipodi:nodetypes="cczcc" /> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="m -1.7099346,89.222829 c 0.46392,-33.24781 0,-74.22767 0,-74.22767" |
||||
class="line_1" /> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 23.690919,125.15467 C 24.154842,91.90686 17.814561,48.76203 17.814561,48.76203" |
||||
class="line_2" |
||||
sodipodi:nodetypes="cc" /> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="m 41.062172,125.07492 c 0.46392,-33.24781 5.87636,-76.08337 5.87636,-76.08337" |
||||
class="line_3" |
||||
sodipodi:nodetypes="cc" /> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M -12.402587,73.540483 C -5.9076651,66.117713 20.07202,31.787413 34.91756,47.251513" |
||||
class="dot_1" |
||||
inkscape:label="dot_1" /> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 0.413012,80.253857 C 13.712136,63.243348 16.186393,64.635117 19.743135,67.882578" |
||||
class="dot_2" |
||||
inkscape:label="dot_2" /> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 22.541326,81.256384 C 35.84045,64.245876 38.314707,65.637645 41.871449,68.885106" |
||||
id="path1720-1" |
||||
class="dot_3" /> |
||||
</g> |
||||
</svg></label> |
||||
</th> |
||||
<td>[p], [b]<svg/></td> |
||||
<td>[t], [d]<svg/></td> |
||||
<td></td> |
||||
<td>[k], [g]<svg/></td> |
||||
<td class="unverified">[q], [ɢ]</td> |
||||
<th scope="row" class="consonant-shape"> |
||||
<input type="radio" id="shape_2_v" name="glyphs" value="consonant-ohm-2.svg"> |
||||
<label for="shape_2_v"><img src="consonant-ohm-2.svg" /></label> |
||||
</th> |
||||
</tr> |
||||
<tr> |
||||
<th scope="row" class="consonant-shape"> |
||||
<input type="radio" id="shape_3_u" name="glyphs" value="consonant-angle-1.svg"> |
||||
<label for="shape_3_u"><svg> |
||||
<g |
||||
inkscape:label="Layer 1" |
||||
inkscape:groupmode="layer" |
||||
class="angle-1 megaglyph" |
||||
transform="translate(25,0)"> |
||||
<path |
||||
style="opacity:1;fill:none;stroke:#000000;stroke-width:2.88527;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M -14.06223,75.917879 H 39.968325 L 39.843832,126.71158" |
||||
class="glyph" /> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 5.6174494,75.22561 C 6.0813724,41.977797 -0.2589083,-1.1670398 -0.2589083,-1.1670398" |
||||
class="line_2" |
||||
sodipodi:nodetypes="cc" /> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 22.988704,75.145855 C 23.452627,41.898043 28.865062,-0.93751155 28.865062,-0.93751155" |
||||
class="line_3" |
||||
sodipodi:nodetypes="cc" /> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="m 14.502302,74.634887 c 0.463923,-33.247813 0,-74.22767555 0,-74.22767555" |
||||
class="line_1" /> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M -6.0317653,62.94798 C 7.2673588,45.937471 9.7416152,47.32924 13.298357,50.576701" |
||||
id="path1720" class="dot_2"/> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 4.9623979,42.300769 C 18.261522,25.29026 20.735778,26.682029 24.292521,29.92949" |
||||
id="path1720-7" class="dot_1"/> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 16.096549,63.950507 C 29.395673,46.939999 31.86993,48.331768 35.426672,51.579229" |
||||
id="path1720-1" class="dot_3"/> |
||||
</g> |
||||
</svg></label> |
||||
</th> |
||||
<td>[f], [v]<svg></svg></td> |
||||
<td>[s], [z]<svg></svg></td> |
||||
<td>[ʃ], [ʒ]<svg></svg></td> |
||||
<td></td> |
||||
<td class="unverified">[ʔ], [ʡ]<svg></svg></td> |
||||
<th scope="row" class="consonant-shape"> |
||||
<input type="radio" id="shape_3_v" name="glyphs" value="consonant-angle-2.svg"> |
||||
<label for="shape_3_v"><img src="consonant-angle-2.svg" /></label> |
||||
</th> |
||||
</tr> |
||||
<tr> |
||||
<th scope="row" class="consonant-shape"> |
||||
<input type="radio" id="shape_4_u" name="glyphs" value="consonant-loop-1.svg"> |
||||
<label for="shape_4_u"><svg> |
||||
<g |
||||
inkscape:label="Layer 1" |
||||
inkscape:groupmode="layer" |
||||
class="loop-1 megaglyph" |
||||
transform="translate(25,0)"><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.47853;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="m -17.664457,111.5189 c 17.71094207,0 50.4325,2.83413 56.735052,-9.45585 C 43.573377,93.28263 38.467691,81.072874 30.440263,79.305245 19.108262,76.809953 6.7206019,82.850589 6.8006582,96.359531 c 0.093399,15.760439 0.600371,39.624479 0.600371,39.624479" |
||||
class="path1628" |
||||
sodipodi:nodetypes="csssc" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="m 23.808051,77.786834 c 0.463923,-33.247812 0,-74.2276754 0,-74.2276754" |
||||
class="line_1" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 15.223385,80.178675 C 15.687308,46.930858 9.347027,3.7860214 9.347027,3.7860214" |
||||
class="line_2" |
||||
sodipodi:nodetypes="cc" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 32.594639,80.098915 C 33.058562,46.851104 38.470997,4.0155494 38.470997,4.0155494" |
||||
class="line_3" |
||||
sodipodi:nodetypes="cc" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 4.774911,69.552061 C 18.074035,52.541552 20.548292,53.933321 24.105034,57.180782" |
||||
class="dot_2" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 15.769074,48.90485 C 29.068198,31.894341 31.542454,33.28611 35.099197,36.533571" |
||||
class="dot_1" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 26.903225,70.554588 C 40.202349,53.54408 42.676606,54.935849 46.233348,58.18331" |
||||
class="dot_3" /></g> |
||||
</svg></label> |
||||
</th> |
||||
<td>[θ], [ð]<svg/></td> |
||||
<td class="unverified">[ts]<svg/></td> |
||||
<td>[tʃ], [dʒ]<svg/></td> |
||||
<td>[x~χ], <span class="unverified">[ʁ]</span><svg/></td> |
||||
<td></td> |
||||
<th scope="row" class="consonant-shape"> |
||||
<input type="radio" id="shape_4_v" name="glyphs" value="consonant-loop-2.svg"> |
||||
<label for="shape_4_v"><img src="consonant-loop-2.svg" /></label> |
||||
</th> |
||||
</tr> |
||||
<tr> |
||||
<th scope="row" class="consonant-shape"> |
||||
<input type="radio" id="shape_5_u" name="glyphs" value="consonant-wave-1.svg"> |
||||
<label for="shape_5_u"><svg> |
||||
<g |
||||
inkscape:label="Layer 1" |
||||
inkscape:groupmode="layer" |
||||
class="wave-1 megaglyph" |
||||
transform="translate(25,0)"><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.47853;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M -22.617516,106.41574 C -10.15982,87.804245 -3.4056477,76.397198 -3.4056477,76.397198 c 0,0 -3.1519473,26.266232 11.2569551,26.116132 C 22.260209,102.36324 26.913083,76.847476 26.913083,76.847476 l 23.414466,29.868454" |
||||
class="glyph" |
||||
sodipodi:nodetypes="ccscc" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="m 8.1984075,103.1525 c 0.463923,-33.247807 0,-74.22767 0,-74.22767" |
||||
class="line_1" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M -3.3881142,77.627094 C -2.9241912,44.379281 -9.2644719,1.2344442 -9.2644719,1.2344442" |
||||
class="line_2" |
||||
sodipodi:nodetypes="cc" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 26.891115,78.748081 C 27.355038,45.500269 32.767473,2.6647142 32.767473,2.6647142" |
||||
class="line_3" |
||||
sodipodi:nodetypes="cc" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M -7.8328782,68.651504 C 5.4662459,51.640995 7.9405023,53.032764 11.497244,56.280225" |
||||
class="dot_2" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 3.161285,48.004293 C 16.460409,30.993784 18.934665,32.385553 22.491408,35.633014" |
||||
class="dot_1" /><path |
||||
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="M 14.295436,69.654031 C 27.59456,52.643523 30.068817,54.035292 33.625559,57.282753" |
||||
class="dot_3" /></g> |
||||
</svg></label> |
||||
</th> |
||||
<td>[w]<svg/></td> |
||||
<td>[ɹ], [l]<svg/></td> |
||||
<td>[ɾ~r], <span class="unverified">[ɬ]</span><svg/></td> |
||||
<td>[j]<svg/></td> |
||||
<td>[h]<svg/></td> |
||||
<th scope="row" class="consonant-shape"> |
||||
<input type="radio" id="shape_5_v" name="glyphs" value="consonant-wave-2.svg"> |
||||
<label for="shape_5_v"><img src="consonant-wave-2.svg" /></label> |
||||
</th> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
</form> |
||||
</div> |
||||
<div class="span4 "> |
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="400px" preserveAspectRatio="xMidYMax" id="arena" viewBox="-75 -105 150 210" draggable="false"> |
||||
<rect x="-200" y="-1" width="400" height="2"/> |
||||
<defs> |
||||
</defs> |
||||
<g transform="translate(-100,0)" id="place_group"> |
||||
<g transform="scale(0.5)" > |
||||
<rect x="-30" y="-70" width="60" height="70"/> |
||||
<image x="-25" y="-70" class="radical placeholder"/> |
||||
<image x="-25" y="-50" class="glyph placeholder"/> |
||||
</g> |
||||
</g> |
||||
|
||||
highlight_nearest(s_position); |
||||
}); |
||||
<circle cx="0" cy="0" r="60" id="word_circle" /> |
||||
<rect x="-50" id="delete" y="80" width="100" height="80"/> |
||||
|
||||
$(document).on('mousedown', function(event) { |
||||
if (current_selection) { |
||||
$(current_selection).attr('class', 'clicked'); |
||||
} |
||||
}); |
||||
$(document).on('dragstop', function(event) { |
||||
<g transform="translate(100,0)" id="vowel_place_group"> |
||||
<g id="vowel_copy_from_here"> |
||||
<rect x="-15" y="-35" width="30" height="35"/> |
||||
<g id="vowel_put_it_in_here" transform="translate(-6,-30) scale(0.5)"></g> |
||||
</g> |
||||
</g> |
||||
</svg> |
||||
</div> |
||||
<div class="span4"> |
||||
<div id="vowel-grid"> |
||||
<div class="vowel-sequence"> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 0 24 80" > |
||||
<path |
||||
d="m -24.143392,69.705313 h 21.9728073 c 0,0 -8.7107683,-5.308618 -8.6254273,-18.536589 0.08534,-13.227971 11.8971468,-19.957943 22.88067,-20.100079 10.983523,-0.142135 24.132914,6.070091 24.270193,19.58669 0.137279,13.516599 -8.372985,19.018148 -8.372985,19.018148 l 21.57823,-0.142137" |
||||
id="base-omega" |
||||
sodipodi:nodetypes="cczzzcc" /> |
||||
<circle |
||||
id="dot-outer" |
||||
cx="12.504731" |
||||
cy="50.600185" |
||||
r="7.9595795" /> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.49271999;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" |
||||
d="m 12.50473,58.701897 c 0,15.634887 0,15.634887 0,15.634887" |
||||
id="emphasis-outer" /> |
||||
</svg> |
||||
[ɑ, a], box or bah |
||||
</div> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 0 24 80" > |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.48083;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="m -24.143392,69.705313 h 21.9728073 c 0,0 -8.7107683,-5.308618 -8.6254273,-18.536589 0.08534,-13.227971 11.8971468,-19.957943 22.88067,-20.100079 10.983523,-0.142135 24.132914,6.070091 24.270193,19.58669 0.137279,13.516599 -8.372985,19.018148 -8.372985,19.018148 l 21.57823,-0.142137" |
||||
id="base-omega" |
||||
sodipodi:nodetypes="cczzzcc" /> |
||||
<circle |
||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
id="dot-outer" |
||||
cx="12.504731" |
||||
cy="50.600185" |
||||
r="7.9595795" /> |
||||
</svg> |
||||
[ʌ, ə], but or schwa |
||||
</div> |
||||
</div> |
||||
<div class="vowel-sequence"> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 -12 24 80" > |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="m -24.402715,49.335233 h 12.307604 c 0,0 7.3545431,-18.311313 24.915392,-18.311313 17.560849,0 23.714653,18.137348 23.714653,18.137348 l 12.907974,-0.142135" |
||||
id="base-mound" |
||||
sodipodi:nodetypes="cczcc" /> |
||||
<circle |
||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
id="dot-inner" |
||||
cx="12.50473" |
||||
cy="14.924212" |
||||
r="7.9595795" /> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.49271999;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" |
||||
d="M 12.646867,6.8224964 C 12.504729,-8.9545266 12.504729,-1.2792181 12.504729,-1.2792181" |
||||
id="emphasis-inner" /> |
||||
</svg> |
||||
[i], beat |
||||
</div> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 -12 24 80" > |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="m -24.402715,49.335233 h 12.307604 c 0,0 7.3545431,-18.311313 24.915392,-18.311313 17.560849,0 23.714653,18.137348 23.714653,18.137348 l 12.907974,-0.142135" |
||||
id="base-mound" |
||||
sodipodi:nodetypes="cczcc" /> |
||||
<circle |
||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
id="dot-inner" |
||||
cx="12.50473" |
||||
cy="14.924212" |
||||
r="7.9595795" /> |
||||
</svg> |
||||
[ɪ], bit |
||||
</div> |
||||
</div> |
||||
<div class="vowel-sequence"> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 -12 24 80" > |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="m -24.402715,49.335233 h 12.307604 c 0,0 7.3545431,-18.311313 24.915392,-18.311313 17.560849,0 23.714653,18.137348 23.714653,18.137348 l 12.907974,-0.142135" |
||||
id="base-mound" |
||||
sodipodi:nodetypes="cczcc" /> |
||||
<path |
||||
sodipodi:type="star" |
||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
id="triangle-inner" |
||||
sodipodi:sides="3" |
||||
sodipodi:cx="12.602679" |
||||
sodipodi:cy="15.606641" |
||||
sodipodi:r1="8.7842556" |
||||
sodipodi:r2="8.4311752" |
||||
sodipodi:arg1="-1.565766" |
||||
sodipodi:arg2="-0.51856839" |
||||
inkscape:flatsided="true" |
||||
inkscape:rounded="0" |
||||
inkscape:randomized="0" |
||||
d="M 12.646867,6.822496 20.187878,20.036981 4.9732929,19.960446 Z" |
||||
inkscape:transform-center-x="0.11044414" |
||||
inkscape:transform-center-y="-0.12140727" /> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.49271999;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" |
||||
d="M 12.646867,6.8224964 C 12.504729,-8.9545266 12.504729,-1.2792181 12.504729,-1.2792181" |
||||
id="emphasis-inner" /> |
||||
</svg> |
||||
[u], boot |
||||
</div> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 -12 24 80" > |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="m -24.402715,49.335233 h 12.307604 c 0,0 7.3545431,-18.311313 24.915392,-18.311313 17.560849,0 23.714653,18.137348 23.714653,18.137348 l 12.907974,-0.142135" |
||||
id="base-mound" |
||||
sodipodi:nodetypes="cczcc" /> |
||||
<path |
||||
sodipodi:type="star" |
||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
id="triangle-inner" |
||||
sodipodi:sides="3" |
||||
sodipodi:cx="12.602679" |
||||
sodipodi:cy="15.606641" |
||||
sodipodi:r1="8.7842556" |
||||
sodipodi:r2="8.4311752" |
||||
sodipodi:arg1="-1.565766" |
||||
sodipodi:arg2="-0.51856839" |
||||
inkscape:flatsided="true" |
||||
inkscape:rounded="0" |
||||
inkscape:randomized="0" |
||||
d="M 12.646867,6.822496 20.187878,20.036981 4.9732929,19.960446 Z" |
||||
inkscape:transform-center-x="0.11044414" |
||||
inkscape:transform-center-y="-0.12140727" /> |
||||
</svg> |
||||
[ʊ], book |
||||
</div> |
||||
</div> |
||||
<div class="vowel-sequence"> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 -12 24 80" > |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="m -24.402715,49.335233 h 12.307604 c 0,0 7.3545431,-18.311313 24.915392,-18.311313 17.560849,0 23.714653,18.137348 23.714653,18.137348 l 12.907974,-0.142135" |
||||
id="base-mound" |
||||
sodipodi:nodetypes="cczcc" /> |
||||
<circle |
||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
id="dot-outer" |
||||
cx="12.504731" |
||||
cy="50.600185" |
||||
r="7.9595795" /> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.49271999;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" |
||||
d="m 12.50473,58.701897 c 0,15.634887 0,15.634887 0,15.634887" |
||||
id="emphasis-outer" /> |
||||
</svg> |
||||
[ɛi, e], bait |
||||
</div> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 -12 24 80" > |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="m -24.402715,49.335233 h 12.307604 c 0,0 7.3545431,-18.311313 24.915392,-18.311313 17.560849,0 23.714653,18.137348 23.714653,18.137348 l 12.907974,-0.142135" |
||||
id="base-mound" |
||||
sodipodi:nodetypes="cczcc" /> |
||||
<circle |
||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
id="dot-outer" |
||||
cx="12.504731" |
||||
cy="50.600185" |
||||
r="7.9595795" /> |
||||
</svg> |
||||
[ɛ], bet |
||||
</div> |
||||
</div> |
||||
<div class="vowel-sequence"> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 0 24 80" > |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.48083;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="m -24.143392,69.705313 h 21.9728073 c 0,0 -8.7107683,-5.308618 -8.6254273,-18.536589 0.08534,-13.227971 11.8971468,-19.957943 22.88067,-20.100079 10.983523,-0.142135 24.132914,6.070091 24.270193,19.58669 0.137279,13.516599 -8.372985,19.018148 -8.372985,19.018148 l 21.57823,-0.142137" |
||||
id="base-omega" |
||||
sodipodi:nodetypes="cczzzcc" /> |
||||
<circle |
||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
id="dot-inner" |
||||
cx="12.50473" |
||||
cy="14.924212" |
||||
r="7.9595795" /> |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.49271999;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" |
||||
d="M 12.646867,6.8224964 C 12.504729,-8.9545266 12.504729,-1.2792181 12.504729,-1.2792181" |
||||
id="emphasis-inner" /> |
||||
</svg> |
||||
[o, ɔu], won't, boat |
||||
</div> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 0 24 80" > |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.48083;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="m -24.143392,69.705313 h 21.9728073 c 0,0 -8.7107683,-5.308618 -8.6254273,-18.536589 0.08534,-13.227971 11.8971468,-19.957943 22.88067,-20.100079 10.983523,-0.142135 24.132914,6.070091 24.270193,19.58669 0.137279,13.516599 -8.372985,19.018148 -8.372985,19.018148 l 21.57823,-0.142137" |
||||
id="base-omega" |
||||
sodipodi:nodetypes="cczzzcc" /> |
||||
<circle |
||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
id="dot-inner" |
||||
cx="12.50473" |
||||
cy="14.924212" |
||||
r="7.9595795" /> |
||||
</svg> |
||||
[ɔ], bawk |
||||
</div> |
||||
</div> |
||||
<div class="vowel-sequence"> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 0 24 80" > |
||||
<path |
||||
style="fill:none;stroke:#000000;stroke-width:3.48083;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
d="m -24.143392,69.705313 h 21.9728073 c 0,0 -8.7107683,-5.308618 -8.6254273,-18.536589 0.08534,-13.227971 11.8971468,-19.957943 22.88067,-20.100079 10.983523,-0.142135 24.132914,6.070091 24.270193,19.58669 0.137279,13.516599 -8.372985,19.018148 -8.372985,19.018148 l 21.57823,-0.142137" |
||||
id="base-omega" |
||||
sodipodi:nodetypes="cczzzcc" /> |
||||
<circle |
||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" |
||||
id="dot-on" |
||||
cx="12.646866" |
||||
cy="31.411909" |
||||
r="7.9595795" /> |
||||
</svg> |
||||
[æ], bat |
||||
</div> |
||||
</div> |
||||
<div class="vowel-sequence"> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 0 24 80" > |
||||
<path |
||||
d="m -24.143392,69.705313 c 21.9728073,0 54.541558,-0.600371 58.120012,-22.089973 C 35.199043,37.798618 21.290897,32.244199 12.511064,32.347864 3.742928,32.451391 -10.546513,37.771707 -8.5599175,48.096898 -4.5769567,68.798058 27.981866,69.673483 49.560097,69.531345" |
||||
id="base-loop" |
||||
sodipodi:nodetypes="ccssc" /> |
||||
<circle |
||||
id="dot-outer" |
||||
cx="12.504731" |
||||
cy="50.600185" |
||||
r="7.9595795" /> |
||||
</svg> |
||||
[au], cow |
||||
</div> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 0 24 80" > |
||||
<path |
||||
d="m -24.143392,69.705313 c 21.9728073,0 54.541558,-0.600371 58.120012,-22.089973 C 35.199043,37.798618 21.290897,32.244199 12.511064,32.347864 3.742928,32.451391 -10.546513,37.771707 -8.5599175,48.096898 -4.5769567,68.798058 27.981866,69.673483 49.560097,69.531345" |
||||
id="base-loop" |
||||
sodipodi:nodetypes="ccssc" /> |
||||
<circle |
||||
id="dot-on" |
||||
cx="12.646866" |
||||
cy="31.411909" |
||||
r="7.9595795" /> |
||||
</svg> |
||||
[ai, aɪ], by |
||||
</div> |
||||
<div class="vowel-example"> |
||||
<svg viewBox="0 0 24 80" > |
||||
<path |
||||
|
||||
d="m -24.143392,69.705313 c 21.9728073,0 54.541558,-0.600371 58.120012,-22.089973 C 35.199043,37.798618 21.290897,32.244199 12.511064,32.347864 3.742928,32.451391 -10.546513,37.771707 -8.5599175,48.096898 -4.5769567,68.798058 27.981866,69.673483 49.560097,69.531345" |
||||
id="base-loop" |
||||
sodipodi:nodetypes="ccssc" /> |
||||
<circle |
||||
|
||||
id="dot-inner" |
||||
cx="12.50473" |
||||
cy="14.924212" |
||||
r="7.9595795" /> |
||||
</svg> |
||||
[ɔi, ɔɪ], boy |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<hr> |
||||
|
||||
}); |
||||
|
||||
</script> |
||||
<h2 id="xthing">x value is something</h2> |
||||
|
||||
</body> |
||||
</html> |
@ -0,0 +1,210 @@ |
||||
var currently_dragging = null; // if this is null, we have nothing being dragged. if it's not null, then it will represent the glyph object (as goes in the glyphs array) which is currently being dragged
|
||||
|
||||
const selection_thresh = 10; |
||||
var major_radius; |
||||
const glyphs = []; |
||||
|
||||
var embed; |
||||
|
||||
|
||||
$(document).ready(function() { |
||||
svg = $('svg#arena')[0]; |
||||
major_radius = parseFloat($('circle').attr('r')); |
||||
|
||||
//$.each(glyphs, function(idx, glyph) {
|
||||
// glyph.element.appendTo($(svg));
|
||||
//})
|
||||
|
||||
$(document).on("mouseup", on_mouse_up); |
||||
$("#place_group").on("mousedown", omd_consonant); |
||||
$("#vowel_place_group").on("mousedown", omd_vowel); |
||||
|
||||
// handle changing the consonants
|
||||
$('#consonant_form input').on('change', function(event) { |
||||
let glyph = $("#consonant_form input[name='glyphs']:checked").val(); // checked value for the glyph should be here
|
||||
let radical = $("#consonant_form input[name='radicals']:checked").val(); // checked value for the radical should be here
|
||||
|
||||
add_class($('svg #glyph-' + glyph + '-' + radical), 'chosen'); |
||||
|
||||
$('#place_group image.radical').attr("href", radical); |
||||
$('#place_group image.glyph').attr("href", glyph); |
||||
|
||||
}); |
||||
|
||||
$('td > svg').on("click", function(event) { |
||||
let receptacle = $("#consonant_put_it_in_here"); |
||||
let selected = $(this); |
||||
receptacle.html(selected.html()); |
||||
}) |
||||
|
||||
// handle changing the vowels
|
||||
$('.vowel-example > svg').on("click", function(event) { |
||||
let receptacle = $('#vowel_put_it_in_here'); |
||||
let selected = $(this); |
||||
receptacle.html(selected.html()); |
||||
}); |
||||
|
||||
var t = $("#testbed"); |
||||
var glyphs = split_megaglyph(t.find(".angle-1")); |
||||
$.each(glyphs, function(idx, glyph) { |
||||
glyph.attr("transform", `translate(${100 + idx*100}, 0)`); |
||||
t.append(glyph); |
||||
}); |
||||
|
||||
populate_consonant_grid(); |
||||
}); |
||||
|
||||
function populate_consonant_grid() { |
||||
// this function expects that there's a #consonant-grid table, where each row corresponds to a glyph set
|
||||
// the cells of the row need to be filled with the various possible configurations of that glyph
|
||||
// so like, the <th> in a given row should contain a .megaglyph svg group, which contains the base glyph plus all possible radicals.
|
||||
// then we use the split_megaglyph function to generate the five possible configurations out of that megaglyph
|
||||
// and insert the five configured glyphs into their corresponding (td) cells of the table
|
||||
|
||||
$("#consonant-grid tbody tr").each(function (asdf, row) { // iterate over the rows in the table
|
||||
|
||||
// row will now be something like <tr><th/><td/><td/><td/><td/><td/><th/></tr>
|
||||
// that is, a tr containing one th on either end plus a td for each consonant in this row
|
||||
var head = $(row).find("th:first-child svg"); // this is the header for the row, which should contain the .megaglyph object
|
||||
var megaglyph = head.find(".megaglyph"); |
||||
var glyphs = split_megaglyph(megaglyph); // now this is a list of the configured consonant symbols
|
||||
|
||||
$(row).find("td").each(function(idx, cell) { // iterate over the cells in the row
|
||||
// cell will now be a <td> cell which contains the IPA for that cell's consonants, plus the <svg> canvas into which to insert the configured consonant symbol
|
||||
|
||||
$(cell).find("svg").append(glyphs[idx]); |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
|
||||
function split_megaglyph(megaglyph) { |
||||
// megaglyph is an svg object which contains all the possible radicals at once.
|
||||
// this should return a list of new glyphs, cloned frmo megaglyph, each of which contains only the radicals it wants.
|
||||
var one = megaglyph.clone(); |
||||
one.find('.line_1,.line_2,.line_3,.dot_2,.dot_3').remove(); // only .dot_1
|
||||
remove_class(one, "megaglyph"); |
||||
var two = megaglyph.clone(); |
||||
two.find('.line_2,.line_3,.dot_1,.dot_2,.dot_3').remove(); // line 1 only
|
||||
remove_class(two, "megaglyph"); |
||||
var three = megaglyph.clone(); |
||||
three.find('.line_1,.line_2,.line_3,.dot_1').remove(); // only dots 2 and 3
|
||||
remove_class(three, "megaglyph"); |
||||
var four = megaglyph.clone(); |
||||
four.find('.line_1,.dot_1,.dot_2,.dot_3').remove(); //lines 2 and 3
|
||||
remove_class(four, "megaglyph"); |
||||
var five = megaglyph.clone(); |
||||
five.find('.line_1,.line_2,.line_3').remove(); // all three dots
|
||||
remove_class(five, "megaglyph"); |
||||
|
||||
return [one, two, three, four, five]; |
||||
} |
||||
|
||||
|
||||
function on_mouse_down(event) { |
||||
// this is called on an element when the mouse is clicked down on it. event.data will contain the glyph object
|
||||
|
||||
currently_dragging = event.data; |
||||
} |
||||
|
||||
function on_mouse_down_create_from(source) { |
||||
// call this with a source place (from which it should copy some svg) to get an onmousedown for creating that glyph
|
||||
return function(event) { |
||||
const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg); |
||||
var g = make_new_glyph(source); |
||||
g.position = mouse_position; |
||||
set_transform(g.element, mouse_position, appropriate_angle(mouse_position)); |
||||
|
||||
currently_dragging = g; |
||||
} |
||||
} |
||||
|
||||
function omd_consonant(event) { |
||||
console.log("WHDSFLKJ"); |
||||
const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg); |
||||
var g = make_new_glyph($("#place_group")); |
||||
g.position = mouse_position; |
||||
set_transform(g.element, mouse_position, appropriate_angle(mouse_position)); |
||||
|
||||
currently_dragging = g; |
||||
} |
||||
|
||||
function omd_vowel(event) { |
||||
const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg); |
||||
var g = make_new_glyph($("#vowel_copy_from_here")); |
||||
g.position = mouse_position; |
||||
set_transform(g.element, mouse_position, appropriate_angle(mouse_position)); |
||||
|
||||
currently_dragging = g; |
||||
} |
||||
|
||||
|
||||
function omd_consonant(event) { |
||||
const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg); |
||||
var g = make_new_glyph($("#place_group")); |
||||
g.position = mouse_position; |
||||
set_transform(g.element, mouse_position, appropriate_angle(mouse_position)); |
||||
|
||||
currently_dragging = g; |
||||
} |
||||
|
||||
function make_new_glyph(source) { |
||||
// create a new glyph object by copying the elements pointed to by source
|
||||
// this will add it to the svg and to the glyphs list
|
||||
var x = {}; |
||||
x.angle = 0; |
||||
x.element = source.clone().attr("id","").attr("onclick", "").attr("onmousedown", ""); |
||||
x.position = {x:0, y:0}; |
||||
set_transform(x.element, x.position, 0); |
||||
x.element.on("mousedown", x, on_mouse_down); |
||||
$(svg).append(x.element); |
||||
glyphs.push(x); |
||||
return x; |
||||
} |
||||
|
||||
function on_mouse_up(event) { |
||||
// this is called on the whole document when the mouse is released on it. event.data is meaningless. this should handle releasing the current dragged element, if it exists.
|
||||
if (currently_dragging != null && is_in_delete_region(currently_dragging.position)) { |
||||
remove(glyphs, currently_dragging); |
||||
currently_dragging.element.remove(); |
||||
currently_dragging = null; |
||||
} |
||||
|
||||
if (currently_dragging != null) { |
||||
currently_dragging.position = mul(norm(currently_dragging.position), major_radius); |
||||
set_transform(currently_dragging.element, currently_dragging.position, appropriate_angle(currently_dragging.position)); |
||||
//currently_dragging.element.attr("x", currently_dragging.position.x);
|
||||
//currently_dragging.element.attr("y", currently_dragging.position.y)
|
||||
} |
||||
|
||||
currently_dragging = null; |
||||
} |
||||
|
||||
function is_in_delete_region(p) { |
||||
r = $("#delete"); |
||||
first = {x:parseFloat(r.attr("x")), y:parseFloat(r.attr("y"))}; |
||||
second = {x:parseFloat(r.attr("width"))+first.x, y:parseFloat(r.attr("height"))+first.y}; |
||||
|
||||
if (p.x > first.x && p.x < second.x && p.y > first.y && p.y < second.y) { |
||||
return true; |
||||
} |
||||
return false; |
||||
} |
||||
|
||||
$(document).mousemove(function(event) { |
||||
|
||||
const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg); |
||||
const mouse_move = sub(mouse_position, previous_mouse_position); |
||||
|
||||
$("#xthing").text("position is " + mouse_position.x + " " + mouse_position.y); |
||||
|
||||
previous_mouse_position = mouse_position; |
||||
var s_position = mouse_position; |
||||
// get the position inside the svg tag for the mouse
|
||||
|
||||
if (currently_dragging != null) { |
||||
currently_dragging.position = add(currently_dragging.position, mouse_move); |
||||
set_transform(currently_dragging.element, currently_dragging.position, appropriate_angle(currently_dragging.position)); |
||||
|
||||
} |
||||
}); |
@ -0,0 +1,73 @@ |
||||
function ns_elem () { if (typeof arguments[0] === "undefined") { console.log('There was an error in the element assist function. Called with no valid tag name!');} var elem; if (typeof arguments[1] === "string") { elem = document.createElementNS(arguments[1], arguments[0]); for (var i=2; i<arguments.length; i+=2) { if (typeof arguments[i+1] === "undefined") { for (var key in arguments[i]) { elem.setAttribute(key, arguments[i][key]); } break; } else { for (var key in arguments[i]) { elem.setAttributeNS(arguments[i+1], key, arguments[i][key]); } } } } else { elem = document.createElement(arguments[0]); for (var i=1; i<arguments.length; i+=2) { if (typeof arguments[i+1] === "undefined") { for (var key in arguments[i]) { elem.setAttribute(key, arguments[i][key]); } break; } else { for (var key in arguments[i]) { elem.setAttributeNS(arguments[i+1], key, arguments[i][key]); } } } } return elem;} |
||||
|
||||
var svg; |
||||
|
||||
var svg_ns = "http://www.w3.org/2000/svg"; |
||||
var xlink_ns = "http://www.w3.org/1999/xlink"; |
||||
|
||||
function norm (vector) { |
||||
var norm = Math.sqrt(vector.x*vector.x + vector.y*vector.y); |
||||
return {x: vector.x / norm, y: vector.y / norm}; |
||||
} |
||||
function len (vector) { |
||||
return Math.sqrt(vector.x*vector.x + vector.y*vector.y); |
||||
} |
||||
function sub (a, b) { return {x: a.x-b.x, y: a.y-b.y}; } |
||||
function add (a, b) { return {x: a.x+b.x, y: a.y+b.y}; } |
||||
function mul (a, b) { |
||||
if ("x" in a) { return {x: a.x*b, y: a.y*b}; } |
||||
return a*b; |
||||
} |
||||
|
||||
function remove_class(element, classname) { |
||||
var classlist = $(element).attr("class"); |
||||
if (classlist) { |
||||
classlist = classlist.split(" "); |
||||
} |
||||
var newclasslist = ""; |
||||
for (const x in classlist) { |
||||
newclasslist += (classname != classlist[x]) ? " " + classlist[x] : ""; |
||||
} |
||||
$(element).attr("class", newclasslist); |
||||
} |
||||
|
||||
function add_class(element, classname) { |
||||
const classlist = $(element).attr("class"); |
||||
$(element).attr("class", classlist + " " + classname); |
||||
} |
||||
|
||||
function svg_from_dom(point, svg) { |
||||
const pt = svg.createSVGPoint(); |
||||
pt.x = point.x; |
||||
pt.y = point.y; |
||||
|
||||
return pt.matrixTransform(svg.getScreenCTM().inverse()); |
||||
} |
||||
function dom_from_svg(point, svg) { |
||||
const pt = svg.createSVGPoint(); |
||||
pt.x = point.x; |
||||
pt.y = point.y; |
||||
|
||||
return pt.matrixTransform(svg.getScreenCTM()); |
||||
} |
||||
function point_from_circle(circle) { |
||||
return {x:parseFloat(circle.attr('cx')), y:parseFloat(circle.attr('cy'))}; |
||||
} |
||||
var previous_mouse_position = {x:0,y:0}; |
||||
|
||||
function set_transform(element, point, rotation) { |
||||
const transform_string = `translate(${point.x},${point.y}) rotate(${180*rotation/Math.PI})`; |
||||
|
||||
return $(element).attr("transform", transform_string); |
||||
} |
||||
|
||||
function remove(list, element) { |
||||
const index = list.indexOf(element); |
||||
if (index > -1) { // only splice array when item is found
|
||||
list.splice(index, 1); // 2nd parameter means remove one item only
|
||||
} |
||||
} |
||||
|
||||
function appropriate_angle(point) { |
||||
return -Math.atan2(point.x, point.y); |
||||
} |
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 3.8 KiB |
After Width: | Height: | Size: 49 KiB |
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 4.1 KiB |
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.7 KiB |