Timeline revisited - updated - streamlined

[Matt Denman]

I started using timeline a while ago and dug in deep.  I love the widget, but I really disliked the way it was loading the javascript and how its script block needed to be in the head section.  I tore out the timeline code from the overall Simile project and removed much of the base code that wasn't needed or was just a duplicate of what jquery has.  I've changed the way class methods are defined to be more streamlined and the overall result is now one file that is 153kb minified and 44k zipped.  This is a significant size difference from the Simile version, which loads faster on the iPad.  This code version also has tablet touch support as provided in other threads on the web.

I've completely removed all support for doing ajax directly from Timeline as its just more mainstream to use something like $.load(...).done(function(json){...}).  This is an example of removing stuff from timeline that jquery already does.

Another thing removed is the history stuff which forced another query on the server and wasn't really used in timeline anyway.

Also, the code no longer tries to load its own version of jquery.  My thinking is, if you cant properly setup jquery on the page, you probably aren't ready to use timeline.  I think the main developer should be crystal clear on what version of jquery is being used in their project.  That code was just bloat.

I've also setup the creation of the timeline as a real jquery plugin.  All examples I've converted over work, and my own app which pushes the edges of the timeline works with the new code.

I'm not sure if this new code should be setup as a branch to the main project or just shared somewhere else.  I want to take timeline further than it is now, including support classes in .NET for ASP.NET classic and MVC.  Right now I'm thinking I'll just host this version on another site and let it go from there.

I'm adding better event notification to support having other things on the page show data related to the events showing on the page.  For example, all financial transactions visible on the timeline are summarized in a table below the timeline.

I've also added support for event grouping by having bands that dont have to have a timeline painter.  Put different events on each band and only have the bottom band have the date tic marks.  This groups events well.

I also need to add support for paging events rather than loading all events into the timeline at once.  As the user scrolls through time, the timeline should be able to have events added and removed dynamically to keep the total # of events (and DOM elements) actually rendered down to a minimal.  I worked on the Nitobi Grid which did virtual scrolling with data paging via ajax and it worked well.  I see it as critical for timeline to support this really well.

[David Karger]

Matt, this sounds really cool. Your version might be just what we need
to integrate into exhibit 3. Can you post links to some working
examples people can play with?

> --
> You received this message because you are subscribed to the Google
> Groups "SIMILE Widgets" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to simile-widget...@googlegroups.com.
> To post to this group, send email to simile-...@googlegroups.com.
> Visit this group at http://groups.google.com/group/simile-widgets.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>

[Robert Barnes]

