Re: [Simile-Widgets] Problems with rowStyler, colorCoder, iconCoder, in Exhibit 2.2.0 Tabular view and Timeline extension

Thu, 15 Mar 2012 12:45:00 -0700

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"; type="text/javascript"></script> <script src="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"; type="text/javascript"></script> <script src="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"; 
          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";>PLANNING</span> <span ex:icon="http://localhost:8888/exhibit/images/green-button.png";>DESIGN</span> <span ex:icon="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].
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. 

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

Reply via email to