Re: [Simile-Widgets] Changing the order of event lines in Timeline
On Jan 10, 2014, at 2:40 PM, Larry Stice wrote: > > How do I change the order from top to bottom of event lines within a lane in > Timeline? Where in the code does it decide what order to put them in? > > You'll want to look at the painter file you are using for your timeline. For example, if you are using original-painter.js, you'll see there are calls to a method called _findFreeTrack. This is the method that looks to see which 'track' within a Band will fit the event being painted. It does this by checking to see if the event itself has a specified trackNum value. If it does, it uses that. If not, it checks to see if the edge pixel of the event overlaps with the previous event. If it does, then it knows to move the event down one track. If not, then it can use the same track. So you can provide your own trackNum values in the events themselves (usually not recommended because it can lead to events being painted on top of one another) or you can come up with alternate algorithms for selecting track nums for your events. The default iterator is a reverse iterator - that is Timeline will attempt to paint the events in reverse order (newest event first). This is why the stair step display of events tends to go from top right to lower left. With a little coding, you can change this to paint oldest events first instead. --Mike Nosal -- 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-widgets+unsubscr...@googlegroups.com. To post to this group, send email to simile-widgets@googlegroups.com. Visit this group at http://groups.google.com/group/simile-widgets. For more options, visit https://groups.google.com/groups/opt_out.
Re: [Simile-Widgets] adding events in Timeline 2
It is quite simple to add events dynamically through Javascript. Create a new event, add it to the eventSource for the band(s) and update the timeline: var evt = new Timeline.DefaultEventSource.Event ({ start: new Date("May 03 2013 00:00:00 GMT-0600"), instant : true, text : "An event", description : "A description", }); tl.getBand(0).getEventSource().add(evt); tl.paint(); If you have already created an array of events, you can use the addMany method of the event source. You can add many events before repainting the timeline to improve performance. var myEvents = []; myEvents.push(evt); myEvents.push(evt2); // etc. tl.getBand(0).getEventSource().addMany(myEvents); --Mike On Jun 10, 2013, at 5:11 PM, Jörn Clausen wrote: > Hi! > > I finally caved in: I am trying to port my Live Earthquake Mashup from > Timeline v1 to version 2 of the API. > > I am looking for a replacement of the addMany method. Actually, I am > even looking for a method to add single events to a timeline. The Wiki > explains only adding events from JSON or XML files (through PHP, which > does not help me understand what's going on). > > Is it no longer possible to add events that are computed on-the-fly in > JavaScript? > > -- > Joern Clausen > http://thebloeg.blogspot.com/ > http://www.oe-files.de/photography/ > > -- > 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-widgets+unsubscr...@googlegroups.com. > To post to this group, send email to simile-widgets@googlegroups.com. > Visit this group at http://groups.google.com/group/simile-widgets?hl=en. > For more options, visit https://groups.google.com/groups/opt_out. > > -- 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-widgets+unsubscr...@googlegroups.com. To post to this group, send email to simile-widgets@googlegroups.com. Visit this group at http://groups.google.com/group/simile-widgets. For more options, visit https://groups.google.com/groups/opt_out.
Re: [Simile-Widgets] Re: Set default position and range of timeline
You must use an actual javascript Date object, not a date string. Use Timeline.DateTime.parseGregorianDateTime("Jan 12 2013") or new Date("Jan 12 2013") You can center the timeline upon creation by specifying todays date when you create the bandInfos: var bandInfos = [ Timeline.createBandInfo({ width:"33%", intervalUnit : Timeline.DateTime.YEAR, intervalPixels : 300, date: new Date(), // tell JS to use *right now* as the center date for the band theme : my_theme }), // add'l bandInfos here… ]; You can also center the timeline at any time dynamically by calling .setCenterVisibleDate() on the band. tl.getBand(0).setCenterVisibleDate(new Date()) This can be done at any time after the Timeline has been created. If you have bands that are not sync'ed together, then you'll need to call .setCenterVisibleDate separately for each band. I don't know what createStoryJS is doing, so it's harder to say how to manage your zoom levels. Once your timeline has been created, look in the javascript console/debugger and examine the _zoomSteps array for the band you are trying to zoom in on. That will show you what zoom levels have been created for that band. enter tl.getBand(0)._zoomSteps in the console and you should see an array of objects. --Mike On Feb 6, 2013, at 7:07 AM, Dan wrote: > I'm still really struggling with this. I'd be so greatful if anyone can > offer any help. > > I've bypassed the issue of focussing the timeline at today's date and instead > have set it to use the last event instead, which is passable for the client. > I've also set the 'start_zoom_adjust' value to 6 which does zoom somewhat. > However, on the timeline itself the zoom in (plus) button won't zoom any > further, and actually I'd like the zoom to default to around 8 or 9 rather > than 6, but when I set this it doesn't do anything. > > > $(document).ready(function() { > createStoryJS({ > type: 'timeline', > width: '970', > height: '600', > start_at_slide: '35', > start_zoom_adjust: '6', > source: > '/about/timeline-page/TimelineItems', > embed_id: 'my-timeline', > debug: true, > css: > '/timelinejs/compiled/css/timeline.css', > js: > '/timelinejs/compiled/js/timeline.js' > }); > }); > > > Again, I'm really struggling to find documentation (Googling 'simile timeline > start_zoom_adjust' yields just 3 results, none of which are useful) but I'm > coming under a lot of pressure from the client now to get this finished. If > anyone could please help me to understand how to zoom further than 6 by > default, it would be much appreciated. > > Many thanks > > -- 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-widgets+unsubscr...@googlegroups.com. To post to this group, send email to simile-widgets@googlegroups.com. Visit this group at http://groups.google.com/group/simile-widgets?hl=en. For more options, visit https://groups.google.com/groups/opt_out.
Re: [Simile-Widgets] Timeline events do not display??
The cause is most likely a simple javascript error, failure to properly fetch the source data file (if fetching your events via ajax) or malformed data (e.g. invalid json or xml, such as missing quotation mark, extraneous curly-brace or mismatching elements) Take a look at the Chrome debugger and it should give you an indication of what's going wrong. --Mike On Jan 22, 2013, at 2:43 PM, Lilly wrote: > Hey, > > I've been working on building a timeline for the past couple of weeks. This > morning I made a few updates and everything was working/displaying just fine. > This afternoon, I ran the code in Chrome, per usual, and none of the events > display. I assume the css is functioning because all the background etc > displays. Can anyone help me with this? Is there a new version that would > render my code for api-2.3.1 incompatible? > > Thanks! > Lilly -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Re: How to create 1 and 2 digit years?
Time formats are a common problem to deal with. There are all kinds of problems dealing with ambiguities in non-standardized date formats, and many edge cases to consider. Browsers implement javascript date handlers in different ways. Most support RFC2822 / IETF date syntax: "Mon, Dec 25 1995" or "25 Dec 1995" or "December 25, 1995". RFC2822 allows assumptions about values (eg year is 'any numeric year 1900 or later') and specified (now obsolete) two digit years in the date field, and alphabetic time zone codes. Web browsers try to be very forgiving in what they accept and parse as date/time strings, even if the string isn't exactly valid, the browser will take its best guess. Many javascript date handling libraries will assume "0099" means the same as "99" and assume that is a two-digit abbreviation of 1999. ISO8601 is another date format that is used, but native support in browsers varies across versions. Timeline supports it's own iso8601 parse routines. Thus, the iso8601 format of this date would be: "0099-01-01T09:00:00Z" Timeline parses this correctly. You need to make sure that you specify 'dateTimeFormat': 'iso8601' in your date json. This will tell timeline to use the iso8601 date parser instead of the default gregorian parser. var j = new Date(); Timeline.DateTime.setIso8601(j,"0099-01-01T09:00:00Z"); -> Date {Thu Jan 01 0099 04:00:00 GMT-0500 (EST)} --Mike On Nov 13, 2012, at 9:29 AM, Stephen Cooper wrote: > I know this is a stale post but having just come across this problem myself > it looks as if Timeline doesn't like any kind of precision with dates pre > 100CE. > > So an event with > > start="Jan 1 0099 09:00:00 GMT" > > won't be displayed. But the same event with > > start="99" or start="99 AD" > > will show up fine. > > Just having the year is accurate enough for the timeline I'm working on (also > involving Romans...) so I've not investigated any further, but hope that > helps. > > s. > > > > On Wednesday, 23 November 2011 12:58:23 UTC, Matthew Collins wrote: > I''m trying to do a timeline for the Roman emperors and need to enter > dates and 2 digit years. Any clues? > Thanks. > > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To view this discussion on the web visit > https://groups.google.com/d/msg/simile-widgets/-/dDJRQXIvlCcJ. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Multiple markers for a single band?
On Oct 27, 2012, at 4:27 AM, Arttu Laaksonen wrote: > Hello, > > I have a timeline that is quite high (1600 pixels) and requires up-down > scrolling. There are two bands, the overview at top (32 pixels) and the main > band below which is 1568 pixels in height. The date markers are now shown > only at the bottom of the main band. I know how to move them to the top but > would it be possible somehow to have them both at the top and at the bottom > of the main band. Has anyone figured out a way to do this? You'll need to write custom code to do this. The marker code is complex, but the key is the _markerLayer in the EtherPainter. The default GregorianEtherPainter class has a single _markerLayer div. All you would need to do is create a second marker layer div, position it at the top (or bottom) of your band and just call the intervalMarkerLayout.createIntervalMarker with the second marker layer div: in your CustomEtherPainter.paint() function: this._markerLayer2 = this._band.createLayerDiv(100); …. while (minDate.getTime() < maxDate.getTime()) { this._intervalMarkerLayout.createIntervalMarker( minDate, labeller, this._unit, this._markerLayer, this._lineLayer); this._intervalMarkerLayout.createIntervalMarker( minDate, labeller, this._unit, this._markerLayer2, this._lineLayer); incrementDate(minDate); } If you don't want to do custom EtherPainters, you could use something like jQuery to grab the markerLayer from the band, clone it, and attach it to the top of the band. Less elegant, but might be easier for your application. --Mike -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Dynamic Timeline visualization
On Aug 19, 2012, at 11:42 AM, lesm wrote: > Does the SIMILE timeline support dynamic loading of new events without > refreshing the entire widget such that I could make a call like: > > self.setInterval(readLatestJson, 3000); > > And the new event would show up in the timeline? > > Or better yet, if I'm subscribing to a JMS topic, could the new data be event > driven? > > I apologize if these are very simple questions. I'm relatively new to > JavaScript. Yes, you can do exactly as you suggest - events can be loaded/unloaded and changed at any time, and the timeline can refresh to show the changes without having to dispose and recreate the entire timeline. Any data source accessible via ajax can be used. Timeline supports XML, JSON and SparQL by default, but it is easy enough to add event parsers for new formats. I posted a Yaml parser a while back. If you are careful, you can arrange it so your users might not notice that the events are being updated dynamically. --Mike -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Detecting wether timelines has been loaded
if (window.Timeline === undefined) { console.log("Timeline not loaded") } else { console.log("Timeline.version = " + Timeline.version) } On Sep 25, 2012, at 7:31 PM, Jeff Roehl wrote: > In jQuery, I can detect whether jQuery has been loaded and what version is > running with: > > if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.8.1') > > Is there something similar I can do with Simile Timelines? > > Thanks > Jeff Roehl -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] use a json loaded from desktop
Yes, you can refer to JSON stored in a static file. However, note that Google prevents AJAX calls to file:/// urls, so you'll need to put it where it can be served via http. --Mike On Sep 19, 2012, at 7:11 AM, Andrea Maestroni wrote: > hi to all! > > i am a new user of SIMILE Widgets! > i have a question...it's possible to use a json loaded from a desktop (or > other directory) for the creation of the page with the widget? > > for example i have create a page (a project with netbeans where i have a jsp > page e a json file) with this istruction: > > > > and it works... > but if a want to use a json from the desktop? > > i have think to this solution because i want to modify the json file with a > java program (for example i insert a data in a database and with this data > ,modify the json) and after i can visualize the data in the jsp page with the > widget... > > I hope I was clear :) > > thank a lot in advance! -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] autoWidth and dynamically adding hot zones
Most things in a Timeline can be added/changed dynamically, but I'm unsure what you are asking for. Do you want to adjust the scaling of a portion of the Timeline when events are being shown within that portion? Or do you want to adjust the scale to focus attention on a portion of the timeline - like a fish-eye effect? --Mike On Aug 4, 2012, at 11:15 AM, Roger Pepitone wrote: > On Thu, Jul 19, 2012 at 6:49 AM, Roger Pepitone > wrote: >> General setup: >> I'm adapting a timeline for three related novels using Simile. >> For each novel, the user can hide events from that novel, show nonspoiler >> events, or show all events. >> This much I have working. >> >> 1: Is it possible to turn hot zones on/off dynamically? (I'd like to only >> make a period a hot zone if the corresponding novel is being shown.) > > Well, I think I've got autoWidth working, but does anybody have any > advice on how to make hot zones dynamic? > > Page is available at > http://rogerpepitone.webs.com/Timeline/timeline.html if you want to > see what the page looks like. Contains spoilers for the Infinity > series (Never 7: The End of Infinity, Ever 17: The Out of Infinity, > Remember 11: The Age of Infinity) > > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Layout of Duration events in Timeline
1) Tape thickness is determined by the theme. Look at api/scripts/themes.js - you can set the tape height (and you need to adjust the track height too). Putting the label inside the track requires customizing the Timeline.OriginalEventPainter.paintPreciseDurationEvent method. Basically, you just need to change the position of the label: var labelTop = Math.round(metrics.trackOffset + track * metrics.trackIncrement); and increase the thickness of the tape. 2) You should be able to do this by setting a null url for the image in the theme, and using the .timeline-event-icon class to set the background image sprite for the icon's div. 3) No, Timeline does not support this by default. You would need to do some customized javascript. I think there was some problem with timeline not correctly drawing duration events that were longer than 5x the width of their containing band. --Mike On Aug 27, 2012, at 10:49 AM, Dan Dormont wrote: > Hi folks, > > Any thoughts on this? I'm assuming that this is either something in the Theme > or I need to tweak some of the CSS directly, but I'm just not sure where to > start. Any guidance would be appreciated. > > thanks, > Dan > > On Thursday, August 23, 2012 2:35:28 PM UTC-4, Dan Dormont wrote: > Hi all, > > I've just recently starting using SIMILE Widgets, specifically Timeline, and > I'm off to a great start, but I've come upon a few questions about how Events > appear in the Timeline. > > 1) I'd like to change the way tapes are shown. Specifically I'd like to have > a thicker tape, with the title of the event (and icon if any) appearing > inside the tape rather than below it. Is this feature provided out of the > box? If not, where would I have to look to change it? > > 2) Is there a way I could specify a class for the icon rather than a URL, if > I want the icon coming from my own sprite sheet? > > 3) Is there a way for an event to continue "forever", meaning that it has a > tape even if it has no end date? > > thanks, > Dan Dormont > Grey Wall Software LLC -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] How do I line up duration events to be at the same horizontal location as the next one, even if they overlap?
This isn't entirely correct. Timeline doesn't position events at 'random' and the vertical ordering of events depends both on the date of the event and the space required to display the event and it's label. You do not need to manipulate your JSON strings to set the order. By default, Timeline will draw events starting with the latest date and working backward to the earliest date. The vertical position is calculated to avoid labels/duration bars/icons overlapping with other events. I've posted sample code to this list describing how to change the iteration to go from earliest date to latest date, which produces a more natural-looking 'cascade' of events over time. You can control the display of events in many different ways. If you know explicitly how you wish to lay out your events, you may include a "trackNum" attribute in your event data. Thus you are able to force events into a specific track, regardless of whether they overlap. You may also write a custom function for calculating trackNums for your events, allowing you to change their vertical position dynamically. This allows you to decide how to handle collisions between events close to each other (on the display, not necessarily in time). Or to allow different "groupings" of events within a band. Attempting to manipulate the start dates for your events in an effort to control the display is just asking for frustration, as you still need to worry about how long your label text is (and what theme metrics you have defined, what styles are being used, etc.) Much better to use trackNum (either explicit or calculated) and directional ordering (forward or reverse iteration). At the extreme end of customization, you can also write a custom painter. See api/scripts/compact-painter.js --Mike On Aug 30, 2012, at 5:03 AM, fgalah wrote: > Hi - the horizontal placement is done according to the exact start and end > date of the event so if you want them to be at the same horizontal location, > they will need to have the same date. I have done this by rounding dates down > to the nearest display interval (day, week, month, etc.) > > The vertical placement is done according to the next available space for an > event. > > The order of the events will depend on the JSON string that the Timeline > script is reading from. So if you are able to manipulate your JSON string you > should be able to set the order. > > Does that make sense? > > FG > > On Wednesday, 29 August 2012 00:53:18 UTC+1, lesm wrote: > Our team is considering using this timeline for a project. > > The verticle placement of duration events and non-duration events seems to be > random. > > How do I line up duration events to be at the same horizontal location as the > next one, even if they overlap? > Can I define the order in which event nodes are placed when multiple events > occur close to each other? -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Add a custom fields to the datasource and retrieve them
Yes, you can do this. Timeline stores the original source objects for your events inside the event object. You can retrieve them by using evt.getProperty(attributeName) e.g. evt.getProperty("customfield_1") evt.getProperty("customfield_2") No processing is performed on the custom properties when they are stored. For example if you have an extra attribute called "middle_date": "06-23-2012" then .getProperty("middle_date") returns you the string "06-23-2012" and not a js date object. If you are just looking to display custom attributes in the text of the bubble, you can also override the default fillInfoBubble method or assign custom fillInfoBubble methods to your events. This is safer and easier than trying to customize the Timeline source code at the _showBubble level (unless you want to change the behavior of showing the bubble itself) --Mike On Sep 11, 2012, at 7:37 AM, Maurizio Liberato wrote: > Hi all, still new to timeline, so excuse any obvious mistake... > > What I would like to do is add couple of custom fields to the data source and > retrieve them. For instance: > > Data source: > > {"events": >[ > {"isDuration": "true", "description": "my description", "color": > "#ffcc00", "image": "/images/Family-Life.jpg", "link": > "http://www.google.co.uk";, "icon": "/static/images/red-ico.png", "end": null, > "title": "event title", "start": "2012,09,30", "textColor": "#777", > "customfield_1": "ABC", "customfield_2": "DEF"}, ...{} >] > } > > And to retrieve them on showBubble click: > > > Timeline.OriginalEventPainter.prototype._showBubble = function(x, y, evt) { >var mycustomfield1 = evt.getCustom1(); >var mycustomfield1 = evt.getCustom2(); > } > > > Is it possible to add (and how) these get methods? > > Thanks in advance > > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To view this discussion on the web visit > https://groups.google.com/d/msg/simile-widgets/-/j8Kk48u3R-QJ. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Timeline use Json service as data source
Using Timeline with JSON is quite easy to do. Timeline provides methods for reading data from a JSON source. You don't need to (and shouldn't have to) store your json output in a global variable. Set up your timeline then load your data: tl = Timeline.create(document.getElementById("tl"), bandInfos); tl.loadJSON("timeline/json_output.json", function(data, url) { eventSource.loadJSON(data, url); }); eventSource is the eventSource object that you passed in your constructor for the bands. You can use jQuery's ajax functions to get the timeline data yourself, and pass the result to the loadJSON method of your eventSource. You need to make sure that you load your json data *after* you have created your timeline. Or rather, make sure you call eventSource.loadJSON after you've constructed your timeline. --Mike Nosal On Sep 7, 2012, at 5:00 AM, Maurizio Liberato wrote: > Hi all, firstly let me congratulate with Smile for the Timeline widget, think > it's great! > > I have a site on where I'm implementing the timeline but I need to use a json > service as data source. How do I do it? > I'm not great at javascript so I couldn't find a way to store the entire Json > output (which is correcly formatted accordingly) in a global variable. > > That's what I've tried but I'm stuck on how to store in the variable the > entire output and not just one entry: > > var timeline_data; //at global scope > $.ajax({ > type: 'GET', > url: '/timeline/json_output.json', > dataType: 'json', > timeout: 1, > crossDomain: true, > success: function(result) { > timeline_data = result; > } > }); > Now I don't know how to use the variable timeline_data. Think it's an array > object. The following code doesn't work (of course): > > eventSource1.loadJSON(timeline_data, url); > > So I don't know how to proceed further. Any help much appreciated. > > Thanks in advance > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Add arrows to move the timeline
You are correct. Use tl.getBand(0).setCenterVisibleDate() to move the timeline to a specific date. You need to pass in a javascript date object to setCenterVisibleDate(). For example, to have buttons that jump the timeline by one year +/- you could use: SimileAjax.DateTime has .incrementByInterval(). Let's add .decrementByInterval(): SimileAjax.DateTime.decrementByInterval = function(date, intervalUnit, timeZone) { timeZone = (typeof timeZone == 'undefined') ? 0 : timeZone; var timeShift = timeZone * SimileAjax.DateTime.gregorianUnitLengths[SimileAjax.DateTime.HOUR]; var date2 = new Date(date.getTime() + timeShift); switch(intervalUnit) { case SimileAjax.DateTime.MILLISECOND: date2.setTime(date2.getTime() - 1) break; case SimileAjax.DateTime.SECOND: date2.setTime(date2.getTime() - 1000); break; case SimileAjax.DateTime.MINUTE: date2.setTime(date2.getTime() - SimileAjax.DateTime.gregorianUnitLengths[SimileAjax.DateTime.MINUTE]); break; case SimileAjax.DateTime.HOUR: date2.setTime(date2.getTime() - SimileAjax.DateTime.gregorianUnitLengths[SimileAjax.DateTime.HOUR]); break; case SimileAjax.DateTime.DAY: date2.setUTCDate(date2.getUTCDate() - 1); break; case SimileAjax.DateTime.WEEK: date2.setUTCDate(date2.getUTCDate() - 7); break; case SimileAjax.DateTime.MONTH: date2.setUTCMonth(date2.getUTCMonth() - 1); break; case SimileAjax.DateTime.YEAR: date2.setUTCFullYear(date2.getUTCFullYear() - 1); break; case SimileAjax.DateTime.DECADE: date2.setUTCFullYear(date2.getUTCFullYear() - 10); break; case SimileAjax.DateTime.CENTURY: date2.setUTCFullYear(date2.getUTCFullYear() - 100); break; case SimileAjax.DateTime.MILLENNIUM: date2.setUTCFullYear(date2.getUTCFullYear() - 1000); break; } date.setTime(date2.getTime() - timeShift); }; Then bind handlers to your buttons (with jQuery): $(document).ready(function() { $("#backInTime").click(function() { var currentTime = tl.getBand(0).getCenterVisibleDate(); SimileAjax.DateTime.decrementByInterval(currentTime,SimileAjax.DateTime.YEAR); tl.getBand(0).setCenterVisibleDate(currentTime); }); $("#forwardInTime").click(function() { var currentTime = tl.getBand(0).getCenterVisibleDate(); SimileAjax.DateTime.incrementByInterval(currentTime,SimileAjax.DateTime.YEAR); tl.getBand(0).setCenterVisibleDate(currentTime); }); }); Now each button click will move the timeline forward or backward by one year. If you want the scrolling effect, use tl.getBand(0).scrollToCenter(newDate) Likewise, you can easily add buttons to jump the timeline to specific dates or relative dates (e.g. jump back to Monday, or go to the start of the month). See SimileAjax.DateTime.roundDownToInterval() There is a function to shift a band by a specific number of pixels (Timeline._Band.prototype._moveEther) but because Timeline allows pixels to represent different amounts of time, it is much more preferable to use the date based functions (setCenterVisibleDate, setMinVisibleDate, setMaxVisibleDate) instead and let Timeline do the work of figuring out exactly how many pixels are needed to shift the band. --Mike On Sep 7, 2012, at 10:22 AM, Maurizio Liberato wrote: > I'd like to add two arrows (HTML tags) to move the timeline by one year > back or forth in a smooth way like when you drag it, I was playing with this > function but not sure what I'm doing really: > > tl.getBand(0).setCenterVisibleDate(); > > What should go inside the .setCenterVisibleDate() as parameter to drag the > timeline to a date? > Is there something like .dragToCenterVisibleDate(pixels) adding a positive > or negative value as pixels to move the timeline? > > Thanks in advance > > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] How to cut-off time in timeline-event-bubble-time
The Timeline default is to use Timeline.GregorianDateLabeller.labelPrecise. The painter calls showBubble when you click an event. This calls fillInfoBubble on the event. This calls fillTime on the event, which is what calls labelPrecise. To change this, make your own copy of the labelPrecise function and load it after you load Timeline. (I usually recommend against modifying the timeline source for these kinds of changes, and certainly don't try to make the edits in the timeline bundle file. Much better to load a clean copy of timeline and apply your own patches afterwards.) I've been using Steven Levithan's Date Format.js http://stevenlevithan.com/assets/misc/date.format.js This provides most common date formats: dateFormat.masks = { "default": "ddd mmm dd HH:MM:ss", shortDate: "m/d/yy", mediumDate: "mmm d, ", longDate: " d, ", fullDate: ", d, ", shortTime: "h:MM TT", mediumTime: "h:MM:ss TT", longTime: "h:MM:ss TT Z", isoDate:"-mm-dd", isoTime:"HH:MM:ss", isoDateTime:"-mm-dd'T'HH:MM:ss", isoUtcDateTime: "UTC:-mm-dd'T'HH:MM:ss'Z'" }; So using date.format.js and a custom labelPrecise: Timeline.GregorianDateLabeller.prototype.labelPrecise = function(date) { return SimileAjax.DateTime.removeTimeZoneOffset( date, this._timeZone //+ (new Date().getTimezoneOffset() / 60) ).format("fullDate"); }; gives: Wednesday, December 31, 1962 .format("shortDate") gives "12/31/62" --Mike On Jul 26, 2012, at 6:47 AM, Eugen Zhuravlov wrote: > Hi Gents, > Did anybody know how I can cut off "hh:mm:ss" from timeline? > I need only dates in my popup. But now I also receive date & time - "21:00:00 > UTC". > I try to look in timeline-bundle.js but i cannot find in which function popup > generate is going to change format of date output. > Can somebody give me a function name or method by which I can fix this? > > Thanks in advance, > Eugen. > > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To view this discussion on the web visit > https://groups.google.com/d/msg/simile-widgets/-/3FToLTsWp8IJ. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] How to make an object remain stationary on a timeline
Okay, then I'm missing something. You wrote: > I would like to place a stationary object on my timeline. I would like to > place a line on the timelines centerdate using getCenterVisibleDate(). I > would like to do this externally, without changeing the javascript > source-code for times-lines. I took this to mean that you wanted a line, that would remain fixed on screen as you scrolled the timeline left and right, the same way that the Timeline copyright notice remains fixed at the bottom left of the timeline. If instead what you want is a vertical line that is 'fixed' to a particular date, then you should use Timeline.PointHighlightDecorator. This will draw a single vertical line across the band at a specific date. This vertical line will move across the screen as you drag the timeline left and right, but it will remain on the specific date you created it. Your said you want the multiple timelines to scroll in unison about the same center date, so the same Timeline.PointHighlightDecorator will be lined up across all timelines. It is true the visual center of the timeline div is not always exactly the same pixel as the center visible date. This is due to the accumulation of rounding errors when rendering the components of the timeline, but it is supposed to be within a couple of pixels. You can dynamically update and position Timeline.PointHighlightDecorators as well. --Mike On Jul 23, 2012, at 4:24 PM, Jeff Roehl wrote: > As I recall, placing a line at 1/2 width of the container would not work > because my goal is not a visually centered line. > > I have written a timeline operating system in which you can place multiple > time-lines in a browser. They are all set to scroll, in unison, on their > center dates, like this for 3 time-lines: > > PGJS91A2X.getBand(0).removeOnScrollListener(); > PGJS91A2X.getBand(0).addOnScrollListener(function(band) { > var centerDateORJA91A2X = band.getCenterVisibleDate(); > ORJA91A2X.getBand(0).setCenterVisibleDate(centerDateORJA91A2X); > }); > ORJA91A2X.getBand(0).removeOnScrollListener(); > ORJA91A2X.getBand(0).addOnScrollListener(function(band) { > var centerDateTEOI81A2X = band.getCenterVisibleDate(); > TEOI81A2X.getBand(0).setCenterVisibleDate(centerDateTEOI81A2X); > }); > TEOI81A2X.getBand(0).removeOnScrollListener(); > TEOI81A2X.getBand(0).addOnScrollListener(function(band) { > var centerDatePGJS91A2X = band.getCenterVisibleDate(); > PGJS91A2X.getBand(0).setCenterVisibleDate(centerDatePGJS91A2X); > }) > > It seems that the visual center of the timeline object is not always the > getCenterVisibleDate() for whatever reason. > > My goal is to inscribe a thin red line through all 3 of these time-lines, so > that if timeline #1 red line is placed on July 4th 1776 that timeline #2 red > line will be exactly on July 4th 1776, regardless of wether > getCenterVisibleDate() is the exact visible center of the timeline, which > sometimes it is not. > > In other-words, getCenterVisibleDate() is not always 50% of the visible . > > So if I move one timeline to a certain date, I can scroll down to another > timeline and see that the red line is exactly on the same date, regardless if > it visually centered. The lines are on the same date but may not visually > line up. > > The outcome of this is to be able to position one timeline at a point in > history and be able to immediately see on another timeline what was going on > at that exact date. > > Would the following work? Notice I changed (tl.getPixelLength()/2) + "px"; > with getCenterVisibleDate() > > var ct = tl.getDocument().createElement("div"); > ct.id = "centerTime"; > ct.style.width = "1px"; > ct.style.height = "100%"; > ct.style.backgroundColor = "#ff"; > ct.style.position = "absolute"; > ct.style.opacity = 0.66; > ct.style.left = (tl.getCenterVisibleDate() ); > ct.style.zIndex = "5000"; > tl.addDiv(ct); > > Thanks > Jeff Roehl > jroe...@yahoo.com > (818) 912-7530 > From: Michael Nosal > To: simile-widgets@googlegroups.com > Sent: Monday, July 23, 2012 12:41 PM > Subject: Re: [Simile-Widgets] How to make an object remain stationary on a > timeline > > Jeff, > I've used the following code. You can define the styles in CSS, or via JS (my > original code required some dynamic stuff): > var ct = tl.getDocument().createElement("div"); > ct.id = "centerTime"; > ct.style.width = "1px"; > ct.style.height = "100%"; > ct.style.backgroundColor = "#ff"; > ct.style.position = "absolute"; > ct.style.opa
Re: [Simile-Widgets] How to make an object remain stationary on a timeline
Jeff, I've used the following code. You can define the styles in CSS, or via JS (my original code required some dynamic stuff): var ct = tl.getDocument().createElement("div"); ct.id = "centerTime"; ct.style.width = "1px"; ct.style.height = "100%"; ct.style.backgroundColor = "#ff"; ct.style.position = "absolute"; ct.style.opacity = 0.66; ct.style.left = (tl.getPixelLength()/2) + "px"; ct.style.zIndex = "5000"; tl.addDiv(ct); Things on the timeline aren't positioned using margin-left (like you have in your CSS) but rather as absolutely computed left positions, based on the size of the timeline and the band div's inside. That's why the left property needs to be set at runtime, and not in the stylesheet. --Mike On Jul 23, 2012, at 2:58 PM, jroehl wrote: > The following remains stationary on any timeline: > > src="http://www.simile-widgets.org/timeline/api/images/copyright-vertical.png"; > class="timeline-copyright" title="Timeline copyright SIMILE - > www.code.google.com/p/simile-widgets/"> > > I would like to place a stationary object on my timeline. I would like to > place a line on the timelines centerdate using getCenterVisibleDate(). I > would like to do this externally, without changeing the javascript > source-code for times-lines. > > I tried the following, in CSS, but it is not accurate: > > .sync { > background-attachment: scroll; > background-clip: border-box; > background-color: red; > background-image: none; > background-origin: padding-box; > background-position: 0 0; > background-repeat: repeat; > background-size: auto auto; > display: block; > height: 100%; > margin-left: 49%; > opacity: 0.2; > position: absolute; > width: 3px; > z-index: 5000; > } > > Is there a better way of doing this? > > Thanks > Jeff Roehl -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Tacking on an image to the beginning/end of a band?
Wait a sec... Are you referring to the 'tape' that is used to display a duration event? e.g. the bar that is drawn to show an event with different start and end dates? "Band" refers to the section of the timeline in which the events are drawn. 'Tape' refers to the bar drawn for a duration event. I'm thinking you're referring to the duration tape, and not the overall Band? Is that correct? --Mike On May 25, 2012, at 7:31 PM, Steve Pai wrote: > So if I understand this correctly, in band.js, within Timeline._Band = > function(timeline, bandInfo, index) {...}, add: > > /* attached image div for the band */ > if (bandInfo.bandImage) { >this._bandImage = > this._timeline.getDocument().createElement("div"); >this._bandImage.className = "timeline-band-image-layer"; >var img = this._timeline.getDocument().createElement("img"); >img.src = ("bandImage" in bandInfo) ? bandInfo.bandImage : > "../images/blue-circle.png"; >this._label.appendChild(img); >this._timeline.addDiv(this._bandImage); > } > > I'm just using blue-circle.png from images in the parent folder of band.js to > test. Then within timeline.js, in Timeline.createBandInfo = function(params) > {...}, I would need to do something like: > > if ("bandImage" in params) { ...} > > or should it be in Timeline.create ? > > Still trying to understand everything under the hood, so a bit confused. > > My eventual goal is to be able to tack on an image (perhaps a jagged edge) to > bands where: > 1. Start date is unknown, tack onto beginning band > 2. End date is unknown, tack onto end of band > 3. Start and end date is unknown, tack onto both ends of band > > http://s21.photobucket.com/albums/b259/stevespai/?action=view¤t=ScreenShot2012-05-25at42020PM.png > > At the same time, I'd like to integrate it into the color of the band, so > there will be a number of images. The plan is to specify the image as a > parameter within the source json file for each band. I've done something > similar by leveraging 'classname' and using the associated css to decide band > color and a fade gradient at the ends of the band, consistent with which > dates are known and unknown. However, the gradient is a % function of the > length of the band, so it does not always look consistent. I got a bit closer > by specifying the gradient using pixel count, but still not exactly right: > > http://s21.photobucket.com/albums/b259/stevespai/?action=view¤t=ScreenShot2012-05-25at35706PM.png > > If you can suggest a better way of doing this, I'm totally open to > suggestions. > > steve > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Tacking on an image to the beginning/end of a band?
Yup, done that. It's pretty easy to tack on a div to your band. I modified the constructor for the Band to include an optional image: /* attached image div for the band */ if (bandInfo.bandImage) { this._bandImage = this._timeline.getDocument().createElement("div"); this._bandImage.className = "timeline-band-image-layer"; var img = this._timeline.getDocument().createElement("img"); img.src = ("bandImage" in bandInfo) ? bandInfo.bandImage : "/path/to/default/image.png"; this._label.appendChild(img); this._timeline.addDiv(this._bandImage); } And modified the Timeline constructor to pass the bandImage parameter from the bandInfo. Now there is another div within the band that you can easily style with CSS (put on left side of band or right side of band, etc) and it contains an image specified by the bandImage value of your bandInfo object. I've also used the same technique to add fixed labels to bands. --Mike On May 24, 2012, at 4:13 PM, SteveP wrote: > Has anyone done this before? I'd like to add an image to the beginning/end of > a band, within the band itself. Ideally it should appear over the background > color of the band, but not affect the color of the band (defined in the event > source). Any direction would be great! > > steve -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Simile Widget Timeline Disable Scroll ( Mousewheel + Drag )
Right, the value needs to be a Javascript Date object, not a string. --Mike On May 24, 2012, at 3:34 PM, Steve Pai wrote: > Thanks for the response Mike! That worked. > > At first I was using this form for start/stop: > > theme.timeline_start = "Jan 1 2000 00:00:00 GMT"; > > Then switched to this per instructions in the wiki > > theme.timeline_start = new Date(Date.UTC(2000,01,01)); > > Both of which caused the issues I described previously. Should have just kept > it simple :) > > steve -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Simile Widget Timeline Disable Scroll ( Mousewheel + Drag )
If you set .timeline_start, you should also set .timeline_stop as well, or set stop to a date far in the future. I've noticed buggy behavior if I specify start and stop is null. I've tested on Chrome/Mac with Timeline 2.3.1 and it is working as expected. It should look like this: var theme = Timeline.ClassicTheme.create(); theme.event.bubble.width = 320; theme.event.bubble.height = 220; theme.timeline_start = new Date("Jan 1 1840"); theme.timeline_stop = new Date("Jan 1 1950"); --Mike On May 23, 2012, at 4:48 PM, Derek J. Balling wrote: > If I set theme.timeline_start and theme.timeline_stop, I can't scroll at all. > [Chrome] :-/ > > D -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Simile Widget Timeline Disable Scroll ( Mousewheel + Drag )
Yes, they are attributes of the theme object. --Mike On May 23, 2012, at 4:23 PM, Steve Pai wrote: > Is that a variable for theme? e.g., > > var theme = Timeline.ClassicTheme.create(); > theme.timeline_start = "Jan 1 2000 00:00:00 GMT"; > > On Wed, May 23, 2012 at 1:11 PM, Michael Nosal wrote: > You can set timeline_start and timeline_stop in the theme for your bandInfo. > These are the dates which will stop the timeline from scrolling past. This is > useful if the user shrinks the window and you still want them to be able to > get to everything in a range of dates. You can update these values > dynamically if you need to let the user scroll. > > If you wish to disable and prevent *all* horizontal scrolling in the timeline > widget, simply do: > Timeline._Band.prototype._moveEther = function(shift) {} > and all scrolling is disabled. > > --Mike -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Dedicate a horizontal row for a particular duration event
There are three approaches to this: 1) put all events of a specific type in their own band 2) write a function to put all events of a specific type in their own track within a band. 3) hardcode the track number in the event data itself Option 1 is useful when you might have overlapping events of the same type - they'll get put into different tracks automatically, but still grouped within a band, and not mixed with other events. Option 2 requires some custom coding, but gives you flexibility. You'll have to figure out if you need to worry about overlapping events. For example, if person A works from January to March and from July to August, will the event tape and label for Jan-Mar collide with the tape/label for Jul-Aug? Option 3 is easiest to do, but gives you the least flexibility to control what happens with overlapping events, or if you want to dynamically change track layout/order, etc. (You decide you want Person C before A and B). --Mike On May 14, 2012, at 2:14 AM, Ravee wrote: > Hi > > We are using Timeline to create duration events corresponding to > people. For eg., in a particular year, person A could appear from > January to March and then from July to August. We want to ensure that > all duration tapes corresponding to person A appear on the same > horizontal row throughout the timeline. > Is this possible in the API? > > Thanks > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] how can i insert image in timeline
Well, you could do it just like the example does. In your event data, include an icon attribute and point to the url where the image lives: "events": [ { "title": "My Title", "id":"id_123", "start": "2001-09-27", "icon": "http://www.someserver.com/images/image_123.png"; } ]; The compact painter will look for this automatically and display the images it finds. You can add iconWidth and iconHeight if you want different sizes, or rely on iconWidth and iconHeight in your theme if you want all to be the same size. --Mike On May 13, 2012, at 5:37 AM, freezizo84 wrote: > how can i insert images in timeline > > like this > http://www.simile-widgets.org/timeline/examples/compact-painter/compact-painter.html > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Simile Widget Timeline Disable Scroll ( Mousewheel + Drag )
You can set timeline_start and timeline_stop in the theme for your bandInfo. These are the dates which will stop the timeline from scrolling past. This is useful if the user shrinks the window and you still want them to be able to get to everything in a range of dates. You can update these values dynamically if you need to let the user scroll. If you wish to disable and prevent *all* horizontal scrolling in the timeline widget, simply do: Timeline._Band.prototype._moveEther = function(shift) {} and all scrolling is disabled. --Mike On May 16, 2012, at 3:53 AM, Pierre-Henri Lavigne wrote: > Good day all, > > I'm looking for a way to disable completely the scroll function for an > horizontal timeline. > After reading the API, I succeeded to generate a "date pagination" using > .getMinVisibleDate() && .setMinVisibleDate(). > I would like to disable this scroll because I am gonna adding some custom > html manually sometimes for some items. > > Is there any way to do it in a simple way ? Or any kind of trick like > changing min / max date after setting the minVisibleDate ? > > Thank you for your help, > > Peter > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To view this discussion on the web visit > https://groups.google.com/d/msg/simile-widgets/-/ShEMxI0zR68J. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] How to trigger clicks on events
Timeline's painters provide a .showBubble method that takes an Event object. You can find the event you want in the EventSource for a Band, and call the .showBubble method for the painter for that Band. Example: (load the JFK timeline example and try this in the console) var band = tl.getBand(0); var es = band.getEventSource(); var ptr = band.getEventPainter(); var id="e54"; var evt = es.getEvent(id); ptr.showBubble(evt); You should see the bubble for the event "Oswald seen entering Texas Theater". Note that this does not scroll the timeline before showing the bubble - you'll need to do that manually. --Mike On Mar 16, 2012, at 5:38 PM, Raphael wrote: > Hi > I have built this application: http://instalog.alwaysdata.net/instalog/about/ > (try it if you are using instagram). Here what it does sofar: > - Show your instagram images on timeline > - Click on the icon will open the big version > > What I would like to do > - Have a navigation in the image (previous/next), that allows to jump > to the next image. I can already make the timeline move when clicking > the next button. > > Question > How can I trigger events to open? Does timeline provide any kind of > API to trigger a click that would then open an other image. > > Any help is welcome. > > Regards > Raphael > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Hide day labels on a given band
Kyle, That's a great solution. Many folks aren't comfortable with customizing the Javascript, but glad to see you go diving right in. For non-JS savvy folks, the CSS option will work for them. --Mike On Mar 28, 2012, at 2:29 PM, Kyle Hayes wrote: > Ok, I implemented the method you mentioned and it seems to have worked > beautifully. Instead of specifying the layout outside of the core classes, I > extended the default theme class to include an ether.interval.label.show > property which defaults to true: > this.ether = { > backgroundColors: [ > //"#EEE", > //"#DDD", > //"#CCC", > //"#AAA" > ], > // highlightColor: "white", > highlightOpacity: 50, > interval: { > line: { > show: true, > opacity:25 >// color: "#aaa", > }, > label: { > show: true > }, > > And then inside the GregorianEtherPainter initialize method I added the > following: > > var showLabel = ("showLabel" in this._params) ? this._params.showLabel : > this._theme.ether.interval.label.show; > > var MarkerLayout = showLabel ? Timeline.EtherIntervalMarkerLayout : > Timeline.NoLabelMarkerLayout; > > this._intervalMarkerLayout = new MarkerLayout( > this._timeline, this._band, this._theme, align, showLine); > > Cheers, > Kyle -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Re: Running Timeline completely Local
The default behavior of Google Chrome is to disallow file:/// url ajax requests. Search for "same origin policy for file uris" for more info. To avoid the need for any local server, and strictly view a timeline through file:///, you'll need to put your data "inline" or in a locally accessible .js file. The test_example3.html file, with the local JSON, works fine for me (Chrome 17.0.963.83/Mac), so you should look carefully at your configuration and see if there is anything amiss. --Mike On Mar 23, 2012, at 7:42 PM, Christopher Smith wrote: > I'm having the same issue. It would be nice if someone would post a reply to > this issue. > > On Wednesday, October 26, 2011 4:47:40 AM UTC-4, Shuyin wrote: > So I'm trying to run the timeline completely local. > > So far I got every file running local, but the only problem is is that > it errors on loading the actuall XML files (i'm using 5 different xml > files to populate 5 different timelines like the religions.html > example.) > > Is there a way to set the data local too, so that I wont need any > local server like MAMP, XAMP or whatnot. > > I've read the loading JSON inline example: > http://code.google.com/p/simile-widgets/source/browse/timeline/trunk/src/webapp/examples/test_example3/test_example3.html > > > But somehow this wont work either it keeps giving me this error: > > Unsafe JavaScript attempt to access frame with URL chrome://chromewebdata/ > from frame with URL file://localhost/Sites/timeline/index.html. > Domains, protocols and ports must match. > > Can somebody please help me? -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Hide day labels on a given band
There's two ways to do this: Turn the labels off via CSS or Don't draw the labels in the first place (which improves performance) The first is easy. Add this css rule to your stylesheet: #timeline-band-x div.timeline-date-label {display:none} where x is the index of the band you wish to turn labels off. The first band is 0, the second is 1, etc. The second way is not difficult, but it requires some custom Javascript coding. This happens in the EtherPainter and in the EtherIntervalMarkerLayout code. When you create a band, it is assigned an ether painter, usually the GregorianEtherPainter. One attribute of the GregorianEtherPainter (and HotZoneGregorianEtherPainter) is the _intervalMarkerLayout. This is a instance of the EtherIntervalMarkerLayout class which draws both the lines (the tick marks) and the date labels. Quick-n-dirty example: Make a copy of the EtherIntervalMarkerLayout class and call it "NoLabelMarkerLayout" or whatever. Delete or comment out the code that adds the label div to the markerDiv inside the createIntervalMarker function. After you create your bands, grab the one you want and change it's ether painter's _intervalMarkerLayout to the NoLabelMarkerLayout. var ep = tl.getBand(0).getEtherPainter(); ep._intervalMarkerLayout = new Timeline.NoLabelMarkerLayout( ep._timeline, ep._band, ep._theme, "hAlign", true); --Mike On Mar 26, 2012, at 2:47 PM, khayes wrote: > Is it possible to hide the date labels at the bottom of a band? I have > multiple bands and I only want to show the labels on one of 4 bands > that I have. -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Feeding Timeline with content in a JSF context
You want your server, Jetty, to be serving your event data, either as a static resource available at a specific url, or as dynamically generated data returned in response to a GET request for a specific URI. The Timeline.loadXML or Timeline.loadJSON functions will load your event data through an Ajax request to the server, Jetty. Timeline isn't reading it from a file - the browser is requesting the resource (your event data) from the server, which figures out where to get it and return it to the browser. --Mike On Mar 16, 2012, at 10:56 PM, Erik Mohn wrote: > Hi all, > I'm working on a project where I'm trying to incorporate timeline. > > My application is a JSF web application running on a Jetty server. I have > everything up and running when I'm using a static xml file inside my jar file. > My problem is figuring out how to be able to feed timeline with dynamic data > in this context. > > Would it in any way be possible to pass the xml content to timeline directly > as text, without having timeline reading it from a file? > > If anyone have any suggestions, or other ways of approaching the problem it > would be highly appreciated. > > -Erik > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Timeline event placement / ordering / sorting of events?
I've done this. It takes a few JS code changes. Note: You can put all of these changes in separate .js files that you load after Timeline. Don't make the changes in the Timeline source, or worse, in the timeline-bundle.js file. You'll save yourself a lot of trouble if you avoid patching/hacking on the Timeline code directly. First, let's add some constants that let us specify which direction we want the events to be laid out. I'll call the default behavior Timeline.REVERSE, and the new behavior Timeline.FORWARD Timeline.REVERSE=0; Timeline.FORWARD=1; We'll want this behavior specified per-band, so we'll need to add the direction parameter. In Timeline.createBandInfo and Timeline.createHotZoneBandInfo, change the eventPainterParams variable: var eventPainterParams = { showText: ("showEventText" in params) ? params.showEventText : true, direction : ("direction" in params) ? params.direction : Timeline.REVERSE, theme: theme }; Since the reverse painting of events is the current behavior, it is the default direction. Now you'll need to customize the painter to respect the direction. Make a copy of original-painter.js and call it my-original-painter.js or something. In the event painter, add this to the constructor: Timeline.OriginalEventPainter = function(params) { this._params = params; ... this._direction = ("direction" in params) ? params.direction : Timeline.REVERSE; } Then, you'll need to check the direction when painting. In Timeline.OriginalEventPainter.prototype.paint, change: var iterator = this._direction == Timeline.FORWARD ? eventSource.getEventIterator(minDate, maxDate) : eventSource.getEventReverseIterator(minDate, maxDate); Because we don't want our labels touching events on the right edge, add a right buffer to the computations: var labelRight = labelLeft + labelSize.width + theme.event.label.rightBuffer; (Add 'rightBuffer : 10' to theme.event.label in themes.js) When painting individual events, we need to check the spacing on the left when iterating forward and on the right when iterating in reverse. In paintPreciseInstantEvent: var track = this._direction == Timeline.FORWARD ? this._findFreeTrack(evt,labelLeft) : this._findFreeTrack(evt,rightEdge); And you'll need to switch which pixel is stored in the _tracks array depending on your direction: this._tracks[track] = this._direction == Timeline.FORWARD ? rightEdge : iconLeftEdge; Make the same changes for paintImpreciseInstantEvent. Do the same thing for paintPreciseDurationEvent and paintImpreciseDurationEvent: var labelRight = labelLeft + labelSize.width + theme.event.label.rightBuffer; var track = this._direction == Timeline.FORWARD ? this._findFreeTrack(evt,labelLeft) : this._findFreeTrack(evt,rightEdge); this._tracks[track] = this._direction == Timeline.FORWARD ? rightEdge : startPixel; And finally change: Timeline.OriginalEventPainter.prototype._findFreeTrack = function(event, edgePixel) { var trackAttribute = event.getTrackNum(); if (trackAttribute != null) { return trackAttribute; // early return since event includes track number } // normal case: find an open track for (var i = 0; i < this._tracks.length; i++) { var t = this._tracks[i]; if (this._direction == Timeline.FORWARD ? t < edgePixel : t > edgePixel) { break; } } return i; }; Once you've done all this (told you it would be a few JS changes), you can now specify the direction of painting when constructing your bandInfos: var bandInfos = [ Timeline.createHotZoneBandInfo({ width: "80%", intervalUnit: Timeline.DateTime.WEEK, intervalPixels: 220, zones: zones, direction: Timeline.FORWARD, eventSource:eventSource, date: date, timeZone: -6, theme: theme }), etc. I've just done this and it seems to work correctly on the jfk and test examples. Let me know if you get this working. --Mike On Mar 18, 2012, at 5:00 PM, erikM wrote: > > Hi all, > I have been searching around and I have been trying to figure this out with > no luck, so hopefully someone her can tell how to sort this out :) > > I I'm fetching all my timeline data from a Java REST service, in this service > I have sorted all the Events in the order that I want them to appear. I'm > only dealing with duration = true events. > And I want the first elements in the xml to end up first in my Band. But the > way it ends up right now, its all reverse compared to my wanted result. > > My events turn up like this: > > 3 |---| > 2 > || > 1 |
Re: [Simile-Widgets] Creating a vertical bar in the timeline
On Mar 20, 2012, at 5:19 PM, Steve Pai wrote: > Michael, another question for you if you don't mind: > > I'd like to define start/end time in the form: '2000-01-01' rather than just > year. If I change format in the JSON source file, the timeline appears to hit > an error while trying to parse it. So, I assumed that we needed to leverage > the .parseGregorianDateTime function: > > var deco = new Timeline.SpanHighlightDecorator({ > startDate : > Timeline.DateTime.parseGregorianDateTime(span.start), > endDate : > Timeline.DateTime.parseGregorianDateTime(span.end), > startLabel : span.title, > color : span.color > }); > > However, this does not seem to work either. Is there another parameter I am > missing? > > Steve This causes lots of confusion for folks. parseGregorianDateTime() basically tries to do two things with a date string: If it's less than 8 chars long, it assumes it is a year value. e.g. parseGregorianDateTime will return: "1995" -> Sun Jan 1 1995 If it is more than 8 chars long, then it calls the JS Date.parse method. This takes dates in the RFC2822 / IETF date syntax: "Mon, Dec 25 1995" or "25 Dec 1995" or "December 25, 1995". Browsers differ in their support of date formats that are not RFC2822. For example, Firefox supports a subset of ISO8601 date formats. Firefox will parse "1995-12-25", Safari will not. Firefox and Safari will parse "12/25/1995" but not "12-25-1995". IE9 supports the ISO8601 date formats. If the date format is not ISO8601, then IE will attempt to parse the date by using (in their words) "other parsing rules". So your best bets are to format your dates as "25 Dec 1995" or "12/25/1995" if you want to use parseGregorianDateTime. You say you want to define your dates as "2000-01-01", which is a subset of the ISO8601 format. You can use Timeline.DateTime.parseIso8601DateTime("1995-12-25"). Hope this helps. --Mike -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Creating a vertical bar in the timeline
Simple example - lets add decorators to the Life of Monet example (http://simile-widgets.org/timeline/examples/monet/monet.html) Make a json file with the dates for your decorators (wars.json): [{"title":"Crimean War",start:"1853",end:"1856"}, {"title":"Algerian War",start:"1830",end:"1847"}, {"title":"Franco-Prussian War",start:"1870",end:"1871"}] Decorators are specified as part of the bandInfos, but no reason we can't add them after the fact. Let's add a method to _Band: Timeline._Band.prototype.addDecorator = function(decorator) { this._decorators.push(decorator); decorator.initialize(this,this._timeline); decorator.paint(); } (Don't modify the Timeline source code to do this, instead load this function as part of your own code, either as a .js script or as a
Re: [Simile-Widgets] [Timeline] add url/a href event title
On Jan 30, 2012, at 3:40 AM, Zulkifli Said wrote: > i try to make an url event title in timeline. > i add tag in file jfk.xml. but it's not work. > > this is my wrong code: > > title="Office Tippit calls HQ" > > > Officer Tippit calls into HQ, and is asked if he is in Oakcliff > area. He replies, "Yes". > ref. Rush to Judgement, p 194 > You specify a 'link' attribute in your event: http://www.blahblah.com/pictures/picasso.jpg";> Note that you specify the link url, and not as HTML for an anchor element. Timeline will automatically check for this and create the link as needed: (From /api/scripts/sources.js, line 537:) var divTitle = doc.createElement("div"); var textTitle = doc.createTextNode(title); if (link != null) { var a = doc.createElement("a"); a.href = link; a.appendChild(textTitle); divTitle.appendChild(a); } else { divTitle.appendChild(textTitle); } The info bubble will have the value for title as a hyperlink to the url you specify in the link attribute. --Mike -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Can't get Highlight or Filter Controls to display on my timeline...
On Jan 7, 2012, at 12:44 PM, wrote: > Hi, > > I'm using the amazing Timeline widget to create a research timeline website. > So > far so good. But I can't get my html to display the filtering and > highlighting > controls at the bottom of my timeline. I'm trying to use the JFK example (and > others) to show me the code I need but it never works. What am I doing wrong? > (By the way, the footer doesn't display either - I assume the fix to one will > be > the fix to the other.) > > I'm using Firefox 8.0, Windows 7 > > Attached is my timeline.html file and my json data file. > > Thanks in advance for the help, > Kay You are missing the function setupFilterHighlightControls(). If you look at the Christianity Timeline example, you'll see it is loading a script called example.js. Make sure that this file is available on your server and include the
Re: [Simile-Widgets] Creating a vertical bar in the timeline
These can be created with SpanHighlightDecorators. HotZones are used to expand/compress a span of time. SpanHighlightDecorators simply draw the highlighted region on the timeline band. You can easily specify these start/end times in a JSON file, which is loaded via ajax and then processed to create SpanHighlightDecorators. --Mike On Mar 17, 2012, at 4:43 PM, SteveP wrote: > My goal is to create something similar to the picture attached below. This is > from the JFK example. > > Am I limited to creating hot zones, or is there another method, preferably > one I can specify in a JSON source file? > > > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] timeline date event listener?
On Mar 2, 2012, at 5:01 AM, Andrew Holbrook wrote: > Hi, > > I came across timeline tonight and it looks very intriguing for a > project of mine. I am curious, when I move the slider or double tap/ > click on the timeline, is there any sort of event listener to connect > to that will give me the new date/time for the highlighted region? > > Cheers, > Andrew B. Holbrook Yes, this is easy. Timelines can be constructed of multiple bands. They are usually sync'ed together, so that they are showing the same time. Suppose you have a simple Timeline with a detail band and an overview band. The detail band may show three days of events while the overview band may show a month's worth. The highlight region on the overview band should correspond to the visible part of the detail band. When the Timeline scrolls, it triggers any functions registered as scrollListeners on the bands. To get the center date of the top band, where tl is the variable that you've assigned your Timeline. tl = Timeline.create(...) var dateDiv = document.getElementById("dateDiv"); tl.getBand(0).addOnScrollListener(function(band) { var centerDate = band.getCenterVisibleDate(); // formatDate is whatever function you want to use to format the date the way you want dateDiv.innerHTML = formatDate(centerDate); }); Whenever your Timeline detail band scrolls, it will set the contents of the dateDiv to the center date of the band. To get the range of dates that are visible (or the range of the highlight shown on the overview band), call: tl.getBand(0).getMinVisibleDate(); tl.getBand(0).getMaxVisibleDate(); Indeed, that is what the Timeline.Band code calls to set the highlight for an overview band. --Mike -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Timeline seems to "refresh" after dragging about 1.5 screen widths
That's the way the Timeline renderer works - Bands are drawn on div's that are 5x the width of the Timeline container, and when you drag, it is simply moving the band within that container. Once it reaches 1.5x the distance to either end, the code will recenter the band div and do a complete layout. This is to keep the actual number of event objects (divs, icons, labels, etc) that need to be created down to a more manageable size. You will find this code by looking in /api/scripts/band.js and looking in the Timeline._Band.prototype._moveEther function. When it detects it is nearing the end of the Band div, it calls _recenterDiv(), which in turn calls layout(). You can have your changes re-applied by adding a listener for the 'paintEnded' event fired when it is done with the new layout and event item creation. The better way to handle this is to write your own renderer that adds the DOM modifications during the layout and painting of the events, rather than applying them after the fact. This is not hard to do, and will make it easier for you to maintain your code, rather than trying to mess with the default behavior of Timeline. --Mike On Mar 9, 2012, at 12:30 PM, Zach wrote: > I do a bunch of DOM modifications after the timeline is displayed, > like injecting a div into every label to add functionality. It works > fine, but my changes are consistently wiped out after dragging the > timeline approximately 1.5 screen widths in either direction. I think > SIMILE must be doing some internal refresh. Is there a way I can > intercept this so I can reapply my DOM modifications? > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Re: "Easy for you - difficult for me."
I think the problem is with this: > OnClientClick="showTL()" Width="166px" /> I'm guessing this produces HTML on your page that looks like: This is likely causing the problem as the showTL() function runs at the same time that the values are posted and the entire page refreshes. You're not doing anything to handle this particular form POST, so it simply returns the original HTML page with a blank Timeline again. Take that line out, and replace it with this HTML: Note the type="button" instead of type="submit" - this shouldn't cause the entire page to be refreshed, but simply execute the showTL function. --Mike On Mar 12, 2012, at 6:24 PM, ZermattMan wrote: > Thanks for your comments. > > Below is the simplest version of the code which shows the problem. Run > it as is and click on the "showTL" button, and the timeline flashes on > and off. > > Replace with , > and the timeline shows correctly. Clicking on the button also works > then. > > I'm sure it's simple (never use the 4-letter word "easy"), but... > > - Start of code > > > > > OnClientClick="showTL()" Width="166px" /> > > > > > > > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] "Easy for you - difficult for me."
Andrew, It is simple to create the Timeline in response to whatever event you want - page load or button click. Changing the initialization from onload to onclick is very easy. If the timeline flashes on screen and then disappears, perhaps there is some other javascript error ocurring. Do you see any error messages in the console? Firefox with Firebug, Chrome and Safari all have excellent Javascript debuggers that can help identify what's going on. Is there a website where we might see an example of your timeline code? As to your second comment about what you really want - are the timelines on the list available to the user all structured similarly? I mean, do they all share common band layouts and labeling? If so, then it is relatively simple to *create* the Timeline once, and simply change out the *data* in response to the user picking a timeline from the list. This gives a much nicer user experience, as you don't have to dispose and then re-create the entire timeline. Hope we can help you out. --Mike On Mar 11, 2012, at 6:03 PM, ZermattMan wrote: > I want to show a timeline on a button click, rather than on page load. > I put the onload() function on a button, like this - > > Text="Show Timeline" /> > > and changed the function name to showTL(). > > When I click the button, the timeline flashes on then disappears. > > Any help please! > > What I actually want to do is allow the user to select any timeline > from a list and view it. > > I have been looking at this from every angle, but I don't quit know > enough about HTML, JavaScript, VB etc. Frustrating... > > TIA > > Andrew McGurk -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Timeline
Glad it's working for you. Feel free to ask questions - happy to answer. --Mike On Feb 21, 2012, at 11:21 PM, alphabravo wrote: > Hi all, > I'm an html newb but I wanted to express some admiration for the > timeline widget and the work being done on it by Larry and others. I > have been watching the project for several years and think that this > is a really original and unique tool. I haven't seen anything like it. > Anyway, I have finally gotten it set up and working locally and hope > you guys can endure a few questions. I hope I can give something back > at some point. > Thanks in advance. > cb -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] I cant get these timelines to scroll together
> > >> All produce an error on "Var foo" > > I didn't see this in Firebug, under "Console" -> "Errors". > > Am I looking in the right place? My mistake - you're right - it fails silently in Firefox 9.0.1. --Mike -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] I cant get these timelines to scroll together
Make sure you are using the developer's tools in your browser. Firebug is essential for Firefox development. The developer console in Chrome and Safari is also very helpful. All produce an error on "Var foo" JSLint.com is a tool that can be used for better understanding finer points of the language, though it is usually more strict about the language than is necessary. --Mike On Jan 27, 2012, at 12:22 PM, Jeff Roehl wrote: > Mr. Nosal, > > You javascript guys are amazing. > > Us database guys think having a programming language that is case sensitive > is complete madness. > > It has cost me many hours of frustration. > > As the reason why my code didn't work is because my: > > Var centerDateXQK3K0LEY = band.getCenterVisibleDate(); > > Where the command "Var" should be "var". > > It took one of my kids to spot this... I lost a whole day because of this... > > Is there any way to avoid this type of mistake in the future, or do I have to > waste many hours every time this type of thing occurs? > > Javascript is so unforgiving with this type of thing, with no indication as > to what the problem is. > > I need a case sensitive programming language like a fish needs a bicycle. lol > > Thanks Jeff Roehl jroe...@yahoo.com (818) 912-7530 -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] I cant get these timelines to scroll together
Make sure that you are creating separate bandInfos for each timeline, not passing the same one to each call to create your new Timeline. The centerVisibleDate depends on the ether being used for the band, and if you pass the same bandInfo objects to multiple timelines, they end up all using the same ether. You might also find it easier to use a mediator pattern for synchronizing your timelines. You avoid having them refer to each other explicitly and can centralize the logic for how they interact. Super-trivial example: function Mediator(listeners) { this._listeners = listeners; } Mediator.prototype.sync = function(date) { var i = this._listeners.length; while (i--) { this._listeners[i].getBand(0).setCenterVisibleDate(date); } } var mediator = new Mediator([TEOI81A2X,XQK3K0LEY,VOY3K0LEW]); TEOI81A2X.getBand(0).addOnScrollListener(function(band) { mediator.sync(band.getCenterVisibleDate()); }); XQK3K0LEY.getBand(0).addOnScrollListener(function(band) { mediator.sync(band.getCenterVisibleDate()); }); VOY3K0LEW.getBand(0).addOnScrollListener(function(band) { mediator.sync(band.getCenterVisibleDate()); }); --Mike On Jan 26, 2012, at 8:45 PM, Jeff Roehl wrote: > TEOI81A2X.getBand(0).addOnScrollListener(function(band) { > Var centerDateXQK3K0LEY = band.getCenterVisibleDate(); > XQK3K0LEY.getBand(0).setCenterVisibleDate(centerDateXQK3K0LEY); > }); > > XQK3K0LEY.getBand(0).addOnScrollListener(function(band) { > Var centerDateVOY3K0LEW = band.getCenterVisibleDate(); > VOY3K0LEW.getBand(0).setCenterVisibleDate(centerDateVOY3K0LEW); > }); > > VOY3K0LEW.getBand(0).addOnScrollListener(function(band) { > Var centerDateTEOI81A2X = band.getCenterVisibleDate(); > TEOI81A2X.getBand(0).setCenterVisibleDate(centerDateTEOI81A2X); > }); > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Adding a horizontal scrollbar to my timeline
Adding a vertical scrollbar to the timeline makes sense because the vertical height required to display all the events can exceed the available height for the timeline, or even exceed the height of the viewport. The scrollbar will work correctly because the height (of your timeline) is a fixed size. Changing this to a horizontal scrollbar to scroll forward and backward through time is a confusing thing, since the timeline itself is scrollable and will act as if it has infinite width, something you can't easily map to a scrollbar. The for a band might be 3000px wide, but it is constantly repositioned as you click and drag the timeline to make it look as if it is infinite in width. What is doable is to add clickable buttons to adjust the position of the timeline forward or backward in time. For example, SimileAjax.DateTime has .incrementByInterval. Let's add .decrementByInterval: SimileAjax.DateTime.decrementByInterval = function(date, intervalUnit, timeZone) { timeZone = (typeof timeZone == 'undefined') ? 0 : timeZone; var timeShift = timeZone * SimileAjax.DateTime.gregorianUnitLengths[SimileAjax.DateTime.HOUR]; var date2 = new Date(date.getTime() + timeShift); switch(intervalUnit) { case SimileAjax.DateTime.MILLISECOND: date2.setTime(date2.getTime() - 1) break; case SimileAjax.DateTime.SECOND: date2.setTime(date2.getTime() - 1000); break; case SimileAjax.DateTime.MINUTE: date2.setTime(date2.getTime() - SimileAjax.DateTime.gregorianUnitLengths[SimileAjax.DateTime.MINUTE]); break; case SimileAjax.DateTime.HOUR: date2.setTime(date2.getTime() - SimileAjax.DateTime.gregorianUnitLengths[SimileAjax.DateTime.HOUR]); break; case SimileAjax.DateTime.DAY: date2.setUTCDate(date2.getUTCDate() - 1); break; case SimileAjax.DateTime.WEEK: date2.setUTCDate(date2.getUTCDate() - 7); break; case SimileAjax.DateTime.MONTH: date2.setUTCMonth(date2.getUTCMonth() - 1); break; case SimileAjax.DateTime.YEAR: date2.setUTCFullYear(date2.getUTCFullYear() - 1); break; case SimileAjax.DateTime.DECADE: date2.setUTCFullYear(date2.getUTCFullYear() - 10); break; case SimileAjax.DateTime.CENTURY: date2.setUTCFullYear(date2.getUTCFullYear() - 100); break; case SimileAjax.DateTime.MILLENNIUM: date2.setUTCFullYear(date2.getUTCFullYear() - 1000); break; } date.setTime(date2.getTime() - timeShift); }; Then bind handlers to your buttons (with jQuery): $(document).ready(function() { $("#backInTime").click(function() { var currentTime = tl.getBand(0).getCenterVisibleDate(); SimileAjax.DateTime.decrementByInterval(currentTime,SimileAjax.DateTime.MONTH); tl.getBand(0).setCenterVisibleDate(currentTime); }); $("#forwardInTime").click(function() { var currentTime = tl.getBand(0).getCenterVisibleDate(); SimileAjax.DateTime.incrementByInterval(currentTime,SimileAjax.DateTime.MONTH); tl.getBand(0).setCenterVisibleDate(currentTime); }); }); Now each button click will move the timeline forward or backward by one month. Likewise, you can easily add buttons to jump the timeline to specific dates or relative dates (e.g. jump back to Monday, or go to the start of the month). --Mike On Jan 9, 2012, at 2:47 PM, Kevin Keifari wrote: > I followed the directions listed here > http://simile.mit.edu/wiki/Timeline/vertical_scrollbar > but just did the opposite so it would be a horizontal scrollbar. The > scrollbar shows up, but it doesnt scroll through my entire timeline, > only half of it. > > Is there any other method for adding a horizontal scrollbar? > > Or is there a method to make a clickable arrow below the timeline that > scrolls through my timeline when you're clicking on it? > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
[Simile-Widgets] Firefox 9 scrolling performance with Timeline
I've noticed a difference in scrolling performance of Timeline when using Firefox 9 compared to earlier versions of Firefox (on the Mac). The performance difference isn't so big if you have only two bands in your timeline, but with more bands, the performance goes down dramatically. I've confirmed this behavior on the same computer using FF3.5.3 and FF9.0.1 with a timeline that has 12 bands sync'ed with an overview band. On FF3.5.3, the timeline drags relatively smoothly - not nearly as smooth as Safari or Chrome, but smooth enough not to complain. On FF9.0.1, dragging the timeline is objectionably slow and jerky. I've not yet pinned down which version of FF introduced this performance degredation, nor have I determined which methods are causing the slowdown. If anyone has seen similar behavior or has pointers, I'd appreciate hearing about it. Mike -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] timeline redrawing
No, that's what you need to do. The EventSource fires the onAddMany event. This is bound in the Band.prototype._onAddMany function to call this._paintEvents(), which calls .paint() on the eventPainter for that Band. Make sure that your JSON data matches the expected members for a new Event, and that you aren't getting any errors adding the evt to the eventSource (e.g. malformed dates). Also check that your new events are actually within the visible portion of the timeline. If you add events that are too far away from the visible timeline, you might not see anything happen when you repaint. --Mike On Nov 1, 2011, at 10:03 AM, Alvin Cheung wrote: > Actually I tried that but that doesn't seem to do the trick (also tried > eventSource._fire("onAddOne", [evt]). Is there something else that I need to > do? > > On 11/1/2011 9:45 AM, Michael Nosal wrote: >> Yes, adding events is separate from redrawing the timeline. >> >> If you look at sources.js, the last thing the loadXML and loadJSON functions >> do is: >> >> if (added) { >> this._fire("onAddMany", []); >> } >> >> You can manipulate events (adding, editing and removing) in an EventSource >> and then trigger the onAddMany event to let the timeline know it should do a >> re-layout and a repaint. >> >> --Mike >> >> >> On Nov 1, 2011, at 8:51 AM, Alvin Cheung wrote: >> >>> Hello, >>> >>> Apologies if this question is too simple. I'm trying to write code that >>> dynamically add events to an existing timeline via ajax with this jquery >>> snippet: >>> >>> newData = jQuery.parseJSON(data); >>> for (var i=0; i< newData.events.length; i++){ >>> var event = newData.events[i]; >>> var evt = new Timeline.DefaultEventSource.Event(event); >>> eventSource.add(evt); >>> } >>> >>> But the timeline doesn't get redrawn after calling eventSource.add. Do I >>> need to call something special to get the timeline redraw? I've tried >>> printing out the contents of evt and it looks good to me. >>> >>> Thanks, >>> Alvin -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] timeline redrawing
Yes, adding events is separate from redrawing the timeline. If you look at sources.js, the last thing the loadXML and loadJSON functions do is: if (added) { this._fire("onAddMany", []); } You can manipulate events (adding, editing and removing) in an EventSource and then trigger the onAddMany event to let the timeline know it should do a re-layout and a repaint. --Mike On Nov 1, 2011, at 8:51 AM, Alvin Cheung wrote: > Hello, > > Apologies if this question is too simple. I'm trying to write code that > dynamically add events to an existing timeline via ajax with this jquery > snippet: > > newData = jQuery.parseJSON(data); > for (var i=0; i < newData.events.length; i++){ > var event = newData.events[i]; > var evt = new Timeline.DefaultEventSource.Event(event); > eventSource.add(evt); > } > > But the timeline doesn't get redrawn after calling eventSource.add. Do I > need to call something special to get the timeline redraw? I've tried > printing out the contents of evt and it looks good to me. > > Thanks, > Alvin > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] update highlight dynamically
Add this function: Timeline._Band.prototype.addDecorator = function(decorator) { this._decorators.push(decorator); decorator.initialize(this,this._timeline); decorator.paint(); } then you can do: var band = tl.getBand(0); band.addDecorator(new Timeline.SpanHighlightDecorator({ id:"newDecoraor", startDate:new Date("Nov 22 1963 15:00:00"), endDate:new Date("Nov 22 1963 16:00:00"), startLabel:"begin", endLabel:"end"}) ); And in case anyone asks: Timeline._Band.prototype.removeDecorator = function(index) { this._decorators[index].remove(); this._decorators.splice(index,1); } Timeline.SpanHighlightDecorator.prototype.remove = function() { if (this._layerDiv != null) { this._band.removeLayerDiv(this._layerDiv); } }; --Mike On Oct 27, 2011, at 12:39 PM, Alvin Cheung wrote: > I see. Thanks. Then is it possible to dynamically add decorators? > > Alvin > > On 10/27/2011 12:16 PM, Michael Nosal wrote: >> Yes, this is possible, and quite easy to do. >> You do need to add a method to set the times for your decorator and call >> .paint() on the decorator: >> >> Timeline.SpanHighlightDecorator.prototype.setEndDate = function(date) { >> this._endDate = date; >> }; >> Timeline.SpanHighlightDecorator.prototype.setStartDate = function(date) { >> this._startDate = date; >> }; >> Timeline._Band.prototype.getDecorators = function() { >> return this._decorators; >> } >> >> Then you can do: >> var myDecorator = tl.getBand(0).getDecorators()[0]; >> var ns = new Date("Nov 22 1963 13:35:00"); >> var ne = new Date("Nov 22 1963 14:05:00"); >> myDecorator.setStartDate(ns); >> myDecorator.setEndDate(ne); >> myDecorator.paint(); >> >> Try this on the JFK example and you'll see the shot/t.o.d. decorator shift >> by five minutes without having to rebuild the entire timeline. >> It is a simple matter to update all your decorators dynamically this way, or >> to update them with dynamic data from a server. >> >> --Mike >> >> On Oct 27, 2011, at 8:20 AM, Alvin wrote: >> >>> Hello, I am wondering if there is a way to update the highlighted >>> parts of the timeline dynamically (i.e., update the decorators)? I >>> got it to work by re-creating the entire timeline but that >>> unfortunately will also recenter the timeline. Thanks. >>> >>> -- >>> You received this message because you are subscribed to the Google Groups >>> "SIMILE Widgets" group. >>> To post to this group, send email to simile-widgets@googlegroups.com. >>> To unsubscribe from this group, send email to >>> simile-widgets+unsubscr...@googlegroups.com. >>> For more options, visit this group at >>> http://groups.google.com/group/simile-widgets?hl=en. >>> >> > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] update highlight dynamically
Yes, this is possible, and quite easy to do. You do need to add a method to set the times for your decorator and call .paint() on the decorator: Timeline.SpanHighlightDecorator.prototype.setEndDate = function(date) { this._endDate = date; }; Timeline.SpanHighlightDecorator.prototype.setStartDate = function(date) { this._startDate = date; }; Timeline._Band.prototype.getDecorators = function() { return this._decorators; } Then you can do: var myDecorator = tl.getBand(0).getDecorators()[0]; var ns = new Date("Nov 22 1963 13:35:00"); var ne = new Date("Nov 22 1963 14:05:00"); myDecorator.setStartDate(ns); myDecorator.setEndDate(ne); myDecorator.paint(); Try this on the JFK example and you'll see the shot/t.o.d. decorator shift by five minutes without having to rebuild the entire timeline. It is a simple matter to update all your decorators dynamically this way, or to update them with dynamic data from a server. --Mike On Oct 27, 2011, at 8:20 AM, Alvin wrote: > Hello, I am wondering if there is a way to update the highlighted > parts of the timeline dynamically (i.e., update the decorators)? I > got it to work by re-creating the entire timeline but that > unfortunately will also recenter the timeline. Thanks. > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Re: Updating timeline during scroll
You are on the right track, but the problem is that the onScrollListener gets called every time your Timeline moves a single pixel. You want this function to do nothing unless absolutely necessary. For example, your ajax request is asking test.php for new data for an entire day. You want to fetch this data once when the user scrolls to a new day, not every time the user scrolls. Here's how I approached this problem: Create the timeline Fetch data for "today" (9-29-2011) Add "9-29-2011" to the list of days I've fetched data for (ListOfDays) onScrollListener = function() { var currDate = date of timeline() if (currDate is NOT in ListOfDays) { add currDate to ListOfDays fetch new data via ajax for currDate { update eventSource tl.layout() } } } This way, I only load new data if it hasn't been fetched before, and the user has scrolled the timeline to a date they haven't seen before. It avoids removing the scrollListener, stopping the timeout, restarting the timeout, re-adding the scroll listener, hoping the data returns in a reasonable time, etc. The data is being returned asynchronously anyway, so I don't care how long it takes to show up. It also avoids race conditions between window.setTimeout()'s I don't clear out the event source when fetching new data. Rather I loop over the returned data, adding/changing/deleting events in the eventSource as necessary. Creating events from JSON is expensive, so only do it if necessary. Performance is really excellent with this setup, and most of the time the user has no idea that data is being loaded on the fly. --Mike On Sep 29, 2011, at 8:25 AM, Belfo wrote: > I progressed putting this code: > > var tl; >var eventSource = new Timeline.DefaultEventSource(0); >var eventSource2 = new Timeline.DefaultEventSource(0); >function onLoad() { > > >var theme1 = Timeline.ClassicTheme.create(); >theme1.autoWidth = true; >theme1.mouseWheel = "default"; >theme1.firstDayOfWeek=1; > > > > > >var bandInfos = [ >Timeline.createBandInfo({ >overview: true, >width: "10%", >intervalUnit: Timeline.DateTime.MONTH, >eventSource:eventSource2, >theme: theme1, >intervalPixels: 100, >timezone: 1 >}),Timeline.createBandInfo({ > >width: "10%", >intervalUnit: Timeline.DateTime.DAY, >//overview: true, >eventSource:eventSource, >theme: theme1, >intervalPixels: 150, >timezone: 1 >}) > > >]; >bandInfos[0].syncWith = 1; > >bandInfos[0].highlight = true; > > > > > >tl = Timeline.create(document.getElementById("tl"), > bandInfos); > > tl.getBand(1).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime(new > Date())); >tl.loadJSON("test.php", function(json, url) { >eventSource2.loadJSON(json, url); >tl.finishedEventLoading(); >// > tl.getBand(0).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime(new > Date())); > > >}); >var da = tl.getBand(1).getCenterVisibleDate(); >var date = new Date(da); >var day = date.getDate(); >var month = date.getMonth(); >var year = date.getFullYear(); >tl.loadJSON("test.php?d="+day+"&m="+month+"&y="+year, > function(json, url) { >eventSource.loadJSON(json, url); >tl.finishedEventLoading(); > > tl.getBand(1).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime(new > Date())); > >}); > >var func2 = function(){ > >window.clearTimeout(initTimer); >var topBand = tl.getBand(1); >topBand.addOnScrollListener( loadData ); >} >var initTimer=window.setTimeout(func2,3000); >} > > > > >function loadData(){ >var band = tl.getBand(1); > >if (band._timer !== false) { >window.clearTimeout(band._timer); >band._timer = false; >} >var func = function() { >band.removeOnScrollListener(loadData); >window.clearTimeout(band._timer); >band._time
Re: [Simile-Widgets] Timeline zooming performance
When panning the timeline, your mouse drag moves the div for the band by updating its left and/or top position. Timeline does not adjust the position of every element within a band - that is handled by the browser's DOM rendering. When zooming, duration events will change size, and all events will be drawn closer (or further apart). Therefore the layout needs to be recalculated to avoid overlapping events. It is possible that the change in zoom level will need to draw events that were not previously created on the band, or remove events that are no longer visible. With ether-lines, the change in zoom level may affect the desired unit interval between ether-lines, causing new ones to be drawn or old ones to be thrown away. It was much simpler to just destroy the existing elements and re-create the layout. It is possible to write a new zoom method to be smarter about moving existing elements, destroying unneeded ones and creating new elements as necessary, but it will be a lot of work. --Mike On Sep 29, 2011, at 7:49 AM, cederlof wrote: > Hi! > > Regarding zoom-performance. I have about 40 bands synced together with > both zooming and panning. When panning all elements are moved by > changing their emlt.left (or .top) position. However on zooming, from > what I can tell, all elements are recreated for each zoom step. A much > better solution would be moving them, without needing the DOM to be > cleared and to add each separate element again. > > Does anyone have a solution for this? > > Tip: To get better performance on panning, hide all ether-lines when > dragging, and show them again on stop-dragging. As they are so many > for each band, it sucks performance-wise. > > Thanks for your time. > > Cederlof -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Will the Timeline accept XML Event Data in "Elements" form
Timeline.DefaultEventSource.loadXML method specifically looks for named attributes on the event element. It does not look for child elements. It would be possible to write your own XML parser to handle child elements instead of nodes. While the data encoded in your examples may be the same, the two forms are not equivalent. --Mike On Sep 24, 2011, at 11:49 PM, Robert wrote: > I am trying to get data from a SQL Server database into the Simile > Timeline. For testing I have been using SQL queries and copy/pasting > the data returned into Example.xml between the tags. > > If I generate my data with > Select * from dbo.TimeLineData(@User) As Event For XML AUTO > then the data is generated like > http://www.nzgdb.co.nz/gdb_pages/gdb2.aspx? > linkid=C2A089E7-1AD9-4EB5-AF58-01EBBE839DFA" title="OWLD, > John(1749-1832)" start="01 Jan 1749" latestStart="30 Jun 1749" > durationEvent="true" end="Apr 20 1832" caption="Father's Father's > Father" textColor="black" /> > > This works correctly. > > However if I generate it as > Select * from dbo.TimeLineData(@User) As Event For XML AUTO, > ELEMENTS > then it is generated like > > 1 > http://www.nzgdb.co.nz/gdb_pages/gdb2.aspx? > linkid=C2A089E7-1AD9-4EB5-AF58-01EBBE839DFA > OWLD, John(1749-1832) > 01 Jan 1749 > 30 Jun 1749 > true > Apr 20 1832 > Father's Father's Father > black > > and when I copy/paste this into Example.xml the timeline fails, with > message > Microsoft JScript runtime error: Object expected > and the debugger highlights the third "}" on line 2590 of simile-ajax- > bundle.js, This line is: - > }}}catch(C){SimileAjax.Debug.exception("XmlHttp: Error handling > onReadyStateChange",C); > > Does the timeline accept XML only in the first form? My > understanding is that the two forms are equivalent and equally valid. > > Obviously copy/paste won't work outside testing, so I'm trying to move > to the next step, having my program prepare the XML. Unfortunately > the built-in ASP.NET GetXml method returns the XML in the Elements > form. Is there something I can do within Simile to accept the XML in > this form, or will I have to find a solution with ASP.NET? > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] url with loadJSON
You cannot access json data in another domain via Ajax. This is a violation of the 'same origin policy' that helps protect against script attacks. You can have a proxy on your webserver that will fetch the data for you, or you can include it as a javascript file, or use JSONP to get the data to your timeline. I don't think Amazon allows Access-Control-Allow-Origin header to be set on S3 yet. Your webpage also needs to be served via HTTPS. If you load your timeline at http://myserver/myTimeline.html then your Ajax requests will not be able to access data at https:/myserver/data.json --Mike On Sep 14, 2011, at 8:37 PM, tpepernic wrote: > I'm storing my json file in s3 so it has a url https://blah/blah/user1.json. > > So I'm using t1.loadJSON("https://blah/blah/user1.json";,...)... > > It doesn't work with this url path but is fine loading my events on > the file system. Is this possible? > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Timeline problem - only first 6 events are shown in the timeline
Timeline changed to using classnames to set the background color of bands. The relevant selectors are: .timeline-band-0 .timeline-ether-bg{background-color:#eee} .timeline-band-1 .timeline-ether-bg{background-color:#ddd} .timeline-band-2 .timeline-ether-bg{background-color:#ccc} .timeline-band-3 .timeline-ether-bg{background-color:#aaa} etc. Add this CSS to your own .css file and change the color values to what you want. --Mike On Sep 15, 2011, at 12:50 AM, Robert wrote: > > (BTW, how do I change the colours of the bands: I thought that > theme.ether.backgroundColors would do this, but this has had no > effect). > > Thank you to anybody who helps. > > Robert (robert.bar...@xtra.co.nz) -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Timeline: odd behavior when timeline div needs to be scrolled to in IE 8
The problem happens when the user has scrolled the window - Simile clears the popup before the event can bubble up to the link element. The problem is that the vertical scroll offset is not being taken into account in IE. Modern doctypes and IE8 can cause issues. I think this should work: SimileAjax.DOM.getEventPageCoordinates = function(evt) { if (SimileAjax.Platform.browser.isIE) { if (document.documentElement) { // use document.documentElement instead of body with doctype 4.01+ or xhtml return { x: evt.clientX + document.documentElement.scrollLeft, y: evt.clientY + document.documentElement.scrollTop }; } else { return { x: evt.clientX + document.body.scrollLeft, y: evt.clientY + document.body.scrollTop }; } } else { return { x: evt.pageX, y: evt.pageY }; } }; --Mike On Sep 9, 2011, at 3:02 PM, Steve Shaw wrote: > Hi, > > I've inherited a system that uses the timeline package to display a > timeline. I've been wrestling with a bug in IE 8 where the link in a > pop-up bubble cannot be clicked. After a few hours, I've narrowed it > down to a specific problem: if the timeline div does not appear on the > page originally (in other words, it has to be scrolled to), then the > pop-up bubble links do not work. > > I've put two examples up: > - http://steveshaw.ca/samples/TimelinePage.html works for me in IE8 > - http://steveshaw.ca/samples/TimelinePageBroken.html does not work in > IE 8 > > These are simplified from the code I'm actually using but demonstrate > the problem. > > The only difference between the pages is the height of the spacer div > - in the working example, it's 500px and in the broken example it's > 900 px. That's enough on my current setup to force a scroll to see the > timeline. When I try to click on the link in the pop-up, nothing > happens (except the pop-up disappearing). If I view the broken page > with a "tall" screen I don't see the error. > > Another way to recreate the error is to resize the browser to a > smaller screen and load the working page. It no longer works once I > scroll to the div containing the timeline. > > Both pages work as expected in Firefox. > > Any ideas or suggestions? > -Steve > > p.s. there's no way I would believe this error report without seeing a > working example. I really hope it's not some artifact of my installed > browser. -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Method for band a watermark (moving HighlightDecorator)
You're right, that is not the best performing solution ;-) If all you want to do is create a "watermark" for a band, there are a couple of better methods (this is with Timeline 2.3.1) 1) Add the text of your watermark to the timeline-ether-bg layer. Set the position of the timeline-ether-bg div to "fixed" and set the styles on that element. e.g. .timeline-band-0 .timeline-ether-bg { color:#ccaabb; // or color:rgba(200,150,180,0.3) font-size:100pt; left:0; position:fixed; text-align:center; } You can easily see this using Firefox/Firebug. And it would be simple to write a function to find and manipulate the appropriate divs, without modifying the Timeline code itself. Just run it after the Timeline has been created and drawn: function addWatermark(bandNum,text) { document .getElementById('timeline-band-' + bandNum) .getElementsByClassName('timeline-ether-bg')[0] .innerHTML = text; } addWatermark(0,"WATERMARK"); Try this out for yourself: Go to the JFK example at http://www.simile-widgets.org/timeline/ Paste and run the code above into the Firebug console, then inspect the top band and change the styles for .timeline-band-0 .timeline-ether-bg to the styles above. You should have a nice big "WATERMARK" text on the timeline, fixed beneath all the events, no scrollHandler required. See screenshot: http://imgur.com/7IKPz --Mike On Sep 9, 2011, at 2:54 PM, codebeneath wrote: > This is probably not the best performing solution, but wanted to share > it regardless. > > Given that a band has an existing SpanHighlightDecorator, that is > simply a "watermark" text for the entire band that should always be > visible, we did the following: > > >band.addOnScrollListener(this.scrollListener); > > >// scroll listener for all source bands, not including the > overview band >scrollListener : function(band) { >var minVisibleDate = band.getMinVisibleDate(); >// find watermarks >for (var j = 0; j < band._decorators.length; j++) { >var d = band._decorators[j]; >// move watermarks, but not the "now" line >if (d instanceof Timeline.SpanHighlightDecorator) { >band._decorators[j]._startDate = minVisibleDate; >band._decorators[j]._endDate = minVisibleDate; >break; >} >} >band._paintDecorators(); >} > > I wonder if there is a better solution using a background image for > the band? > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Browser differences
Your XML data file, ausHistory.xml includes the event attribute 'Id', not 'id' Electric lighting is installed on Adelaide streets. Timeline is looking for an event attribute 'id' all lowercase. If it doesn't find one, it creates one for you. Your second XML data file ausPM.xml contains no id attributes, so Timeline creates event id's for those events as well. Since ausPM.xml is a very small file, it is returned and loaded *first* even though the call to loadXML executes after the call to load ausHistory.xml, which takes longer to respond. Thus, Timeline starts counting events e1, e2, etc. for the ausPM.xml events. When it gets to ausHistory.xml, it starts numbering those event id's starting at e33, e34, etc. That's why you are opening bubbles for the wrong events. If you've already loaded the page, and hit refresh, both .xml files are in the browser cache, and the browser starts processing ausHistory.xml *first* this time, and the event id's generated by Timeline match what you were expecting. Change the Id attribute to id and that should fix the problem. You might consider adding event id's to the ausPM events if you are adding them to the same event source as the ausHistory.xml file. --Mike On Sep 8, 2011, at 7:35 PM, ZermattMan wrote: > I am working on a Timeline you can see here. > >http://www.timelinesofourtimes.com/ausHistory.aspx > > I have a dropdown list I am using to move to major events on the > timeline. This works fine in IE 7, but it doesn't usually work in > Google Chrome. > > Code for Drop down list: > > >Captain Cook charts the eastern > coast >First Fleet arrives in Botany > Bay >Mutiny on the Bounty occurs option> >Australia becomes a > federation >Gough Whitlam's Government > elected > > > Data records look like this: > > title="The British First Fleet, led by Governor of New South > Wales..." image="../Media/AusHistory/TOOTnopic.png" >The British > First Fleet, led by Governor of New South Wales, Governor Arthur > Phillip arrives in New South Wales to found first European settlement > and penal colony at Sydney. Colony includes "all the islands adjacent > in the Pacific Ocean" and running westward to the 135th meridian > east. This claim included the islands of New Zealand, which were > administered as part of New South Wales. > > > In Google, sometimes the TL doesn't move at all, and at other times it > goes to the wrong event. > Often Google will act correctly if I refresh the page AND then click > on timeline and press the Home key! > > I have similar problem in FireFox. > > Any help is appreciated > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Grouping Tracks in Timeline
The idea of a 'track' in Timeline is an abstract one - there is no DOM element representing a track, so there is no individual track background to color or style. Also, remember that Timeline's default painting strategy is to put things on different tracks to avoid overlapping labels/icons/bars. If your events/labels get too close, the painter might need an extra track to avoid overlapping. One approach that might work would be to use custom background styles for your bands. If you are running on modern browsers, you can easily add gradient styles to a band that exactly matches the height of your track sets. Another approach would be to write a custom painter that does the grouping as you suggest, though this would involve a fair bit of javascript to implement. I've solved this requirement by using multiple bands, one for each category of event I need to display. Each band can use as many tracks as it needs to display its member events. I define a filter function for each band that only adds those events that belong to that band into the band's EventSource. --Mike On Aug 31, 2011, at 3:24 PM, aaron robb wrote: > Hello! > > What I want to do is figure out a way to group tracks, probably by > highlighting or changing the background for set tracks. > > For example, say I want to make 'trackNum's 1-8 one color, 9-16 > another, etc. > > How would I do this? > > > Or if there is another solution, what I want to do is show grouped > events. Like I'll have 'Main Event 1' that contains 8 smaller event > spans over time. Then i'll have 'Main Event 2' that contains spans of > 8, etc. > > Does this make sense? > > I was wondering if multiple 'Day' timelines would be best and combine > them in the Month band, and if so, how to differenciate the data to > each? > > Thanks!! -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Is it possible to have multiple "month" bands on one time line?
Did you remember to sync the bands before constructing the timeline? bandInfos[1].syncWith = 0; bandInfos[2].syncWith = 0; tl = Timeline.create(); --Mike On Jul 26, 2011, at 4:39 PM, Joe wrote: > Hello everyone, > I just started working with the SIMILE Widget and I wanted to create a > timeline with multiple "month bands" one for each region. In > addition, the year would sync all the sliding functions. > > Each region would be a different color to differentiate it. > > So you would have something like the below code, which displays, but > does not slide together when I slide the year band. > > Any ideas??? > > Thanks > > -Joe > > var bandInfos = [ > Timeline.createBandInfo({ > eventSource:eventSource, > date: "Jun 28 2006 00:00:00 GMT", > width: "100px", > intervalUnit: Timeline.DateTime.MONTH, > intervalPixels: 100 > }), > Timeline.createBandInfo({ > eventSource:eventSource, > date: "Jun 28 2006 00:00:00 GMT", > width: "100px", > intervalUnit: Timeline.DateTime.MONTH, > intervalPixels: 100 > }), > Timeline.createBandInfo({ > eventSource:eventSource, > date: "Jun 28 2006 00:00:00 GMT", > width: "100px", > intervalUnit: Timeline.DateTime.YEAR, > intervalPixels: 200 > }) > ]; -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Change Background Color for Simile Timeline
In Timeline 2.3.1, a change was made to switch from using the theme.ether.backgroundColors array to use the .timeline-ether-bg CSS class name instead. If you look in /src/webapp/api/styles/ethers.css, at the end of the file you'll see: .timeline-band-0 .timeline-ether-bg{background-color:#eee} .timeline-band-1 .timeline-ether-bg{background-color:#ddd} .timeline-band-2 .timeline-ether-bg{background-color:#ccc} .timeline-band-3 .timeline-ether-bg{background-color:#aaa} This says that the first band will get background color #eee, the second will get #ddd, etc. Your colors would look like: .timeline-band-0 .timeline-ether-bg{background-color:#aa} .timeline-band-1 .timeline-ether-bg{background-color:#f2b36e} .timeline-band-2 .timeline-ether-bg{background-color:#f2b36e} You can add these rules to your own stylesheet that is loaded after the ethers.css stylesheet, or include them in your .html file directly inside a
Re: [Simile-Widgets] Failed to derive URL prefix for Timeline API code files
The problem is you are loading the third-party dropdown.js file before your timeline-api.js. There is something in there that conflicts with the way timeline-api.js loads the Timeline code. Looking at the dropdown.js code, it's pretty archaic, and not representative of current Javascript coding practice (e.g. it pollutes the global namespace, and contains statements that execute directly and manipulate the document object.) The problem is that dropdown.js contains a statement that executes immediately, attempting to alter the DOM: if (ie4||ns6) document.write('') I'd recommend ditching the dropdown.js code and using something more modern. If you move the
Re: [Simile-Widgets] How can I remove the timestamp from my popups?
There's a couple of ways to approach this. The contents of the popup are created in the fillInfoBubble method of Timeline.DefaultEventSource.Event. It calls the fillTime method, which checks if the event is an instant event or not, and if it is a precise or imprecise event. The timestamp shown in the popup is created by calling the labelPrecise method of the labeller in use by the band. The easiest way to get what you want is to override the labelPrecise method: In timeline_2.3.1 webapp/api/scripts/labellers.js: Timeline.GregorianDateLabeller.prototype.labelPrecise = function(date) { return SimileAjax.DateTime.removeTimeZoneOffset( date, this._timeZone //+ (new Date().getTimezoneOffset() / 60) ).toUTCString(); }; .toUTCString() produces the full date/time: Mon, 29 Aug 2011 17:40:39 GMT You want to use something other than .toUTCString() For example, you could use .toLocaleDateString() which would give: "08/29/2011" Timeline.GregorianDateLabeller.prototype.labelPrecise = function(date) { return SimileAjax.DateTime.removeTimeZoneOffset( date, this._timeZone //+ (new Date().getTimezoneOffset() / 60) ).toLocaleDateString(); }; Or you can use any other date format you like: Timeline.GregorianDateLabeller.prototype.labelPrecise = function(date) { var newDate = SimileAjax.DateTime.removeTimeZoneOffset( date, this._timeZone) var dateLabel = MyCustomDateFormat(newDate); return dateLabel; }; I'd recommend Steven Levithan's date.format.js script for most date formats: http://stevenlevithan.com/assets/misc/date.format.js However, this option is really overriding the intent of labelPrecise() and turning it into labelApproximate() I'd leave labelPrecise() alone, make a new method: Timeline.GregorianDateLabeller.prototype.labelCustomFormat = function(date,format) { var format = format || "mm/dd/yy"; // <- default date format is none given return SimileAjax.DateTime.removeTimeZoneOffset( date, this._timeZone //+ (new Date().getTimezoneOffset() / 60) ).format(format); // <- be sure to use date.format.js }; And change the fillTime method to use this instead: Timeline.DefaultEventSource.Event.prototype.fillTime = function(elmt, labeller) { if (this._instant) { if (this.isImprecise()) { elmt.appendChild(elmt.ownerDocument.createTextNode(labeller.labelCustomFormat(this._start))); elmt.appendChild(elmt.ownerDocument.createElement("br")); elmt.appendChild(elmt.ownerDocument.createTextNode(labeller.labelCustomFormat(this._end))); } else { elmt.appendChild(elmt.ownerDocument.createTextNode(labeller.labelCustomFormat(this._start))); } } else { if (this.isImprecise()) { elmt.appendChild(elmt.ownerDocument.createTextNode( labeller.labelCustomFormat(this._start) + " ~ " + labeller.labelCustomFormat(this._latestStart))); elmt.appendChild(elmt.ownerDocument.createElement("br")); elmt.appendChild(elmt.ownerDocument.createTextNode( labeller.labelCustomFormat(this._earliestEnd) + " ~ " + labeller.labelCustomFormat(this._end))); } else { elmt.appendChild(elmt.ownerDocument.createTextNode(labeller.labelCustomFormat(this._start))); elmt.appendChild(elmt.ownerDocument.createElement("br")); elmt.appendChild(elmt.ownerDocument.createTextNode(labeller.labelCustomFormat(this._end))); } } } A good place for custom date formats would be in your theme object. myTheme.event.bubble.dateFormat = ", d, "; Then you can use this when you need dates in a special format: labeller.labelCustomFormat(this._start,myTheme.event.bubble.dateFormat); Again, I'd recommend against changing the source code of Timeline itself, either in the sources file or the bundle. Instead, load timeline normally, then load your customized overrides. Will save future headaches when it comes time to update your code. --Mike On Aug 27, 2011, at 2:01 PM, John Charles wrote: > I want to display events on my timeline with only basic information. I > do not need the exact time of the event, only the date. Is there a way > to remove the time from the popup but keep the date in tact? > > You can see the live timeline here: > http://www.dalefarmeviction.com/dale-farm-timeline/ > > It is a work in progress! -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] overlay text labels on tape
Hi, I commented on the thread, and the advice still holds. Don't need to fork, just override the painter method with your own. If you make a copy of the painter functions and load after timeline-api.js has been loaded, your modified versions will replace the originals. Keeps the Timeline code intact, and keeps your modifications in one place, so it's easier to deal with if/when things change. Or if you like, you can make your own painter from a copy of the original-painter.js file. Call it "label_on_bar_painter.js" and tell Timeline to use that instead of original-painter.js. I suspect the screenshot you reference was made with an older version of the original painter which displayed the labels directly on top of the event bars. You can achieve the same thing by tweaking the behavior of the durationEventPainters (preciseDurationEventPainter and impreciseDurationEventPainter) (and the impreciseInstantEventPainter if you have events of that type as well). The changes required are to make the bars bigger: When creating your theme: var myTheme = Timeline.ClassicTheme.create(); myTheme.event.tape.height = 16; // sets how thick the event tape will be Then in the painters, you would need to change where the label is positioned relative to the tape: Depending on your font-size, tape-size, and padding of your labels, you might need to play around with the labelTop value to get things right. Here's one that worked well for me: var labelTop = Math.round(metrics.trackOffset + track * metrics.trackIncrement + (metrics.trackHeight / 2 - labelSize.height)); -- Mike On Aug 14, 2011, at 11:56 PM, larryk wrote: > Hi, > > On the Timeline_Basics page (http://www.simile-widgets.org/wiki/ > Timeline_Basics), the very first timeline image is an example of a > timeline with text labels overlaid on the tape of the event - see > "Oswald gets off bus and boards taxi". > > I would like to use this feature, but having scoured the docs and the > internet, the only reference to how to do this is here: > http://groups.google.com/group/simile-widgets/browse_thread/thread/5a33517864ae959c > > The advice is to fork (!) the timeline javascript release to customize > the event painter to adjust the labelTop. I looked at the code and > forking it seems trivial enough, but forking in general is horrible > and I don't want to do it. > > Is this really the only way to do it? How was the example image > created? Is this a sufficiently attractive feature that it might like > to be included as part of the official release? If not, is there any > advice on subclassing the painters to avoid forking? > > Cheers, > Larry -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Any way to set up the HOUR format to show am/pm
Glad to help. I try to avoid making changes to libraries directly, especially minified/compressed versions. Finding your changes in the code, or making changes without introducing side-effects can be really hard. If you don't want to go the route of loading your override after the minified timeline-bundle.js has been loaded, then make sure you document and comment your code to say *exactly* what changes were made in the bundle and *why*. Sometime down the road, you'll forget your changes are in the bundle, or you'll switch to the non-bundled version of the Timeline code to try and debug something and you'll go crazy trying to figure out why your timeline stopped working. --Mike On Aug 23, 2011, at 4:28 PM, Brian Katke wrote: > You are a life saver! I am using the timeline bundled version 2.3.0 so I > had to find the bit of code in timeline-bundle.js. > > I replaced the line: > > case SimileAjax.DateTime.HOUR:D=B.getUTCHours()+"hr"; > > With: > > case SimileAjax.DateTime.HOUR: > var hours = B.getUTCHours(); > text = (hours == 0 ? 12 : hours); // 0h is actually 12am > text = text < 13 ? text : text - 12; // switch to 12hr time display > text = hours < 12 ? text + "am": text + "pm"; // set am / pm as > appropriate > D=text; > break; > > and it works perfectly! Thanks for your help. > > Brian -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Any way to set up the HOUR format to show am/pm
Javascript makes overriding/monkey patching pretty easy. I prefer to keep the Timeline code as distributed, and load in my overrides as necessary. Makes it easier to maintain and update. With Timeline 2.3.1, from http://code.google.com/p/simile-widgets/source/browse/timeline/tags/2.3.1/timeline_source.zip Look at the function Timeline.GregorianDateLabeller.prototype.defaultLabelInterval in the file timeline_2.3.1/src/webapp/api/scripts/labellers.js You want to override the case when the time interval is SimileAjax.DateTime.HOUR. One option is to copy the entire function, and make my changes in the copy, and load it after timeline-api.js has been loaded. Try this to replace the hour formatting code: case SimileAjax.DateTime.HOUR: var hours = date.getUTCHours(); text = (hours == 0 ? 12 : hours); // 0h is actually 12am text = text < 13 ? text : text - 12; // switch to 12hr time display text = hours < 12 ? text + "am": text + "pm"; // set am / pm as appropriate break; --Mike On Aug 11, 2011, at 12:05 PM, Brian wrote: > Greeting all, I have succesfully installed and am using the timeline. > I am using it for the span of 1 day and what I need to do is to > display the timeline so it shows am and pm instead of "hr" so 14h > would read 2pm. Looking deep into the code I only see it taking the > number and appending a "hr" to the end of it. > > What I would like to know is if anyone has created a patch to > implement this. I'm not to strong when it comes to javascript so i'm > uncertain how to accomplish this myself. Any help would be > appreciated. > > Thanks > > Brian -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Re: Support for multiple calendar numberings?
I refer to the Timeline source code at: http://code.google.com/p/simile-widgets/ Browse the source code and download: http://code.google.com/p/simile-widgets/source/browse/timeline/tags/2.3.1/timeline_source.zip Unzip and look in the path below. --Mike On Aug 23, 2011, at 1:36 PM, StephenBD wrote: > Many thanks Mike. Sorry to be useless but where do I find the js file > you told me to look at? > > - Stephen > > On Aug 23, 5:04 pm, Michael Nosal wrote: >> Timeline comes with support for Gregorian calendar support. Other calendars >> would require you to write custom javascript, namely an EtherPainter and a >> DateLabeller, for each calendar type you wish to use. >> >> If you look at timeline_2.3.1/src/webapp/api/scripts/ext/japanese-eras.js >> you can see an example of what is required to support a different calendar >> style. >> >> Each band can display one EtherPainter at a time, and use one labeller at a >> time. >> >> You can have a timeline with multiple bands, each with a different calendar >> type. Or you can use one band and dynamically change the calendar type >> shown, such as through a dropdown. >> >> --Mike >> >> On Aug 20, 2011, at 10:56 AM, StephenBD wrote: >> >> >> >> >> >> >> >>> I'm new, so sorry if this has been covered somewhere and I have failed >>> to find it. >> >>> What is the support for multiple calendar calibrations, such as >>> gregorian, julian, hebrew, islamic etc dates? Can more than one >>> calibration be shown at once? >> >>> Thanks! >> >>> Stephen > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Support for multiple calendar numberings?
Timeline comes with support for Gregorian calendar support. Other calendars would require you to write custom javascript, namely an EtherPainter and a DateLabeller, for each calendar type you wish to use. If you look at timeline_2.3.1/src/webapp/api/scripts/ext/japanese-eras.js you can see an example of what is required to support a different calendar style. Each band can display one EtherPainter at a time, and use one labeller at a time. You can have a timeline with multiple bands, each with a different calendar type. Or you can use one band and dynamically change the calendar type shown, such as through a dropdown. --Mike On Aug 20, 2011, at 10:56 AM, StephenBD wrote: > I'm new, so sorry if this has been covered somewhere and I have failed > to find it. > > What is the support for multiple calendar calibrations, such as > gregorian, julian, hebrew, islamic etc dates? Can more than one > calibration be shown at once? > > Thanks! > > Stephen -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Simile Timeline scalability.
Yes, dynamically loading of events via AJAX is possible. I've used this technique often, and it works extremely well. Here's what I did: On load of the timeline, I only load today's events, since the timeline is initially centered on the current time. The user sees all the events for the day. As the user starts scrolling, a scrollhandler fires and checks to see if a new date is coming into view. If so, it sends an ajax request to the server for the events for that day. It adds them to the eventSource and repaints the timeline. If the user scrolls back another day, the same thing happens, adding new events. If the user jumps back in time, using a calendar widget, the timeline jumps to display that date. This causes the scroll handler to fire, loading the events just for that day. If the user scrolls the timeline manually often enough, then eventually the number of events in the eventSource will get very large as the Ajax keeps fetching and adding more events. It would be a simple matter to purge out events to reduce memory use, and refetch them when they are needed again. However, my user audience tends to spend most of their time looking at today's events plus/minus a day or two, so the total number of events loaded remains manageable. You can further restrict the number of events shown by using filters on the events, for example initially showing just fiction books, or books in a specific genre. When the user selects a different category or genre, you can fire off the Ajax request to fetch those events. For your century/overview band, remember that there is a minimum time interval per pixel to be shown. If you are showing a timespan of 100 years, using 100px, then each pixel represents 1 year of time. Thus, if 1 book or 100 books were published during that year, it won't matter as there will be a tick shown for that year (pixel). You can load a smaller set of events to be used as the eventSource for your overview band. If your server code supports it, you could exclude the description, etc for this dataset, reducing the server load and the time to send and process those events as well. If you need further pointers, let me know. --Mike On Aug 15, 2011, at 9:52 AM, Lutz Biedinger wrote: > We are using the timeline to display publish dates of books etc. > loaded in via JSON. The list of dates can potentially contain 300,000+ > items although more likeley to be around 25k. The line is laid out > with two bars one for centuries and one for years. To load all these > dates into the timeline at once pretty much kills the browser. At the > moment ~4000 items seem to just about be okay even if very slow. > > is there a way to load the descriptions asynchronously via AJAX as the > events are displayed? Ideally we'd still be loading in all the dates > (visible) on the century line as this would be needed for navigation, > but the details are only loaded when the particular event is shown on > the year bar. > > Does anyone have any idea if this is possible, or how much improvement > in relation to the number of items/events that can be loaded we could > expect if something like this was implemented? > > Cheers, > Lutz > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Re: Weird Error While Manually Adding Event
That's because the simile.mit.edu version of Timeline is out of date. The method signature to the Event constructor changed from: Timeline.DefaultEventSource.Event = function( start, end, latestStart, earliestEnd, { to Timeline.DefaultEventSource.Event = function(args) { Using an object this way makes it much easier to use - you don't need to remember the order of arguments, and can leave off unused arguments without having to pass nulls, and you can easily extend it with new arguments without needing to change lots of code. --Mike On Aug 5, 2011, at 4:04 AM, Froggy wrote: > Back to my code I replaced the Timeline link to the same in the > example (http://api.simile-widgets.org/timeline/2.3.1/timeline-api.js) > Now it works. Still not sure why but it works! -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Timelines without time
Yes, this is entirely doable. You do need to create your own functions to compute appropriate labels (Khz, Mhz, etc) and compare start/end values. You'd write a custom ether, which would allow you to do things like a log scale for frequencies. You'd need your own units.js to handle frequencies instead of dates. And a labeller to handle the strings shown in your bands. This would make a great example (if you choose to accept). --Mike On Aug 4, 2011, at 5:18 PM, Dan Aldrich wrote: > Just out of curiosity, can you make a timeline with something other > than dates/times? Was thinking might be useful to use to make say a > RF spectrum. So you'd have a timeline of either frequency or wavelengths. > > -d -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Re: Timeline - Instant event width
I see now, they're including an older version of the Timeline code (circa 2007?) The latest version linked on the MediaWiki website, v1.6.0, includes a very old version of Timeline, which doesn't even include the overview painter. I'm guessing you have instant events in a band with showEventText set to false. To change the look of instant events, look inside painters.js for the "var createInstantDiv = function(...)" definition. In that function, there is a check to see if the instant event should display a line for no text: if (p._showLineForNoText) { div.style.width = "1px"; div.style.borderLeft = "1px solid " + (background != null ? background : eventTheme.instant.lineColor); realign = 0; // no shift length = 1; } You want to change the borderLeft 1px to whatever width you want. I'd recommend that you copy and paste the entire Timeline.DurationEventPainter.prototype.paint function into a new .js file, and load that after Timeline has loaded. This way you can customize that copy and override the default behavior. This will make it easier to keep track of your changes, and update if they switch to a newer version of Timeline. If you're using some other version of the SemanticResultsFormat or a different version of Timeline, let me know which one. --Mike On Aug 4, 2011, at 3:53 PM, var...@gmx.com wrote: > Thank you, > but in my version, there is no .timeline-small-event-icon > I have three css files : ether, events and timeline > > I don't know exactly which version of Timeline it is, because it is > given with the mediawiki extension SemanticResultsFormat, so maybe > they tweaked your script and that makes it harder to customize... > > Anyway I tried to add .timeline-small-event-icon { width: 5px;} but in > vain... > > On 3 août, 22:24, Michael Nosal wrote: >> Do you mean the little ticks shown in an overview painter band? >> This is set in CSS: >> .timeline-small-event-icon {height:6px; width:1px;} >> Change width to the value you want (e.g. 2px) >> >> --Mike -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Re: Weird Error While Manually Adding Event
Hmmm, I just tried it against Timeline 2.3.0, and it works as advertised. What version of Timeline are you using? Are you hosting it locally or off simile-widgets.org? In the JS console in your browser, try creating an event and see what it says. That's all that the Event constructor really needs for an instant event. You can see for yourself if you visit simile-widgets.org and go to one of the example timelines. Paste this code into the console and hit enter and you should see the new event appear on the timeline. function addBreakpoint() { var evt = new Timeline.DefaultEventSource.Event ({ start: new Date("May 03 2003 00:00:00 GMT-0600"), instant : true, text : "An event", description : "A description", }); tl.getBand(0).getEventSource().add(evt); tl.paint(); } addBreakpoint(); --Mike On Aug 4, 2011, at 4:54 AM, Froggy wrote: > Thanks for pointing that out. > I applied your exact recommendation but I still get the same error > message. > > On Aug 3, 10:50 pm, Michael Nosal wrote: >> The error message suggests that something that should be a Date object, >> actually isn't (there is no method 'getTime') >> >> In your addBreakpoint function, you pass an object to the >> Timeline.DefaultEventSource.Event constructor. In this object, the value you >> have for start is a String, when it should be a Date. Normally, calling >> eventSource.loadJSON() would convert the start/end strings in your JSON to >> date objects for you before constructing a new >> Timeline.DefaultEventSource.Event. So you just need to convert start to a >> Date: >> >> function addBreakpoint() >> { >> var evt = new Timeline.DefaultEventSource.Event ({ >> start: new Date("Aug 03 2011 00:00:00 GMT-0600"), >> instant : true, >> text : "An event", >> description : "A description"}); >> >> This should work fine. >> --Mike >> >> On Aug 3, 2011, at 12:06 PM, Froggy wrote:> Hi Everyone, >> >>> Just started using Timeline and having a problem I just can't find >>> information about. >>> I am trying to add events manually that the user selects and display >>> them dynamically, not sure I got the grasp of everything. >> >>> I get the following error in Chrome's Developer Tools: >>> Uncaught TypeError: Object # has no method 'getTime' >>> bundle.js:4492 >> >>> Here is the code I have: >>> ... >>> //Add Event >>> function addBreakpoint() >>> { >>>var date = document.getElementById("eventDatepicker").value; >>>var evt = new Timeline.DefaultEventSource.Event ({ >>>start: "Aug 03 2011 00:00:00 GMT-0600", //Hardcoded for the time >>> being using Timeline default date >>>instant : true, >>>text : "An event", >>>description : "A description", >>> }); >>> eventSource.add(evt); >>> tl.paint(); >>> } >> >>> Thanks in advance for any help you can provide! > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Weird Error While Manually Adding Event
The error message suggests that something that should be a Date object, actually isn't (there is no method 'getTime') In your addBreakpoint function, you pass an object to the Timeline.DefaultEventSource.Event constructor. In this object, the value you have for start is a String, when it should be a Date. Normally, calling eventSource.loadJSON() would convert the start/end strings in your JSON to date objects for you before constructing a new Timeline.DefaultEventSource.Event. So you just need to convert start to a Date: function addBreakpoint() { var evt = new Timeline.DefaultEventSource.Event ({ start: new Date("Aug 03 2011 00:00:00 GMT-0600"), instant : true, text : "An event", description : "A description" }); This should work fine. --Mike On Aug 3, 2011, at 12:06 PM, Froggy wrote: > Hi Everyone, > > Just started using Timeline and having a problem I just can't find > information about. > I am trying to add events manually that the user selects and display > them dynamically, not sure I got the grasp of everything. > > I get the following error in Chrome's Developer Tools: > Uncaught TypeError: Object # has no method 'getTime' > bundle.js:4492 > > Here is the code I have: > ... > //Add Event > function addBreakpoint() > { > var date = document.getElementById("eventDatepicker").value; > var evt = new Timeline.DefaultEventSource.Event ({ > start: "Aug 03 2011 00:00:00 GMT-0600", //Hardcoded for the time > being using Timeline default date >instant : true, >text : "An event", >description : "A description", > }); > eventSource.add(evt); > tl.paint(); > } > > > Thanks in advance for any help you can provide! -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Timeline - Instant event width
Do you mean the little ticks shown in an overview painter band? This is set in CSS: .timeline-small-event-icon {height:6px; width:1px;} Change width to the value you want (e.g. 2px) --Mike On Aug 2, 2011, at 6:26 PM, var...@gmx.com wrote: > Hello, > > First of all, thanks for your work on the timeline. This is really a > great job. > I've got a simple question : how can I just make the little vertical > tick that marks an instant event wider ? > I believe there is no pre-made parameter, but may be you could tell me > in which file I have to look for the line that draw this tick ! > > Thanks -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] dynamically resize the font for all timeline items
This is easily managed by CSS. The default font size for the timeline is set in /timeline/src/webapp/styles.css .timeline-default { font-family: Trebuchet MS, Helvetica, Arial, sans serif; font-size: 8pt; border: 1px solid #aaa; } Changing the font-size declaration here will adjust all the font-sizes used in the Timeline. All the other font-size declarations are based on % values. Just about every item in the timeline has its own CSS class that makes it simple to alter the styles associated with the item. You could change the default base font size to 12pt, but then add another rule to change the date labels back down to 10pt: .timeline-default { font-size:12pt; } .timeline-date-label { font-size:10pt; // or font-size:80% or 0.8em } Don't edit the .css files in the timeline code itself, but rather put your changes in a separate .css file that you load after Timeline. Your values will override the ones in the Timeline .css and it will be much easier to find/manage your changes. --Mike On Jul 13, 2011, at 12:33 PM, jg wrote: > I'm trying to dynamically change the size of the font of all the > items within the timeline display (to include the dates, bands, > watermarks, etc) I saw where I can change the height of the event by > modifying 'theme.event.tape.height' and 'theme.event.track.height' but > it doesn't adjust the font height. > > I started looking at css within firebug, but looked like the font > size was in html, body and I don't want to change the size of all the > other items in the display -- just timeline. > > So then I started looking through the code and saw > Graphics._FontRendererContext. Should I pursue trying to override > those methods or is there a better solution? > > > Thank you for your help > Jim > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Is there a list of the intervals units?
In ajax/api/scripts/date-time.js: SimileAjax.DateTime.MILLISECOND= 0; SimileAjax.DateTime.SECOND = 1; SimileAjax.DateTime.MINUTE = 2; SimileAjax.DateTime.HOUR = 3; SimileAjax.DateTime.DAY= 4; SimileAjax.DateTime.WEEK = 5; SimileAjax.DateTime.MONTH = 6; SimileAjax.DateTime.YEAR = 7; SimileAjax.DateTime.DECADE = 8; SimileAjax.DateTime.CENTURY= 9; SimileAjax.DateTime.MILLENNIUM = 10; SimileAjax.DateTime.EPOCH = -1; SimileAjax.DateTime.ERA= -2; This is also aliased as Timeline.DateTime. --Mike On Jul 13, 2011, at 1:40 PM, John S wrote: > I'm looking at the documentation here, > http://simile.mit.edu/timeline/docs/timelines.html > > And when I look at "intervalUnit", there's a link that you'd assume > would take you to a listing of acceptable time units, but the page is > a 404. > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Re: tracking when labels become visible
On Jul 12, 2011, at 3:46 PM, John S wrote: > I was just talking with one of the creators of the Timemap project, > and he had some good ideas, but the only suggestions he had, came > directly from their plugin, which I'm not implementing, and likely > won't because of the specific way I'm setting this up already. > Curious as to why you find Timemap unacceptable for your purposes. It's a nicely done library. I've worked with it in the past and had no problems using it. Just because it provides one way of constructing a Timeline and a map, doesn't mean that's the only way to do it. Since it is built on top of Timeline 2.3.0, it's possible to use Timeline as you would normally, and call into Timemap's code as necessary. Or override parts of Timemap to do what you need instead. > But one of the ideas he suggested that I liked the best was, would > there be a simple way, or is there already a simple way to get a min > and max visible date of the top timeline band? I've been searching the > documentation, but I usually have a hard time finding stuff on there. > Yes, it's easy. tl.getBand(0).getMinVisibleDate() ==>Date {Mon Jun 30 2008 13:45:36 GMT-0400 (EDT)} tl.getBand(0).getMaxVisibleDate() ==> Date {Sun Nov 30 2008 01:14:24 GMT-0500 (EST)} --Mike -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Re: tracking when labels become visible
See Timemap, by Nick Rabinowitz: http://code.google.com/p/timemap/ That has the code to show only items from the visible portion of the timeline on the map. --Mike On Jul 12, 2011, at 9:57 AM, John S wrote: > I'll give you some background on my project... > I'm working on a google maps wizard that does... honestly a bit of > everything. The timeline is just the latest feature. I am looking at > creating something similar to the Timeline project that's built on top > of Simile, but for that project, you have to load the map into the > timeline object, and I'd rather have the map be the base of > everything, and just create my own bridge between the two of them. The > reasons get fairly detailed on this, but it's the best approach I can > take. > > All of the map markers and and event specific items for the timeline > are stored in the database. I make the distinction between map markers > and timeline specific items, because I create map markers with start/ > end dates, but recognize there are times when we'll want to add > something to a timeline that isn't a map marker. These items are > pulled from the database and I build a 2d array of events and markers > for JS. From there, the JS creates the JSON calls to load them into > the timeline. I do it this way because I'm able to dynamically edit > everything without ever having to reload the page. So far, none of > this is the issue. > > The last bit of functionality that I'm looking to recreate is... as I > scroll the timeline, I'd like to have only the items on the top tape > be the ones that are visible on the map, so that as you scroll the > timeline, you'll be able to see the progression of the items move > across the map. Making the markers on the map appear/disappear isn't > an issue, that's definitely easy enough to do, the part that I'm > stumped on is finding an effective way to track the events on the > timeline that are currently visible. > > I understand what you're talking about on the load that it could > create, and that was my biggest worry, but I wasn't sure of a better > approach for it all. As far as the load goes, I don't think I'll even > hit a timeline with more than a couple hundred items on it > realistically, though I'm sure now that I said that, I'll come up with > one that has over 3000, lol. > > This is a pretty winded post, but I think it explains everything in > pretty well detail with the exception of posting sample code, lol. I'd > love to hear some more ideas though. > > On Jul 11, 5:44 pm, Michael Nosal wrote: >> John, >> What are you trying to make Timeline do? It would help if I understood what >> you were trying to accomplish. >> Attaching listeners to each individual event is expensive to do, and can >> cause performance problems if done incorrectly. >> >> Timeline does support the ability to add listeners to the individual events >> - the onSelectListener gets fired when you click on an event and the >> eventPaintListeners get fired when the Timeline .paint() is called. >> >> Because of the expense of adding listeners, and the potential for having to >> fire too many listeners, or check too many events, you might look at using >> event delegation instead. Set a scroll listener on a band and let it decide >> what to do based on the time and events shown. >> >> I'm not sure what you mean by having the server side script generate loading >> calls for you. Better to have the server provide the data necessary for your >> event loading, and use the client side javascript to load that data. Keeps >> things cleaner and easier to maintain if you ever need to change formats, >> load order, etc. >> >> --Mike >> >> On Jul 11, 2011, at 5:13 PM, John S wrote: >> >>> I've been hunting around for this, but I haven't been able to find >>> anything yet, and I wanted to see if anyone else had any suggestions >>> for a good way to do this. >> >>> I'm currently loading everything dynamically with JSON calls, and >>> setting a custom class for each item. (these calls are being generated >>> from a server side script that's writing the loading calls for me, so >>> the names are something like, "event26" where the 26 is the event ID >>> in the database.) >> >>> Because of the way I'm doing this I can attach a listener to each >>> event individually, based on the unique class names, but I'm just not >>> sure what to look for as the trigger of the listener. I'd like to have >&g
Re: [Simile-Widgets] tracking when labels become visible
John, What are you trying to make Timeline do? It would help if I understood what you were trying to accomplish. Attaching listeners to each individual event is expensive to do, and can cause performance problems if done incorrectly. Timeline does support the ability to add listeners to the individual events - the onSelectListener gets fired when you click on an event and the eventPaintListeners get fired when the Timeline .paint() is called. Because of the expense of adding listeners, and the potential for having to fire too many listeners, or check too many events, you might look at using event delegation instead. Set a scroll listener on a band and let it decide what to do based on the time and events shown. I'm not sure what you mean by having the server side script generate loading calls for you. Better to have the server provide the data necessary for your event loading, and use the client side javascript to load that data. Keeps things cleaner and easier to maintain if you ever need to change formats, load order, etc. --Mike On Jul 11, 2011, at 5:13 PM, John S wrote: > I've been hunting around for this, but I haven't been able to find > anything yet, and I wanted to see if anyone else had any suggestions > for a good way to do this. > > I'm currently loading everything dynamically with JSON calls, and > setting a custom class for each item. (these calls are being generated > from a server side script that's writing the loading calls for me, so > the names are something like, "event26" where the 26 is the event ID > in the database.) > > Because of the way I'm doing this I can attach a listener to each > event individually, based on the unique class names, but I'm just not > sure what to look for as the trigger of the listener. I'd like to have > the listener trigger whenever the labels become "visible". I know > thats a vague way to describe a trigger, but that's half my problem of > coming up with a better plan of attack. > > If anyone has any ideas on how I could go about doing this, it would > be a serious help! I don't even need the specific code, just a push in > the right direction should be enough for me to go on. > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] getCenterVisibleDate()
Yes, you want to add the OnScrollListener to the band after the timeline has been created. You also have a trailing comma after the definition of the zone in the second HotZoneBandInfo: ... magnify:5, unit:Timeline.DateTime.YEAR}, ], Trailing commas inside array definitions like this },] cause Internet Explorer to choke and fail. Avoid them because they are very difficult to find by visual inspection, and cause IE to fail spectacularly without any sort of helpful error message. --Mike On Jun 23, 2011, at 6:15 PM, Jeff Roehl wrote: >> Add a scroll listener to automatically update the hidden input anytime the >> user >> scrolls: >> >> tl.getBand(0).addOnScrollListener(function(band) { >> var centerDate = band.getCenterVisibleDate(); >> document.getElementById("center").value = centerDate.dateFormatAsString(); >> }); > > * > Where do I put the ScrollListener? > > I have put it at the bottom of the onload function, per the following. Is > this > correct? > * > > function onLoad(){ var bandInfos = [ Timeline.createHotZoneBandInfo({ zones: > [ > { start: "Jan 02 1939 00:00:00 GMT-0500",end: "Dec 31 1945 00:00:00 > GMT-0500", magnify: 39, unit: Timeline.DateTime.MONTH}, { start: "Jan > 01 > 1917 00:00:00 GMT-0500",end: "Jan 01 1939 00:00:00 GMT-0500", magnify: 4, > > unit: Timeline.DateTime.YEAR}, { start: "Apr 01 1945 00:00:00 GMT-0500", > > end: "May 01 1945 00:00:00 GMT-0500", magnify: 10, unit: > Timeline.DateTime.WEEK} ], eventSource: Y95CC1A21, date: "Jan 01 1945 > 00:00:00 GMT-0500", width: "90%", layout: "original", intervalUnit: > Timeline.DateTime.DECADE, intervalPixels: 180 }) , > Timeline.createHotZoneBandInfo({ zones: [ { start: "Jan 01 1930 00:00:00 > GMT-0500",end: "Dec 29 1946 00:00:00 GMT-0500", magnify: 5, unit: > Timeline.DateTime.YEAR}, ], eventSource: Y95CC1A21, date: "Jan 01 1945 > 00:00:00 GMT-0500", width: "10%", layout: "overview", intervalUnit: > Timeline.DateTime.DECADE, intervalPixels: 80 }) ]; bandInfos[1].syncWith = 0; > bandInfos[1].highlight = true; tl = > Timeline.create(document.getElementById("timeline"), bandInfos); > Timeline.loadXML("xml/NUAAW0Z81.xml", function(xml, url) { > Y95CC1A21.loadXML(xml, url); }); }; > tl.getBand(0).addOnScrollListener(function(band) {var centerDate = > band.getCenterVisibleDate();document.getElementById("center").value = > centerDate.dateFormatAsString(); }); > > > Thanks > Jeff Roehl\ -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] getCenterVisibleDate()
getBand(0) returns a Band object. You call getCenterVisibleDate on that which returns a Javascript Date object. You will need to convert that to a string before it can be sent back to the server. It should be like this: tl.getBand(0).getCenterVisibleDate().dateFormatAsString() where dateFormatAsString is a function that takes a Javascript Date object and returns a string like: "2011-06-23T12:34:00" or whatever format you need to send to your server. There are many date-formatting libraries available for Javascript. See the DateJS library at: http://www.datejs.com It has a formatter called .toISOString() which does exactly this. Since you are submitting via POST rather than GET in your form, you shouldn't be adding parameters to the form's action attribute. Rather, you should be using the form's element values themselves as the data for the post. Include a in your . Add a scroll listener to automatically update the hidden input anytime the user scrolls: tl.getBand(0).addOnScrollListener(function(band) { var centerDate = band.getCenterVisibleDate(); document.getElementById("center").value = centerDate.dateFormatAsString(); }); --Mike On Jun 22, 2011, at 4:49 PM, Jeff Roehl wrote: > One thing I need to do is send: > > tl.getBand(0).band.getCenterVisibleDate(); > > Back to the back-end in a post. This way I can keep the timeline at > the > same location it was when the data was posted. So the user doesn't have to > constantly be scrolling back to the place they where before. > > I tried the following, but it doesn't work: > > > action="tl3.fwx?todo=editparagraph¶=FHE2V0O81&tl=Y95CC1A21¢er=" > onsubmit='return subm_form(this)'> > > > function subm_form( frm ) { > frm.action += tl.getBand(0).band.getCenterVisibleDate.value; > return true; > } > > > Am I messing up the syntax here? > > > Thanks > Jeff Roehl -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Make 2 seperate timelines scroll simultaneously
You want to attach a handler to each timeline to scroll the other. Here's a simple case of two timelines, tl_a and tl_b: tl_a.getBand(0).addOnScrollListener(function(band) { var centerDate = band.getCenterVisibleDate(); tl_b.getBand(0).setCenterVisibleDate(centerDate); }); tl_b.getBand(0).addOnScrollListener(function(band) { var centerDate = band.getCenterVisibleDate(); tl_a.getBand(0).setCenterVisibleDate(centerDate); }); When the user scrolls the first band in timeline A, the first band in timeline B will be set to the same date, and vice-versa. If the timelines contain more sync'ed bands, then those will scroll as well. --Mike On Jun 22, 2011, at 4:40 PM, Jeff Roehl wrote: > Is there any way to make 2 seperate timelines, in 2 different tags > scroll > simultaneously? > > I know how to make separate bands scroll in unison, this is a given. > > Are there any examples out there? > > Thanks > Jeff Roehl > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Re: Looking at loading events another way
This should work, except that the date format you're using is iso8601. The Simile parseDateTime function is expecting dates in a format like "Jun 20 2011 22:00:00" To use the iso8601 format, you need to tell it to use the iso8601 format like this: eventSource.loadJSON({events:eventsJson,dateTimeFormat:"iso8601"},document.location.href); --Mike On Jun 16, 2011, at 4:16 PM, John S wrote: > I feel like I'm hung up on one big step right now. Since this is all > done through ajax, I'm updating/creating/editing on the client side, > and I've been digging through the discussion pages and documentation, > and I found this code to help with dynamically handling events, but I > can't get them to load, and I'm really stumped on why. > > var eventsJson = [ > { > "start": timestart, > "title": title, > "icon": icon > } > ]; > > eventSource.loadJSON({ "events": eventsJson }, > document.location.href); > > timestamp, title, and icon are all variables. the date is formatted > like this, 2007-05-05 22:00:00. > > There aren't any errors being generated either, so I'm really not sure > why this isn't working, but I'd definitely appreciate any feedback > anyone might have. -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Looking at loading events another way
John, This is perfectly fine to do. All that the Simile loaders do is extract data from a data source (JSON, XML, SPARQL) create new Event objects and push into an EventSource object. It's really easy to write your own function to do the same. With a little extra work, creating/editing/removing timeline elements is also straightforward to do. You don't need to wipe out the entire timeline, just manipulate the Events inside an EventSource and call .paint() when you're ready to update the timeline display. You can create new events, edit existing ones and remove old ones. This can be done with a little UI for the user inside the browser, or you could be fetching updates from a server (e.g. an RSS feed of events) for a dynamic display. --Mike On Jun 10, 2011, at 11:15 AM, John S wrote: > I'm just getting started with SIMILE, and I have to express that I'm > very impressed with this. I'm currently working on a project that > initially took me to the TIMEMAP project, but after looking at how it > integrates with google maps, I decided this is where I should be > working from directly. > > I wanted to just get a bit of conversation moving on how feasible this > sounds.. My project at the moment is a google maps wizard using v3 of > their api. The wizard does a bit of everything, clustering, category > filters, 2d sortable arrays of all visible markers, and a slew of > other smaller features. I initially looked into TIMEMAP because it's > built to use SIMILE, but after looking closer, they create a timemap, > and create the map inside of it, which doesn't work for the additional > functionality that I have in place already. > > What I'd like to do.. I'd like to be create a custom loader that > doesn't use xml, instead I'd like to send it an array of map markers. > All of the same data from the xml can be inside the markers, and I'd > just create my own loader. > > The extended functionality I'd need would be the ability to load, > modify, and remove items in the timeline on an individual basis - > dynamically. As a worst case, I could wipe the timeline and have it > reload the new info, though I'd rather not go that route. > > I wanted to see what you guys thought about this, and if it's very > possible? I know SIMILE is a pretty impressive tool, but I haven't > been able to dig through it enough yet to see if some of these > features already exist or not. What does everyone think about this? Do > you see a lot of issues with something like this or does this sound > like something pretty feasible? -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] createBandInfo and createHotZoneBandInfo
Yes. createBandInfo is called to set up the overall definition of a timeline Band, primarily the ether definition and decorators for the Band. createHotZoneBandInfo is used to create regions (called 'zones') of the Band that differ in their ether, primarily in the pixelsPerInterval, Timeline unit and magnification setting. You can see this clearly in the JFK example. The top band is set at a default interval unit of WEEK, but has an array of zones using intervals of DAY, HOUR and even MINUTE. This allows you to define timeline Bands that use a coarse time interval where your data points are sparse, and a finer time interval where your events occur much close together. See /timeline/src/webapp/docs/create-timelines.html for more info. --Mike On Jun 2, 2011, at 7:49 PM, Jeff Roehl wrote: > Does anybody know the difference between createBandInfo and > createHotZoneBandInfo? > > Is there a difference? > > Is this explained anywhere? > > Thanks > Jeff Roehl > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Info Bubble.
I see now. My answer focused more on customizing the text/display of the info bubble. The Discuss link in the bubble comes from the fillWikiInfo method, it is not part of the theme. Looking at the code, we see: if (this._wikiURL == null || this._wikiSection == null) { return; // EARLY RETURN } The wikiURL comes from the XML file used, in the document attributes: http://simile.mit.edu/shelf/"; wiki-section="Simile JFK Timeline" > If these are left out of the XML (or JSON), then there will be no Discuss link shown. The campaignEvents.xml file does not include these attributes, so there is no wiki Discuss link shown. --Mike On Jun 2, 2011, at 6:05 PM, Jeff Roehl wrote: > >> Timeline.DefaultEventSource.Event.prototype.fillInfoBubble = > >> function(elmt, theme, labeller) { > >>// define your custom infoBubble code here... > >> } > > I still dont see how this will get rid of the "Discuss" link in the bubble. > > The following timeline dosent have the "Discuss" link in the bubble. Is there > a specific line that gets rid of this link? > > http://antietam.aotw.org/campaignEvents.xml > > Is there something that gets rid of the link in this (from this website)?: -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Timeline utilities?
Okay, here's one example (using Timeline_2.3.0 from simile-widgets.org). Editing a JSON file for Simile Timeline events by hand is a pain. Lots of quotes and curly braces. Let's try something simpler. It makes sense to try and use well defined data formats rather than cook up our own. YAML (http://www.yaml.org) is such a format. It is meant to be well-formed, human-friendly and work with the languages of today. It is also a superset of JSON (which is what we'd like to replace). So let's use YAML. We just want a text file that lets us easily define events for our timeline. YAML supports really, really simple syntax for defining a list of events. What do we need for an event in Timeline? A title, description, start and end. The YAML begins with the "---" and ends with the "..." so include that --- title: This is my first event description: This is the description for my event start: 2011-06-02T17:40:00 end: 2011-06-02T20:14:00 ... That's really all there is. We want an array of events. In YAML it would be: --- # my list of events events: - title: My first event description: This is the long description of the first event start: 2011-06-03T12:23:45 end: 2011-06-03T18:51:00 - title: My Second event description: This is the long description of the second event start: 2011-06-03T14:22:01 end: 2011-06-03T21:38:18 - title: My third event description: This is the long description of the third event start: 2011-06-03T16:25:44 end: 2011-06-03T23:048:51 ... Remember, the YAML includes the "---" and the "..." lines. In YAML, structure is determined by indentation, so make sure the leading spaces are there. There should be two spaces before the "-" and four spaces before the attributes "title", "description", etc. We just need a YAML parser in Javascript. Jeremy Faivre has one at: https://bitbucket.org/jeremyfa/yaml.js/overview Grab that and add to your page: Now we want to be able to load our YAML file the same way we're loading JSON or XML in Timeline. We need a method: Timeline._Impl.prototype.loadYAML = function(url, f) { var tl = this; var fError = function(statusText, status, xmlhttp) { alert("Failed to load YAML data from " + url + "\n" + statusText); tl.hideLoadingMessage(); }; var fDone = function(xmlhttp) { try { f(YAML.decode(xmlhttp.responseText), url); } finally { tl.hideLoadingMessage(); } }; this.showLoadingMessage(); window.setTimeout(function() { SimileAjax.XmlHttp.get(url, fError, fDone); }, 0); }; Running the YAML.decode() converts the .yml file into a JS object, so we can just pass that on to the loadJSON method of our event source. So after setting up our Timeline object, we call: tl.loadYAML("events.yml", function(data, url) { eventSource.loadJSON(data, url); }); If all goes well, you should see your events just as if you had done everything in JSON. YAML offers all sorts of interesting possibilities, esp. when you're working in YAML-friendly environments like python or ruby already. Let me know if this example works for you. --Mike On Jun 2, 2011, at 11:39 AM, Dan Aldrich wrote: > Yes, an example would go a long way for me. > > Thanks, > -d -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Timeline utilities?
There's no reason you cannot use a CSV or other simple format for your Timeline data. The Timeline api comes with support for three different formats, JSON, XML and SPARQL. Adding support for another format, such as CSV, would involve writing a custom DefaultEventSource method for dealing with whatever format you want. Alternately, it is easy to write a script to translate into JSON or XML. Let me know if you need an example. --Mike On Jun 1, 2011, at 8:18 PM, Dan wrote: > I've been using the timeline_local example w/o problems other than > it's kind of tedious using a text editor. Is there a way to at least > generate a template of the local_data javascript from a CSV or an > editor? > > Thanks, > -d -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Info Bubble.
You'll want too customize the fillInfoBubble() method of the Event object. Look in /webapp/api/scripts/sources.js, where Timeline.DefaultEventSource.Event.prototype is defined. One of the member methods is a function called fillInfoBubble. This is what builds the content that goes in the info bubble. It calls some helper functions to handle styling/formatting. The "[Discuss]" link comes from the fillWikiInfo method which fills in the wiki info for events. The date in the info bubble comes from the fillTime method. You can easily override the info bubble behavior and customize it by including your own fillInfoBubble method. In your script, after the timeline scripts have been loaded, add: Timeline.DefaultEventSource.Event.prototype.fillInfoBubble = function(elmt, theme, labeller) { // define your custom infoBubble code here... } For example, you could override the fillWikiInfo method to leave off the [Discuss] link, or leave off the image. Your bubble border images aren't showing up because the relative path to the images is incorrect. Look at where the graphics.css stylesheet is coming from, and then check that there is an images directory one level above it. That's where it is expecting to find all the bubble border images. --Mike On May 27, 2011, at 4:50 PM, Jeff Roehl wrote: > Hi all, > > Concerning: > > http://184.72.244.64/hp/page6.htm > > How do I get rid of the "[Discuss]" link in the info bubble? > > How do I get rid of the date in the info bubble? > > How do I get the borders of the bubble to appear? > > Tanks very much in advance. > > Thanks > Jeff Roehl > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Simile timeline
Sure. Happy to help. You can ask on this list, or send a pm. --mike On May 20, 2011, at 10:20 AM, Browning, Bob (GLSD) wrote: > User group, > > I have been examining the Simile timeline for possible use on a site I am > creating. I noticed in the documentation about the local Timeline example. > This type of timeline would work best for my situation. I’ve downloaded the > zip for this, but am having trouble navigating how to adjust it to what I > need. > > Is anyone available to assist me either via e-mail or phone? > > Thanks! > > Bob Browning > > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] timeline: Dynamically Changing events displayed
You can change events at any time after they have been loaded. The events are accessible through the EventSource object. Timeline doesn't have event setters, but they are easy enough to add: jQuery.extend(Timeline.DefaultEventSource.Event.prototype,{ setStart: function(start) {if (start != null) this._start = start;}, setEnd: function(end) { if (end != null) this._end = end;} }); Once you have access to the individual event, you can change any of the properties of the object and then have the timeline repaint. For example, given: var eventSource = new Timeline.DefaultEventSource(); ... tl.loadXML("events.xml",function(xml,url) { eventSource.loadXML(xml,url); } Your events are now painted on your timeline. Then to update an event, first get the EventSource object where it lives: var es = tl.getBand(1).getEventSource(); You can access specific events by id: es.getEvent("e1") or use an event iterator to iterate over all the events: es.getAllEventIterator() You can also get an iterator to return events between a pair of dates. Now you can call: var e = es.getEvent("e1"); // get a specific event by its id e.setStart(new Date("02/14/2011 12:45")); e.setEnd(new Date("02/14/2011 17:30") When you have finished changing your events, just call paint() on your timeline: tl.paint(); You can easily add additional event setters, for event text, description, etc. if you need to update more properties than just start/end. --Mike On May 19, 2011, at 12:01 PM, Udo Loeb wrote: > Hi! > > I guess this is something that I also tried to figure out recently, so > I'd like to clear this, hopefully its useful for others, too: > > What I (and maybe espressoguy) try to do is, change an event, that is > already loaded / painted, in other words: > 1. You load events with certain specs with loadXML. > -> They will be "painted" onto the timeline. > 2. Then you want to change an event, that is already painted. > > Is this possible? > > I tried to add a condition / check to the event loading, that simply > clears / deletes events that are already painted, but I ran into > problems, as events are painted again and again, depending on user > interactions like scrolling. > > As far as I see there is no feature like "updateEvent" or > "changeEventProperties" provided, or am I wrong? > > Thanx for any feedback, > > kind regards, > > Udo -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] timeline: Dynamically Changing events displayed
What do you mean by "dynamically change"? If you mean simply loading different datasets at initialization time, then it is a simple call to loadXML (or loadJSON): tl.loadXML("examples/jfk/jfk.xml", function(xml, url) { eventSource.loadXML(xml, url); }); You just specify the path to the desired data file: "examples/jfk/jfk.xml" This could be a path to some service on your server that returns dynamically generated data, such as "incidentReports.xml?date=2011-05-16" You can also load your timeline data after the page has been loaded and the timeline drawn. You might have links on your page to let the user fetch different datasets. Is this what you are referring to? --Mike Nosal On May 14, 2011, at 9:36 PM, espressoguy wrote: > I'm new to timeline... > > I can see in the jfk example that is provided with the > distribution of timeline that it's possible to dynamically change the > events displayed. But I don't see any documentation explaining how > this works. I'm sure it's done with AJAX but I don't see an > explanation of how to do it. > > Can someone tell me where I can find an explanation? > > Thanks... > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] timeline PointHighlightDecorator question
You need to call .remove() on the decorator. e.g. Timeline._Band.prototype.removeAllDecorators = function() { for (var i=0,l=this._decorators.length; i < l; i++) { this._decorators[0].remove(); this._decorators.splice(0,1); } } I've done exactly as you describe (add a highlight decorator to show the current time) and I found it more convenient to add this as a "special" decorator to the band itself, so I could remove and re-add just the decorator for the current time without having to worry about the other decorators that might be in the band. --Mike On Mar 15, 2011, at 1:47 PM, Trudy wrote: > > I have a timeline with six bands, and I draw a PointHighlightDecorator > across all of the bands at the current time at startup. What I would > like to do is have this decorator move along with the current time. > > I have set up a timer that fires every second, and then a new > PointHighlightDecorator gets drawn on the timeline. The problem is > that I cannot remove the old one. Here is my code so far (that doesn't > work): > > > for ( var i=0; i < tl._bands.length; i++ ) > { > //var numdecorators = tl._bands[i]._decorators.length; > tl._bands[i]._decorators[0] = null; // memory leak?? Want to > erase > the old one. > > var newdecorator = new Timeline.PointHighlightDecorator({ > date: > Timeline.DateTime.parseGregorianDateTime(date = new > Date()), > color: "#993300", > opacity:50 > }); > > tl._bands[i]._decorators[0] = newdecorator; > newdecorator.initialize(tl._bands[i], tl); > > > } > > tl.layout(); > > > I do not know how to safely remove decorators from a band. Nulling > them out does not remove them from the timeline once they've been > drawn. > > Thanks for any inputs! > > --Trudy > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widgets@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] How to find current position in Timeline?
Rex, Let's take a simple case - I want to send the center date of the timeline back to the server after the user has moved the timeline. However, I want the timeline to be still (not scrolling) for 1 second before reporting the center date back to my server. For example, if the user is dragging the timeline with the mouse, they will be updating the position of the timeline every 50-100ms or so. You don't want to fire off a request to your webserver every 50ms while the user is dragging the timeline. Example: var topBand = tl.getBand(0); topBand.addOnScrollListener( function(band) { if (band._timer !== false) { window.clearTimeout(band._timer); band._timer = false; } var func = function() { var centerDate = band.getCenterVisibleDate(); // send the center date back via jQuery $.ajax({ type: 'POST', url: "/path/to/method", data: {date:myDateFormatFn(centerDate)} }); // or with the SimileAjax object SimileAjax.XmlHttp.post("/path/to/method", {date:myDateFormatFn(centerDate)} ); }; band._timer = window.setTimeout(func,1000); }); This adds a listener to the top band in the timeline. If the band moves, the scroll listener fires. This could be from dragging, keyboard navigation, double-clicking, etc. A timeout of 1 second (1000ms) is set. If the band scrolls before 1 second has elapsed, it clears the previous timer, and resets a new timer for 1sec. If the band hasn't moved for a second, the function "func" is called. This grabs the center date of the timeline, and then passes it to an ajax function. You'll need to send the center date to some url on your server that knows what to do with the date (e.g. store it in a database). You should also format the date to some meaningful string that your server code will understand. In this simple example, I don't bother handling any response the server sends back, but you could use this mechanism to load data as the user scrolls. Getting the Timeline client to send the ajax request is simple. The harder part is figuring out *when* you want to send this request back to the server. Do you want the system sending/fetching data while the user is dragging the timeline with the mouse? Do you want to send or fetch data if they stop moving but keep holding the mouse down? Or if they move the timeline using the keyboard? What if they double-click on the timeline? In my case, they may scroll the timeline by several days, so I make sure that it loads the data for each day as it scrolls. In your case, you may only want to load the data for the destination date. Similarly, I have a calendar control that lets users go directly to a specific date. Since the user might jump any number of days, I only load the data for the new date. No data is loaded for the in-between dates. Hope this helps. --Mike On Mar 8, 2011, at 11:53 AM, Rex Riley wrote: > Michael, > > I found this thread which is exactly my issue at this moment, and > thought I would ask you a question. > > You said it would be ‘easy to ajax the current timeline center date > back to the server’. Unfortunately I am not strong with ajax but am with > php. Can you point me in the right direction as to how I can figure out how > to get the var back to my codes on the server? It would be much appreciated. > > Thank you. > ><<< Rex Riley >>> > > > Sure, it's easy: > tl.getBand(0).getCenterVisibleDate() will return the center of band 0. > If your other bands are sync'ed to each other then that's all you need. > > Try adding this: > var topBand = tl.getBand(0); > > topBand.addOnScrollListener( function(band) { > document.getElementById("output").innerHTML = > band.getCenterVisibleDate(); > }); > > > As the user scrolls the timline, the date at the center of band 0 will be > printed in the element with id="output" > > You could easily write the date out to a cookie or ajax it back to the server. > > --Mike Nosal > > > On May 4, 2010, at 6:12 AM, Dom wrote: > > > Hi, > > > > I need to work out what the current date being viewed in the timeline > > is before displaying a timeline page. If this date is worked out I can > > then use the setCenterVisibleDate method to move the timeline to this > > date when the page is re-displayed. The first time the timeline is > > displayed todays date can be shown. > > > > Is it possible to capture what the current position in the timeline > > is? > > > > Dom > > > Rex Riley > Middle School Technology Coordinator > Sandy Spring Friends School > rex.ri...@ssfs.org > (301) 774-7455 x 210 > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widgets@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@goog
Re: [Simile-Widgets] dynamic decorators
Clemens, #1 Usually, you don't need to set this on the decorator, but it was handy for my needs so I added it to the constructor for SpanHighlightDecorator. To get this attribute onto the decorator, you'll need to change the Javascript. Add: this._id = ("id" in params) ? params.id : 0; to the constructor for the decorator and it will be a member of your decorator object. #2 You're right. I forgot I had written the remove fn for the decorator: Timeline.SpanHighlightDecorator.prototype.remove = function() { if (this._layerDiv != null) { this._band.removeLayerDiv(this._layerDiv); } }; #3 Getting the label in the center of the decorator will take some javascript coding to override the .paint() method of the SpanHighlightDecorator class. Unfortunately, you'll have to think about how you want to handle this. What do you wish to happen if the text of the label is wider than the width of the highlight? Do you want it to spill out over the left and right sides? Do you want the label aligned to the left or the right of the highlight? Each of these requires a slightly different approach to how the elements containing the label text are added to the timeline. And it's made trickier by the fact that the width of the highlight gets specified in pixels, while the width of the table element containing the label is specified in em's. You also need to decide if you want to add support for a single centered label, replacing the current support for startLabel and endLabel, or if you want to extend the decorator class to support any combination of start, middle, end labels. --Mike On Nov 9, 2010, at 2:03 PM, Clemens Hahn wrote: > Thanks a lot Mike, adding a decorator works now great! > I have some problem removing the decorator and a few new questions in this > context: > > 1. You set an ID attribute while initializing the SpanHighlightDecorator. > This is a good idea (I need this id for removing exactly this decorator). I > have looked into the source-code (decorators.js) and there isn't an > id-attribute defined. Can i modify (adding) this id-param from extern without > changing the source-code of the timeline? (Sorry, I'm a Javascript newbie..) > > 2. In your proposed removing function the this._decorators[index].remove(); > doesn't work for me, the _decorator object has no method remove(). The splice > works, but the decorator doesn't disappear in the timeline. > > 3. How difficult is it to set an label to the center of a decorator? I don't > need a start and end label, but an "description" for the highlighted area. > > Clemens > > Am 09.11.2010 um 17:55 schrieb Michael Nosal: > >> Clemens, >> Yes, it is possible (and easy) to add/remove decorators dynamically. I >> needed to do exactly this. >> >> The decorators for a band are stored in an array in the band. We just need a >> function to add them: >> >> Timeline._Band.prototype.addDecorator = function(decorator) { >> this._decorators.push(decorator); >> decorator.initialize(this,this._timeline); >> decorator.paint(); >> } >> >> Create a new decorator and add to the desired band: >> >> var band = tl.getBand(1); >> var theme = Timeline.ClassicTheme.create(); >> band.addDecorator(new Timeline.SpanHighlightDecorator({ >> id:"my_decorator_id", >> startDate: decorator_start_date, >> endDate: decorator_end_date, >> startLabel:"Start", >> endLabel:"End", >> theme:theme >> })); >> >> Then your decorator should show up on your timeline. >> >> Removing is easy too: >> >> Timeline._Band.prototype.removeDecorator = function(index) { >> this._decorators[index].remove(); >> this._decorators.splice(index,1); >> } >> >> >> --Mike -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widg...@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] dynamic decorators
Clemens, Yes, it is possible (and easy) to add/remove decorators dynamically. I needed to do exactly this. The decorators for a band are stored in an array in the band. We just need a function to add them: Timeline._Band.prototype.addDecorator = function(decorator) { this._decorators.push(decorator); decorator.initialize(this,this._timeline); decorator.paint(); } Create a new decorator and add to the desired band: var band = tl.getBand(1); var theme = Timeline.ClassicTheme.create(); band.addDecorator(new Timeline.SpanHighlightDecorator({ id:"my_decorator_id", startDate: decorator_start_date, endDate: decorator_end_date, startLabel:"Start", endLabel:"End", theme:theme })); Then your decorator should show up on your timeline. Removing is easy too: Timeline._Band.prototype.removeDecorator = function(index) { this._decorators[index].remove(); this._decorators.splice(index,1); } --Mike On Nov 9, 2010, at 9:05 AM, einsA wrote: > Hello list, > > is it possible to change (add/remove) some decorators to the bands > dynamically - during runtime? > I initialize the timeline on page load once and then inject/remove new > data via json. Therefore it would be great not only to add/remove > events but decorators too. I've tried to add the decorators and then > calling the paint() methods of the timeline and the bands, but the new > decorators doesn't appear. > > I hope you understand my wish and anybody can help me. > > Gruß > Clemens -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widg...@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Timeline with single band - display problems in IE
You've got an extra comma at the end of your first createBandInfo: > var bandInfos = [ >Timeline.createBandInfo({ >width: "100%", >intervalUnit: Timeline.DateTime.YEAR, >intervalPixels: 70, >eventSource:eventSource, >date: d, >timeZone: -6, >theme: uwaatheme >}), >]; should be: var bandInfos = [ Timeline.createBandInfo({ width: "100%", intervalUnit: Timeline.DateTime.YEAR, intervalPixels: 70, eventSource:eventSource, date: d, timeZone: -6, theme: uwaatheme }) ]; IE doesn't like trailing commas in array and hash declarations. --Mike On Sep 21, 2010, at 1:10 PM, mark47 wrote: > Hello, I'm working on an interactive timeline for the University of > Washington. Simile's proving to be a great tool, but I'm having a > strange problem. Right now we're planning to use only a single band. > However, when I changed to a single band, the timeline doesn't display > in IE8 (haven't tried earlier versions.) > > Here's the link: > http://www.washington.edu/alumni/timeline/simile/index.html > > My Javascript below. If I add another createBandInfo then it works > fine in all browsers. I'm based my code on an example that had two > bands, so I'm guessing I'm missing something? > > Thanks! > > >var tl; >function onLoad() { >var eventSource = new Timeline.DefaultEventSource(0); > >var uwaatheme = Timeline.ClassicTheme.create(); >uwaatheme.event.bubble.width = 500; >uwaatheme.event.bubble.height = 300; > uwaatheme.timeline_start = new Date(Date.UTC(1860, 0, > 1)); > uwaatheme.timeline_end = new Date(Date.UTC(2012, 0, 1)); > >var d = Timeline.DateTime.parseGregorianDateTime("1950"); >var bandInfos = [ >Timeline.createBandInfo({ >width: "100%", >intervalUnit: Timeline.DateTime.YEAR, >intervalPixels: 70, >eventSource:eventSource, >date: d, >timeZone: -6, >theme: uwaatheme >}), >]; > >tl = Timeline.create(document.getElementById("tl"), > bandInfos, Timeline.HORIZONTAL); >tl.loadXML("uw_data_xml.php", function(xml, url) { >eventSource.loadXML(xml, url); >}); > > > setupFilterHighlightControls(document.getElementById("controls"), tl, > [0], uwaatheme); >} > >var resizeTimerID = null; >function onResize() { >if (resizeTimerID == null) { >resizeTimerID = window.setTimeout(function() { >resizeTimerID = null; >tl.layout(); >}, 500); >} >} > > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widg...@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widg...@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
Re: [Simile-Widgets] Timeline: increasing space between the dots?
This is controlled by the intervalUnit and intervalPixels parameters when creating BandInfos. If your dots are too close together, choose a smaller intervalUnit (e.g. Timeline.DateTime.WEEK instead of Timeline.DateTime.MONTH) and/or choose a larger number of pixels per interval (e.g. intervalPixels:400 instead of intervalPixels:200) With the use of HotZoneBandInfos, you can create regions in your timeline where the time interval is different, depending on the density or time granularity of your events. The JFK example on the homepage http://www.simile-widgets.org/timeline/ is a great example of this technique. You can see how events before Nov 22 use a large time interval, then much smaller time intervals are used for the events immediately around the time of the shooting. So if your time data has some sparsely spaced events and closely spaced events, you can make sure there is plenty of room on the display to see both sets clearly. --Mike On Sep 2, 2010, at 9:38 AM, jgro wrote: > Does anyone know how to increase the size of the space between events > on the SIMILE Timeline? > > I am using version 2.3.0. All of the dots on my timeline are so > cluttered together. Would be nice to increase the "width" between > them. > > Thanks in advance to any insight... > > -jgro > > -- > You received this message because you are subscribed to the Google Groups > "SIMILE Widgets" group. > To post to this group, send email to simile-widg...@googlegroups.com. > To unsubscribe from this group, send email to > simile-widgets+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/simile-widgets?hl=en. > -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widg...@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.