This one you can run at
<http://canonical.org/~kragen/sw/inexorable-misc/triangle.html>.
It’s just a very simple widget built using jQuery UI, with a slider
and a text box. I’d like to get it to lay out nicely, but it doesn’t.
(Also, Beatrice and I were up late one night solving the equations to
figure out how to do this. I guess I ought to have remembered, but I
couldn’t.)
<html><head>
<title>A triangle calculator with jQuery UI and <canvas></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <link rel="stylesheet"
href="http://www.canonical.org/~kragen/style.css"; /> -->
<link type="text/css" href="jquery-ui/themes/base/ui.all.css"
rel="stylesheet" />
</head><body>
<h1>A triangle calculator with jQuery UI and <canvas></h1>
<canvas id="triangle" width="300" height="300"></canvas>
<div class="slider_with_display" id="a">A: </div>
<div class="slider_with_display" id="b">B: </div>
<p>(Calculated: <span class="calcb"></span>)</p>
<div class="slider_with_display" id="c">C: </div>
<p>(Calculated: <span class="calcc"></span>)</p>
<p>Intersection coordinates: <span class="coords"></span></p>
<script src="jquery-ui/jquery-1.3.2.js"></script>
<script src="jquery-ui/ui/ui.core.js"></script>
<script src="jquery-ui/ui/ui.slider.js"></script>
<script type="text/javascript">
me = {a: 30, b: 30, c: 30};
$.widget("ui.slider_with_display", {
_init: function() {
var that = this;
// We use an <input> so that we can change its value
// efficiently with .val().
var display = $('<input size="3"/>')
.css({fontFamily: 'inherit', fontSize: 'inherit'})
.keyup(function() { that.value(this.value) }); // permit editing
by hand
var update = function(event, ui) { display.val(ui.value);
that._trigger('change', event, ui); };
var slider = $('<div/>').slider({ step: this.options.step, slide:
update, change: update });
this.slider = slider;
this.element.append(display).append(slider);
},
value: function(newValue) {
return this.slider.slider('value', newValue);
}
});
$.extend($.ui.slider_with_display, {
defaults: { step: 10 }
});
// find coordinates of bc corner of triangle, assuming ab is at
// (0, 0) and ac is at (0, a)
me.triangle_corner_coordinates = function(a, b, c) {
var bsq = b*b;
var x = (bsq - c*c) / (2.0 * a) + a / 2.0;
var xsq = x*x;
return (xsq < bsq) ? {x: x, y: Math.sqrt(bsq - xsq)} : null;
};
me.redraw = function() {
var canvas = $('#triangle')[0];
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#ce827a'; // a warm skin tone
ctx.strokestyle = '#863128';
ctx.lineWidth = 1;
var scale = Math.min(canvas.width, canvas.height) / 100.0;
var a = me.a * scale,
b = me.b * scale,
c = me.c * scale;
var x0 = 10, y0 = 10;
var x1 = x0 + a, y1 = y0;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.lineTo(x1, y1);
var corner = me.triangle_corner_coordinates(a, b, c);
if (corner) {
var x2 = x0 + corner.x, y2 = y0 + corner.y;
ctx.lineTo(x2, y2);
ctx.closePath();
var display = function(n) { return parseFloat((n /
scale).toFixed(8)); };
$('.coords').text('('+display(corner.x)+', '+display(corner.y)+')');
var dx2sq = corner.x * corner.x;
var dy2sq = corner.y * corner.y;
$('.calcb').text(display(Math.sqrt(dx2sq + dy2sq)));
$('.calcc').text(display(Math.sqrt(Math.pow(x2 - x1, 2) + dy2sq)));
}
ctx.stroke();
ctx.fill();
};
$(function() {
$('.slider_with_display').slider_with_display({ step: 0.1 });
$('#a').bind('slider_with_displaychange', function(event, ui) { me.a
= ui.value; me.redraw(); });
$('#b').bind('slider_with_displaychange', function(event, ui) { me.b
= ui.value; me.redraw(); });
$('#c').bind('slider_with_displaychange', function(event, ui) { me.c
= ui.value; me.redraw(); });
$('.slider_with_display').slider_with_display('value', 30);
});
</script>
</body></html>
(End of `triangle.html`.)
This software is available via
git clone http://canonical.org/~kragen/sw/inexorable-misc.git
(or in <http://canonical.org/~kragen/sw/inexorable-misc>) in the file
`triangle.html`.
Like everything else posted to kragen-hacks without a notice to the
contrary, this software is in the public domain.
--
To unsubscribe: http://lists.canonical.org/mailman/listinfo/kragen-hacks
