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

Email 	: simonwhel-/E1597aS9LQAvxtiuMwx3w@public.gmane.org

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.


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

On 12 May 2008, at 22:32, simonwhel-/E1597aS9LQAvxtiuMwx3w@public.gmane.org
wrote:
>  image.
>
> 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''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
http://www.aldenta.com/examples/script.aculo.us/slider-multiple.html
  may provide you with some inspiration).

Fred
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

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. ;-)

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. ;-)

HTH,

-Roy

-----Original Message-----
From: rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
[mailto:rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org] On Behalf Of
simonwhel-/E1597aS9LQAvxtiuMwx3w@public.gmane.org
Sent: Monday, May 12, 2008 2:33 PM
To: Ruby on Rails: Talk
Subject: [Rails] A ''Kind of'', ''Sort of'' Ruby
on Rails User Interface
Question ...


Email 	: simonwhel-/E1597aS9LQAvxtiuMwx3w@public.gmane.org

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.




--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---