Nothing's plumb meaningless

    This package has been deprecated

    Author message:

    No longer maintained


    0.8.11 • Public • Published

    Some terminology

    The basic idea of a project is for the back end (Ouroboros) to send subjects to users, who will create one or more annotations, which are bundled into a classification and returned to the back end.

    Getting set up

    The library is available in a private GitHub repo, zooniverse/Zooniverse. There are a couple branches; this document describes the no-deps branch, which is pretty similar to master, but has minimal dependencies and a couple more generic models.

    We've been building apps in CoffeeScript, using Spine (spine/spine) as an MVC library and Hem (spine/hem) as a dev server/builder.

    Let's use to generate an initial framework for the app:

    npm install --global
    spine new Demo-Zoo
    cd Demo-Zoo
    npm install

    Run hem server --port 8080 and open http://localhost:8080/ to make sure everything is running okay.

    Now let's install the Zooniverse library:

    npm install --save zooniverse

    Edit public/index.html and remove the weird little "start" script that's there. Let's also move the other script tags into the body element so we don't have to wait for it to load every time we do something.

    Add the top bar

    Now open up app/ First we'll create a new API. We'll piggyback on the planet_four project for now. If there's a project set up on the back end, use its name here instead.

    Api = require 'zooniverse/lib/api'
    new Api project: 'planet_four'

    Now we'll add the top bar first so we can log in.

    TopBar = require 'zooniverse/controllers/top-bar'
    topBar = new TopBar
    topBar.el.appendTo document.body

    We'll also have to tell Hem about the modules we're using by adding them to the "dependencies" array in slug.json and restarting the server. Add zooniverse/lib/api and zooniverse/controllers/top-bar now.

    We also need to tell Hem about the base-64 library, which isn't an NPM module. Add node_modules/zooniverse/vendor/base64.js to the "libs" array in slug.json

    Let's add the CSS, too. In css/index.styl, add:

    @import "../node_modules/zooniverse/src/css/top-bar"
    @import "../node_modules/zooniverse/src/css/dialog"

    We should check to see if a user is already logged in when the page loads. Back in app/

    User = require 'zooniverse/models/user'

    Don't forget to add zooniverse/models/user to your slug.json. Hem is fun.

    Create the classification interface

    We'll base this on Spine's Controller class. Check out the Spine docs if you're not familiar.

    Spine = require 'spine'
    Subject = require 'zooniverse/models/subject'
    $ = require 'jqueryify'
    Classification = require 'zooniverse/models/classification'
    class Classifier extends Spine.Controller
        'change input[name="quality"]': 'onChangeAnnotate'
        'click button[name="next"]': 'onClickNext'
      constructor: ->

    When the user changes, we'll load a new subject. This is to keep users from seeing the same subject more than once. We can also check to see if the user has completed the tutorial.

        User.on 'change', (e, user) =>
          if user?.project.tutorial_done
            if @classification.subject.metadata.tutorial
              # A user is logged in and they've already finished the tutorial.
            # Load the tutorial subject and start the tutorial!

    When a new subject is selected, create a new classification to go with it and update the view in the classifier.

        Subject.on 'select', =>
          @classification = new Classification subject: Subject.current
      render: ->
        @el.html """
          <img src='#{Subject.current.location.standard}' style="max-width: 200px;" />
          <label><input type="radio" name="quality" value="awesome" />Awesome</label>
          <label><input type="radio" name="quality" value="lame" />Lame</label>
          <button name="next">Next</button>
      onChangeAnnotate: (e) ->
        value = $(
        # Update the classification when the user works the controls:
        @classification.removeAnnotation @classification.annotations[0]
        @classification.annotate quality: value

    Usually we have an intermittent step directing people to Talk, but we'll skip that for this example.

      onClickNext: ->
    classifier = new Classifier
    classifier.el.appendTo document.body

    Developing the library

    hub clone -p zooniverse/Zooniverse -b no-deps
    cd Zooniverse
    npm install
    cake serve
    mocha-phantomjs http://localhost:8000/test/runner.html


    Each new language adds about 1.4kb gzipped. So we need to be careful about how many languages we add.




    npm i zooniverse

    DownloadsWeekly Downloads






    Last publish


    • eostlund
    • goplayoutside3
    • zooniverse-jenkins
    • cam_allen
    • srallen
    • mcbouslog
    • eatyourgreens