Matt, if you want a dumb user to try out your new code as an acceptance test, I do dumb very well (my challenge is not doing it when I don't want to). If you let me know how to download your code I'll develop a version of my timeline that's integrated with ASP.NET, feed back my comments to you, and rewrite my paper at http://www.robertb.co.nz/timeline/Using the Simile TimeLine with ASP.htm

 

Cheers,

 

Robert Barnes

phone  +64-9-418 4415

mobile +64-27-459 2702

Skype: Robert.Barnes3

Address: 13A Havenwood Place, Birkenhead, Auckland 0626

www.famnet.net.nz

www.robertb.co.nz

---

--

[Joe Zyzniewski]

Matt,

I would love to see/use this code for my new project.  If they will not branch your code, can you email me a copy so I can take a look and possibly use your code instead of the existing timeline.

I want my app to work on the ipad, and it is a little too slow right now.

Thanks!!

-Joe

--

[Nosal, Michael R.]

Matt,

That’s great. Can you push your changes to a github repository so we can take a look? I’ve been doing paging of events with the standard Timeline code, so I’m curious to see what changes you made.

 

--Mike

 

From: simile-...@googlegroups.com [mailto:simile-...@googlegroups.com] On Behalf Of Matt Denman
Sent: Sunday, July 07, 2013 8:48 PM
To: simile-...@googlegroups.com
Subject: [Simile-Widgets] Timeline revisited - updated - streamlined

 

I started using timeline a while ago and dug in deep.  I love the widget, but I really disliked the way it was loading the javascript and how its script block needed to be in the head section.  I tore out the timeline code from the overall Simile project and removed much of the base code that wasn't needed or was just a duplicate of what jquery has.  I've changed the way class methods are defined to be more streamlined and the overall result is now one file that is 153kb minified and 44k zipped.  This is a significant size difference from the Simile version, which loads faster on the iPad.  This code version also has tablet touch support as provided in other threads on the web.

[Matt Denman]

I've started a new github repository at https://github.com/kusog/timeline but have not pushed the code up as of this reply.  I'll push up the code within the next few hours once I get it more organized for the first check-in.

[Matt Denman]

I'm uploading the monet example updated to use my new code.  Obviously the example includes the new code.  

I dont want to update the main github until I do a few things, but I wanted to hand out the example so you could see what I was talking about.  All of my changes are to the real base code, but what is included in the example is the minified js and css.  When I check into the github, it will be the base code with comments and stuff.

All the things mentioned in my first post about what I WANT to do are things to do in the future.  For example, I WANT to add paging, but have not yet.  The conversion to jquery widget is done, but I want to mainstream the way options are passed into it and stuff like that.

I am working with this code base in my ASP.NET MVC project which has two layouts, one for jquery mobile, and one for twitter bootstrap desktop version.  The timeline is being used in both layouts.  In other words, I am going to make sure this widget works well with mobile and other environments like jquery ui (versus jquery mobile) and with different css kits like sass and less.  It'd be great to move the css base to sass so themes were driven via that.

[Matt Denman]

I setup http://timeline.kusog.org to run the monet demo if you want to see the new code in action without dealing with the zip.

Note about the zip sent out earlier.  I changed it to use the latest jquery, but it breaks the double click to scroll.  If you change the jquery to something like version 2.8.2 all functionality works as expected.

Also, the code in the example include the touch support but the zip went out with older code.

[David Karger]

You're getting a different font than the original; one result is that
(on my firefox) the word "birth" doesn't fit in its band and is getting
cut off. Is this intentional?

[Jörn Clausen]

On Mac OS X 10.7, dragging the timeline with a mouse gesture (two
fingers) does not work. The timeline moves to the right (i.e. to the
past), independent of the direction of the gesture. I just checked
with Firefox and Safari.

[Matt Denman]

I did not import the css for the fonts that they have for monet example.  Its just the baseline css right now.

Also, I have only currently added the EN language support, but all the languages can and should be added.

[Matt Denman]

You are right.  In my haste with a change to use jquery event handling, my touch methods were not fully updated.  I've updated the timeline.kusog.org demo site and verified the touch is working with my ipad.

[Matt Denman]

I will say the only touch support I've added to date is the ability to drag left/right with finder.  The double finger gesture you mentioned isn't something I worked with and it appears to work, but not as I would expect.

[Matt Denman]

I added the css from the monet demo to timeline.kusog.org so that it shows the fonts like that demo does.  This is a separate css file from the main timeline css.

On Monday, July 8, 2013 4:51:28 PM UTC-4, David Karger wrote:

[Matt Denman]

Once I get the code structure in place, my next move is to make the bubble window support making a callback to get the details to be displayed rather than needing to send them down in the original data.  This can be done now by hand, but I'd like to make it formalized.  I also don't like how the title for the timeline has to be the same title used by the bubble window.

[Jörn Clausen]

See "Two-finger scroll" and "Swipe to navigate" in
http://www.apple.com/osx/what-is/gestures.html . These gestures can be
used in the original timeline demos intuitively, i.e. they move the
timeline in the expected way. So this is a regression in your code.

--
Joern Clausen
http://thebloeg.blogspot.com/
http://www.oe-files.de/photography/

[Matt Denman]

When I test http://simile-widgets.org/timeline/examples/monet/monet.html I cannot swipe or use two finger gesture. When I use http://timeline.kusog.org I can swipe with one finger and the timeline will scroll. I added new code to support gestures on tablet and phone. The original code has no support for gestures.

[Matt Denman]

I understand now. You're not using a tablet you're using Mac laptop with track pad. I don't have Mac so can't test that. However, for iPad and iPhone the original code didn't support touch but my version has touch support.

[Matt Denman]

I've updated the http://timeline.kusog.org demo with my latest efforts, which removed the detailed and compact painters and more unused code.  The results are now that the minified file is 111kb and the gzipped filed is 32kb.  This is significantly smaller than the original code base, plus all the code is in one file rather than multiple files and multiple network requests.

Somethings to consider:

1. I am only including the EN text.  The files are small and can be added separately as needed.  However, the way the code automatically added the language JS files is removed and you'd have to do that by hand.  That is, if you actually need the other languages.

2. It appears from one users reports that the Mac laptop track pad gestures dont work like they do in the original code.  I'll try to follow up on that.

3. I am removing methods from the Ajax library of classes when I see they are not used in timeline.  I'm sure for people using the full library, this would be a problem.  I don't use exhibit or any other library that may use those, and I want timeline as lean as possible.

4. When I am done with this, it will only be possible to create the timeline widget via the jquery plugin method.  Right now, older code that calls Timeline.create will still work, but soon that method will go away and become a part of the jQuery plugin directly.

[Matt Denman]

Another thing I have done is remove the concept of wiki link and showing the date of the event in the bubble window.  Right now the code just shows title, description and image.  I'm going to make the bubble more robust with how content can be generated for it, which will allow the page to display whatever it wants better than it can now.  For example, a different title for the bubble than for the timeline itself.

[Contemplative]

I took a look at this timeline on my Galaxy Tab 10.1 just to see how things work.  It is an improvement.  Well done!  One thing that happens on this platform is that the bubble nodes always bring up the soft keyboard. 

Previously, the only way I could get the timeline to scroll was to select a bubble, bringing up the soft keyboard on the tablet, then using the arrow keys on the soft keyboard to scroll the timeline.  Needless to say, not ideal.

Using the timeline in your example, I am able to scroll about without the above gymnastics.  The only thing I notice is that I still get the soft keyboard every time I select a bubble node...

Good stuff!

[Matt Denman]

I am bothered by the keyboard popup issue and found a one liner fix for that on the web.  I will be adding that to the code very soon.

--
You received this message because you are subscribed to a topic in the Google Groups "SIMILE Widgets" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/simile-widgets/7rEoytCK88c/unsubscribe.
To unsubscribe from this group and all its topics, send an email to simile-widget...@googlegroups.com.

[Matt Denman]

I have updated http://timeline.kusog.org to not show the keyboard popup, YET, still allow keyboard focus to be happening so that the keyboard left/right arrow keys still keep working.  If you drag or click an event, no keyboard pops, but if you just click the timeline else where (no drag), then the keyboard will appear so you can use arrows on keyboard

On Tue, Jul 9, 2013 at 6:38 PM, Contemplative <wjwi...@gmail.com> wrote:

--

[Contemplative]

Huge improvement!  I no longer get the soft keyboard unless I select a blank background area with-in the timeline.  Subsequently, i get the soft keyboard until I scroll the timeline any time I touch the screen.  So to stop the soft keyboard from coming up once it has, one simply needs to scroll a little bit, then select a bubble node.  No soft keyboard until after a touch in the background again.

This is much better!  Once again, nice work!

[Matt Denman]

The issue with the keyboard popping up like it does after you've used it is a bug.  It should continue to work like it does the first time, where it only pops the keyboard when you click in an empty area.  I'm going to fix that soon, but I'm dealing with other things.

[Contemplative]

I can only imagine.  Thanks for the efforts!

[Matt Denman]

I've put another drop out of my updated timeline on http://timeline.kusog.org that fixes a resizing issue.

I did some testing using the "Average load time tester" between http://timeline.kusog.org and http://www.simile-widgets.org/timeline/examples/monet/monet.html and my streamlined version loads in about 30% of the time the original monet demo loads in.  That is the type of improvement I was looking for :)

[Matt Denman]

I updated the http://timeline.kusog.org monet demo timeline code to fix a double click bug, plus added support for bubbleTitle attribute on event, which if specified will override the title attribute for the bubble title.

[philw]

Excellent - I was just looking at a 4-year old deployment I have of timeline and wondering how best to update it to the latest jQuery etc and bundle it with ASP.NET 4.5..... it sounds like you probably did most of the work there. I'll download your version and get you any feedback that's useful.

[philw]

The demo works of course, but I found a large number of lint errors which make it conflict with my other JS when I try to use it "in anger". I can wade through those and fix them (easier than fixing the basic Timeline, which you have it seems already done), but am I starting from the latest version and perhaps it would be easier if I did this once then everyone can share it?

[Matt Denman]

I've pushed out my entire timeline development project on github - http://github.com/kusog/timeline.

It comes included within a VS2012 MVC project, but the JS can be taken and used in anything as it has no dependency on .NET or MVC.  The MVC project is just my test bed, plus it provides the minified version of timeline via .NET bundling feature.

[Glenn Pence]

Hi Matt,

Excellent work you've done on cleaning up the timeline -- well done! I have two questions which seem to be stumping me (although I'll admit it's been quite some time since I worked with javascript):

1) my icons don't seem to be working. They did in an initial prototype, but then they disappeared. I thought it must be a case of having a wrong path, but I've tried everything I can think of and they aren't re-appearing. Here's an example of the calling code:

