<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>