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
>>>>> 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
>>>>>
>>>>> *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/0AtaqlNJIHEAedFU4QkxiS1BQU0tRRThmODgyNjBaZ0E/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.
>>>>> To post to this group, send email to
>>>>> [email protected]<javascript:>
>>>>> .
>>>>> To unsubscribe from this group, send email to
>>>>> [email protected] <javascript:>.
>>>>> For more options, visit this group at
>>>>> 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.
![http://localhost:8888/exhibit/images/purple-button.png"](http://localhost:8888/exhibit/images/purple-button.png"){kind=link}
![http://localhost:8888/exhibit/images/green-button.png"](http://localhost:8888/exhibit/images/green-button.png"){kind=link}
![http://localhost:8888/exhibit/images/blue-botton.png"](http://localhost:8888/exhibit/images/blue-botton.png"){kind=link}
