Customizing the visual display of items on the timeline (changing the
content shown, rather than the styles) usually requires some custom
Javascript coding. The code that draws the icons and bars on the
timeline are called "painters". The code that puts stuff inside the
bubble when you click on an event is part of the event-source code
(this is where the fillInfoBubble function lives.)
You can create customized versions of the various javascript functions
and use those instead of the default ones.
For example, I might want a timeline showing movies playing in local
theaters. I have a database of movies on my server and I can return a
list of movies for a given date range as JSON. The data might look
like this:
{"events" : [
{"start":"2009 Aug 06 15:30",
"end" : "2009 Aug 06 17:35",
"title" : "Shark Attack!",
"genre" : "Action/Adventure",
"rating" : "PG13",
"description" : "Angry sharks with lasers cause mayhem."},
{....etc}
When the user clicks on a movie, I want to show them a nice little
summary of the movie in the bubble. The default fillInfoBubble method
will automatically show the title and description in the bubble, but I
want it to show the start and end times, the rating and the genre for
the movie. I'll also highlight any movie that has an "R" rating with a
note.
To do this, just make your own version of this function: (I used
innerHTML here because it's quick and dirty. There are many different
ways of filling in the content of the bubble).
Timeline.DefaultEventSource.Event.prototype.fillInfoBubble =
function(elmt, theme, labeller) {
var rating = this.getProperty("rating");
var bubbleText = "<div class='title'>" + this.getText() + "</div>" +
"<table class='movie'><tr><th>Description:</th>" +
"<td style='width:65%'>" + this.getDescription() + "</td></tr>"+
"<tr><th>Genre:</th><td>" +
this.getProperty("genre") + "</td></tr>" +
"<tr><th>Rating" + "</th><td>" +
rating +
(rating == "R" ? "<br>(Note: No one under 13 allowed)" : "") +
"</td></tr>" +
"<tr><th>Start:</th>" +
"<td>" + this.getStart() + "</td></tr>" +
"<tr><th>End:</th>" +
"<td>" + this.getEnd() + "</td></tr></table>";
elmt.innerHTML= bubbleText;
}
I include this custom fillInfoBubble function in my javascript and
make sure it loads after I load Timeline (so it overrides the
default). Now when the user clicks on a movie, they see this nice
little table of movie information.
I was able to include whatever attributes I want in the JSON that is
sent back from my server (genre, rating, etc) and customize the
infoBubble to show those custom attributes using the .getProperty()
method on my event.
Suppose I wanted to show "rating" on the timeline itself, as part of
the label. This is done by the painter. Suppose we're using the
original painter. The labels for the events are made in
Timeline.OriginalEventPainter.prototype._paintEventLabel.
We can copy and paste the entire function into our own file and then
change it:
labelDiv.innerHTML = text + " (" + evt.getProperty("rating") + ")";
Now, the genre for every movie on our timeline is appended to the label:
Shark Attack! (PG13)
So there are two examples of customizing the contents of the bubble
and the labels on the timeline using custom attributes for an event
that are passed inside the JSON.
Feel free to ask if you have any more questions.
--Mike Nosal
On Aug 6, 2009, at 5:24 PM, mabra wrote:
>
> Hello!
>
> Much, much thanks!
>
> That drives me into the right direction. Although I've not understand
> your inital explanation, I generate my events on the server and direct
> access to all of them on the client side is currently not needed.
>
> I found a sample of an "fillInfoBubble" and can access my event
> directly and your
> this.getProperty("myCustomTitleField");
> made it for me!!!
>
> I'll even send custom classes to the client and simple GUIs fitting an
> events class and made a simple prototype.
>
> But what I recognized:I must build the whole popup my myself. You
> mentioned a "painter". Do you have an example? I just use the
> "fillInfoBubble", but must even remove the date and time etc. from the
> event.
>
> This tip could be great!
>
> Anyway, much thanks for your help!
>
> br--mabra
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"SIMILE Widgets" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/simile-widgets?hl=en
-~----------~----~----~----~------~----~------~--~---
