Experimental compact event painter for Timeline

[David Huynh]

Hi all,

I just coded up a new event painter that lays out events in a more
compact way:

http://people.csail.mit.edu/dfhuynh/misc/compact-painter/

(The bottom timeline uses the existing layout, and is there for
comparison against the middle timeline.)

What's new?

- Duration events can now have their images painted, too (see "John D.
Rockefeller" (1839) in the top timeline). This is a major addition.
- Images of different events can be of different sizes (compare "John D.
Rockefeller, Jr." (1874) against "Avery Rockefeller" (1903)).
- The example shows 2 different sizes but potentially each image can
have its own size.
- Things are a lot more packed vertically (see middle timeline).
- Precise instant events with the same date/time can be "collapsed"
together to save space (see those "x events" in the middle timeline).

This is accomplished by letting each event's rendered HTML elements take
up potentially more than one track, and then keeping the track height small.

Please let me know what you think! If you like it, I'll check it in and
you can help me test it. :)

Cheers,

David

[Wayne Pope]

Hi David,

looks good to me.

[mleden]

Wow, that's really nice David :-) Can we look forward to seeing that
in Exhibit?

A couple things I noticed (could be user error):
1. Only the top (new) timeline rendered events. I interpreted your
comments to mean we'd see the "old" rendering in the other timelines.
2. For Avery Rockefeller (and presumably all images of that size?) I
only see the blue circle icon (no image). The John D. Rockefeller, Jr
image renders fine.

I'm on WinXP SP 3 running IE 7.0.

Thanks for all the great work,
-Mark

[Jon Crump]

David,

Great work. It's wonderful that you're still working on this!

On Tue, 13 Jan 2009, David Huynh wrote:
> - Images of different events can be of different sizes (compare "John D.
> Rockefeller, Jr." (1874) against "Avery Rockefeller" (1903)).

> - The example shows 2 different sizes but potentially each image can
> have its own size.

On my mac (10.5.5) in both FF (3.0.5) and Safari (3.1.2) no image for
Avery displays. I only see blue circle with a little box around it.

> - Things are a lot more packed vertically (see middle timeline).
> - Precise instant events with the same date/time can be "collapsed"
> together to save space (see those "x events" in the middle timeline).

These collapsed events display no image, just a generic image placeholder.

A general question about your original design decisions:

The js object for event data takes the form:
{
"events":[
{event},
{objects}
]
}

why not simply an array of event objects:

events = [{event},{event},...]

Did you envision this map having keys in addition to "events"?

Are there circumstances in which it might?

Just my usual naive curiosity.

best,
Jon

[David Huynh]

mleden wrote:
> Wow, that's really nice David :-) Can we look forward to seeing that
> in Exhibit?
>

If you want to try it early, then you can just link to the file

http://people.csail.mit.edu/dfhuynh/misc/compact-painter/compact-painter.js
after you include the time extension for Exhibit. And then specify your
own timeline constructor for your timeline view in your exhibit, and use
at the HTML source of
http://people.csail.mit.edu/dfhuynh/misc/compact-painter/index2.html
to see how you can make use of the new painter.

> A couple things I noticed (could be user error):
> 1. Only the top (new) timeline rendered events. I interpreted your
> comments to mean we'd see the "old" rendering in the other timelines.
>

Thanks for pointing that out! There was a problem with the JSON data
file. It should be fixed now.

> 2. For Avery Rockefeller (and presumably all images of that size?) I
> only see the blue circle icon (no image). The John D. Rockefeller, Jr
> image renders fine.
>

That's intended. There is no image for Avery Rockefeller, so the default
image is used. I meant to illustrate that the painter can deal with
images of different sizes.

Cheers,

David

[David Huynh]

Jon Crump wrote:
> David,
>
> Great work. It's wonderful that you're still working on this!
>

Hi Jon,

Freebase has a lot of temporal data with pretty images... :-)

> On Tue, 13 Jan 2009, David Huynh wrote:
>
>> - Images of different events can be of different sizes (compare "John D.
>> Rockefeller, Jr." (1874) against "Avery Rockefeller" (1903)).
>>
>> - The example shows 2 different sizes but potentially each image can
>> have its own size.
>>
> On my mac (10.5.5) in both FF (3.0.5) and Safari (3.1.2) no image for
> Avery displays. I only see blue circle with a little box around it.
>

Sorry I wasn't clear about this. There is no image for Avery, and so the
default icon is used, and it's of a different size than John D.
Rockefeller, Jr.'s image.

>> - Things are a lot more packed vertically (see middle timeline).
>> - Precise instant events with the same date/time can be "collapsed"
>> together to save space (see those "x events" in the middle timeline).
>>
> These collapsed events display no image, just a generic image placeholder.
>

Stefano suggested that their images should be stacked. I'll try that next.

> A general question about your original design decisions:
>
> The js object for event data takes the form:
> {
> "events":[
> {event},
> {objects}
> ]
> }
>
> why not simply an array of event objects:
>
> events = [{event},{event},...]
>
> Did you envision this map having keys in addition to "events"?
>
> Are there circumstances in which it might?
>

Yup, so one other key is "dateTimeFormat". There might be other
information that applies to all events, e.g., base URL to resolve all
relative image URLs. We might also eventually move the information about
the bands and decorators into the data file, making things a lot more
declarative.

David

[David Huynh]

David Huynh wrote:

> Jon Crump wrote:
>
>> These collapsed events display no image, just a generic image placeholder.
>>
> Stefano suggested that their images should be stacked. I'll try that next.
>

Here's a shot at stacking the images of concurrent events:
http://people.csail.mit.edu/dfhuynh/misc/compact-painter/index3.html
You can hover over an event's label in a stack and its image would pop
up to the top of the stack.

David

[Scott Thomson]

Very cool David,

I really need to look for a good use for that, it is seriously pretty.

I've hacked a "Tape" painter together by overriding a couple of prototypes on the Original Painter, but I imagine an official "Tape" painter could be made...

The funtions I overrode after loading the simile timeline api were:

Timeline.OriginalEventPainter.prototype.paintPreciseDurationEvent = function(evt, metrics, theme, highlightIndex) {
:
    var labelTop = Math.round(
        metrics.trackOffset + track * metrics.trackIncrement );
//        metrics.trackOffset + track * metrics.trackIncrement + theme.event.tape.height);
:
}

and

Timeline.OriginalEventPainter.prototype.paint = function() {
:
    var trackHeight = Math.max(eventTheme.track.height, eventTheme.tape.height);
//    var trackHeight = Math.max(eventTheme.track.height, eventTheme.tape.height +
//                        this._frc.getLineHeight());
:
}

I may have missed something but I'm getting a nice merged tape/label event view now.

Would it be worth collecting any more custom painters alive in the wild and contributing them into the source base?

I'd certainly be happy to contribute my 2 lines in a new TapePainter but I think I only have read access to the CVS.

Cheers,
Scott

--
Scott Thomson
0401 726 889

[David Huynh]

Scott Thomson wrote:
> Very cool David,
>
> I really need to look for a good use for that, it is seriously pretty.

Well, you can do mashups with data from Freebase.com. There are a lot of
pretty images there :-) Here's another example of movies with larger
thumbnails:

http://people.csail.mit.edu/dfhuynh/misc/compact-painter/index4.html

> [...]

>
> Would it be worth collecting any more custom painters alive in the
> wild and contributing them into the source base?
>
> I'd certainly be happy to contribute my 2 lines in a new TapePainter
> but I think I only have read access to the CVS.

Definitely worth collecting them, although in this case of TapePainter,
since the change is so small, it should just probably be a parameter to
OriginalEventPainter to either paint the label on top of or below the tape.

David

[Scott Thomson]

> Definitely worth collecting them, although in this case of TapePainter,
> since the change is so small, it should just probably be a parameter to
> OriginalEventPainter to either paint the label on top of or below the tape.

Definitely.  I only have read access to the CVS though so...

[Larry Kluger]

Hi Everybody,

I'm working on recovering from my big project, now able to start working on the email backlog.

David, Congrats on a very interesting new painter. Great UI. I especially like the ability to add icons to non-instant events, something that was on my to-do list too.

Regards,

Larry

---

From: David Huynh <dfh...@alum.mit.edu>
To: simile-...@googlegroups.com
Sent: Thursday, January 15, 2009 2:42:20 PM
Subject: Re: Experimental compact event painter for Timeline

[David Huynh]

Larry Kluger wrote:
>
> Hi Everybody,
>
> I'm working on recovering from my big project, now able to start
> working on the email backlog.
>
> David, Congrats on a very interesting new painter. Great UI. I
> especially like the ability to add icons to non-instant events,
> something that was on my to-do list too.

Hi Larry, so I've checked in the new painter. I think it'll help make a
good case for getting 2.3 out. Thoughts?

David

[Larry Kluger]

Absolutely David,

I'll be working it this week.

Larry

---

From: David Huynh <dfh...@alum.mit.edu>
To: simile-...@googlegroups.com

Sent: Monday, March 2, 2009 3:42:11 PM

Subject: Re: Experimental compact event painter for Timeline

[marcel...@fortuna-werbeagentur.de]

Hi Larry and David,

wow this looks and sounds good. Vers 2.3 for the Timeline? When can we
expect this painter hitting exhibit?