How can I increase the thickness of the duration event bars on my Timeline?

[jake]

Hi all,

I've got my Timeline up and running and need some help to improve the
layout. Specifically, I need to make the event duration bars thicker
so that they can be seen more clearly from a distance (The timeline
will be displayed on a plasma screen showing my team what events are
currently taking place/ scheduler/ completed in our environment)

Can this be done?

[Larry Kluger]

Hi Jake,

Re: How can I increase the thickness of the duration event bars on my Timeline?

A: Increase the values for
theme.event.track.height   and
theme.event.tape.height    

See http://code.google.com/p/simile-widgets/wiki/Timeline_CreatingNewThemes
for how to change your Timeline's theme.

Pls write back to the list if you have further questions.

Regards,

Larry

---

From: jake <john.m...@tiscali.co.uk>
To: SIMILE Widgets <simile-...@googlegroups.com>
Sent: Friday, February 6, 2009 1:15:00 PM
Subject: How can I increase the thickness of the duration event bars on my Timeline?

[jake]

Hi Larry,

Thanks for the quick response

I've been messing with different values of "theme.event.track.height"
and
"theme.event.tape.height" and all that seems to happen is that the
space between the event labels and duration bars increases/decreases
but the duration bar thickness remains the same. I've pasted the
appropriate section of my code below. Can you spot anything I might be
doing wrong?

