Hello, I've made some patches against the timeline trunk that are mostly focussed on performance of loading json and scrolling when the number of events is very high (5000+). I profiled in both FF3/firebug 1.3 and in a recent webkit nightly. I'll be citing figures from FF3/firebug.
date-time.js_optimizeNullDates.diff This change makes a huge difference in json load times when there are a lot of single date events. The parseIso8601DateTime function was previously taking 60-70% of load time, and with this patch takes less than 1%. This patch is far and away the most important of the one's I'm providing. compact-painter.js_cacheDiv.diff original-painter.js_cacheDiv.diff overview-painter.js_cacheDiv.diff These patches modify the painters to pre-cache some of the event divs and then uses cloneNode. Depending on the function, it improves performance of those calls by 3-10%. Not the most amazing improvement ever, but it is something. band.js_cacheViewWidth.diff Optimizes band.js's getViewWidth function by caching the width in a member variable instead of doing dom lookups. When scrolling, this function is responsible for 90% of reported runtime. With this patch, it goes to less than 1%. compact-painter.js_minPixel.diff original-painter.js_minPixel.diff overview-painter.js_minPixel.diff These are the only patches that are not performance related. They modify the painters to guarantee that all tape divs are at least one pixel wide. This solves a problem I was having where some events were invisible at certain zoom levels. Additionally, I've included a python script that I wrote to generate my test json files and the test.html file I was using with them. --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
timeline_diffs.tar.gz
Description: GNU Zip compressed data
#! /usr/bin/python
'''
genTimelineEvents.py
Written by Karl Seamon
Generates a json timeline event file based on the arguments provided.
Requires python 2.6+ or simplejson
'''
try:
import json
except:
import simplejson as json
import optparse
import random
import sys
import time
oparser = optparse.OptionParser('usage: genTimelineEvents.py [options] event_count')
oparser.add_option('-s', '--start', action="store", type="int", dest="start_time", default=1, help="start of time range represented as seconds since the unix epoch")
oparser.add_option('-e', '--end', action="store", type="int", dest="end_time", default=946702800, help="end of time range represented as seconds since the unix epoch")
oparser.add_option('-d', '--duration-percent', action="store", type="int", dest="duration_percent", default=30, help="percent of events that are duration events")
oparser.add_option('-r', '--randomize', action="store_true", default=False, dest="randomize", help="randomizes the space between events; as a result, the --end argument will be treated as an estimate")
(options, args) = oparser.parse_args()
event_count = int(args[0])
intervalLength = (options.end_time - options.start_time) / event_count
if options.randomize:
intervalLength /= 2
timeFormat = '%Y-%m-%dT%H:%M:%S'
curTime = options.start_time
eventNum = 1
events = []
while(curTime < options.end_time):
evt = {
'start': time.strftime(timeFormat, time.localtime(curTime)),
'title': 'Event %d' % eventNum,
}
if options.duration_percent != 0 and (options.duration_percent == 100 or options.duration_percent > random.randint(0,100)):
evt['durationEvent'] = True
endTime = intervalLength * random.randint(1, 5)
if options.randomize:
endTime *= 2
evt['end'] = time.strftime(timeFormat, time.localtime(curTime + endTime))
else:
evt['durationEvent'] = False
events.append(evt)
eventNum += 1
curTime += intervalLength
if options.randomize:
curTime += random.randint(0, 2 * intervalLength)
sys.stdout.write(json.dumps({'dateTimeFormat': 'iso8601', 'events': events}))
Title: SIMILE Widgets | Timeline | Examples | Test Example
- SIMILE Widgets
- Timeline
- Examples
- Event Attribute Tests
Event Attribute Tests
This test uses JSON data.
It demonstrates use of various event attributes color, textColor, tapeImage, and tapeRepeat. Details
Test numbers:
- Only start date
- Start and end dates. Combinations of isDuration
- Red tapes. Events without titles. Start and end dates. Combinations of isDuration
- Caption and tapeImage attributes. The striped tape. Hover over the label or tape to view the caption.
- Really long labels. They should not wrap
- Permutations of bad dates. Test that error messages are shown in all browsers including IE
- Event has classname attribute. CSS is used to modify the event's display. For event with classname of special_event, use css selectors:
- .tape-special_event for the tape in a main band
- .label-special_event for the label
- .icon-special_event for the icon
- .highlight-special_event for the highlight div
- In addition to the above, the elements also have a class of just special_event. So the selector .special_event can be used generically for all of the above elements, depending on your goals.
- The events in the overview band will have class .small-special_event for the tape or tick.
- Default Timeline Theme is modified (see html file source).
- Modified theme: thicker event tapes and increased track size appropriately to match.
- Modified theme: Popup bubble dimensions set explicitly.
Timeline version .
Stripe courtesy of Stripe Generator.
