Timeline updated: bars with colors and stripes and more!

[LarryK]

Hi Everybody,

I just checked in rev 1569 to Timeline.

New features
* Timeline events can now have new optional attributes of barImage and
barRepeat. Use them to set the background of event bars. Use stripes
or any image. The cubism example now demonstrates this. Check it out
on my sandbox: http://sandbox.kluger.com/timeline/src/webapp/examples/cubism/cubism.html?1

* timeline_source.zip -- To make it easier for people to download the
source, I've added a new file to the source tree, a zip file of the
source. You can download it from here:
http://simile-widgets.googlecode.com/svn/timeline/trunk/timeline_source.zip

Please let me know what you think of this idea. You should be able to
download it to your Mac or Win machine, unzip it, start the included
web server and then be all set. (Somebody please test it for me...)

* Updated the documentation about event sources (describes the
attributes). See
http://code.google.com/p/simile-widgets/wiki/Timeline_EventSources

Bug fixes
* Fixed color attribute to set background color of Timeline bars. See
Cubism for a demo.
* hoverText now works for JSON and SPARCL event sources. See Cubism
for a demo.

Using the new version
This version of Timeline is not available on the MIT servers or
elsewhere for production access by your Timeline html files. You can
easily serve the library to your own pages using any web server.

Your comments are very much appreciated.

Regards,

Larry K
New York City

[Michael Nosal]

Great, but I'm not a fan of introducing more style information in the
events themselves. Having to specify barImage and barRepeat for a
whole bunch of events is just mixing the data and the presentation,
and implies that other code will have to have knowledge of the
presentation of the data when it is generating my XML or JSON. I
don't want that.

I would rather specify things through classes:
event {'start':'1885', 'end' : '1925', 'eventClass' : 'residence'
or
event {'start':'1920', end : '1924', 'eventType' : 'schooling'

and use css classes to apply the appropriate images and styles.

Same for hoverText - don't define attributes that refer specifically
to presentation.
I would rather have semantically meaningful labels for my values,
like "shortTitle" or "summary" or "caption" than "hoverText",
"linkText" or "mouseoverText"

I'm all for more control over the presentation of items on the
Timeline, I just want to keep things cleanly separated between data
and presentation.

--Mike Nosal

[LarryK]

Hi Mike,

Good news is that your way works too--see the event attribute
classname
Doc: http://code.google.com/p/simile-widgets/wiki/Timeline_EventSources
Currently, it sets the classname for just the label's div.

My thoughts are:
1) change classname attribute behavior so rather than setting the div
to only be the classname class, have it be *added* as a second
classname to the default classname timeline-event-label

2) also apply the classname to the bar's div but again, add it *in
addition to* the already present class timeline-event-tape.

The above changes will enable you to set css for both the label and
bar, plus additional rules that discriminate between the two.

While an additional level of indirection via the css file has
advantages, it also has disadvantages: an additional level of
indirection, more files to change, more to keep track of, more
complicated documentation, etc. Plus some customizable systems don't
want to generate dynamic css files for dynamic class definitions--
while it can be done, it is yet more work.

And IE still does not support the :before pseudo tag which would be
helpful as an alternative to giving an icon's image url.

I'm fine with expanding the current event classing mechanism as
described above if you think it'd be a positive move.

Re: hoverText -- yeah, I agree with you there. I didn't add it, just
fixed a bug where JSON wasn't reading it. Interestingly, it is
internally used as the "title" attribute. And the event title
attribute is (internally) the 'text' attribute.
I will add a new attribute of caption that will do the same thing as
today's hoverText. (hoverText will remain for backwards
compatibility.)

Regards,

Larry

[jcorreia]

Hi,
different style information in the events is precisely what I was
looking for, thanks :)
About Mike comment, to have the style specified in the css, I disagree
because I´m using dynamic data pulled from a db, and with this I have
the power to pass the attributes when I´m building the json.
Add some defaults values to this attributes, and you just need to pass
what you need changed..simple :)

Thanks,
jcorreia