Hi Jay, Happy to help. I use the eventPaintListener technique in my project and it works fine. So I'm sure that the technique works. -- I just didn't test the specific code that I wrote up for you.
Regards, Larry ps. you'll need ver 2.3.0 or 2.3.1 of the sw. ________________________________ From: JadedAngel <[email protected]> To: SIMILE Widgets <[email protected]> Sent: Thursday, April 2, 2009 3:54:00 PM Subject: Re: Is there a way to display icons within the tape? Larry, Thank you very, very much. I and the other developer will work with what you've laid out here and see what we can get going. (We had originally considered "cheating" by trying to place icons in event title text, and then offsetting their position with some CSS positioning commands. If you think that's a viable idea, please let me know!) If we can make the example you supplied work, I will absolutely post a full code-dump and example here with comments so others can learn from it and (hopefully) use it. And we'll probably post a permanent demo somewhere so people can see it in action. Jay D. Angel On Apr 2, 12:07 pm, Larry Kluger <[email protected]> wrote: > I think the main trick with adding html to a tape is knowing when to do > it...remember that the Timeline does *not* paint all of the events at once. > They're painted in batches, as the user moves the Timeline. -- And a given > event may end up being painted and re-painted many times depending on how the > user scrolls the Timeline. > So everytime an event of interest to you is painted, you need to munge it > (add additional icons to the div, etc) > > The following is untested. > 1) Define paintListener -- will be attached to the Timeline painting cycle. > See comments at top of original-painter.js > > function paintListener(band, op, evt, els) { > /* > * eventPaintListener functions receive calls about painting. > * function(op, evt, els) > * context: 'this' will be an OriginalEventPainter object. > * It has properties and methods for obtaining > * the relevant band, timeline, etc > * op = 'paintStarting' // the painter is about to remove > * all previously painted events, if any. It will > * then start painting all of the visible events that > * pass the filter. > * evt = null, els = null > * op = 'paintEnded' // the painter has finished painting > * all of the visible events that passed the filter > * evt = null, els = null > * op = 'paintedEvent' // the painter just finished painting an > event > * evt = event just painted > * els = array of painted elements' divs. Depending on the > event, > * the array could be just a tape or icon (if no label). > * Or could include label, multiple tape divs (imprecise > event), > * highlight divs. The array is not ordered. The meaning > of > * each el is available by decoding the el's id > * Note that there may be no paintedEvent calls if no events were > visible > * or passed the filter. > */ > > if (op != "paintedEvent") {return;} // Early return > > // find tape el amongst els > var tape_el; > for (var i=0; i < els.length; i++) { > var el = els[i]; > if (YAHOO.util.Dom.hasClass(el, 'timeline-event-tape'){tape_el = el;} // > using YUI. Can use jquery or other lib instead > } > > if (!tape_el){return;} // Early return -- no tape for this event > > // assuming json events > if (evt.getProperty('telephone_icon')) { // do we want to add something to > this event? -- Checking additional attributes of the event > // Yes! Add a telephone_icon to the tape's div > var img_el = document.createElement("img"); > img_el.src = "telephone.png"; > image_el.className = "tape_extra_icon"; // use for css rules that will only > affect the img elements inside the tapes > tape_el.appendChild(img_el); > } > > } > > 2) Hook into the paint cycle > See comments at top of original-painter.js > > var band = tl.getBand(0), > painter = band.getEventPainter(); > painter.addEventPaintListener(paintListener); // hook into paint cycle > > Pay it forward: please make an example that uses the above technique. Send it > to me and I'll add it to the examples in the sources. > > Regards, > > Larry > > ________________________________ > From: JadedAngel <[email protected]> > To: SIMILE Widgets <[email protected]> > Sent: Thursday, April 2, 2009 1:36:08 PM > Subject: Re: Is there a way to display icons within the tape? > > > Easy.... > > Oh good, I like easy (especially in coding, women, and recipes). > > > Depending on the number of combinations of icons you want to shown within > > the tape, there are > > other methods too. Eg you could add content to the tape divs. > > I think this is what we're after....users can select several icons (up > to 6) and we'd like to display them in a line within the tape. > Multiple icons, and maybe some text. Can you give me an example of > adding content to the tape? I'm thinking this is what would work best > for what we want to do. --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
