Hi David, Thanks for the response. Yeah, fading out the other events would work just fine.
Gabriel On Jun 9, 1:24 pm, David Huynh <[email protected]> wrote: > Hi Gabriel, > > The compact painter doesn't support highlighting yet... I'm thinking, > maybe instead of highlighting I can fade out the non-matching events. > That's easier to implement, actually. Would that do for you? > > David > > Gabriel Herrera wrote: > > Hey all, > > > I'm working on implementing the theme.event.highlightLabelBackground > > feature used in the Jewish History Timeline Example. I can't seem to > > get the the events on the top band to become highlighted though, even > > though the bottom band does highlight events. I think it may be > > because I'm using the compact event painter. Is there any kind of > > work around for this? > > > Thanks, > > > Gabriel > > > here is a link to my current working copy: > >http://www.hidinginabunker.com/timelinedemo/ > > > and the code I am using: > > > var tl; > > function onLoad() { > > var eventSource = new Timeline.DefaultEventSource(0); > > > var theme = Timeline.ClassicTheme.create(); > > theme.event.highlightLabelBackground = true; > > theme.event.bubble.width = 500; > > theme.event.bubble.height = 500; > > theme.event.instant.icon = "icons/no-image.png"; > > theme.event.instant.iconWidth = 50; //default stand-alone icon > > theme.event.instant.iconHeight = 50; > > > var zones = [ > > { > > start: "Sep 14 2008 00:00:00 GMT-0500", > > end: "Oct 19 2008 00:00:00 GMT-0500", > > magnify: 5, > > unit: Timeline.DateTime.WEEK > > }, > > { > > start: "Nov 10 2008 00:00:00 GMT-0500", > > end: "Feb 01 2009 00:00:00 GMT-0500", > > magnify: 5, > > unit: Timeline.DateTime.WEEK > > }]; > > > var d = Timeline.DateTime.parseIso8601DateTime("2008-10-05"); > > > var bandInfos = [ > > Timeline.createHotZoneBandInfo({ > > zones: zones, > > width: "85%", > > intervalUnit: Timeline.DateTime.MONTH, > > intervalPixels: 150, > > eventSource: eventSource, > > date: d, > > theme: theme, > > eventPainter: Timeline.CompactEventPainter, > > eventPainterParams: { > > iconLabelGap: 10, > > labelRightMargin: 20, > > > iconWidth: 50, > > iconHeight: 50, > > > stackConcurrentPreciseInstantEvents: { > > limit: 5, > > moreMessageTemplate: "%0 More Events", > > icon: "icons/no- > > image.png", // default icon in stacks > > iconWidth: 50, > > iconHeight: 50 > > } > > } > > }), > > Timeline.createBandInfo({ > > showEventText: false, > > width: "15%", > > intervalUnit: Timeline.DateTime.YEAR, > > intervalPixels: 200, > > eventSource: eventSource, > > date: d, > > theme: theme, > > layout: 'overview' // original, overview, > > detailed > > }) > > ]; > > > bandInfos[1].syncWith = 0; > > bandInfos[1].highlight = true; > > > tl = Timeline.create(document.getElementById("tl"), > > bandInfos, Timeline.HORIZONTAL); > > Timeline.loadXML("eventData.xml", function(xml, url) > > { eventSource.loadXML(xml, url); }); > > > setupFilterHighlightControls(document.getElementById("controls"), > > tl, [0,1], theme);//create highlight controls > > } > > > var resizeTimerID = null; > > function onResize() { > > if (resizeTimerID == null) { > > resizeTimerID = window.setTimeout(function() { > > resizeTimerID = null; > > tl.layout(); > > }, 500); > > } > > } > > > function centerTimeline(year) { > > tl.getBand(0).setCenterVisibleDate(new Date(year, 09, > > 14)); > > } --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
