I have been creating a music composer database using Exhibit, and want to customize the timeline a bit. The problem is that I am not a programmer, and although I think I understand how things work, I have no clue where I am going wrong. If any of you could give me some helpful advice on how to adjust my timeline based on the code I will paste below I would be very grateful.
The current Exhibit is located at http://www.musicedmagic.com/Exhibit/composers.html Basically what I want to accomplish are these things: - I would like to create shaders behind the bottom slider to represent the various eras of music history (similar to what is done in the JFK demo Exhibit on the simile web site). - I would also like to fix the issue I am having with the names of composers being printed beside their timeline bar when the name is too long to fit inside it. -Lastly I would like to fix the timeline so that it does not include dates after the present or before the first record in the database. I wouldn't mind if the timeline would initialize with the display in the middle of the timeline instead of at present day as it does now. - A bonus option would be to put the composers mini portrait in the timeline bar as it is shown in the dinosaur example timeline. This might not work out well though due to size issues. I am pasting below the composers.html file. It includes a script I copied from a Wiki post: http://simile.mit.edu/mail/ReadMsg?listName=General&msgId=13678 but I have been unable to get it to work so far. Again, any help would be greatly appreciated! <html> > <head> > <title>Great Composers of All Eras</title> > <script src=" > http://simile.mit.edu/repository/exhibit/trunk/src/webapp/api/exhibit-api.js?views=timeline&gmapkey=ABQIAAAAjs0rN6H8NiQdPIOfHHq0GhT3dR2pebDXsa6kvX1C0cu75y81khSg3e-HujHUYDZKrdiGm1CZxmuUUA > " > type="text/javascript"></script> > > <style> > body { > margin: 10px; > font-family: Arial,Helvetica,Sans-Serif; > font-size: 13px; > } > table.composer { > border: 1px solid #ddd; > padding: 0.5em; > background-color: white; > font-size:13px; > } > table.maplens { > border: 1px solid #ddd; > padding: 0.5em; > background-color: white; > font-size:12px; > } > div.name { > font-weight: bold; > font-size: 120%; > } > .era { > } > .birthdate { > } > .majorgenres { > color: #888; > } > .deathdate { > } > .browse { > background-color:white; > font-size: 11px; > } > .viewpanel { > font-size: 13px; > } > .bold { > font-weight:bold; > } > </style> > <!--[if IE]> > <style type="text/css"> > .mappic { > width: 80px; > float: left; > margin: 4px; > } > .tilepic { > width: 100px; > } > </style> > > <script type="text/javascript"> > function periodRowStyler(itemID, database, tr) { > var period = database.getObject(itemID, "Era"); > if (period == "Classical") { > tr.style.backgroundColor = "#f88"; > } > } > </script> > <script> > var timelineConfig = { > timelineConstructortimelineConstructor:setup_timeline }; > > function setup_timeline( div, eventSource ) { > console.log( 'setup_timeline( ', div, ', ', eventSource, ')' ); > div.style.height = "400px"; > > var earliest = eventSource.getEarliestDate(); > var latest = eventSource.getLatestDate(); > var duration = latest.getTime() - earliest.getTime(); > > var intervalUnit = Timeline.DateTime.MILLENNIUM; > while (intervalUnit > 0) { > var intervalLength = Timeline.DateTime.gregorianUnitLengths > [intervalUnit]; > if (duration / intervalLength > this._densityFactor) { > break; > } > intervalUnit--; > } > > var theme = Timeline.ClassicTheme.create(); > theme.event.bubble.width = this._bubbleWidth; > theme.event.bubble.height = this._bubbleHeight; > var bandInfos = [ > Timeline.createBandInfo({ > width: "50%", > intervalUnit: intervalUnit, > intervalPixels: this._topBandIntervalPixels, > eventSource: eventSource, > theme: theme > }), > Timeline.createBandInfo({ > width: "25%", > intervalUnit: intervalUnit + 1, > intervalPixels: this._bottomBandIntervalPixels, > eventSource: eventSource, > showEventText: false, > trackHeight: 0.5, > trackGap: 0.2, > theme: theme > }), > Timeline.createBandInfo({ > width: "25%", > intervalUnit: intervalUnit + 2, > intervalPixels: this._bottomBandIntervalPixels, > eventSource: eventSource, > showEventText: false, > trackHeight: 0.5, > trackGap: 0.2, > theme: theme > }) ]; > bandInfos[1].syncWith = 0; > bandInfos[1].highlight = true; > bandInfos[1].eventPainter.setLayout( > bandInfos[0].eventPainter.getLayout() ); > > return Timeline.create( div, bandInfos, Timeline.HORIZONTAL ); > } > </script> > </head> > <body onload="Exhibit.create(null, > null).loadGoogleSpreadsheetsData(' > http://spreadsheets.google.com/feeds/list/o13263007655535592334.7055413421551625381/od6/public/basic'); > "> > > > <h1>Composer Database Beta</h1> > <h4>The information on this page is in a beta state. In other words, it > is not completed yet and some of the information may be missing or > inaccurate. > Additional composers are being added on a regular basis when I have the > time. > Please feel free to <a href=" > http://www.musicedmagic.com/component/option,com_contact/Itemid,83/task,view/contact_id,1/";>leave > a comment or suggestion</a> regarding ways that I can make this resource > better.</h4> > <table width="100%"> > <tr valign="top"> > <td> > <div id="exhibit-control-panel"></div> > <div id="exhibit-view-panel" class=viewpanel> > > <div ex:role="exhibit-view" class="bold" > ex:viewClass="Exhibit.TimelineView" > ex:start=".BirthYear" > ex:end=".DeathYear" > ex:bubbleWidth="420" > ex:bubbleHeight="300" > ex:label="View Timeline" > ex:topBandIntervalPixels="50" > ex:bottomBandIntervalPixels="80" > ex:marker=".Era" > ex:configuration="timelineConfig"> > <table ex:role="exhibit-lens" class="maplens"> > <tr> > <td><img class="mappic" ex:src-content=".Image" /> > > <div ex:content=".label" class="name"></div> > <div><b>Era:</b> <span ex:content=".Era" > class="era"></span></div> > <div><b>Date Of Birth:</b><span > ex:content=".BirthDate" class="birthdate"></span></div> > <div ex:if-exists=".DeathDate" > class="deathdate"><b>Date of Death:</b> <span > ex:content=".DeathDate"></span></div> > <div ex:if-exists=".BirthPlace" > class="deathdate"><b>Place of Birth:</b> <span > ex:content=".BirthPlace"></span></div> > <div ex:if-exists=".Url"><b>View Full > Biography:</b> <a ex:href-content=".Url" target="new">Click > Here</a></div><br><br> > <div style="float:left;clear:left;"><b>Brief > Biography:</b> <span ex:content=".BriefBio"></span></div> > <div><b>Free Audio File:</b> <a > ex:href-content=".Audio" target="new"><span > ex:content=".MajorWorks"></span></a></div> > <div><b>Recommended CD's:</b> <a > ex:href-content=".AudioList" target="new">Click Here</span></a></div> > <div><b>Recommended Books:</b> <a > ex:href-content=".Books" target="new">Click Here</span></a></div> > <div ex:if-exists=".Videos"><b>Video > Files:</b> <a ex:href-content=".Videos" target="new">Click > Here</span></a></div> > </td> > </tr> > </table> > </div> > > > > <div ex:role="exhibit-view" > ex:viewClass="Exhibit.TileView" > ex:showAll="true" > ex:orders=".Era, .BirthDate" > ex:possibleOrders=".label, .Era, .BirthDate, .MajorGenres" > ex:label="View Tiles"> > > </div> > <table ex:role="exhibit-lens" class="composer"> > <tr> > <td><img class="tilepic" width="100px" ex:src-content=".Image" > /></td> > <td> > <a ex:href-content=".Url" target="new"><div > ex:content=".label" class="name"></div></a> > <div> > Era: <span ex:content=".Era" class="era"></span><br> > Lifetime:<span ex:content=".BirthDate" > class="birthdate"></span> - > </div> > <div ex:if-exists=".DeathDate" class="deathdate"> > <span ex:content=".DeathDate"></span> > </div> > Major Genres of Composition: <span > ex:content=".MajorGenres" class="majorgenres"></span> > <div>View Biography: <a > ex:href-content=".Url" target="new">Click Here</a></div> > <div>View Audio Files: <a > ex:href-content=".Audio" target="new"><span > ex:content=".MajorWorks"></span></a></div> > </td> > </tr> > </table> > > <div ex:role="exhibit-view" > ex:viewClass="Exhibit.TabularView" > ex:columns=".label, .Era, .BirthYear, .DeathYear" > ex:columnLabels="Name, Era, Birth Year, Death Year" > ex:columnFormats="list, list, list, list" > ex:sortColumn="3" > ex:sortAscending="false" > ex:rowStyler="periodRowStyler" > ex:label="View Table"> > </div> > <div ex:role="exhibit-view" > ex:viewClass="Exhibit.MapView" > ex:latlng=".BirthMap" > ex:marker=".Era" > ex:label="View On Map" > ex:bubbleWidth="300" > ex:bubbleHeight="300"> > <table ex:role="exhibit-lens" class="maplens"> > <tr> > <td><img class="mappic" width="80px" ex:src-content=".Image" > /></td> > <td> > <a ex:href-content=".Url" target="new"><div > ex:content=".label" class="name"></div></a> > <div> > Era: <span ex:content=".Era" class="era"></span><br> > Date Of Birth:<span ex:content=".BirthDate" > class="birthdate"></span> > </div> > <div ex:if-exists=".DeathDate" class="deathdate">Date of > Death: > <span ex:content=".DeathDate"></span> > </div> > </td> > </tr> > </table> > </div> > </div> > </td> > <td width="25%"> > <div id="exhibit-browse-panel" ex:facets=".Era, > .MajorGenres" class="browse"></div> > </td> > </tr> > </table> > </body> > </html> > > -- Chad Criswell http://www.musicedmagic.com http://musicappreciation.suite101.com
_______________________________________________ General mailing list [email protected] http://simile.mit.edu/mailman/listinfo/general