<script src="http://static.simile.mit.edu/timeline/api-2.2.0/timeline-
api.js" type="text/javascript"></script>
<script>
var tl;
function onLoad() {
var eventSource = new Timeline.DefaultEventSource();
var theme = Timeline.ClassicTheme.create();
theme.ether.backgroundColors[0] = '#DFF';
theme.ether.backgroundColors[1] = '#BDF';
theme.ether.highlightColor = '#FFF';
theme.ether.highlightOpacity = '100';
theme.event.bubble.width = 300;
theme.event.bubble.height = 100;
theme.event.label.width = 250;
theme.event.tape.height = 10; // px
theme.event.track.height = theme.event.tape.height +
10;


var bandInfos = [
Timeline.createBandInfo({
eventSource: eventSource,
width: "80%",
intervalUnit: Timeline.DateTime.HOUR,
intervalPixels: 240,
theme: theme
}),
Timeline.createBandInfo({
overview: true,
eventSource: eventSource,
width: "20%",
intervalUnit: Timeline.DateTime.DAY,
intervalPixels: 600,
theme: theme
})
];

Thanks and regards
John McGarry

On Feb 6, 8:56 pm, Larry Kluger <wex...@kluger.com> wrote:
> Hi Jake,
>
> Re: How can I increase the thickness of the duration event bars on my  Timeline?
>
> A: Increase the values for
> theme.event.track.height   and
> theme.event.tape.height    
>

> Seehttp://code.google.com/p/simile-widgets/wiki/Timeline_CreatingNewThemes

> for how to change your Timeline's theme.
>
> Pls write back to the list if you have further questions.
>
> Regards,
>
> Larry
>
> ________________________________

> From: jake <john.mcga...@tiscali.co.uk>

[Scott Thomson]

Hi Jake,

Try removing the track height line:

               theme.event.tape.height = 10; // px

//               theme.event.track.height = theme.event.tape.height +
10;

And in your bandInfo add:
               layout: 'original'
to your HOUR band and:
               layout: 'overview'
to your DAY band

--
Scott Thomson
0401 726 889

[Larry Kluger]

Hmmm,

I agree with Scott that it is a good idea to add
                    layout:         'original' 
to your band info.

But the other two settings are the correct ones to use. Try

            theme.event.tape.height = 10; // px

            theme.event.track.height = theme.event.tape.height + 6;

You need to adjust both.

Also check your css that you are not setting the height of the tapes there--you shouldn't be.

Which version of the library are you using?

If that's not making the tapes thicker for you, then there's some other issue.
The above settings do make the tapes thicker in the example2 file in the source, see
http://simile-widgets.googlecode.com/svn/timeline/trunk/src/webapp/site/examples/test_example2/test_example2.html

Regards,

Larry

---

From: Scott Thomson <scott.mcau...@gmail.com>
To: simile-...@googlegroups.com
Sent: Saturday, February 7, 2009 4:38:13 PM
Subject: Re: How can I increase the thickness of the duration event bars on my Timeline?

[jake]

Thanks for the suggestions guys....

I've tried adding these lines but still no joy. I've pasted the full
code below incase something somewhere in the code is affecting these
settings. Just checking I'm describing the right thing - when I say
"Event duration bars" - I'm talking about the actual lines on the
timeline which depict each event starting at time(X) and finishing at
time(Y) - its these lines I want to make a bit thicker - at least dbl
what they are currently.

I am not using any css
I am using version api-2.2.0/timeline-api.js

Wondering if the fact that these lines dont seem to be working either
is related (problem with the way I've setup my theme perhaps?)-

theme.ether.backgroundColors[0] = '#DFF';
theme.ether.backgroundColors[1] = '#BDF';

Full code listing: -
"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">

<HTML>
<HEAD>
<script type="text/javascript">
function reFresh() {
location.reload(true)
}
/* Set the number below to the amount of delay, in milliseconds,you
want between page reloads: 1 minute = 60000 milliseconds. */
window.setInterval("reFresh()",180000);
// End -->
</script>

<TITLE> GLOBAL TIMELINE</TITLE>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />

<script src="http://static.simile.mit.edu/timeline/api-2.2.0/
timeline-api.js" type="text/javascript"></script>
<script>
var tl;
function onLoad() {
var eventSource = new Timeline.DefaultEventSource();
var theme = Timeline.ClassicTheme.create();
theme.ether.backgroundColors[0] = '#DFF';

//theme.ether.backgroundColors[1] = '#BDF';
theme.ether.backgroundColors[1] = '#EEE';

theme.ether.highlightColor = '#FFF';
theme.ether.highlightOpacity = '100';
theme.event.bubble.width = 300;
theme.event.bubble.height = 100;
theme.event.label.width = 250;
theme.event.tape.height = 10; // px
theme.event.track.height = theme.event.tape.height +

6;

var bandInfos = [
Timeline.createBandInfo({
eventSource: eventSource,
width: "80%",
intervalUnit: Timeline.DateTime.HOUR,
intervalPixels: 240,

theme: theme,
layout: 'original'

}),
Timeline.createBandInfo({
overview: true,
eventSource: eventSource,
width: "20%",
intervalUnit: Timeline.DateTime.DAY,
intervalPixels: 600,
theme: theme

// layout: 'overview'
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;

tl = Timeline.create(document.getElementById("my-timeline"),
bandInfos);
Timeline.loadXML("timeline.xml", function(xml, url)
{ eventSource.loadXML(xml, url); });
/*eventSource.loadXML(timeline.xml);
tl.finishedEventLoading(); */
}
</script>
</head>
<body onload="onLoad();" onresize="onResize();">
<h1> <center>GLOBAL TIMELINE </center></h1>
<div id="my-timeline" style="height: 500px; border: 1px solid
#aaa"></div>
<noscript>
This page uses Javascript to show you a Timeline. Please enable
Javascript in your browser to see the full page. Thank you.
</noscript>

</BODY>
</HTML>"

On Feb 8, 3:26 am, Larry Kluger <wex...@kluger.com> wrote:
> Hmmm,
>
> I agree with Scott that it is a good idea to add
>                     layout:         'original'  
> to your band info.
>
> But the other two settings are the correct ones to use. Try
>             theme.event.tape.height = 10; // px
>             theme.event.track.height = theme.event.tape.height + 6;
>
> You need to adjust both.
>
> Also check your css that you are not setting the height of the tapes there--you shouldn't be.
>
> Which version of the library are you using?
>
> If that's not making the tapes thicker for you, then there's some other issue.

> The above settings do make the tapes thicker in the example2 file in the source, seehttp://simile-widgets.googlecode.com/svn/timeline/trunk/src/webapp/si...
>
> Regards,
>
> Larry
>
> ________________________________
> From: Scott Thomson <scott.mcauley.thom...@gmail.com>

> To: simile-...@googlegroups.com
> Sent: Saturday, February 7, 2009 4:38:13 PM
> Subject: Re: How can I increase the thickness of the duration event bars on my  Timeline?
>
> Hi Jake,
>
> Try removing the track height line:
>                theme.event.tape.height = 10; // px
> //               theme.event.track.height = theme.event.tape.height +
> 10;
>
> And in your bandInfo add:
>                layout: 'original'
> to your HOUR band and:
>                layout: 'overview'
> to your DAY band
>

> 0401 726 889- Hide quoted text -
>
> - Show quoted text -

[Larry Kluger]

Can you make the page available as a public url?

I can then debug it in context.

Thanks,

Larry

---

From: jake <john.m...@tiscali.co.uk>
To: SIMILE Widgets <simile-...@googlegroups.com>
Sent: Sunday, February 8, 2009 7:44:41 AM

[Scott Thomson]

Hi Jake/Larry,

Running Jake's code it looks like:

<script src="http://static.simile.mit.edu/timeline/api-2.0/timeline-api.js" type="text/javascript"></script>  WORKS
<script src="http://static.simile.mit.edu/timeline/api-2.2.0/timeline-api.js" type="text/javascript"></script>  FAILS

His code works fine on my local copy of the timeline code too.

Perhaps something has broken the tape height and perhaps other theme settings in 2.2.0?

Cheers,
Scott

[Larry Kluger]

Hi Scott,

Thank you for the testing. Does it work correctly with the trunk ver of the software?
(Is that the version that is "my local copy of the timeline code"?)

Sounds like yet another good reason for me to push the trunk ver out as ver 2.3. :-)

Jake, switch your include ref to be 2.0 and that should fix things for now. But stay tuned for 2.3 since you'll want the features that are in 2.2 and 2.3 (just not the bugs...)

Regards,

Larry

---

From: Scott Thomson <scott.mcau...@gmail.com>
To: simile-...@googlegroups.com
Sent: Sunday, February 8, 2009 4:16:55 PM

[Scott Thomson]

Hi Larry,

My local copy is based on a pre2.3.0 src download I made before I got an SVN client up and running.  I now have my SVN version at 9742.  Is there somewhere I can get the 2.x.0 version number from?

Cheers,
Scott

[jake]

Larry / Scott - many thanks for the help - I changed version # to 2.0
and I was able to change the thickness of the bars and adjust the
background colours

Much appreciated
Cheers!

Jake

On Feb 8, 10:04 pm, Scott Thomson <scott.mcauley.thom...@gmail.com>
wrote:

> Hi Larry,
>
> My local copy is based on a pre2.3.0 src download I made before I got an SVN
> client up and running.  I now have my SVN version at 9742.  Is there
> somewhere I can get the 2.x.0 version number from?
>
> Cheers,
> Scott
>
> On Mon, Feb 9, 2009 at 8:39 AM, Larry Kluger <wex...@kluger.com> wrote:
>
> > Hi Scott,
>
> > Thank you for the testing. Does it work correctly with the trunk ver of the
> > software?
> > (Is that the version that is "my local copy of the timeline code"?)
>
> > Sounds like yet another good reason for me to push the trunk ver out as ver
> > 2.3. :-)
>
> > Jake, switch your include ref to be 2.0 and that should fix things for now.
> > But stay tuned for 2.3 since you'll want the features that are in 2.2 and
> > 2.3 (just not the bugs...)
>
> > Regards,
>
> > Larry
>

> > ------------------------------
> > *From:* Scott Thomson <scott.mcauley.thom...@gmail.com>
> > *To:* simile-...@googlegroups.com
> > *Sent:* Sunday, February 8, 2009 4:16:55 PM
>
> > *Subject:* Re: How can I increase the thickness of the duration event bars

> > on my Timeline?
>
> > Hi Jake/Larry,
>
> > Running Jake's code it looks like:
>
> > <script src="http://static.simile.mit.edu/timeline/api-2.0/timeline-api.js"
> > type="text/javascript"></script>  WORKS
> > <script src="
> >http://static.simile.mit.edu/timeline/api-2.2.0/timeline-api.js"
> > type="text/javascript"></script>  FAILS
>
> > His code works fine on my local copy of the timeline code too.
>
> > Perhaps something has broken the tape height and perhaps other theme
> > settings in 2.2.0?
>
> > Cheers,
> > Scott
>

> > On Sun, Feb 8, 2009 at 11:44 PM, jake <john.mcga...@tiscali.co.uk> wrote:
>
> >> Thanks for the suggestions guys....
>
> >> I've tried adding these lines but still no joy. I've pasted the full
> >> code below incase something somewhere in the code is affecting these
> >> settings. Just checking I'm describing the right thing - when I say
> >> "Event duration bars" - I'm talking about the actual lines on the
> >> timeline which depict each event starting at time(X) and finishing at
> >> time(Y) - its these lines I want to make a bit thicker - at least dbl
> >> what they are currently.
>
> >> I am not using any css
> >> I am using version  api-2.2.0/timeline-api.js
>
> >> Wondering if the fact that these lines dont seem to be working either
> >> is related (problem with the way I've setup my theme perhaps?)-
> >> theme.ether.backgroundColors[0] = '#DFF';
> >> theme.ether.backgroundColors[1] = '#BDF';
>
> >> Full code listing: -
> >> "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/

> >> TR/html4/strict.dtd <http://www.w3.org/%0ATR/html4/strict.dtd>">

>
> >> <HTML>
> >>     <HEAD>
> >>        <script type="text/javascript">
> >>                function reFresh() {
> >>                        location.reload(true)
> >>                }
> >>                /* Set the number below to the amount of delay, in
> >> milliseconds,you
> >> want between page reloads: 1 minute = 60000 milliseconds. */
> >>                window.setInterval("reFresh()",180000);
> >> // End -->
> >>        </script>
>
> >>        <TITLE> GLOBAL TIMELINE</TITLE>
> >>        <meta http-equiv="Content-Type" content="text/html;
> >> charset=iso-8859-1" />
>
> >>        <script src="http://static.simile.mit.edu/timeline/api-2.2.0/

> >> timeline-api.js<http://static.simile.mit.edu/timeline/api-2.2.0/%0Atimeline-api.js>"

> ...
>
> read more »