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

Rails
1

Email : [email protected]

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.

2

On 12 May 2008, at 22:32, [email protected] wrote:

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

may provide you with some inspiration).

Fred

3

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