Re: Layout of Duration events in Timeline

[Dan Dormont]

Hi folks,

Any thoughts on this? I'm assuming that this is either something in the Theme or I need to tweak some of the CSS directly, but I'm just not sure where to start. Any guidance would be appreciated.

thanks,

Dan

On Thursday, August 23, 2012 2:35:28 PM UTC-4, Dan Dormont wrote:

Hi all,

I've just recently starting using SIMILE Widgets, specifically Timeline, and I'm off to a great start, but I've come upon a few questions about how Events appear in the Timeline. 

1) I'd like to change the way tapes are shown. Specifically I'd like to have a thicker tape, with the title of the event (and icon if any) appearing inside the tape rather than below it. Is this feature provided out of the box? If not, where would I have to look to change it? 

2) Is there a way I could specify a class for the icon rather than a URL, if I want the icon coming from my own sprite sheet?

3) Is there a way for an event to continue "forever", meaning that it has a tape even if it has no end date?

thanks,

Dan Dormont

Grey Wall Software LLC

[Michael Nosal]

1) Tape thickness is determined by the theme.

Look at api/scripts/themes.js - you can set the tape height (and you need to adjust the track height too).

Putting the label inside the track requires customizing the Timeline.OriginalEventPainter.paintPreciseDurationEvent method.

Basically, you just need to change the position of the label:

var labelTop = Math.round(metrics.trackOffset + track * metrics.trackIncrement);

and increase the thickness of the tape.

2) You should be able to do this by setting a null url for the image in the theme, and using the .timeline-event-icon class to set the background image sprite for the icon's div.

3) No, Timeline does not support this by default. You would need to do some customized javascript. I think there was some problem with timeline not correctly drawing duration events that were longer than 5x the width of their containing band. 

--Mike