How to make an object remain stationary on a timeline

[jroehl]

The following remains stationary on any timeline:

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

[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 = "#ff0000";
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

[Jeff Roehl]

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

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 = "#ff0000";
    ct.style.position = "absolute";
    ct.style.opacity = 0.66;

    ct.style.left = (tl.getCenterVisibleDate() );
    ct.style.zIndex = "5000";
    tl.addDiv(ct); 

 

Thanks
Jeff Roehl
jro...@yahoo.com
(818) 912-7530

---

From: Michael Nosal <mno...@mitre.org>
To: simile-...@googlegroups.com
Sent: Monday, July 23, 2012 12:41 PM
Subject: Re: [Simile-Widgets] How to make an object remain stationary on a timeline

[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

--
You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group.
To post to this group, send email to simile-...@googlegroups.com.
To unsubscribe from this group, send email to simile-widget...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.

[Jeff Roehl]

Mike,

Thank you so much for helping me try to figure this out, I owe you lunch, big time...

>> This is due to the  accumulation of rounding errors when rendering the components of the timeline

Well, this is a nice piece of information to have. This make perfect sense. This thing is so complex we have to work around rounding errors. I love this.

>> If instead what you want is a vertical line that is 'fixed' to a particular date

No, I have the  Timeline.PointHighlightDecorators all figure out and programmed in.

I have 3 time-lines up on my browser.

1) History of the United States

2) History of Germany

3) History of France

They are stacked on top of each other and are the same width.

When the 3 time-lines appeared, all three have their center date on July 4th, 1776. All three time-lines have a red line vertically drawn on the date July 4th, 1776.

All three time-lines are tied together by their center date. So if one timeline is moved the other 2 move to its center date. And the red line which is placed at the center date appears not to move, because it is always at the center date of all three time-lines.

So I go to the " History of the United States" timeline and I double click on December 7th, 1941.

All three time-lines scroll, in unison, until their new center date is December 7th, 1941 (this is pretty cool looking).

The red center lines are now at December 7th, 1941, on all 3 time-lines, and appear NOT to have moved.

Therefore, guided by the red line, centered on all 3 time-lines, I can view what was happening on December 7th, 1941 in Germany, France and the United States.

It is pretty cool when you think about it.

Thanks
Jeff Roehl
jro...@yahoo.com
(818) 912-7530

---

From: Michael Nosal <mno...@mitre.org>
To: simile-...@googlegroups.com

Sent: Monday, July 23, 2012 1:51 PM

Subject: Re: [Simile-Widgets] How to make an object remain stationary on a timeline