RoRUIQ … sort of … I think …

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.

I fully realize that RoR is primarily a server based software
technology.

The problem is that I have a RoR based web application that has a
fairly complex User Interface that has to be implemented by me.

I actually understand not only what has to be done I also understand
pretty well how what has to be done should be done (i.e. : by that I
mean I understand the actual psuedocode steps that have to be followed
to implement the User Interface).

What I need to know is what software technology, framework or package
(e.g. : Javascript, XHTML, Flash or whatever) is the best thing to use
to implement the User Interface I will shortly describe.

You should also bear in mind that whatever User Interface solution is
implemented it has to easily communicate back and forth with the RoR
software that is sitting on the web server.

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 be moved 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. Move the mouse over the “12” position on the 2nd outermost dial.
  2. Click on the mouse.
  3. Hold the mouse button down.
  4. While still holding the mouse button down, Move the mouse to the
    “3”position on the 2nd outermost dial.
  5. Once the mouse has been moved so that it’s now over the “3”
    position on the 2nd outermost dial release the mouse button.
  6. 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,
    say, 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 the 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 web server based 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.