Florida Non-Native Plant Species

[renobird]

http://assessment.ifas.ufl.edu

I've been working on this one a good while now. What's there now is essentially a phase one MVP (Minimum Viable Product).

We start the next phase of the project soon, which migrates a lot more data, and takes all the paper processes and turns them into web forms and/or calculation tools. More on that another time.

For those of you familiar with the pitfalls of infinite scroll — I'm still working out the kinks with history.js, but I wanted to go ahead and post the site here as it's now officially live.

Some of the more crucial modules used:

• ListerPro
• AIOM
• ProFields: PageTable
• FormBuilder (not live yet, coming in phase 2)

Homepage

Search Page

Filters

Species Page

[Martijn Geerts]

I do love plants and the website. Great work Tom.

[adrian]

Love it Tom - really nice design and functionality - very sharp!

One comment at the moment - maybe it's just me, but I find the Contact Us straight to mailto a little annoying

[renobird]

Thanks Adrian,

I find the Contact Us straight to mailto a little annoying

That's part of the minimum viability.

There is a proper contact form already built (as well as several other forms via FormBuilder), but the contact form has other options that we weren't ready to introduce, so we decided to go with the simplest option for now.

[renobird]

It's already fairly fast with template and markup cache, but up next is a little ProCache.

The images are served a 2x resolution for everyone, but at 20% quality.

$images->first()->size(556,416,array('quality' => 20))

The file sizes are decent, but I also want to add a lazy loading so that only images that make it to the viewport get loaded.

[renobird]

A project like this isn't really funded in a big chunk. It comes from different sources, so we had to make some concessions out of the gate to build what we could with the first round of funding. The next phase has funding now, so we can start work again. Might take 3-4 phases to get everything done. 

[Peter Knight]

Beautiful work.

If you have time, can you explain how the assessments filtering works?

[renobird]

Thanks Peter.

Do you mean how they work from a PHP/PW standpoint, or JS?

[Peter Knight]

I guess both. Just a brief description of what going on in the background in terms of PW, PHP and then the JS.

Are the zones and origins etc tags in PW and how you are pulling them onto a web page and then displaying results?

[renobird]

All the taxonomy is handled by page fields. Some are just basic fields like Origin and Growth habit, and others like Conclusion Type and Zones are part of a PageTable. (Screenshots at the end of the post).

There is a lot of JS involved in the filters — more than I have time to explain at the moment. The short version: Filter selections build a URL containing the page IDs for any selected filters via JS.

We needed the URIs to be as short as possible, since they will be frequently emailed, and eventually cited in publications.

They end up looking something like:

/?zones=1030,1028&types=1082,1080&growth_habit=19040,1022

A selector is then built from those GET variables in the template.

// default selector, used for assessment page
$selector = "template=species, limit=16, sort=name,";

// zones GET variables
if ($input->get->zones){
    $zones = explode(",", $input->get->zones);
    $q = implode("|", $zones);
    $selector .= "@conclusions.conclusion_zones={$q}, check_access=0,";
}

It gets a little more complicated, because of the infinite scroll. A maximum of 16 results are initially shown for any query, additional items are pulled in via AJAX on scroll. So if there are GET variables involved, the AJAX call needs to pass them along.

In the JS

function getUrlVars() {
        var vars = {};
        var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
            vars[key] = value;
        });
        return vars;
    }

var GET_zones = getUrlVars()["zones"];

There is a GET_* for each possible filter.

All of which are passed via the data param in the $.ajax() call.

data: {
    start:start,
    query:query,
    zones:GET_zones, 
    types:GET_types,
    origin:GET_origin,
    growth_habit:GET_growth_habit,
    tool_used:GET_tool_used
},

Screenshots

This is a bit of a disjointed explanation, but should give you some idea.

[renobird]

Forgot to mention: There is some $input->whitelist() stuff going on in the real code, but I left it out of the examples above for the sake of simplicity.

[renobird]

Phase 2 has some other really cool features coming for the filters. Like result counts and "disabling" options if the combinations would results in 0 results.

[Peter Knight]

Thanks so much. Great to read how it was approached and implemented.

The photography of the plants is largely very good. Was that something you had a part in or was there a library you chose from?

[renobird]

A majority of the photos are from wikimedia commons. There are other sources too, but that seems to be the majority.

The UF/IFAS Assessment Coordinator was tasked with gathering all the photos (previous incarnations of the assessment were just text).

I gave her a few pointers about resolution, etc... but she really did an amazing job. There are some low-res photos or poorly composed shots here and there. They will all eventually be replaced with higher quality versions.

[DaveP]

This might be the finest big, data-heavy PW site (aside from some of Ryan's sites obvs  ), I've seen. Great work, and please keep us up to date on future developments.

[renobird]

Thanks Dave!  

The next phase will make this look simple in comparison. Some of the paper processes that are being turned into web based tools are intense.