tutorial.html

<! -- Fix for Bootstrap css with Google Maps https://github.com/twitter/bootstrap/issues/1552 -->
<style type="text/css">
    .map_canvas label {
        width: auto;
        display: inline;
    }
    .map_canvas img {
        max-width: none;
    }

    .map_cnt {
        position: relative;
        border: 1px solid rgb(0, 0, 0.1);
        box-shadow: 0 0 5px #888;
    }

    .map_btn {
        text-align: center;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
        opacity: 0;
        background-color: rgba(51,51,51, 0.7); 
        z-index: 999;
        transition: all 0.4s ease-in-out;
    }

    .map_btn h2 {
        text-transform: uppercase;
        color: #fff;
        text-align: center;
        position: relative;
        font-size: 17px;
        padding: 10px;
        background: rgba(0, 0, 0, 0.6);
        margin: 20px 0 0 0
    }

    .map_btn p {
        color: #fff;
        text-align: center;
        position: relative;
        font-size: 14px;
        padding-top: 10px;
    }

    .popover-content p {
        color: #333;
        padding-top: 0;
        font-size: 13px;

    }


    .map_btn button{
        margin-top: 30%;
    }

    .map_btn:hover {
        opacity: 1;
    }


    #throbber {
        position:absolute;
        z-index: 10000;
        width: 100px;
        height: 100px;
        margin-top: 105px;
        margin-left: 260px;
    }

    .layersDiv label {
        color: white;
    }
    .olControlOverviewMapElement {
        background-color: white;
    }

    .tutorial img{
        border: 1px solid rgb(0, 0, 0.1);
        box-shadow: 0 0 5px #888;
    }
</style>

<div class="row">
  <!-- Success and Error Messages for the user --> 
  <!-- Question, task id, photo and action buttons for answering the question-->
  <div class="span12" style="height:50px;">
    <div id="success" class="alert alert-success" style="display:none;">
      <a class="close">×</a>
      <strong>Well done!</strong> Your answer has been saved</strong>
    </div>
    <div id="taskcompleted" class="alert alert-info" style="display:none;">
      <strong>The task has been completed!</strong> Thanks a lot!</strong>
    </div>
    <div id="finish" class="alert alert-success" style="display:none;">
      <strong>Congratulations!</strong> You have participated in all available tasks!</strong>
      <br/>
      <div class="alert-actions">
              <a class="btn small" href="/">Go back</a>
              <a class="btn small" href="/app">or, Check other applications</a>
      </div>
    </div>
    <div id="error" class="alert alert-error" style="display:none;">
      <a class="close">×</a>
      <strong>Error!</strong> Something went wrong, please contact the site administrators</strong>
    </div>
    <div id="warning" class="alert alert-warning" style="display:none;">
      <a class="close">×</a>
      <strong>Oooops!</strong> Tile not found, trying with a new one!</strong>
    </div>
  </div>
</div>

