dragging vertically in timelines
David Huynh
events overflow a band has been one of the most frequently requested
features. I'm starting to experiment with how to support that feature
natively. Here's a first take--the top band can be dragged vertically:
The dragging interaction is similar to that in the iPhone's Safari.
Please let me know what you think.
David
David Karger
current horizontal band that would allow for rapid scrolling
vertically? Or perhaps when you want to scroll in two dimensions the
right approach is something like google maps' little 2d summary view
that is collapsible in the bottom right corner of their map....
David Huynh
dimension...
David
Stefano Mazzocchi
I like the result and the interaction a lot, but I'm with DavidK about
the somewhat lack of discoverability of this feature.
I agree that timelines will normally have one dimension and a 2d preview
might be misleading... what about using the bottom timeline as the
preview zone? basically just by painting the grayish time window not all
the way to the bottom, but corresponding to the same area of the top band?
--
Stefano Mazzocchi Application Catalyst
Metaweb Technologies, Inc. ste...@metaweb.com
-------------------------------------------------------------------
Jon Crump
>
> Because I'm counting on most timelines having one severely dominant
> dimension...
>
> David
Love the new dragging functionality! I take your point about timelines in
general privileging the linear dimension: and this is as it should be. The
exploration of that linear dimension _is_ the utility of a timeline.
Having said that, however, It might be helpful to subvert the linear view
just a little, and a two dimensional summary might be a way to do it as
David Karger has suggested.
At the very least, I think there ought to be some sort of indication that
there is more above or below the line. Making your existing indicator, the
'scroll' bar on the right, permanently visible wouldn't take up much room
and would provide the necessary prompt.
Thanks for the further innovations.
Jon
David Huynh
portion of the upper band, and I've made the vertical scroll bar visible
all the time (if scrolling is possible).
I personally don't think the highlight of the lower band does a good job
of looking like an overview, at least in its current implementation.
Unlike a world map, which immediately looks like an overview unless
you're from another planet, any rectangle in the lower band with a few
pixels shaved here and there doesn't immediately suggest that it
reflects the vertical scrolling state of the upper band.
Larry also suggested to just use a native scrollbar. Would you prefer that?
David
John Callahan
job of denoting that there's more information hidden to the top and
bottom of the main data band. As well, I don't think you can even count
on the bottom summary band being thick enough to accurately show the
total amount of information. You can't even count on a summary band
being there at all! As data becomes more dynamic, it becomes more
difficult to estimate what's going to happen.
I think a typical vertical scroll bar at the right (or left) of the main
data band would work perfectly. I would allow users to use that scroll
bar to actually scroll vertically. Allowing vertical scrolling anywhere
within the timeline is probably not necessary, although it is a nice
feature.
- John
**************************************************
John Callahan
Geospatial Application Developer
Delaware Geological Survey, University of Delaware
227 Academy St, Newark DE 19716-7501
Tel: (302) 831-3584
Email: john.c...@udel.edu
http://www.dgs.udel.edu
**************************************************
David Karger
"mixed metaphor" ui; i am guessing you can come up with a better
consistent metaphor. It took me quite a while to notice the vertical
scrollbar, and I'm puzzled why it is "read only".
farfetched, but what if you made the timeline into a "barrel" that
rolled away at the top and bottom (images shrinking) to indicate there
is more present?
David Huynh
> you mean use a native vertical scrollbar? That would seem to create a
> "mixed metaphor" ui;
scrollbar.
> i am guessing you can come up with a better
> consistent metaphor. It took me quite a while to notice the vertical
> scrollbar, and I'm puzzled why it is "read only".
>
The intention is that it's only an indicator, and the body of the band
is the interactor.
I think people ain't used to scrolling horizontally as much, so if
vertical scrolling were any more emphasized than it is, then that might
totally inhibit any hint that horizontal scrolling is possible. (A
native vertical scrollbar would really emphasize vertical scrolling.)
But I could be wrong.
> farfetched, but what if you made the timeline into a "barrel" that
> rolled away at the top and bottom (images shrinking) to indicate there
> is more present?
>
"Barrel" like this?
http://z.about.com/d/ipod/1/0/e/3/-/-/iphone_gallery_10.jpg
I can add some gradients.
David
David Karger
sure it is a good idea, but thought I'd toss it out.
Larry Kluger
Hi,
I like David's slim scrollbar, I think it's more attractive than the usual windows toolbar.
I also agree with David's point that a standard window toolbar may influence people away from realizing that they can scroll a Timeline along the time axis.
My 2 cents on the issue are:
1) The scrollbar should always be visible if there are more events than can be shown on the available tracks. It should be usable as a handle for moving the Timeline since its affordance is to act as a handle.
(Affordance is a UI term. An object's affordance is the behavior that we expect from an object, given its appearance and context.)
2) I think the bouncing off the top and bottom of the band effect is great for when the touch gesture is used on an iPhone, iTouch, or some of the newer Macs. But having it occur as the result of a mouse-interaction doesn't feel right to me. I'd appreciate some way to turn that behavior off and I don't recommend it as a default (except when the browser has a touch interface).
Note that Timeline works pretty well out of the box on the iTouch. Enabling the Timeline to be scrolled vertically really solves one of the few problems with Timeline on an iPhone etc. The only other issue is to change the bubbles' show/hide UI when used with an iPhone. That's on my list.
Regards,
Larry
From: David Huynh <dfh...@alum.mit.edu>
To: simile-...@googlegroups.com
Sent: Wednesday, March 25, 2009 12:17:24 AM
Subject: Re: dragging vertically in timelines
John Callahan
described them would work very well for my applications.
- John
> *From:* David Huynh <dfh...@alum.mit.edu>
> *To:* simile-...@googlegroups.com
> *Sent:* Wednesday, March 25, 2009 12:17:24 AM
> *Subject:* Re: dragging vertically in timelines
David Huynh
chance.
David
David Huynh
http://trunk.simile-widgets.org/timeline/examples/compact-painter/compact-painter.html
Let me know how it feels.
Larry, if you have some time, I'd be grateful for some help on
implementing your #2 point. It's been a while since I touch all the
settings in Timeline and don't remember how they propagate. After that,
maybe we should consider a 2.4 release.
David
John Callahan
notes...
- for styling, I see both scrollbar divs have classes
(timeline-band-scrollbar and timeline-band-scrollbar-thumb). However,
only the outside div has an ID (timeline-band-scrollbar-0) Does it
make sense for the inner/thumb div to also have an ID assigned to it?
I'm not really sure if an ID would be required for most things, but I do
know that getElementById tends to come up a lot in js coding.
- Just a thought... when you pan to the left or right, until there are
very few to no events displayed on the timeline, should the vertical
scrollbar change size (extend) to the full height of the band? It
seems that the scrollbar keeps it's dimensions based on the thickest
part of the timeline.
- John
**************************************************
John Callahan
Geospatial Application Developer
Delaware Geological Survey, University of Delaware
227 Academy St, Newark DE 19716-7501
Tel: (302) 831-3584
Email: john.c...@udel.edu
http://www.dgs.udel.edu
**************************************************
David Huynh wrote:
David Huynh
> I do like the way the vertical scrollbar feels. Looks good. Two quick
> notes...
>
>
> - for styling, I see both scrollbar divs have classes
> (timeline-band-scrollbar and timeline-band-scrollbar-thumb). However,
> only the outside div has an ID (timeline-band-scrollbar-0) Does it
> make sense for the inner/thumb div to also have an ID assigned to it?
> I'm not really sure if an ID would be required for most things, but I do
> know that getElementById tends to come up a lot in js coding.
>
#timeline-band-scrollbar-0 .timeline-band-scrollbar-thumb {
...
}
to target your CSS at the thumb.
> - Just a thought... when you pan to the left or right, until there are
> very few to no events displayed on the timeline, should the vertical
> scrollbar change size (extend) to the full height of the band? It
> seems that the scrollbar keeps it's dimensions based on the thickest
> part of the timeline.
>
There's a technical challenge to do that. The band redraws itself only
occasionally, when you've scrolled to a point where you're about to go
beyond the time span that it has painted. This time span is some
multiples of the visible width of the time line. The band only knows the
overall amount of space the events take up in that time span. It doesn't
know how much space (vertically) the events take up at any particular
point in time. So, it can't render its scrollbar at that level of
granularity.
David
Niels Mayer
I've updated the trunk to fix #1
http://trunk.simile-widgets.org/timeline/examples/compact-painter/compact-painter.html
Let me know how it feels.
example:
http://nielsmayer.com/xwiki/bin/view/TimelineTrunk/test
code:
http://nielsmayer.com/xwiki/bin/view/TimelineTrunk/test?raw=1
http://nielsmayer.com/xwiki/bin/view/TimelineTrunk/StyleSheet?raw=1
http://nielsmayer.com/xwiki/bin/view/TimelineTrunk/DataJson?raw=1
Niels
http://nielsmayer.com
Larry Kluger
Subject: Re: dragging vertically in timelines
DeeMo
I'm suggesting some improvements to the horizontal scrolling of the
timeline, here:
http://groups.google.com/group/simile-widgets/browse_thread/thread/b4b9542fe0021655
Considered your previous contributions to the Timeline, maybe you can
do something about it.
-DeeMo
David Huynh
David