<event start="Sep 21, 1961 00:00:00 GMT"
        title="Third Child"
        bubbleTitle="Third Child Born"
        icon="images/green-circle.png"
        >
        ... text content here ...
        </event>

2) I'm trying to build a timeline for my family genealogy and I'd like for the events to show up on the timeline stripe (I would use the green dot on the green stripe, for example). Is there a way to align the events in this manner?

Here's my current example: http://gpence.com//VisiGen/timeline_example.html

Many thanks,
Glenn

[Glenn Pence]

Sorry, the link dropped the final letter...

http://gpence.com//VisiGen/timeline_example.html

Glenn

[Matt Denman]

For standard icons like green-circle.png, the event element should have icon="green-circle.png" without any pathing info.  The plugin will worry about where such icons are.  If you want to provide a custom icon, you should provide a path that starts with / and is to resource on your site that will return the image.

--

[Glenn Pence]

Thanks, Matt, I appreciate it!

I have another question -- is there a way to force single events onto a duration event? Here's my example again:

http://gpence.com/VisiGen/timeline_example.html

This is a genealogy application and I'd like all of the events to be ON the person's life event. Is there a way to force the events to another event? Ideally, I'd like to see the smaller events show up as green dots on the green line.

Thanks,

Glenn

[Ted Benson]