<!-- tutorials -->
<div id="welcome" class="modal hide fade" data-backdrop="static" style="display: none;">
    <div class="modal-header">
        <h3>Welcome to the best tile tutorial</h3>
    </div>
    <div class="modal-body">
        <div id="0">
            <p>In order to assess deforestation, experts analyze several satellite
            images from the same area.</p> 
            <p>They analyze several images because there are some cases
            where the pictures will have too many clouds or broken areas (white stripes).</p> 
            <p>When this happens, the experts will pick the best photo from the same area but from a different day, so 
            they can build a "perfect" photo where all we could see is the forest.
            </p>
        </div>
        <div id="1" style="display:none;">
            <p>The application tries to replicate this procedure by involving
            volunteers like you in the process.</p> 
            <p>The idea is to complete this stage of the work flow as 
            fast as possible, so the next steps could use those "final pictures" earlier.</p>
        </div>
        <div id="2" style="display:none;">
            <p>The application will load for you several photos from the same area.</p>
            <p>You will have to pick the photo that you think shows the most forest or green area.</p>
            <p>For example, this photo is a really good one </p>
            <p>
            <img class="tutorial" src="http://img440.imageshack.us/img440/5341/greenil.png" style="padding:5px; border: 1px solid rgb(0, 0, 0.1); box-shadow: 0 0 5px #888;">
            <i class="icon-ok-circle" style="font-size:96px;padding:5px;"></i>
            </p>
            <p>You can see some clouds, but the photo is showing a big <strong>green</strong> area.</p>
            <p>You should try to pick the photo that features the biggest green area.</p>
        </div>
        <div id="3" style="display:none;">
            <p>The next two photos show a cloudy and a broken area: </p>
            <p>
            <img src="http://img534.imageshack.us/img534/1571/cloudd.png" style="padding:5px; border: 1px solid rgb(0, 0, 0.1); box-shadow: 0 0 5px #888;">
           <i class="icon-remove-circle" style="font-size:96px;padding:5px;"></i>
           </p>
           <p>
            <img src="http://img255.imageshack.us/img255/561/whitew.png" style="padding:5px; border: 1px solid rgb(0, 0, 0.1); box-shadow: 0 0 5px #888;">
           <i class="icon-remove-circle" style="font-size:96px;padding:5px;"></i>
           </p>
           <p>These photos represent the bad cases that we want to avoid.</p>
           <p>Always choose the photo with the biggest green area.</p>
        </div>
        <div id="4" style="display:none;">
            <p>Now it's your turn to try!</p>
        </div>
    </div>

    <div class="modal-footer">
        <button id="prev" class="btn" onclick="show('p')" style="display:none"><i class="icon-chevron-left"></i> Previous</button>
        <button id="next" class="btn btn-success" onclick="show('n')">Next <i class="icon-chevron-right"></i> </button>
    </div>
</div>

<div id="end" class="modal hide fade" style="display: none;">
    <div class="modal-header">
        <h3>Now start contributing!</h3>
    </div>
    <div class="modal-body">
        <p><strong>Congratulations!!!</strong> You have finished the tutorial.</p>
        <p>Now you can start participating in the real project!</p>
        <a href="./newtask" class="btn btn-large btn-primary"><i class="icon-thumbs-up"></i> Start contributing!</a>
    </div>
</div>


<!-- Header of the task -->
<div class="row">
  <div class="skeleton span12">
    <div id="question">
      <h1>Question</h1>
      <!--<h3 id="area">Area</h3>-->
      <p>Task: <span id="task-id" class="label label-warning">#</span></p>
    </div>
    <!-- Map Canvas -->
    <div id="throbber"></div>
    <div id="maps" class="row"></div>
  </div>
</div>

<script src="/static/openlayers/OpenLayers.js"></script>
<script src="http://mustache.github.com/extras/mustache.js"></script>
<script src="/static/js/throbber/throbber.js"></script>
<script src="/static/js/pybossa/pybossa.js" type="text/javascript"></script>
<!-- PyBossa interface -->
<script>
// Map Server URL
var mapfile = "map=/home/forestwatchers/map/timeline.map";
var server = "http://forestwatchers.net/cgi-bin/mapserv" + "?" + mapfile;

var tut = 0;
var pop = 0;

// Map options
var options = {
    allowOverlays: true,
    numZoomLevels: 3
}
// Map Array for loading the images
var map = [];

var boxes  = new OpenLayers.Layer.Boxes( "Limits of the tile" );

// Spinner to give feedback to the user when the map is getting loaded or something is taking place in the background
var spinner = new Throbber({ 
    color: 'black',
    size: 90
});
// Array of spinners to show loading progress
var map_spinner = [];
// The spinner is attached to a div overlayed in top of the map. This div is only shown when the spinner is active, 
// otherwise, the div is hidden from the view to show the map.
spinner.appendTo (document.getElementById('throbber'));

