Select a Plant tool

[jamiewaese]

This should display upon entering the site.

This page displays several plant SVG files. We currently have 4 but one day might have dozens, perhaps in a carousel-style image browser.

Mouse over SVG file and stroke changes from black to green (#99CC00).

For now, click on Tomato, Potato, Poplar plants and a message comes up saying "Data not available".

Click on Arabidopsis and we zoom in to the Gene Selector tool.

[yuzhenmi]

I'd like to get started on this while finishing up the gene selector, and I want to confirm that this module will be surrounded by the same UI as our gene selector (i.e. this module will just be another view for the ZUI framework).

[jamiewaese]

Yeah, I think of it as a separate module. I imagine it will have some of the same UI, but we may "disappear" elements that aren't relevant, which might be everything.

On 2013-10-06, at 7:51 PM, Hans Yu notifications@github.com wrote:

I'd like to get started on this while finishing up the gene selector, and I want to confirm that this module will be surrounded by the same UI as our gene selector (i.e. this module will just be another view for the ZUI framework).

— Reply to this email directly or view it on GitHub.

[yuzhenmi]

I feel that a carousel-style browser would make it difficult for the user to find their plant quickly (imagine having to slide a dozen times and wait for all that animation just to find Arabidopsis!). How about we divide the view into left and right: left for a list of plant names in alphabetical order; right for a bunch of tiny SVG images of the plants. When the user mouses over a plant name, we zoom into the respective SVG and make it fit the whole right side.

[jamiewaese]

Nice. That concerned me too.

I like the list on the left. Not sure if we need tiny thumbnails on the right. Might be cluttered when there are dozens, same problem as with the carousel. Maybe just when you mouse over the name the plant appears on the right, full size?

We should also have a text field beneath the plant with the name and any special conditions (wild type, saline exposed, gene knockout, etc), a list of tools available for that data set, and their various data sources.

Not sure if there should be a Select button. Once a plant is selected the system downloads the data necessary for the next scene (select a gene page) and then triggers the exit animation.

At the bottom of the plant list we might add a fake link to Add New Dataset which one day will be a wizard to upload an svg file and add links to web services for the various tools. The tooltip would say "Coming soon..."

On Oct 6, 2013, at 9:28 PM, Hans Yu notifications@github.com wrote:

I feel that a carousel-style browser would make it difficult for the user to find their plant quickly (imagine having to slide a dozen times and wait for all that animation just to find Arabidopsis!). How about we divide the view into left and right: left for a list of plant names in alphabetical order; right for a bunch of tiny SVG images of the plants. When the user mouses over a plant name, we zoom into the respective SVG and make it fit the whole right side.

— Reply to this email directly or view it on GitHub.

[yuzhenmi]

Hey Jamie, how are you coloring the SVG images? I loaded them with Processing and it only has the black outline. Also, what are the position offsets for the images? Only Arabidopsis is aligned with the top left. Feel free to share some code with me!

[yuzhenmi]

Another thing I noticed is that drawing SVG images is quite resource-intense. Are you drawing the SVGs in eFP Browser 2.0 in a looping draw function? Or did you call noLoop() and draw only when the image changes?

[yuzhenmi]

SVG offsets: never mind, figured it out from the SVG file.

[jamiewaese]

When I draw these SVG's in Processing I do the following:

• load them into a PShape
• use disableStyle() to remove all styling that may be in the file
• noFill()
• stroke(0) //black stroke
• draw to screen with shape()

i.e.,......

PShape p; p = loadShape("plant.svg"); p.disableStyle(); shape(p, 50, 50, 250, 250);

On 2013-10-07, at 11:09 PM, Hans Yu wrote:

@SVG offsets: never mind, figured it out from the SVG file.

— Reply to this email directly or view it on GitHub.

[jamiewaese]

Drag them into a browser to see how the SVG's should display. They're just black outlines. Very stark.

On 2013-10-07, at 11:09 PM, Hans Yu wrote:

@SVG offsets: never mind, figured it out from the SVG file.

— Reply to this email directly or view it on GitHub.

[yuzhenmi]

Interesting. The browser displays the SVGs with offsets corrected. I guess the viewBox attribute does this? How can I make Processing adjust image position with viewBox?

[jamiewaese]

I don't really know what viewBox is. If there's something wrong with the SVG files, feel free to open them up in a text editor and tweak them. They look like XML files, very easy to read.

On 2013-10-07, at 11:30 PM, Hans Yu notifications@github.com wrote:

Interesting. The browser displays the SVGs with offsets corrected. I guess the viewBox attribute does this? How can I make Processing adjust image position with viewBox?

— Reply to this email directly or view it on GitHub.

[jamiewaese]

Oh, you may want to use the most recent index file I committed earlier today. I tweaked the left nav for better spacing and omitted the species drop down, which doesn't really make sense after all.

On 2013-10-07, at 11:42 PM, Jamie Waese jamie@waese.com wrote:

I don't really know what viewBox is. If there's something wrong with the SVG files, feel free to open them up in a text editor and tweak them. They look like XML files, very easy to read.

On 2013-10-07, at 11:30 PM, Hans Yu notifications@github.com wrote:

Interesting. The browser displays the SVGs with offsets corrected. I guess the viewBox attribute does this? How can I make Processing adjust image position with viewBox?

— Reply to this email directly or view it on GitHub.

[yuzhenmi]

I wrote a simple version of this view ("coming soon..." for other plants is coming soon... right now clicking on any plant's name will bring in the chromosome view for Arabidopsis; I also need to create exit and entry animations). Can you please guide me on the visual layout when you get the chance? I'll go back to working on the chromosome view.

[jamiewaese]

Cool. There's a fair amount to load, huh? I'll simplify that Poplar SVG to save a few hundred kb.

When do you load the chromosomes? Does it wait until this page is displayed. There will be some downtime as the user looks at the pictures so we can load the chromosomes for each plant unobtrusively then.

Let's omit the left nav bar (the dock) when we're on this view. The scroll-over plant names are the only buttons this page needs, and until the user selects a plant none of those buttons would actually mean anything. A nice & clean top page!

Above the name column we might add "Select a plant:"

Let's make the font one notch smaller. And we might make the hover highlight green instead of grey.

We should probably add a small sub-title below each plant name. The latin name, or the sample condition for instance. I imagine a whole bunch of Arabidopsis conditions one day -- short plant, tall plant, wild type, knockouts, etc. Same with the other plants.

The zoom effect is neat but gratuitous here. I think we should lose it from the page load. Rollover and they appear full size. Maybe a .25 second fade in/out would be classy.

The zoom in should offer a nice transition to the Select Gene page though.

Once on the Select Gene page, the left nav dock would make an appearance. (Maybe it can slide in like a panel?) Press the Species button and we'd zoom back out to the Select a Plant page, and the left nav dock would disappear again.

On 2013-10-08, at 9:35 PM, Hans Yu wrote:

I wrote a simple version of this view ("coming soon..." for other plants is coming soon... right now clicking on any plant's name will bring in the chromosome view for Arabidopsis; I also need to create exit and entry animations). Can you please guide me on the visual layout when you get the chance? I'll go back to working on the chromosome view.

— Reply to this email directly or view it on GitHub.

[yuzhenmi]

I believe the chromosomes should be loaded after the user selects a plant. There will be an animation so that should be plenty of time for loading chromosomes.

[jamiewaese]

Looking good.

Let's keep the plant name text darkGrey. The highlight should be our standard green: #99CC00. In fact, that's the only green we'll ever use on this site. Select a plant can be green too, if you like how that looks.

For the left Nav Bar, is it easy to get rid of the table column instead of just making it hidden? It would be nice if we can push everything left... It will give more room for an information box with a description of the data available for that plant. Don't fret it if too much of a headache.

[yuzhenmi]

Getting rid of the table column would definitely be a pain. Though, pushing everything to the left can be done, by changing the canvas container's position to absolute and adjusting left. I'm guessing we can undo the absolute position when we exit the plant selection view. I'll give it a try tomorrow.

[yuzhenmi]

I shifted the canvas to the left with a negative left value. Now the canvas sits in the center just for this view. Please let me know if there is anything else, or I will close this.

[jamiewaese]

Looks great. If you can make it left:-150 that would be super. Thanks!

On 2013-10-10, at 8:28 PM, Hans Yu notifications@github.com wrote:

I shifted the canvas to the left with a negative left value. Now the canvas sits in the center just for this view. Please let me know if there is anything else, or I will close this.

— Reply to this email directly or view it on GitHub.

[yuzhenmi]

Done.