Problems with rowStyler, colorCoder, iconCoder, in Exhibit 2.2.0 Tabular view and Timeline extension

Sandra

unread,

Mar 15, 2012, 12:09:13 PM3/15/12

to simile-...@googlegroups.com

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

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>

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>

type="application/jsonp"

href="https://spreadsheets.google.com/feeds/list/0AtaqlNJIHEAedFU4QkxiS1BQU0tRRThmODgyNjBaZ0E/oda/public/basic?alt=json-in-script"

ex:converter="googleSpreadsheets" />

</head>

<body>

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

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

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

</p>

</div>

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

eventPainterfail.png

iconCoder_colorCoder_fail.png

David Karger

unread,

Mar 15, 2012, 3:44:47 PM3/15/12

to simile-...@googlegroups.com, Sandra

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?

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

Sandra

unread,

Mar 15, 2012, 4:37:01 PM3/15/12

to simile-...@googlegroups.com, Sandra

Thanks! Tried it; no changes to the issues cited. Also tried it with and without the trunk version of the timeline extension. The only thing I noticed was that in some of the CSS classes, word-wordword-word changed to word-wordWord-word.

To post to this group, send email to simile-widgets@googlegroups.com.
To unsubscribe from this group, send email to simile-widgets+unsubscribe@googlegroups.com.

Sandra

unread,

Mar 15, 2012, 6:20:01 PM3/15/12

to simile-...@googlegroups.com, Sandra

Second issue (timeline colorCoder) now fixed. I was missing a > . ugh.

On Thursday, March 15, 2012 1:44:47 PM UTC-6, DavidK wrote:

To post to this group, send email to simile-widgets@googlegroups.com.
To unsubscribe from this group, send email to simile-widgets+unsubscribe@googlegroups.com.

Contemplative

unread,

Mar 18, 2012, 5:27:33 PM3/18/12

to simile-...@googlegroups.com, Sandra

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

Contemplative

unread,

Mar 18, 2012, 5:36:23 PM3/18/12

to simile-...@googlegroups.com, Sandra

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

Sandra

unread,

Mar 19, 2012, 1:51:47 PM3/19/12

to simile-...@googlegroups.com, Sandra

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?

Sandra M Chung

unread,

Jan 28, 2013, 11:24:49 AM1/28/13

to Robert Fentress, simile-...@googlegroups.com

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 <rfen...@vt.edu> wrote:

Hi, Sandra.

Did you ever get the iconCoder thing to work? I'm having the same problem.

-Rob

To post to this group, send email to simile-...@googlegroups.com.
To unsubscribe from this group, send email to simile-widget...@googlegroups.com.

Reply all

Reply to author

Forward