birogeri wrote:
> Hi!
>
> I'm a newbie to the Timeline app, and I like it very much.
> Maybe I missed something (although I searched a lot), but I can't find
> any solutions on how to make a vertical line in the center of the
> timeband(s), and simply write the date where it stands currently. And
> dynamically of course.
>
> I found this:
> "tl.getBand(0).pixelOffsetToDate(tl.getBand(0).getTotalViewLength() /
> 2); ". Somebody said this should give back the current date. Well
> then, where should I write that?
>
> I downloaded the JS script files from the Timeline hompage, so it runs
> from my computer.
>
> Can anybody help?
>
What you would need to do is to code a "decorator" (used in the JFK
example). There are some decorators here to serve as examples
http://static.simile.mit.edu/timeline/api/scripts/decorators.js
The second one is probable closer to what you want. The difference is
that its line is static rather than dynamic, so it's bound to a
particular date, not to the center of the timeline. What you want to do
is to change the "softPaint" method to update the location of the line.
Maybe something like this:
<script>
Timeline.CenterLineDecorator = function(params) {
this._unit = ("unit" in params) ? params.unit :
Timeline.NativeDateUnit;
this._date = (typeof params.date == "string") ?
this._unit.parseFromObject(params.date) : params.date;
this._width = ("width" in params) ? params.width : 10;
this._color = params.color;
this._opacity = ("opacity" in params) ? params.opacity : 100;
};
Timeline.CenterLineDecorator.prototype.initialize = function(band,
timeline) {
this._band = band;
this._timeline = timeline;
this._layerDiv = null;
this._line = null;
this._label = null;
};
Timeline.CenterLineDecorator.prototype.paint = function() {
if (this._layerDiv != null) {
this._band.removeLayerDiv(this._layerDiv);
}
this._layerDiv = this._band.createLayerDiv(10);
this._layerDiv.setAttribute("name", "span-highlight-decorator");
// for debugging
this._layerDiv.style.display = "none";
var div = this._line = document.createElement("div");
div.style.position = "absolute";
div.style.overflow = "hidden";
div.style.background = this._color;
if (this._opacity < 100) {
Timeline.Graphics.setOpacity(div, this._opacity);
}
div.style.width = this._width + "px";
div.style.top = "0px";
div.style.height = "100%";
this._layerDiv.appendChild(div);
this._layerDiv.style.display = "block";
this.softPaint();
};
Timeline.CenterLineDecorator.prototype.softPaint = function() {
var date = this._band.getCenterVisibleDate();
var pixelOffset = this._band.dateToPixelOffset(date);
this._line.style.left = pixelOffset + "px";
};
</script>
David
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
