Tacking on an image to the beginning/end of a band?

[SteveP]

Has anyone done this before? I'd like to add an image to the beginning/end of a band, within the band itself. Ideally it should appear over the background color of the band, but not affect the color of the band (defined in the event source). Any direction would be great!

steve

[Michael Nosal]

Yup, done that. It's pretty easy to tack on a div to your band.
I modified the constructor for the Band to include an optional image:

/* attached image div for the band */
if (bandInfo.bandImage) {
this._bandImage = this._timeline.getDocument().createElement("div");
this._bandImage.className = "timeline-band-image-layer";
var img = this._timeline.getDocument().createElement("img");
img.src = ("bandImage" in bandInfo) ? bandInfo.bandImage : "/path/to/default/image.png";
this._label.appendChild(img);
this._timeline.addDiv(this._bandImage);
}


And modified the Timeline constructor to pass the bandImage parameter from the bandInfo.
Now there is another div within the band that you can easily style with CSS (put on left side of band or right side of band, etc) and it contains an image specified by the bandImage value of your bandInfo object.

I've also used the same technique to add fixed labels to bands.

--Mike

[Steve Pai]

Sweet!! Can't wait to get back to my computer to try this out :)

Thanks Mike!

steve

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

[Steve Pai]

So if I understand this correctly, in band.js, within Timeline._Band = function(timeline, bandInfo, index) {...}, add:

/* attached image div for the band */

if (bandInfo.bandImage) {

               this._bandImage = this._timeline.getDocument().createElement("div");

               this._bandImage.className = "timeline-band-image-layer";

               var img = this._timeline.getDocument().createElement("img");

               img.src = ("bandImage" in bandInfo) ? bandInfo.bandImage : "../images/blue-circle.png";

               this._label.appendChild(img);

               this._timeline.addDiv(this._bandImage);

}

I'm just using blue-circle.png from images in the parent folder of band.js to test. Then within timeline.js, in Timeline.createBandInfo = function(params) {...}, I would need to do something like:

  if ("bandImage" in params) { ...}

or should it be in Timeline.create ?

Still trying to understand everything under the hood, so a bit confused. 

My eventual goal is to be able to tack on an image (perhaps a jagged edge) to bands where:

1. Start date is unknown, tack onto beginning band

2. End date is unknown, tack onto end of band

3. Start and end date is unknown, tack onto both ends of band

http://s21.photobucket.com/albums/b259/stevespai/?action=view&current=ScreenShot2012-05-25at42020PM.png

At the same time, I'd like to integrate it into the color of the band, so there will be a number of images. The plan is to specify the image as a parameter within the source json file for each band. I've done something similar by leveraging 'classname' and using the associated css to decide band color and a fade gradient at the ends of the band, consistent with which dates are known and unknown. However, the gradient is a % function of the length of the band, so it does not always look consistent. I got a bit closer by specifying the gradient using pixel count, but still not exactly right:

http://s21.photobucket.com/albums/b259/stevespai/?action=view&current=ScreenShot2012-05-25at35706PM.png

If you can suggest a better way of doing this, I'm totally open to suggestions.

steve

[Michael Nosal]

Wait a sec...

Are you referring to the 'tape' that is used to display a duration event? e.g. the bar that is drawn to show an event with different start and end dates?

"Band" refers to the section of the timeline in which the events are drawn.

'Tape' refers to the bar drawn for a duration event.

I'm thinking you're referring to the duration tape, and not the overall Band?

Is that correct?

--Mike

[Steve Pai]

Yes sorry, I meant 'tape.' Sorry for the confusion. 

Steve