162 lines
5.8 KiB
HTML
162 lines
5.8 KiB
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">
|
||
|
|
</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};
|
||
|
|
}
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
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;
|
||
|
|
|
||
|
|
$.each(circles, function(idx, circ) {
|
||
|
|
const mag = len(sub(point_from_circle(circ), mouse));
|
||
|
|
if (mag < testmag) {
|
||
|
|
testmag = mag;
|
||
|
|
closest_idx = idx;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$.each(circles, function(idx, circle) {
|
||
|
|
$(circle).removeClass('highlit').removeClass('veryhighlit');
|
||
|
|
});
|
||
|
|
|
||
|
|
current_selection = null;
|
||
|
|
|
||
|
|
if (testmag < selection_thresh) {
|
||
|
|
$(circles[closest_idx]).attr('class', 'veryhighlit');
|
||
|
|
current_selection = circles[closest_idx];
|
||
|
|
} else {
|
||
|
|
$(circles[closest_idx]).attr('class', 'highlit');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$(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
|
||
|
|
|
||
|
|
highlight_nearest(s_position);
|
||
|
|
});
|
||
|
|
|
||
|
|
$(document).on('mousedown', function(event) {
|
||
|
|
if (current_selection) {
|
||
|
|
$(current_selection).attr('class', 'clicked');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
$(document).on('dragstop', function(event) {
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|