// This function shows the spinner div and starts its animation
function spinnerStart() {
    $("#throbber").show();
    spinner.start();
}

// This function stops the spinner and hides the spinner div
function spinnerStop() {
    spinner.stop();
    $("#throbber").hide();
}


function show(method){

    if (method=='n') {
        tut = tut + 1;
    }
    else {
        tut = tut - 1;
    }

    var max = 5;
    var min = 0;

    if (tut < max) {
        if (tut == min) {
            $("#prev").hide();
        }
        else{
            $("#prev").show();
        }
        if (method=="n") {
            $("#" + (tut-1)).hide();
        }
        else {
            $("#" + (tut+1)).hide();
        }
        $("#" + tut).show();
    }
    else {
        $("#welcome").modal("hide");
        $("#elem1").fadeTo('slow', 0.1);
        $("#elem2").fadeTo('slow', 0.1);
        $("#pop" + pop).popover({
            'title': "<strong>Getting more info<strong>",
            'content': "Hover your mouse over the photo to get more information about it.",
            'trigger': 'manual',
            'html': true,
        });
        $("#btn" + pop).popover({
            'title': "<strong>Save your answer<strong>",
            'content': "This button will submit this photo as the <i>clearest</i> one. Click on it to finish the tutorial!",
            'placement': 'top',
            'trigger': 'manual',
            'html': true,
        });

        $("#pop" + pop).popover("show");
        $("#mask" + pop).hover( function(){
            // Action when entering
            $("#pop" + pop).popover("hide");
            $("#btn" + pop).popover("show");
            //$("#elem1").show(); 
            //$("#elem2").show(); 
        }, function(){
            // Action when leaving
            $("#pop" + pop).popover("show");
            $("#btn" + pop).popover("hide");
        });

    }
}

function showPop(tut,pop) {
    $("#" + pop).popover();
    $("#" + tut).modal("hide");
    $("#" + pop).popover("show");
}

// Start with tutorials, the rest will load in the background
$("#welcome").modal("show");

// This function creates the map, the layers, and sets up the map
function initializeMaps(tiles) {
    var i=0;
    var n = tiles.length;
    for (i=0;i<n;i++){
        //map_div_id = tiles[i].replace('.tif', '');
        map_div_id = "pop" + i;
        map[i] = new OpenLayers.Map(map_div_id, {
            controls: [
            //    new OpenLayers.Control.Navigation(),
            //    new OpenLayers.Control.PanZoomBar(),
            //    new OpenLayers.Control.MousePosition(),
            //    new OpenLayers.Control.ScaleLine(),
            //    new OpenLayers.Control.Attribution()
                ],
            minScale: 240000,
            numZoomLevels: 3,
            unit: 'degrees'
        });

        // Layers
        // Satellite Imagery Map (default layer)
        map[i].addLayer(new OpenLayers.Layer.WMS("Satellite", server, 
        {
            // Name of the layer without  the .tif extension
            layers: tiles[i].replace('.tif', ''),
            isBaseLayer: true
        }
        ));

        // Add a layer to load a box that represents the limits for the restrictedExtent
        //map[i].addLayer(boxes);

        // Add the overviewmap
        //map.addControl(new OpenLayers.Control.OverviewMap(overviewmapOptions));
    }
}

// Initialize the map
//initialize();

// This function will center the map for a given tile
function center(bounds, restrictedExtent, nMaps) {
    // bounds = [left, bottom, right, top]
    // restrictedExtent = [left, bottom, right, top]
    // As this action could take some time, start the spinner
    spinnerStart();
    // Convert the bounds and restrictedExtent to valid OpenLayers objects
    var b = new OpenLayers.Bounds.fromArray(bounds);
    var r = new OpenLayers.Bounds.fromArray(restrictedExtent);
    var a = r.toGeometry();
    totalArea = (a.getGeodesicArea()/1000);
    // Add a box to mark in red the limited restrictedExtent
    var box = new OpenLayers.Marker.Box(r);
    boxes.addMarker(box);
    // Set limits for the map: the user should only see a small fraction of the tile
    var i=0;
    for(i=0;i<nMaps;i++){
        map[i].setOptions({
            maxExtent: r,
            restrictedExtent: r
        })
        map[i].zoomToExtent(r);
    }
    // Stop the spinner as the map has been configured
    spinnerStop();
}


