A 'Kind of', 'Sort of' Ruby on Rails User Interface Question …

Email : simonwhel@yahoo.com

As Dr. Nick of the Simpsons sez :

Hi Everybody !

I’m working on my 1st Ruby on Rails (RoR) project.

It is a web-based application.

Unfortunately, I’ve come up against a problem that I don’t really know how to solve.

So, I figured I would ask the folks on this list for some advice and some suggestions on what they would think would be the best way for me to proceed.

Actually, the problem I alluded to above isn’t necessarily a Ruby or a Rails problem. In fact, it is a User Interface problem.

Here’s a description of what I have to do :

I have a set of 4 concentric dials.

Each dial has 12 separate positions on it.

If you like, although they aren’t really clock faces, if it makes it easier for you to think about the problem, you could think of them as “4 concentric 12 hour clock faces”.

I need to be able to do the following :

1. Move the mouse over a location on 1 of the 4 clock faces. 2. Click on the mouse while over 1 of the clock faces. 3. Hold the mouse button down. 4. Move the mouse along one of the concentric clock faces to a new position. 5. Release the mouse button while over the same concentric clock face. 6. The dial over which the mouse moved needs to then move the dial independently of the other 3 concentric dials to the new position that the mouse moved to as described in steps 1 through 5 above.

Let me give you an example of what I mean in order to make what I’m trying to do clearer.

Let’s assume that all of the 4 concentric dials are lined up the way similar clock dials would be; i.e. : they all have the 12 o’clock dial position lined up at the top of the image.

You could think of the initial dial set up as :

Going from the Outer most dial (Dial 1) to the innermost dial (Dial 4) moving along each dial in a clockwise direction from the 12 o’clock position at the top :

Dial 4 : 12-01-02-03-04-05-06-07-08-09-10-11 (Outermost dial) Dial 3 : 12-01-02-03-04-05-06-07-08-09-10-11 Dial 2 : 12-01-02-03-04-05-06-07-08-09-10-11 Dial 1 : 12-01-02-03-04-05-06-07-08-09-10-11 (Innermost dial)

Now, if I want to move the “12” position on the 2nd outermost dial clockwise 3 positions then I would do the following :

1. I move the mouse over the “12” position on the 2nd outermost dial. 2. I click on the mouse. 3. I hold the mouse button down. 4. While still holding the mouse button down, I move the mouse to the “3”position on the 2nd outermost dial. 5. In response, the RoR application redraws the image of the 4 concentric dials with the 2nd outermost dial moved 3 positions clockwise.

You could think of the final dial set up as :

Going from the Outer most dial (Dial 1) to the innermost dial (Dial 4) moving along each dial in a clockwise direction :

Dial 4 : 12-01-02-03-04-05-06-07-08-09-10-11 (Outermost dial) Dial 3 : 09-10-11-12-01-02-03-04-05-06-07-08 Dial 2 : 12-01-02-03-04-05-06-07-08-09-10-11 Dial 1 : 12-01-02-03-04-05-06-07-08-09-10-11 (Innermost dial)

So, it seems to me that my RoR web based application has to be able to do the following :

1. Detect when the mouse enters the image containing the 4 concentric dials. This would be some sort of “Mouse Enter” event. 2. Track the mouse while it is moving over the image of the 4 concentric dials. This would be some kind of “Mouse Track” or “Mouse Move” event that would know the position of the mouse relative to the upper left corner of the image at any given time. 3. Detect when the mouse button is pressed over the image. This would be a “Mouse Down” event that would know the position of the mouse relative to the upper left corner of the image at then time the “Mouse Down” event occurred. 4. Detect when the mouse button is released over an image. This would be a “Mouse Up” event that would know the position of the mouse relative to the upper left corner of the image at then time the mouse button was released. 5. Once this sequence of entering the image, detecting a “Mouse Down” event followed by a “Mouse Move” event followed by a “Mouse Up” event, the RoR application then has to be notified of the following : a) The ‘Hour” position inside the one of the 4 dials that the “MouseDown” event occurred. b) The ‘Hour” position inside the one of the 4 dials that the “MouseUp” event occurred. 6. The RoR application would then calculate how many positions clockwise (or, for that matter, counterclockwise) that the concentric dial where the aforementioned sequence of events occurred has to be moved. 7. The RoR application then redraws the set of 4 concentric dials reflecting the new position of the dial that was just moved. 8. The RoR application then sends the redrawn image up to the web interface. 9. The web interface then redraws the image.

