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¤t=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¤t=ScreenShot2012-05-25at35706PM.png
If you can suggest a better way of doing this, I'm totally open to
suggestions.
steve
On Thu, May 24, 2012 at 1:47 PM, Steve Pai <[email protected]> wrote:
> Sweet!! Can't wait to get back to my computer to try this out :)
>
> Thanks Mike!
>
> steve
>
>
> On Thu, May 24, 2012 at 1:46 PM, Michael Nosal <[email protected]> wrote:
>
>> 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
>>
>>
>> On May 24, 2012, at 4:13 PM, SteveP wrote:
>>
>> > 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
>>
>> --
>> 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.
>>
>>
>
--
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.
