Thicker tapes and titles 'within' tapes

195 views
Skip to first unread message

dan

unread,
Oct 8, 2009, 7:00:54 AM10/8/09
to SIMILE Widgets
Hi,

I'm brand new to Simile, but am finding it extremely useful so far.
I've got a default horizontal implementation up and running, feeding
events through an XML file. All of my events will be periods of time
rather than dots, so they'll all be represented by a tape line.

What I want to do though, is make the lines deeper, and put the titles
of the event appear inside the tape. All my tapes are red, and I want
all the titles to be white. I thought it would be possible to do this
with the style sheet, but have found that most of the styles of the
tapes and titles are being set by Javascript.

Also I'd like more space vertically between events.

Can anyone explain how to do the above?

Thanks all!

sebastien.barre

unread,
Oct 8, 2009, 1:47:55 PM10/8/09
to SIMILE Widgets
I came to the same conclusion, it doesn't seem you can put titles
within tapes, that's definitely something I'd love to see added in the
future.

You can change the tape height/width by creating a custom theme:
http://www.simile-widgets.org/wiki/Timeline_ThemeClass
see track's height, offset, and gap parameters.

For example:

var theme1 = Timeline.ClassicTheme.create();
theme1.firstDayOfWeek = 1;
theme1.event.tape.height = 10;
theme1.event.track.height = theme1.event.tape.height + 8;

var bandInfos = [
Timeline.createBandInfo({
eventSource: eventSource,
width: "85%",
intervalUnit: Timeline.DateTime.WEEK,
intervalPixels: 75,
theme: theme1
})
];

Michael Nosal

unread,
Oct 9, 2009, 10:29:33 AM10/9/09
to simile-...@googlegroups.com
You can make the tapes thicker by changing the theme that you are using.
You need to change the height, gap and tape height:
var myTheme = Timeline.ClassicTheme.create()
myTheme.event.track.height = 18; // this sets the height for a track
myTheme.event.track.gap = 2; // this sets the spacing between tracks
myTheme.event.tape.height = 16; // this sets how thick a duration
event tape is

To get the label of the duration event to be within the tape, you'll
need to change some javascript.
The position of the label is controlled by the painter you are using.
If you are using original-painter.js, then you want to change the code
for painting duration events. There are two methods --
paintPreciseDurationEvent and paintImpreciseDurationEvent.

In these functions, the variable labelTop controls the vertical
position of the label.
The default value is:
var labelTop = Math.round(
metrics.trackOffset + track * metrics.trackIncrement +
theme.event.tape.height);

Change this to:
var labelTop = Math.round(metrics.trackOffset + track *
metrics.trackIncrement);

and the label should be positioned at the same vertical position as
the tape.

You mention that all your tapes are red and you want your labels to be
white. Remember, if your label is longer than the event tape, the text
will extend out over the right edge of the tape. If your timeline
background is white or light-colored, you might not be able to see the
rest of the label.

--Mike

shyam kumar

unread,
Oct 9, 2009, 10:39:43 AM10/9/09
to simile-...@googlegroups.com
Hi dan..
 
What you said is correct..but.. I tried this long back for painting labels on Tape..
 
But i remembered like..if event icons with tape presents in the timeline.. this may not work properly and we need to change the painting of icons correspondingly with labels..
 
~Shyam..

 
Reply all
Reply to author
Forward
0 new messages