Different coloring for weekends?

[waynemai...@googlemail.com]

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

[Larry Kluger]

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: "waynemai...@googlemail.com" <waynemai...@googlemail.com>
To: SIMILE Widgets <simile-...@googlegroups.com>
Sent: Friday, December 5, 2008 4:35:44 AM
Subject: Different coloring for weekends?

[Wayne Pope]

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.parseGregorianDateTime("Nov
28 2008 GMT"),startLabel:""}),new
Timeline.SpanHighlightDecorator({color:"#FFFFFF",endDate:Timeline.DateTime.parseGregorianDateTime("Dec
07 2008 GMT"),endLabel:"",opacity:20,startDate:Timeline.DateTime.parseGregorianDateTime("Dec
05 2008 GMT"),startLabel:""}),new
Timeline.SpanHighlightDecorator({color:"#FFFFFF",endDate:Timeline.DateTime.parseGregorianDateTime("Dec
14 2008 GMT"),endLabel:"",opacity:20,startDate:Timeline.DateTime.parseGregorianDateTime("Dec
12 2008 GMT"),startLabel:""}),new
Timeline.SpanHighlightDecorator({color:"#FFFFFF",endDate:Timeline.DateTime.parseGregorianDateTime("Dec
21 2008 GMT"),endLabel:"",opacity:20,startDate:Timeline.DateTime.parseGregorianDateTime("Dec
19 2008 GMT"),startLabel:""}),new
Timeline.SpanHighlightDecorator({color:"#FFFFFF",endDate:Timeline.DateTime.parseGregorianDateTime("Dec
28 2008 GMT"),endLabel:"",opacity:20,startDate:Timeline.DateTime.parseGregorianDateTime("Dec
26 2008 GMT"),startLabel:""}),new
Timeline.SpanHighlightDecorator({color:"#FFFFFF",endDate:Timeline.DateTime.parseGregorianDateTime("Jan
04 2009 GMT"),endLabel:"",opacity:20,startDate:Timeline.DateTime.parseGregorianDateTime("Jan
02 2009 GMT"),startLabel:""}),new
Timeline.SpanHighlightDecorator({color:"#FFFFFF",endDate:Timeline.DateTime.parseGregorianDateTime("Jan
11 2009 GMT"),endLabel:"",opacity:20,startDate:Timeline.DateTime.parseGregorianDateTime("Jan
09 2009 GMT"),startLabel:""}),new
Timeline.SpanHighlightDecorator({color:"#FFFFFF",endDate:Timeline.DateTime.parseGregorianDateTime("Jan
18 2009 GMT"),endLabel:"",opacity:20,startDate:Timeline.DateTime.parseGregorianDateTime("Jan
16 2009 GMT"),startLabel:""}),new
Timeline.SpanHighlightDecorator({color:"#FFFFFF",endDate:Timeline.DateTime.parseGregorianDateTime("Jan
25 2009 GMT"),endLabel:"",opacity:20,startDate:Timeline.DateTime.parseGregorianDateTime("Jan
23 2009 GMT"),startLabel:""}),new
Timeline.SpanHighlightDecorator({color:"#FFFFFF",endDate:Timeline.DateTime.parseGregorianDateTime("Feb
01 2009 GMT"),endLabel:"",opacity:20,startDate:Timeline.DateTime.parseGregorianDateTime("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

[LarryK]

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" <waynemailingli...@googlemail.com>
wrote:

> 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

> > From: "waynemailingli...@googlemail.com" <waynemailingli...@googlemail.com>

[DaveH]

Just looking at the code in ether-painters.js, there is weekend
coloring for WEEK based bands but not for any others.

The weekends show their color fine in WEEK bands, but as the code
explicitly only colors weekends for WEEK bands, there is no coloring
for DAY or MONTH based bands.

Is there a reason why only WEEK bands have weekends colored? Is there
a handy change that can be made here to include other bands, e.g. DAY
and MONTH?

It would certainly save using all those decorators for what is a
standard, global concept.

Many thanks,

Dave

On Dec 8, 8:46 pm, LarryK <wex...@kluger.com> wrote:
> Hi Wayne,
>

> Thanks for update, glad to be of help. I've added it to the wiki, seehttp://code.google.com/p/simile-widgets/wiki/Timeline_highlighting_we...

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

> Seehttp://simile-widgets.googlecode.com/svn/timeline/trunk/src/webapp/si...

>
> The example is not currently live within the repository due to re-
> structuring of the repository layout. But if you download and locally

> installhttp://simile-widgets.googlecode.com/svn/timeline/trunk/timeline_sour...,

[Larry Kluger]

Hi Dave,

Re: why no weekend coloring in the DAY and MONTH bands software:
My guess is simply that no one has yet taken the time to add it.

If you'd like to add it, here are the steps:
1) Start with the trunk version.
2) Make your changes and additions. Note that you'll also want to add parameters to the theme file so the behavior can be changed via the theme. The default should be as it is now.
3) clone one of the examples to make use of the new features as a test.
4) When you have it all working, send me the diffs or files and I'll review it and add it into the library.

When implementing, think about a generalized case of specifying the day numbers that should be differently colored.
Eg theme would contain:
weekend_days: [0,6]
Where 0 is Sunday and 6 is Saturday (matching the Javascript Date object).
The reason is that in many Muslim countries and in Israel, the weekend is days [5,6] (Friday and Saturday)

If you don't have the time for the above (a perfectly understandable situation), then submit a detailed issue/enhancement request and I'll look into it at some point.

Thanks,

Larry

---

From: DaveH <sna...@googlemail.com>
To: SIMILE Widgets <simile-...@googlegroups.com>
Sent: Tuesday, December 16, 2008 7:42:56 AM
Subject: Re: Different coloring for weekends?