unspeakably many changes
This commit is contained in:
parent
06cdda7925
commit
a469213658
@ -10,13 +10,21 @@
|
||||
</head>
|
||||
<body>
|
||||
<style type="text/css">
|
||||
|
||||
path, circle {
|
||||
fill: none;
|
||||
stroke: #aaa;
|
||||
stroke-width: 3px;
|
||||
}
|
||||
svg { draggable: false; }
|
||||
#testbed { display: none; }
|
||||
td svg {
|
||||
width: 100px;
|
||||
width: 3.5em;
|
||||
height: 3.5em;
|
||||
}
|
||||
th label svg {
|
||||
display: none;
|
||||
width:3.5em;
|
||||
height:3.5em;
|
||||
}
|
||||
#consonant-grid, #vowel-grid {
|
||||
margin-left: auto;
|
||||
@ -36,18 +44,8 @@
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
|
||||
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; }
|
||||
|
||||
.chosen { fill: blue;stroke: red; }
|
||||
|
||||
rect { fill:transparent; }
|
||||
#delete { fill:pink; }
|
||||
@ -74,37 +72,6 @@
|
||||
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">
|
||||
|
||||
<div class="span4"><!-- consonants -->
|
||||
@ -140,34 +107,27 @@
|
||||
<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>
|
||||
<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>
|
||||
@ -385,15 +345,12 @@
|
||||
</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">
|
||||
<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 transform="translate(-100,0)" id="consonant_place_group">
|
||||
<g id="consonant_copy_from_here">
|
||||
<rect x="-15" y="-35" width="30" height="35"/>
|
||||
<g id="consonant_put_it_in_here" transform="translate(-12,-45) scale(0.3)"></g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
@ -408,280 +365,105 @@
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<div class="span4"><!-- vowels -->
|
||||
<div id="vowel-grid">
|
||||
<div class="vowel-sequence">
|
||||
<div class="vowel-example">
|
||||
<svg viewBox="0 0 24 80" >
|
||||
<div class="vowel megaglyph">
|
||||
<svg>
|
||||
<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" />
|
||||
class="base-omega vowel-base" />
|
||||
<path
|
||||
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"
|
||||
class="base-mound vowel-base" />
|
||||
<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"
|
||||
class="base-loop vowel-base" />
|
||||
<circle
|
||||
id="dot-outer"
|
||||
class="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" />
|
||||
class="emphasis-outer" />
|
||||
<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"
|
||||
class="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" >
|
||||
class="emphasis-inner" />
|
||||
<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" >
|
||||
class="base-mound" />
|
||||
<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" />
|
||||
class="triangle-inner"
|
||||
d="M 12.646867,6.822496 20.187878,20.036981 4.9732929,19.960446 Z" />
|
||||
<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" />
|
||||
class="emphasis-inner" />
|
||||
<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"
|
||||
class="dot-on"
|
||||
cx="12.646866"
|
||||
cy="31.411909"
|
||||
r="7.9595795" />
|
||||
</svg>
|
||||
[æ], bat
|
||||
</div>
|
||||
<div class="vowel-sequence">
|
||||
<div class="vowel-example">
|
||||
<svg viewBox="0 0 24 80" >base-omega dot-outer emphasis-outer</svg> [ɑ, a], box or bah
|
||||
</div>
|
||||
<div class="vowel-example">
|
||||
<svg viewBox="0 0 24 80" >base-omega dot-outer</svg> [ʌ, ə], but or schwa
|
||||
</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
|
||||
<svg viewBox="0 -12 24 80" >base-mound dot-inner emphasis-inner</svg> [i], beat
|
||||
</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
|
||||
<svg viewBox="0 -12 24 80" >base-mound dot-inner</svg> [ɪ], bit
|
||||
</div>
|
||||
</div>
|
||||
<div class="vowel-sequence">
|
||||
<div class="vowel-example">
|
||||
<svg viewBox="0 -12 24 80" >base-mound triangle-inner emphasis-inner</svg> [u], boot
|
||||
</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
|
||||
<svg viewBox="0 -12 24 80" >base-mound triangle-inner</svg> [ʊ], book
|
||||
</div>
|
||||
</div>
|
||||
<div class="vowel-sequence">
|
||||
<div class="vowel-example">
|
||||
<svg viewBox="0 -12 24 80" >base-mound dot-outer emphasis-outer</svg> [ɛi, e], bait
|
||||
</div>
|
||||
<div class="vowel-example">
|
||||
<svg viewBox="0 -12 24 80" >base-mound dot-outer</svg> [ɛ], bet
|
||||
</div>
|
||||
</div>
|
||||
<div class="vowel-sequence">
|
||||
<div class="vowel-example">
|
||||
<svg viewBox="0 0 24 80" >base-omega dot-inner emphasis-inner</svg> [o, ɔu], won't, boat
|
||||
</div>
|
||||
<div class="vowel-example">
|
||||
<svg viewBox="0 0 24 80" >base-omega dot-inner</svg> [ɔ], bawk
|
||||
</div>
|
||||
</div>
|
||||
<div class="vowel-sequence">
|
||||
<div class="vowel-example">
|
||||
<svg viewBox="0 0 24 80" >base-omega dot-on</svg> [æ], bat
|
||||
</div>
|
||||
</div>
|
||||
<div class="vowel-sequence">
|
||||
<div class="vowel-example">
|
||||
<svg viewBox="0 0 24 80" >base-loop dot-outer</svg> [au], cow
|
||||
</div>
|
||||
<div class="vowel-example">
|
||||
<svg viewBox="0 0 24 80" >base-loop dot-on</svg> [ai, aɪ], by
|
||||
</div>
|
||||
<div class="vowel-example">
|
||||
<svg viewBox="0 0 24 80" >base-loop dot-inner</svg> [ɔi, ɔɪ], boy
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -689,7 +471,5 @@
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<h2 id="xthing">x value is something</h2>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,57 +1,46 @@
|
||||
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;
|
||||
|
||||
const vowels = [];
|
||||
const consonants = [];
|
||||
|
||||
$(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) {
|
||||
$('td > svg').on("mousedown", 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) {
|
||||
const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg);
|
||||
|
||||
var g = make_new_glyph_from($("#consonant_copy_from_here"));
|
||||
g.position = mouse_position;
|
||||
set_transform(g.element, mouse_position, appropriate_angle(mouse_position));
|
||||
|
||||
currently_dragging = g;
|
||||
})
|
||||
$('.vowel-example > svg').on("mousedown", function(event) {
|
||||
let receptacle = $('#vowel_put_it_in_here');
|
||||
let selected = $(this);
|
||||
receptacle.html(selected.html());
|
||||
|
||||
const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg);
|
||||
|
||||
var g = make_new_glyph_from($("#vowel_copy_from_here"));
|
||||
g.position = mouse_position;
|
||||
set_transform(g.element, mouse_position, appropriate_angle(mouse_position));
|
||||
|
||||
currently_dragging = g;
|
||||
});
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
$('td > svg').each(function() { this.setAttribute('viewBox',"0 30 40 100");});
|
||||
populate_consonant_grid();
|
||||
|
||||
populate_vowels();
|
||||
});
|
||||
|
||||
function populate_consonant_grid() {
|
||||
@ -77,7 +66,6 @@ function populate_consonant_grid() {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
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.
|
||||
@ -100,6 +88,20 @@ function split_megaglyph(megaglyph) {
|
||||
return [one, two, three, four, five];
|
||||
}
|
||||
|
||||
function populate_vowels() {
|
||||
megaglyph = $(".vowel.megaglyph");
|
||||
$(".vowel-example svg").each((i, ex) => {
|
||||
let glyphs = $(ex).text().replace(/(\s|\n)+/g,",").split(",").filter((a) => a!="")
|
||||
$(ex).text("");
|
||||
|
||||
$.each(glyphs, (i, e) => {
|
||||
let wanted_class = "." + e;
|
||||
let glyph_original = megaglyph.find(wanted_class);
|
||||
let new_glyph = glyph_original.clone();
|
||||
$(ex).append(new_glyph);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
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
|
||||
@ -107,57 +109,45 @@ function on_mouse_down(event) {
|
||||
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) {
|
||||
function make_new_consonant(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.element.find("#consonant_put_it_in_here").attr("id","");
|
||||
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);
|
||||
|
||||
x.handles = [];
|
||||
x.handles.push($(ns_elem("circle", svg_ns)).attr("r",2))
|
||||
x.handles.push($(ns_elem("circle", svg_ns)).attr("r",2))
|
||||
$.each(x.handles, () => $(svg).append(this));
|
||||
update_handles(x);
|
||||
glyphs.push(x);
|
||||
return x;
|
||||
}
|
||||
|
||||
function make_new_glyph_from(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.element.find("#consonant_put_it_in_here").attr("id","");
|
||||
x.element.find("#vowel_put_it_in_here").attr("id","");
|
||||
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);
|
||||
|
||||
x.handles = [];
|
||||
x.handles.push($(ns_elem("circle", svg_ns)).attr("r",2))
|
||||
x.handles.push($(ns_elem("circle", svg_ns)).attr("r",2))
|
||||
$(svg).append(x.handles[0]).append(x.handles[1]);
|
||||
update_handles(x);
|
||||
glyphs.push(x);
|
||||
return x;
|
||||
}
|
||||
@ -166,6 +156,7 @@ 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);
|
||||
$.each(currently_dragging.handles, function() { $(this).remove(); });
|
||||
currently_dragging.element.remove();
|
||||
currently_dragging = null;
|
||||
}
|
||||
@ -173,8 +164,7 @@ function on_mouse_up(event) {
|
||||
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)
|
||||
update_handles(currently_dragging);
|
||||
}
|
||||
|
||||
currently_dragging = null;
|
||||
@ -192,19 +182,23 @@ function is_in_delete_region(p) {
|
||||
}
|
||||
|
||||
$(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) {
|
||||
update_handles(currently_dragging);
|
||||
|
||||
currently_dragging.position = add(currently_dragging.position, mouse_move);
|
||||
set_transform(currently_dragging.element, currently_dragging.position, appropriate_angle(currently_dragging.position));
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
function update_handles(g) {
|
||||
set_loc(g.handles[0], get_global_point_at_length(svg, g.element.find('path.glyph,path.vowel-base')[0], 0))
|
||||
set_loc(g.handles[1], get_global_point_at_length(svg, g.element.find('path.glyph,path.vowel-base')[0], 1000))
|
||||
}
|
||||
@ -1,3 +1,9 @@
|
||||
SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(toElement) {
|
||||
|
||||
return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
|
||||
|
||||
};
|
||||
|
||||
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;
|
||||
@ -71,3 +77,12 @@ function remove(list, element) {
|
||||
function appropriate_angle(point) {
|
||||
return -Math.atan2(point.x, point.y);
|
||||
}
|
||||
|
||||
function newsvg(element) {
|
||||
document.createElementNS(svg_ns, element);
|
||||
}
|
||||
function set_loc(elem, point) { return $(elem).attr("cx", point.x).attr("cy",point.y)}
|
||||
|
||||
function get_global_point_at_length(svg, path, distance) {
|
||||
return path.getPointAtLength(distance).matrixTransform(path.getTransformToElement(svg));
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user