// TODO: add the validation
// See: http://stackoverflow.com/questions/4048688/how-can-i-convert-day-of-year-to-date-in-javascript
function dateFromDay( dateString ){
    var year = dateString.substring(0,4);
    console.log(year);
    var day = dateString.substring(4);
    var date = new Date(year, 0); // initialize a date in `year-01-01`
    return new Date(date.setDate(day)); // add the number of days
}

// Load the task data into the HTML skeleton
function loadTask() {
   var task = {"info": {"tile": {"tiles": ["2011358.tif", "2011359.tif", "2011360.tif"], "projection": "GEOGCS[\"WGS 84\",DATUM[\"WGS_1984\",SPHEROID[\"WGS 84\",6378137,298.257223563,AUTHORITY[\"EPSG\",\"7030\"]],AUTHORITY[\"EPSG\",\"6326\"]],PRIMEM[\"Greenwich\",0],UNIT[\"degree\",0.0174532925199433],AUTHORITY[\"EPSG\",\"4326\"]]", "restrictedExtent": [-53.68570053901632, -8.943450313500003, -53.554929289016314, -8.827201407250003], "bounds": [-57.739609289016386, -12.430917501000005, -53.554929289016385, -8.710952501000005], "height": 1657, "width": 1864, "name": "FAS_Brazil7/"}, "question": "Which is the clearest image for this area?"}, "quorum": 0, "calibration": 0, "created": "2012-08-22T13:24:30.672998", "app_id": 166, "state": "0", "id": 14422, "priority_0": 0.0};

       spinnerStart();

       // Add divs for the maps
       var tiles = task.info.tile.tiles;
       var l = tiles.length;
       var i = 0;
       var t = Math.floor(12/l);
       var width = t * 60;
       // Mustache template for creating the maps
       var tpl = '<div id="elem{{tile}}" class="skeleton {{class}}">'+ 
                 '<div class="map_cnt">' + 
                 '<div id="pop{{tile}}" class="map_canvas" style="height: {{height}}px;"></div>' +
                 '<div id="mask{{tile}}" class="map_btn" style="width: 100%; height: {{height}}px;">' + 
                 '<h2>Tile: {{tile}}</h2>' + 
                 '<p>The photo was taken: {{date}}</p>' + 
                 '<button id="btn{{tile}}" class="btn btn-large btn-primary" onclick="submitTask(\'{{tile}}\')"><i class="icon-ok"></i> Submit this tile!</button>' +
                 '</div>' + 
                 '</div>'+ 
                 '</div>';
       for (i=0;i<l;i++) {
           // Obj to pass to the template
           var tmpDate = dateFromDay(tiles[i].replace('.tif','')).toDateString();
           var obj = {'tile': i,
                      'date': tmpDate,
                      'class': 'span' + t,
                      'width': width,
                      'height': width,
           };
           $("#maps").append(Mustache.to_html(tpl,obj));
       }

       $("#question h1").text(task.info.question);
       //$("#question h3").text(task.info.tile.name);
       $("#task-id").text(task.id);
       spinnerStop();

       initializeMaps(tiles);

       // Center the map for this task
       center(task.info.tile.bounds, task.info.tile.restrictedExtent, l);
}

loadTask();

// Saves the answer for the given task
function submitTask() {
 $("#btn" + pop).popover("destroy");
 $("#pop" + pop).popover("destroy");
 $("#mask" + pop).popover("destroy");
 $("#end").modal("show");
}
</script>