Hi Rob, Nope, I still have those default purple-y blue icons for all of the discrete events. I haven't revisited or updated the code in a while, though, so there might be a fix out there. Good luck.
-Sandra- On Thu, Jan 24, 2013 at 8:22 AM, Robert Fentress <[email protected]> wrote: > Hi, Sandra. > > Did you ever get the iconCoder thing to work? I'm having the same problem. > > -Rob > > > On Monday, March 19, 2012 1:51:47 PM UTC-4, Sandra wrote: > >> Thanks! Fixing the typo in the call to rowStyler and changing the >> switching script worked. >> >> It's embarrassing to have two big typos ... but I stop seeing them after >> I've been staring at the screen a while. >> >> I'll triple check the iconCoder stuff for boneheaded mistakes, but >> meanwhile, does anyone have a fix for event labels in Timeline wrapping >> strangely when you change the font size or face? >> >> On Sunday, March 18, 2012 3:36:23 PM UTC-6, Contemplative wrote: >> >>> One more thing that I noticed: >>> >>> you have >>> >>> <div ex:role="view" >>> ex:viewClass="Tabular" >>> ex:label="List of events" >>> ex:columns=".year,.month,.** >>> label,.description,.shortURL" >>> ex:columnLabels="year, month, event, description, >>> link" >>> ex:columnFormats="list, list, list, list, url" >>> ex:sortAscending="false" >>> ex:rowStyle="rowStyler"> <-this should be >>> ex:rowStyler="rowStyler" >>> </div> >>> >>> I think the missing "r" at the end of the ex:rowStyle might fix the >>> coloring of you table. >>> >>> wjw >>> >>> On Sunday, March 18, 2012 4:27:33 PM UTC-5, Contemplative wrote: >>> >>>> Hi Sandra, >>>> I have a row styler function that looks like the following and works in >>>> my exhibit. >>>> I noticed a slight difference in the way that we are using the switch >>>> directive. >>>> Perhaps that will help. >>>> >>>> var corn_or_beans = function(item, database, tr) { >>>> if (database.getObject(item, "Commodity")) { >>>> var commodity = database.getObject(item, "Commodity"); >>>> } >>>> var color = 'red'; >>>> switch (commodity) { >>>> case "corn": color = '#FFFF00'; >>>> } >>>> switch (commodity) { >>>> case "beans": color = '#FFEC8B'; >>>> } >>>> switch (commodity) { >>>> case "wheat": color = '#CDAD00'; >>>> } >>>> tr.style.background = color; >>>> }; >>>> >>>> wjw >>>> >>>> On Thursday, March 15, 2012 5:20:01 PM UTC-5, Sandra wrote: >>>> >>>>> Second issue (timeline colorCoder) now fixed. I was missing a > . ugh. >>>>> >>>>> On Thursday, March 15, 2012 1:44:47 PM UTC-6, DavidK wrote: >>>>> >>>>>> I'll try to take a look at this later, but just in terms of >>>>>> gathering data, can you try using >>>>>> http://trunk.simile-widgets.**org/exhibit/api/exhibit-api.js<http://trunk.simile-widgets.org/exhibit/api/exhibit-api.js> >>>>>> which has a few bugfixes, and see if anything changes? >>>>>> >>>>>> >>>>>> On 3/15/2012 12:09 PM, Sandra wrote: >>>>>> >>>>>> I'm impressed with Exhibit and Timeline, and have had a lot of fun >>>>>> working with them. But it's been a real slog getting past a zillion >>>>>> little >>>>>> issues. I've gleaned all I can from what I can find online. At this >>>>>> point, >>>>>> I'm pretty close to being done with my Exhibit, but I still need help >>>>>> with >>>>>> a few pressing issues. I would absolutely appreciate any help I can get >>>>>> on >>>>>> these issues. Screen caps and code attached! >>>>>> >>>>>> BTW, I'm using the Tabular and Timeline views in Exhibit. I don't >>>>>> know enough javascript to play around with Timeline proper. >>>>>> >>>>>> *ISSUES* >>>>>> >>>>>> *Exhibit rowStyler tabular view:* does absolutely nothing to the >>>>>> table. It's all still white. Javascript console doesn't show any errors. >>>>>> My >>>>>> code is modeled after the presidents example. With my limited knowledge >>>>>> of >>>>>> Java, I am stumped. >>>>>> >>>>>> *Exhibit timeline extension colorCoder:* works except it totally >>>>>> ignores one of the spans. The events with .stage="PLANNING" do not appear >>>>>> purple on the timeline as I have set them up to do. They are grey, which >>>>>> appears coded as "others" in the legend at the bottom of the timeline. >>>>>> The >>>>>> other color coded events appear the correct color and correctly in the >>>>>> legend. >>>>>> >>>>>> *Exhibit timeline extension iconCoder:* does absolutely nothing. I >>>>>> still get those little purple default dots on all my events. I have tried >>>>>> both relative URLs and full URLs in the coder div, and I have tried >>>>>> putting >>>>>> the icon URLs into the database itself with an 'icon' and an 'iconURL' >>>>>> property. >>>>>> >>>>>> *Exhibit timeline extension event label divs:* are fine if I don't >>>>>> style them. But if I use CSS on the div.timeline-event-label class to >>>>>> change font-family or font-size, the text of the event labels wraps to a >>>>>> second line, which in some places makes them illegible as the event >>>>>> placement appears to assume single-line labels. I can get away with >>>>>> skinny >>>>>> sans-serif fonts like Gill Sans if I make them 12px or smaller, but >>>>>> that's >>>>>> a little too tiny for my taste and for my web editor's. >>>>>> >>>>>> I've attached screen captures of the above problems in action >>>>>> (except the rowStyler issue). Code at the bottom of this post. You can >>>>>> see >>>>>> a working version of the page live at http://sandrachung.com/** >>>>>> exhibit/timeline3copy.html<http://sandrachung.com/exhibit/timeline3copy.html> >>>>>> >>>>>> *What I've done* >>>>>> >>>>>> *API versions:* >>>>>> I've tried a couple different versions of the Exhibit API and >>>>>> timeline extension. With Exhibit 3.0 Scripted, my site just sits there >>>>>> and >>>>>> churns the "working" box at me and displays no timeline or tabular view. >>>>>> If >>>>>> I'm using the Google spreadsheet converter for my database,the console >>>>>> tells me object #<object> has no method 'make *iso* 8601 date >>>>>> string'. >>>>>> <http://www.google.com/webhp?sourceid=chrome-instant&ix=sea&ie=UTF-8&ion=1#hl=en&sa=X&ei=MwZhT9a6GeOe2wX2wf38Bw&ved=0CBgQBSgA&q=Object+%23%3CObject%3E+has+no+method+%27make+ISO+8601+Date+String%27&spell=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=8fc685d9ca728249&ix=sea&ion=1&biw=1408&bih=779>If >>>>>> I give it validated Exhibit JSON, it gives me a "poorly formed" error >>>>>> message (I've checked for weird spaces and commas and found nothing; >>>>>> JSONlint also says it's fine). These two versions seem to give me the >>>>>> most >>>>>> consistent results with either a validated JSON file or converted Google >>>>>> spreadsheet: >>>>>> >>>>>> <script src="http://api.simile-**widgets.org/exhibit/2.2.0/** >>>>>> exhibit-api.js"<http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js>type="text/javascript"></ >>>>>> **script> >>>>>> <script src="http://api.simile-**widgets.org/exhibit/2.2.0/** >>>>>> extensions/time/time-**extension.js"<http://api.simile-widgets.org/exhibit/2.2.0/extensions/time/time-extension.js>type="text/javascript"></ >>>>>> **script> >>>>>> >>>>>> *Database: * >>>>>> I've tried both the Google spreadsheet converter and linking to a >>>>>> local JSON file. I created the local file by cutting and pasting the >>>>>> database from my working version with the Google spreadsheet converter >>>>>> (using the scissors icon). Validated with JSONlint. >>>>>> >>>>>> *Browser: * >>>>>> Everything I've done I've tested in Chrome, Safari, and FF, all on a >>>>>> Mac, and so far they're all giving me the exact same issues. >>>>>> >>>>>> *Relevant code:* >>>>>> >>>>>> <html> >>>>>> >>>>>> <head> >>>>>> <title></title> >>>>>> >>>>>> <script src="http://api.simile-**widgets.org/exhibit/2.2.0/** >>>>>> exhibit-api.js"<http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js>type="text/javascript"></ >>>>>> **script> >>>>>> <script src="http://trunk.simile-**widgets.org/exhibit/api/** >>>>>> extensions/time/time-**extension.js"<http://trunk.simile-widgets.org/exhibit/api/extensions/time/time-extension.js>type="text/javascript"></ >>>>>> **script> >>>>>> >>>>>> <script> >>>>>> var rowStyler = function(item, database, tr) { >>>>>> var stage = database.getObject(item, "stage"); >>>>>> var color = "white"; >>>>>> switch (stage) { >>>>>> case "PRE-CONCEPT": color = "#C8BDB2"; break; >>>>>> case "CONCEPT": color="#F7D2CD"; break; >>>>>> case "PLANNING": color="#DECFE8"; break; >>>>>> case "DESIGN": color="#CCD7EE"; break; >>>>>> case "CONSTRUCTION": color="#CCE5DE"; break; >>>>>> } >>>>>> tr.style.background = color; >>>>>> }; >>>>>> </script> >>>>>> >>>>>> <link rel="exhibit/data" >>>>>> type="application/jsonp" >>>>>> href="https://spreadsheets.**google.com/feeds/list/** >>>>>> 0AtaqlNJIHEAedFU4QkxiS1BQU0tRR**ThmODgyNjBaZ0E/oda/public/** >>>>>> basic?alt=json-in-script"<https://spreadsheets.google.com/feeds/list/0AtaqlNJIHEAedFU4QkxiS1BQU0tRRThmODgyNjBaZ0E/oda/public/basic?alt=json-in-script> >>>>>> ex:converter="**googleSpreadsheets" /> >>>>>> <link rel="stylesheet" href="stylesheet.css" type="text/css" >>>>>> media=screen /> >>>>>> </head> >>>>>> >>>>>> <body> >>>>>> >>>>>> <div ex:role="coder" ex:coderClass="Color" id="stage-color"> >>>>>> <span ex:color="#472200">BEFORE NEON</span> >>>>>> <span ex:color="#D81E05">CONCEPT</**span >>>>>> <span ex:color="#59118E">PLANNING</**span> >>>>>> <span ex:color="#0038A8">DESIGN</**span> >>>>>> <span ex:color="#007c59">**CONSTRUCTION</span> >>>>>> </div> >>>>>> >>>>>> <div ex:role="coder" ex:coderClass="Icon" id="dot-color"> >>>>>> <span ex:icon="images/brown-button.**png">BEFORE NEON</span> >>>>>> <span ex:icon="images/red-button.**png">CONCEPT</span> >>>>>> <span ex:icon="http://localhost:**8888/exhibit/images/purple-** >>>>>> button.png" <http://localhost:8888/exhibit/images/purple-button.png> >>>>>> >PLANNING</span> >>>>>> <span ex:icon="http://localhost:**8888/exhibit/images/green-** >>>>>> button.png" <http://localhost:8888/exhibit/images/green-button.png> >>>>>> >DESIGN</span> >>>>>> <span ex:icon="http://localhost:**8888/exhibit/images/blue-** >>>>>> botton.png" <http://localhost:8888/exhibit/images/blue-botton.png> >>>>>> >CONSTRUCTION</**span> >>>>>> </div> >>>>>> >>>>>> <table width="100%"> >>>>>> <tr valign="top"> >>>>>> <td ex:role="viewPanel"> >>>>>> <!--This div creates the timeline view--> >>>>>> <div ex:role="view" >>>>>> ex:viewClass="Timeline" >>>>>> ex:label="Interactive Timeline" >>>>>> ex:timelineHeight="300" >>>>>> ex:topBandHeight="80" >>>>>> ex:topBandUnit="month" >>>>>> ex:topBandPixelsPerUnit="80" >>>>>> ex:bottomBandHeight="20" >>>>>> ex:bottomBandUnit="year" >>>>>> ex:bottomBandPixelsPerUnit="**60" >>>>>> ex:start=".start" >>>>>> ex:latestStart=".latestStart" >>>>>> ex:earliestEnd=".earliestEnd" >>>>>> ex:end=".end" >>>>>> ex:isDuration=".isDuration" >>>>>> ex:colorKey=".stage" >>>>>> ex:colorCoder="stage-color" >>>>>> ex:iconKey=".stage" >>>>>> ex:colorCoder="dot-color" >>>>>> ex:bubbleHeight="400" >>>>>> ex:bubbleWidth="300" >>>>>> ex:configuration=**timelineConfig"> >>>>>> <div ex:role="lens" class="timeline-bubble" >>>>>> style="display:none;"> >>>>>> <img ex:src-content=".imageURL" >>>>>> class="bubblepic" /> >>>>>> <p><span ex:content=".month" >>>>>> class="title"></span> <span ex:content=".year" class="title"></span> >>>>>> </p> >>>>>> <p ex:content=".label" class="title"></p> >>>>>> <p ex:content=".description" >>>>>> class="description"></p> >>>>>> <div ex:if-exists=".URL"><a >>>>>> ex:href-content=".URL" class="bubblelink" target="_blank"> read more >>>>>> </a></div> >>>>>> </div> >>>>>> </div> >>>>>> </div> >>>>>> <!--This div creates the table view--> >>>>>> <div ex:role="view" >>>>>> ex:viewClass="Tabular" >>>>>> ex:label="List of events" >>>>>> ex:columns=".year,.month,.** >>>>>> label,.description,.shortURL" >>>>>> ex:columnLabels="year, month, event, >>>>>> description, link" >>>>>> ex:columnFormats="list, list, list, list, url" >>>>>> ex:sortAscending="false" >>>>>> ex:rowStyle="rowStyler"> >>>>>> </div> >>>>>> </td> >>>>>> </tr> >>>>>> </table> >>>>>> >>>>>> </body> >>>>>> >>>>>> </html> >>>>>> >>>>>> >>>>>> Thanks! >>>>>> >>>>>> -Sandra- >>>>>> >>>>>> -- >>>>>> You received this message because you are subscribed to the Google >>>>>> Groups "SIMILE Widgets" group. >>>>>> To view this discussion on the web visit https://groups.google.com/d/ >>>>>> **msg/simile-widgets/-/**U5esnee5ON8J<https://groups.google.com/d/msg/simile-widgets/-/U5esnee5ON8J> >>>>>> . >>>>>> To post to this group, send email to simile-...@googlegroups.**com. >>>>>> To unsubscribe from this group, send email to simile-widget...@** >>>>>> googlegroups.com. >>>>>> >>>>>> For more options, visit this group at http://groups.google.com/** >>>>>> group/simile-widgets?hl=en<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]. Visit this group at http://groups.google.com/group/simile-widgets?hl=en. For more options, visit https://groups.google.com/groups/opt_out.
