Hi Wayne,
Thanks for update, glad to be of help. I've added it to the wiki, see
http://code.google.com/p/simile-widgets/wiki/Timeline_highlighting_weekends
Re: size of the js file. Yup--that's the tradeoff of moving the loop
to the host system. You can also dynamically create the array of
highlight decorators on the Javascript-side of the world (in the
browser).
Just use your host system to create a dynamic method call in
Javascript. Eg
print "add_decorators('" + start_date + '", '" + end_date + "');"
The result (on the html page) would be
add_decorators('Jan 1 2008 00:00', 'Jan 30 2008 00:00');
Your add_decorators Javascript method would then generate the
decorators locally within the browser.
Since end-users' browsers these days are often running on a fairly
powerful and little used cpu, I tend to use this technique a good
amount.
Once your Timeline is done, please let us know if it can be added to
the In The Wild section of the wiki.
Re: Timeline start and end feature.
See
http://simile-widgets.googlecode.com/svn/timeline/trunk/src/webapp/site/examples/test_example2/test_example2.html
The example is not currently live within the repository due to re-
structuring of the repository layout. But if you download and locally
install
http://simile-widgets.googlecode.com/svn/timeline/trunk/timeline_source.zip,
test_example_2 within the zip file should work fine for you. (Let us
know if not...)
Regards,
Larry
On Dec 8, 2:22 am, "Wayne Pope" <[EMAIL PROTECTED]>
wrote:
> Hi Larry,
>
> thanks very much for your reply.
> Well I did what you said and it seems to work fine. I'm limiting the
> amount time perriod otherwise I'll end up with rather bloated
> html/javascript.
> I'm actually generating it all in java (for my dynamic date/event content):
>
> // Highlight weekends
> StringBuffer dec = new StringBuffer("bandInfos[0].decorators
> = [");
> long startTime = startRange.getTime();
> long endTime = endRange.getTime();
> long diff = endTime - startTime;
> long days = (long) Math.floor((double) diff/DAY);
>
> boolean first = true;
> for (int i=0; i<days; i++) {
> Date tempDay = new Date(startTime + (i * DAY));
> GregorianCalendar tempCal = new GregorianCalendar();
> tempCal.setTime(tempDay);
> if (tempCal.get(GregorianCalendar.DAY_OF_WEEK) ==
> GregorianCalendar.SATURDAY) {
> if (first) {
> first = false;
> } else {
> dec.append(",");
> }
> dec.append("new
> Timeline.SpanHighlightDecorator(");
> Decoration decoration = new Decoration();
>
> decoration.setStartDate(new
> Date(tempDay.getTime() - DAY));
> decoration.setEndDate(new
> Date(tempDay.getTime() + DAY));
>
> dec.append(JsonUtils.convertDecoration(decoration));
> dec.append(")");
> }
> }
> dec.append("]\n;");
> loadScript.append(dec.toString());
>
> The javascript ends up like this:
>
> bandInfos[0].decorators = [new
> Timeline.SpanHighlightDecorator({color:"#FFFFFF",endDate:Timeline.DateTime.
> parseGregorianDateTime("Nov
> 30 2008
> GMT"),endLabel:"",opacity:20,startDate:Timeline.DateTime.parseGregorianDate
> Time("Nov
> 28 2008 GMT"),startLabel:""}),new
> Timeline.SpanHighlightDecorator({color:"#FFFFFF",endDate:Timeline.DateTime.
> parseGregorianDateTime("Dec
> 07 2008
> GMT"),endLabel:"",opacity:20,startDate:Timeline.DateTime.parseGregorianDate
> Time("Dec
> 05 2008 GMT"),startLabel:""}),new
> Timeline.SpanHighlightDecorator({color:"#FFFFFF",endDate:Timeline.DateTime.
> parseGregorianDateTime("Dec
> 14 2008
> GMT"),endLabel:"",opacity:20,startDate:Timeline.DateTime.parseGregorianDate
> Time("Dec
> 12 2008 GMT"),startLabel:""}),new
> Timeline.SpanHighlightDecorator({color:"#FFFFFF",endDate:Timeline.DateTime.
> parseGregorianDateTime("Dec
> 21 2008
> GMT"),endLabel:"",opacity:20,startDate:Timeline.DateTime.parseGregorianDate
> Time("Dec
> 19 2008 GMT"),startLabel:""}),new
> Timeline.SpanHighlightDecorator({color:"#FFFFFF",endDate:Timeline.DateTime.
> parseGregorianDateTime("Dec
> 28 2008
> GMT"),endLabel:"",opacity:20,startDate:Timeline.DateTime.parseGregorianDate
> Time("Dec
> 26 2008 GMT"),startLabel:""}),new
> Timeline.SpanHighlightDecorator({color:"#FFFFFF",endDate:Timeline.DateTime.
> parseGregorianDateTime("Jan
> 04 2009
> GMT"),endLabel:"",opacity:20,startDate:Timeline.DateTime.parseGregorianDate
> Time("Jan
> 02 2009 GMT"),startLabel:""}),new
> Timeline.SpanHighlightDecorator({color:"#FFFFFF",endDate:Timeline.DateTime.
> parseGregorianDateTime("Jan
> 11 2009
> GMT"),endLabel:"",opacity:20,startDate:Timeline.DateTime.parseGregorianDate
> Time("Jan
> 09 2009 GMT"),startLabel:""}),new
> Timeline.SpanHighlightDecorator({color:"#FFFFFF",endDate:Timeline.DateTime.
> parseGregorianDateTime("Jan
> 18 2009
> GMT"),endLabel:"",opacity:20,startDate:Timeline.DateTime.parseGregorianDate
> Time("Jan
> 16 2009 GMT"),startLabel:""}),new
> Timeline.SpanHighlightDecorator({color:"#FFFFFF",endDate:Timeline.DateTime.
> parseGregorianDateTime("Jan
> 25 2009
> GMT"),endLabel:"",opacity:20,startDate:Timeline.DateTime.parseGregorianDate
> Time("Jan
> 23 2009 GMT"),startLabel:""}),new
> Timeline.SpanHighlightDecorator({color:"#FFFFFF",endDate:Timeline.DateTime.
> parseGregorianDateTime("Feb
> 01 2009
> GMT"),endLabel:"",opacity:20,startDate:Timeline.DateTime.parseGregorianDate
> Time("Jan
> 30 2009 GMT"),startLabel:""})]
>
> >One of the new trunk examples demos how to use
> > it.
>
> Thats exactly what I'm after - which demo is it?
>
> Thanks
> Wayne
>
> On Fri, Dec 5, 2008 at 5:08 PM, Larry Kluger <[EMAIL PROTECTED]> wrote:
> > Hi Wayne,
>
> > Congrats on your Timeline project!
>
> > You can shade the background of a time period by using a "decorator"
> > For an example, see the JFK timeline.
> > I made some improvements to the decorator code that are currently only in
> > the trunk version. In particular, you may want to use a null label for the
> > weekend rather than a label of "weekend" -- if you want a null label,
> > download and use the trunk version. See the changes file in the trunk.
>
> > Suggested algorithm:
>
> > First, find the start of the first weekend that is 7 days (or fewer) before
> > your first event. That way you'll be sure to color the weekend that is
> > *before* your first event.
>
> > Then loop, adding 7 days to the first weekend date, through your last event
> > date + 7 days.
> > For every iteration, add a weekend highlighter.
>
> > The javascript date object's methods should be adequate for all of the above
> > calculations.
>
> > You may also want to use the start and end features which limit the entire
> > Timeline (instead of being infinite.) This feature is also only available on
> > the trunk ver at this time. One of the new trunk examples demos how to use
> > it.
>
> > Please post your weekend highlighting code as an example so others can use
> > it in the future.
>
> > Thanks,
>
> > Larry
>
> > ________________________________
> > From: "[EMAIL PROTECTED]" <[EMAIL PROTECTED]>
> > To: SIMILE Widgets <[email protected]>
> > Sent: Friday, December 5, 2008 4:35:44 AM
> > Subject: Different coloring for weekends?
>
> > Hi,
>
> > So I've got my basic timeline up and running, have 2 bands the top
> > showing days and the bottom weeks. I would like to know where it is
> > possible to shade the weekends different colors? I see that there are
> > hotzones but it looks like you must specify the start and end date -
> > which would mean I would need to create many many hotzones. Is there a
> > way of doing this so that they repeat automatically or is there a
> > better way?
>
> > Any ideas or pointers would be great
> > thanks
> > Wayne
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"SIMILE Widgets" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/simile-widgets?hl=en
-~----------~----~----~----~------~----~------~--~---
