Register for scrolling events on one band and react to it, e.g.,
tl.getBand(0).addOnScrollListener(function(band) {
var minDate = band.getMinDate();
var maxDate = band.getMaxDate();
if (... need to reload events ...) {
eventSource.clear();
tl.loadXML(...);
}
});
The eventSource.clear dealt with a bug I had of duplicating items showing up, of course, now it adds some flicker as some event sources are deleted and then readded! I mentioned this in this bug on another project: http://code.google.com/p/similetimelinerailshelper/issues/detail?id=5
Start with the local timeline example from the GettingStarted? page. Expand the .zip file and make sure that you can show the page and see the 11 events. From there, this discussion will help you to understand how to load events dynamically.
Step 1: Split the array in local_data.js into two parts by adding the following fragment between two of the elements:
]
}
var timeline_extension = { // save as a global variable
'dateTimeFormat': 'iso8601',
'wikiURL': "http://simile.mit.edu/shelf/",
'wikiSection': "Simile Cubism Timeline",
'events' : [
This will give you two distinct sources of events and facilitate dynamically loading. Your sources may vary and can be dynamic (loading them is your challenge, this only describes what to do once they are loaded).
Step 2: Add a button to serve as the reason events must be reloaded. When the button is clicked, events will be reloaded. You can trigger by whatever method seems appropriate (say an XMLHttpRequest enters state 4). I put my button in the banner div like this:
Step 3: React to the event that triggered events to reload. In this example, I use the OnMore? function that looks like this:
function OnMore() {
alert('About to load event source.');
try {
if ('events' in timeline_extension)
alert('events found in timeline_extension');
eventSource1.loadJSON(timeline_extension, '.');
alert('Events loaded.');
}
catch (error) {
alert('Error:' + error);
}
}
This is a really noisy version, but it seems to handle adversity and makes for a good learning example because you can experiment and break things and still find out what happened. It is worthy to note that I initially had a 'tl.layout()' call after the 'loadJSON' call, but my events showed up without it. In a more complex example, a call to layout may turn out to be necessary. If you see a problem and resizing the window seems to fix it, I would try adding this call.
Two other interesting notes: 1) In the original local_example.html, the eventSource1 variable is local to the onLoad function. For the OnMore? function to work as coded, this needs to become a global. 2) My OnMore? example will add new events to the already existing events. If you want to start fresh, then you will need to call 'eventSource1.clear()' before calling 'loadJSON'. The simplified version of OnMore? might look like this:
The eventSource.clear dealt with a bug I had of duplicating items showing up, of course, now it adds some flicker as some event sources are deleted and then readded! I mentioned this in this bug on another project: http://code.google.com/p/similetimelinerailshelper/issues/detail?id=5
test
... need to reload events ...
What goes here? How do you know when and what to reload?
...a miracle occurs here...
Start with the local timeline example from the GettingStarted? page. Expand the .zip file and make sure that you can show the page and see the 11 events. From there, this discussion will help you to understand how to load events dynamically.
Step 1: Split the array in local_data.js into two parts by adding the following fragment between two of the elements:
] } var timeline_extension = { // save as a global variable 'dateTimeFormat': 'iso8601', 'wikiURL': "http://simile.mit.edu/shelf/", 'wikiSection': "Simile Cubism Timeline", 'events' : [This will give you two distinct sources of events and facilitate dynamically loading. Your sources may vary and can be dynamic (loading them is your challenge, this only describes what to do once they are loaded).
Step 2: Add a button to serve as the reason events must be reloaded. When the button is clicked, events will be reloaded. You can trigger by whatever method seems appropriate (say an XMLHttpRequest enters state 4). I put my button in the banner div like this:
Step 3: React to the event that triggered events to reload. In this example, I use the OnMore? function that looks like this:
function OnMore() { alert('About to load event source.'); try { if ('events' in timeline_extension) alert('events found in timeline_extension'); eventSource1.loadJSON(timeline_extension, '.'); alert('Events loaded.'); } catch (error) { alert('Error:' + error); } }This is a really noisy version, but it seems to handle adversity and makes for a good learning example because you can experiment and break things and still find out what happened. It is worthy to note that I initially had a 'tl.layout()' call after the 'loadJSON' call, but my events showed up without it. In a more complex example, a call to layout may turn out to be necessary. If you see a problem and resizing the window seems to fix it, I would try adding this call.
Two other interesting notes: 1) In the original local_example.html, the eventSource1 variable is local to the onLoad function. For the OnMore? function to work as coded, this needs to become a global. 2) My OnMore? example will add new events to the already existing events. If you want to start fresh, then you will need to call 'eventSource1.clear()' before calling 'loadJSON'. The simplified version of OnMore? might look like this:
function OnMore() { try { eventSource1.clear(); eventSource1.loadJSON(timeline_extension, '.'); } catch (error) { alert('Error:' + error); } }testing