HI Matt,

Rekindling this thread.. We were chatting today about bringing some of your improvements back to the Simile version of Timeline. Namely, some of the performance improvements and the removal of the dependence on SimileAjax, which is a vestige of the days when jQuery didn't exist yet.

Do you have an idea of how easy some of these changes might be to port back into our codebase? (Ideally without requiring a complete rewrite).

Thanks a lot for all your work on this!

Ted Benson

On Sunday, July 7, 2013 8:47:33 PM UTC-4, Matt Denman wrote:

I started using timeline a while ago and dug in deep.  I love the widget, but I really disliked the way it was loading the javascript and how its script block needed to be in the head section.  I tore out the timeline code from the overall Simile project and removed much of the base code that wasn't needed or was just a duplicate of what jquery has.  I've changed the way class methods are defined to be more streamlined and the overall result is now one file that is 153kb minified and 44k zipped.  This is a significant size difference from the Simile version, which loads faster on the iPad.  This code version also has tablet touch support as provided in other threads on the web.

I've completely removed all support for doing ajax directly from Timeline as its just more mainstream to use something like $.load(...).done(function(json){...}).  This is an example of removing stuff from timeline that jquery already does.

Another thing removed is the history stuff which forced another query on the server and wasn't really used in timeline anyway.

Also, the code no longer tries to load its own version of jquery.  My thinking is, if you cant properly setup jquery on the page, you probably aren't ready to use timeline.  I think the main developer should be crystal clear on what version of jquery is being used in their project.  That code was just bloat.

I've also setup the creation of the timeline as a real jquery plugin.  All examples I've converted over work, and my own app which pushes the edges of the timeline works with the new code.

I'm not sure if this new code should be setup as a branch to the main project or just shared somewhere else.  I want to take timeline further than it is now, including support classes in .NET for ASP.NET classic and MVC.  Right now I'm thinking I'll just host this version on another site and let it go from there.

I'm adding better event notification to support having other things on the page show data related to the events showing on the page.  For example, all financial transactions visible on the timeline are summarized in a table below the timeline.

I've also added support for event grouping by having bands that dont have to have a timeline painter.  Put different events on each band and only have the bottom band have the date tic marks.  This groups events well.

I also need to add support for paging events rather than loading all events into the timeline at once.  As the user scrolls through time, the timeline should be able to have events added and removed dynamically to keep the total # of events (and DOM elements) actually rendered down to a minimal.  I worked on the Nitobi Grid which did virtual scrolling with data paging via ajax and it worked well.  I see it as critical for timeline to support this really well.

[Matt Denman]

All I did was put the enhancements into the original code, and remove code not used anymore. 

--

[mario chiari]

Hi

I am a little confused now.
Which is/where is the official timeline code?
I would like to have timeline as a JQuery plugin: is it so already, or
planned for the near future, or just a possible fork?
Thanks Cheers
mario

> --
> You received this message because you are subscribed to the Google
> Groups "SIMILE Widgets" group.
> To unsubscribe from this group and stop receiving emails from it, send

[Matt Denman]

My version of timeline on github is a branch of the main version from MIT.  I added the jquery plugin style of dev and streamlined the codebase.

You received this message because you are subscribed to a topic in the Google Groups "SIMILE Widgets" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/simile-widgets/7rEoytCK88c/unsubscribe.
To unsubscribe from this group and all its topics, send an email to simile-widget...@googlegroups.com.

[Mike E]

Hi, 

Question from a beginner if you'd be up for it:

I have everything up and running aside from autoWidth. (I'm dynamically loading events)

What I've found mentions that I should call the finishedEventLoading() function and that will resolve the autoWidth not working.

How does one call the finishedEventLoading function if they've initialized the timeline using the following?

var bandInf = [] ;

// ... push bandInf elements

$("#tline").syrinxTimeline({ bands: bandInf });

I had thought something like $("#tline").finishedEventLoading();  or  $("#tline").SyrinxTimeline().finishedEventLoading();

I assume this is just my lack of understanding jQuery, but any advice would be greatly appreciated.

-Mike