@007JulienApr 04.2012 — #Raphaël is a good vector library which allow interesting things like this or this new watch ?.
What do you mean with [I]«a slider to control the size of a circle dynamically» ?[/I] Is it a question of arranging images of circles on the other one to find its radius?
@jkeatincoauthorApr 04.2012 — #I want to have a sliding bar, kind of like this (http://www.functionx.com/vcsharp2003/controls/images/scrollbar1.gif) that adjusts the size of one circle. For example lets say the size of the circle can be from 2 to 10. If you slide it to the left (towards 2) it gets smaller, and if you slide it to the right (towards 10) it gets larger. It needs to adjust the size while your moving the sliding bar. Does that make sense?
@Gray1989Apr 05.2012 — #Sliding bars aren't accessible inputs in webbrowsers. If you want a slider you will either have to make one yourself or copy code from somewhere else. Come to think of it, you may be able to use a div element with "overflow:scroll" enabled and a bunch of whitespace inside. Then you can call upon the displacement from top and left to do calculations on to get a slider value in percent...
@007JulienApr 05.2012 — #With Raphaël there is no difficulties to build a slider that adjust the size of a circle. Take simply the source of this page. Delete curves except that of the center (I have make the job with the following script). Then modify the controls to fix two points at the origin of axis and to move the two others only along the axis. Then change the curve with a circle or an ellipse... etc.
[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Raphaël · Curver</title> <style type="text/css">
BODY{FONT:300 100.1% "Helvetica Neue",Helvetica,"Arial Unicode MS",Arial,sans-serif; BACKGROUND:#333; COLOR:#fff} #holder{POSITION:absolute; MARGIN:-240px 0px 0px -320px; WIDTH:640px; HEIGHT:480px; TOP:50%; LEFT:50%} #copy{POSITION:absolute; TEXT-ALIGN:right; BOTTOM:0px; FONT:300 0.7em "Helvetica Neue",Helvetica,"Arial Unicode MS",Arial,sans-serif; RIGHT:1em} #copy A{COLOR:#fff} </style> <script src="http://raphaeljs.com/raphael.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> window.onload = function () { var r = Raphael("holder", 620, 420), discattr = {fill: "#fff", stroke: "none"}; r.rect(0, 0, 619, 419, 10).attr({stroke: "#666"});[COLOR="Blue"]// The frame and his title[/COLOR] r.text(310, 20, "Drag the points to change the circle").attr({fill: "#fff", "font-size": 16}); [COLOR="Blue"]// This function is call at the end (originally for each curve)[/COLOR] function curve(x, y, ax, ay, bx, by, zx, zy, color) { [COLOR="Blue"]// The curve[/COLOR] var path = [["M", x, y], ["C", ax, ay, bx, by, zx, zy]], [COLOR="Blue"]// The to dotted lines from M (for Move to) to L (Line to)[/COLOR] path2 = [["M", x, y], ["L", ax, ay], ["M", bx, by], ["L", zx, zy]], curve = r.path(path).attr({stroke: color || Raphael.getColor(), "stroke-width": 4, "stroke-linecap": "round"}), controls = r.set( r.path(path2).attr({stroke: "#ccc", "stroke-dasharray": ". "}), [COLOR="Blue"]// The four circles (to transform to rectangles) and four controls 1, 2, 3 and 4[/COLOR] r.circle(x, y, 5).attr(discattr), r.circle(ax, ay, 5).attr(discattr), r.circle(bx, by, 5).attr(discattr), r.circle(zx, zy, 5).attr(discattr) ); controls[1].update = function (x, y) { var X = this.attr("cx") + x, Y = this.attr("cy") + y; this.attr({cx: X, cy: Y}); path[0][1] = X; path[0][2] = Y; path2[0][1] = X; path2[0][2] = Y; controls[2].update(x, y); }; controls[2].update = function (x, y) { var X = this.attr("cx") + x, Y = this.attr("cy") + y; this.attr({cx: X, cy: Y}); path[1][1] = X; path[1][2] = Y; path2[1][1] = X; path2[1][2] = Y; curve.attr({path: path}); controls[0].attr({path: path2}); }; controls[3].update = function (x, y) { var X = this.attr("cx") + x, Y = this.attr("cy") + y; this.attr({cx: X, cy: Y}); path[1][3] = X; path[1][4] = Y; path2[2][1] = X; path2[2][2] = Y; curve.attr({path: path}); controls[0].attr({path: path2}); }; controls[4].update = function (x, y) { var X = this.attr("cx") + x, Y = this.attr("cy") + y; this.attr({cx: X, cy: Y}); path[1][5] = X; path[1][6] = Y; path2[3][1] = X; path2[3][2] = Y; controls[3].update(x, y); }; controls.drag(move, up); } function move(dx, dy) { this.update(dx - (this.dx || 0), dy - (this.dy || 0)); this.dx = dx; this.dy = dy; } function up() { this.dx = this.dy = 0; } curve(270, 100, 310, 100, 330, 200, 370, 200, "hsb(.3, .75, .75)"); }; </script> </head> <body> <div id="holder"></div> <p id="copy">Demo of <a href="http://raphaeljs.com/">Raphaël</a>—JavaScript Vector Library</p> </body> </html>[/CODE]Good luck ! See my some comments and especially the documentation of Raphaël. That is a very good javascript exercise...
@jkeatincoauthorApr 05.2012 — #thank you both for the help. I'll let you know if I run into any issues adapting this concept for my particular needs. Thanks again.
