Re: [Simile-Widgets] Changing the order of event lines in Timeline

2014-01-10 Thread Michael Nosal
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

2013-06-13 Thread Michael Nosal
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

2013-02-06 Thread Michael Nosal
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??

2013-01-22 Thread Michael Nosal
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?

2012-11-13 Thread Michael Nosal
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?

2012-11-06 Thread Michael Nosal
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

2012-11-06 Thread Michael Nosal
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

2012-09-25 Thread Michael Nosal
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

2012-09-20 Thread Michael Nosal
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

2012-09-16 Thread Michael Nosal
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

2012-09-14 Thread Michael Nosal
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?

2012-09-14 Thread Michael Nosal
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

2012-09-13 Thread Michael Nosal
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

2012-09-12 Thread Michael Nosal
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

2012-09-12 Thread Michael Nosal
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

2012-08-02 Thread Michael Nosal
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

2012-07-23 Thread Michael Nosal
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

2012-07-23 Thread Michael Nosal
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?

2012-05-30 Thread Michael Nosal
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?

2012-05-24 Thread Michael Nosal
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 )

2012-05-24 Thread Michael Nosal
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 )

2012-05-24 Thread Michael Nosal
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 )

2012-05-23 Thread Michael Nosal
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

2012-05-23 Thread Michael Nosal
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

2012-05-23 Thread Michael Nosal
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 )

2012-05-23 Thread Michael Nosal
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

2012-04-23 Thread Michael Nosal
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

2012-03-28 Thread Michael Nosal
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

2012-03-28 Thread Michael Nosal
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

2012-03-28 Thread Michael Nosal
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

2012-03-22 Thread Michael Nosal
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?

2012-03-22 Thread Michael Nosal
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

2012-03-21 Thread Michael Nosal

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

2012-03-20 Thread Michael Nosal
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

2012-03-20 Thread Michael Nosal
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...

2012-03-20 Thread Michael Nosal
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

2012-03-20 Thread Michael Nosal
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?

2012-03-20 Thread Michael Nosal
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

2012-03-16 Thread Michael Nosal
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."

2012-03-13 Thread Michael Nosal
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."

2012-03-12 Thread Michael Nosal
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

2012-02-23 Thread Michael Nosal
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

2012-01-27 Thread Michael Nosal

> 
> >> 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

2012-01-27 Thread Michael Nosal
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

2012-01-27 Thread Michael Nosal
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

2012-01-20 Thread Michael Nosal
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

2012-01-06 Thread Michael Nosal
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

2011-11-01 Thread Michael Nosal
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

2011-11-01 Thread Michael Nosal
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

2011-10-27 Thread Michael Nosal
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

2011-10-27 Thread Michael Nosal
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

2011-09-29 Thread Michael Nosal
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

2011-09-29 Thread Michael Nosal
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

2011-09-26 Thread Michael Nosal
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

2011-09-15 Thread Michael Nosal
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

2011-09-15 Thread Michael Nosal
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

2011-09-12 Thread Michael Nosal
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)

2011-09-09 Thread Michael Nosal
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

2011-09-09 Thread Michael Nosal
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

2011-09-06 Thread Michael Nosal
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?

2011-08-31 Thread Michael Nosal
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

2011-08-30 Thread Michael Nosal
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

2011-08-30 Thread Michael Nosal
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?

2011-08-29 Thread Michael Nosal
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

2011-08-23 Thread Michael Nosal
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

2011-08-23 Thread Michael Nosal
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

2011-08-23 Thread Michael Nosal
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?

2011-08-23 Thread Michael Nosal
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?

2011-08-23 Thread Michael Nosal
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.

2011-08-23 Thread Michael Nosal
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

2011-08-05 Thread Michael Nosal
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

2011-08-04 Thread Michael Nosal
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

2011-08-04 Thread Michael Nosal
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

2011-08-04 Thread Michael Nosal
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

2011-08-03 Thread Michael Nosal
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

2011-08-03 Thread Michael Nosal
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

2011-07-19 Thread Michael Nosal
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?

2011-07-13 Thread Michael Nosal
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

2011-07-13 Thread Michael Nosal
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

2011-07-12 Thread Michael Nosal
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

2011-07-11 Thread Michael Nosal
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()

2011-06-24 Thread Michael Nosal
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()

2011-06-22 Thread Michael Nosal
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

2011-06-22 Thread Michael Nosal
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

2011-06-20 Thread Michael Nosal
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

2011-06-13 Thread Michael Nosal
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

2011-06-06 Thread Michael Nosal
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.

2011-06-03 Thread Michael Nosal
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?

2011-06-02 Thread Michael Nosal
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?

2011-06-02 Thread Michael Nosal
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.

2011-05-31 Thread Michael Nosal
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

2011-05-20 Thread Michael Nosal
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

2011-05-19 Thread Michael Nosal
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

2011-05-16 Thread Michael Nosal
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

2011-03-15 Thread Michael Nosal
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?

2011-03-14 Thread Michael Nosal
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

2010-11-09 Thread Michael Nosal
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

2010-11-09 Thread 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

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

2010-09-21 Thread Michael Nosal
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?

2010-09-02 Thread Michael Nosal
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.



  1   2   >