So, whatever software I have to use to implement this kind of behavior, that software needs to support the following events :

1. Mouse Enter : The mouse enters the image. 2. Mouse Down : The mouse button is pressed. 3. Mouse Move : The mouse is moved. 4. Mouse Up : The mouse button is released. 5. Mouse Exit : The mouse leaves the image.

If there is software that can detect and handle the 5 mouse events I just listed above and knows the position of the mouse relative to say the upper left hand corner of the image in which any of these events occurs, then, because I know the geometry of the image containing the 4 concentric “clock” dials I can then figure out which of the 4 dials has to be moved clockwise or counter clockwise by the correct number of “hour” positions.

I can then redraw the image to correctly reflect the changed position of any of 1 of the 4 concentric dials.

So, folks (and, of course, folkettes (no sexist me !)) this is what, as far as I understand it, I need to do.

So I guess my real questions are :

1. Can I do this inside Ruby on Rails ? And, if that is true, then how would I go about doing it ? 2. If I can’t do this from inside Ruby on Rails then what tools, and software packages, frameworks or languages would be the best way to go about doing this ? 3. Can you refer to me tools, software packages & frameworks that I could use to implement this kind of behavior ? 4. Can you recommend any references (either printed or preferably on the web) that I could read that would help me better understand what I need to do in order to implement this kind of behavior ?

I guess I should also point out here that what I’m really trying to do here is essentially 2 things :

1. I don’t want to reinvent the wheel. In other words, if someone else has already worked out a solution to this problem or, at least, has created software that makes this problem easy to handle and implement then I’d much rather build on their work rather than recreate a time consuming, and possibly inferior version of what somebody else has already done. 2. Whatever solution is recommended I very much and most emphatically prefer that it integrate easily and seamlessly with the rest of the application that is being developed using Ruby on Rails.

And finally, everybody, I’d like to thank all of you who’ve had either the patience or the unhealthy excessive amount of curiosity to actually read this rather massive missive to it’s very end (which, I can quite confidently assure you) will arrive shortly.

So, if any you have any ideas, suggestions, advice or information on what you think would be the best way to go about solving the problem I’ve just laid out in such laborious, painstaking and tedious detail I would be very grateful and very much appreciate hearing from you.

So, finally, I’d like to thank all of you for your help.

All the best & talk to you soon … Simon.

I'l be honest and say that I've only really scanned over your problem. Since what you're dealing with here is entirely client side (perhaps with a smattering of ajax to communicate results back to you server process), the solution is not a server side technology like rails. I would have thought that javascript is enough for this(scriptaculous examples such as The real John Ford may provide you with some inspiration).

Fred

I'm just learning this stuff myself, but given your fairly exacting UI requirements I do wonder whether "web app" is your best choice for this. Probably you can get much of what you need done w/client-side javascript, but if you're at all comfortable w/a "thick client" type platform (e.g., java, .net) you may have an easier time of it there. (Or I would anyway. :wink:

Could you tolerate having users just click individual positions on the rings & have the ring jump right to that position w/out the dragging? Are the 12 positions discrete settings, or will users need to be able to set a ring to e.g., 3.41301? I wonder if you could use an image map and some ajax and an image processing program to dynamically generate .png's of your dials? I don't think I'd want to try and animate the drags that way, but if you can tolerate a click-to-set type interface, it'd probably be doable.

Anyhoo--hopefully someone useful will chime in. :wink:

HTH,

-Roy