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