template.html

<style type="text/css">
    #layer0 {
        position: relative;
    }

    #layer1 {
        z-index: 1;
        box-shadow: 0 0 5px #888;
        background-color: black;

    }

    #layer2 {
        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;
    }

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

    #layer3 {
        text-align: center;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
        opacity: 1;
        //background-color: rgba(51,51,51, 0.7);
        z-index: 9999;
        transition: all 0.4s ease-in-out;
    }
</style>

<div class="row">
    <!-- Success and Error Messages for the user --> 
    <div class="col-md-8 offset2" style="height:50px">
        <!-- Success alert box -->
        <div id="success" class="alert alert-success" style="display:none;">
            <a class="close">×</a><strong>Well done!</strong> Your answer has been saved
        </div>
        <!-- Task completed alert box -->
        <div id="taskcompleted" class="alert alert-info" style="display:none;">
            <strong>The task has been completed!</strong> Thanks a lot!
        </div>
        <!-- Task loading alert box -->
        <div id="loadingTask" class="alert alert-info">
            <strong>Loading task...</strong>
        </div>
        <!-- Task completed alert box -->
        <div id="finish" class="alert alert-success" style="display:none;">
            <strong>Congratulations!</strong> You have participated in all available tasks!
            <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>
        <!-- Error alert box -->
        <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
        </div>
        <!-- Old Browser alert box -->
        <div id="oldBrowser" class="alert alert-info" style="display:none;">
            <a class="close">×</a>
            <p><strong>Sorry!</strong> Your web browser does not support the application.<p>
            <div class="alert-actions">
<a c    lass="btn small" href="/app">Please, try with another application</a>
            </div>
        </div>
    </div><!-- End of col-md-8 offset2-->
</div><!-- End of Row-->

<!-- UI for the task -->
<div class="row skeleton">
  <div id="question" class="col-md-5 well">
      <h2>Question</h2>
      <p>You are working now on task: <span id="task-id" class="label label-warning">#</span></p>
      <p>You have completed: <span id="done" class="label label-info"></span> tasks from
      <span id="total" class="label label-info"></span></p>
      <div class="progress progress-striped">
          <div id="progress" rel="tooltip" title="#" class="progress-bar"
              role="progressbar" style="width: 0%;"></div>
      </div>
      <p><span class="label label-warning"><i class="icon-bullhorn"></i>
          Tip</span> If you need help, check the <a class="btn btn-default btn-sm" href="../tutorial">Tutorial</a></p>
      <p id="img_size_p">Image size: 
        <span id="img_size" class="label label-info">Size: </span>
      </p>
      <p>Molecule <strong>X</strong> and <strong>Y</strong> coordinates: <span id="molecule-x" class="label label-info">0</span> <span id="molecule-y" class="label label-info">0</span></p>
      <div id="rotation-box" class="row" style="display:none">
        <hr>
        <div class="col-md-6">
            <h3>
            <strong>Angle </strong> <span id="rotation">0º</span>
            </h3>
        </div>
        <div class="col-md-6">
          <div class="btn-group btn-group-sm">
            <button id="increaseDegreesBtn" class="btn btn-primary">+</button>
            <button id="decreaseDegreesBtn" rel="tooltip" title="Use these
                buttons to adjust the degrees" class="btn btn-primary">-</button>
          </div>
        </div>
      </div>
      <!-- Answer buttons -->
      <div id="answer" class="col-md-5" style="display:none; padding-top:10px;text-align:center;">
          <hr>
          <button class="btn btn-large btn-success btn-submit"><i class="icon icon-white icon-ok"></i> Save the coordinates and the angle</button>
      </div>
  </div>
  <div id="layer0" class="col-md-6">
      <div id="layer1" style="width:512px;height:512px;">
        <a id="photo-link" href="#">
            <img id="photo" src="http://img339.imageshack.us/img339/9017/loadingo.png" onload='$("#loadingTask").hide()' style="max-width=100%">
           </a>
      </div>
      <div id="layer2" style="width:512px;height:512px;">
      </div>
      <div id="layer3" style="">
      </div>
  </div>
</div>

<!-- Warning modal for users clicking outside the BBox-->
<div class="modal" id="bboxWarning" style="display:none;z-index: 9999;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>Ooops!</h3>
    </div>
    <div class="modal-body">
        <p>You should place the crosshair within the box like in the following image:</p>
        <img class="tutorial" src="http://imageshack.us/a/img513/4876/fg5.png" style="padding:5px; border: 1px solid rgb(0, 0, 0.1); box-shadow: 0 0 5px #888;">
        <p>If you need help, check the <a href="../tutorial">Tutorial</a></p>
    </div>
</div>

<script src="/static/js/raphael-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js" type="text/javascript"></script>
<script>
//    if (Modernizr.svg) {
//});
var appname = 'feynmanflowers';

//var degrees = 0;
//var rect;
//
//var crosshairpaper;
//var set; 
//var mol_x=0;
//var mol_y=0;

function increaseDegrees(task) {
    task.degrees = parseInt($("#rotation").text(),10);
    task.degrees += 1;
    $("#rotation").text(task.degrees + "º");
    task.set.transform("r" + task.degrees + "," + task.mol_x + "," + task.mol_y);
}

function decreaseDegrees(task) {
    task.degrees = parseInt($("#rotation").text(),10);
    task.degrees -= 1;
    $("#rotation").text(task.degrees + "º");
    task.set.transform("r" + task.degrees + "," + task.mol_x + "," + task.mol_y);
}

// Initialize the Crosshair for the molecules and set the events
function initializeCrosshair(task, div,posX, posY, size, diameter){
    var pause = false;
    var pauseAngle = false;
    // Create the SVG document
    task.crosshairpaper = Raphael(document.getElementById(div), size, size);
    task.set = task.crosshairpaper.set();
    
    $('svg').attr("cursor","crosshair");
    
    halfSize = diameter/2;
    var radius = diameter/2;
    var x = size/2;
    var y = size/2;
    var diameter = radius + halfSize;

    task.set.push(
        task.crosshairpaper.path("M"+( x-radius)+" "+( y )+"L"+( x+radius) + " " + y).attr("stroke","cyan"),
        task.crosshairpaper.path("M"+( x )+" "+( y -radius)+"L"+(y) + " " + ( y+radius )).attr("stroke","cyan"),
        task.crosshairpaper.circle(x,y,radius).attr("stroke","cyan")

    );
    
    // On mousemove update the position of the crosshair
     $('svg').mousemove(function(e){  
         if (!pause) {
          task.set.remove()
    
          var LineXPos = Math.floor(e.pageX-posX);
          var LineYPos = Math.floor(e.pageY-posY);
          
          task.set.push(
          task.crosshairpaper.path("M"+( LineXPos-radius)+" "+( LineYPos )+"L"+(LineXPos+radius) + " " + LineYPos).attr("stroke","cyan"),
          task.crosshairpaper.path("M"+( LineXPos )+" "+( LineYPos-radius)+"L"+(LineXPos) + " " + ( LineYPos+radius )).attr("stroke","cyan"),

          task.crosshairpaper.circle(LineXPos,LineYPos,radius).attr("stroke","cyan")
          );
          task.mol_x = Math.floor(e.pageX-posX);
          task.mol_y = Math.floor(e.pageY-posY);
          $("#molecule-x").text(task.mol_x);
          $("#molecule-y").text(task.mol_y);
          task.set.transform("r"+ task.degrees + " " + task.mol_x + " " + task.mol_y);
        } else {
        
            if(!pauseAngle){
                X = parseInt($("#molecule-x").text());
                Y = parseInt($("#molecule-y").text());
                
                task.degrees  = Raphael.angle((e.pageX-posX), (e.pageY-posY),X,Y);
                task.set.transform("r" + task.degrees + " " + X + " " + Y);
                $('svg').attr("cursor","move"); 
                $("#rotation").text(parseInt(task.degrees,10)+"°");
            }else{
               $('svg').attr("cursor","default");
            }
         }
        });

    // On Click, stop the position and allow the rotation of the crosshair
     $('svg').click(function(e){
        $("#molecule-x").text(Math.floor(e.pageX-posX));
        $("#molecule-y").text(Math.floor(e.pageY-posY));
        
        // Check if the user has placed the crosshair whithin the BBOX
        if (!Raphael.isPointInsideBBox(task.rect.getBBox(), e.pageX-posX, e.pageY-posY) && (!pause)) {
            $("#bboxWarning").modal('show');
        }
        else {
            if (!pause) {
                pause = true;
            }
            else {
                if(!pauseAngle){
                    pauseAngle= true;
                }
                else{
                    pause = false;
                }
            }

            $("#rotation-box").show();
            $("#answer").show();
            $("#decreaseDegreesBtn").tooltip({'trigger': 'manual', 'placement': 'right'});
            $("#decreaseDegreesBtn").tooltip('show');
            $("#decreaseDegreesBtn").bind('hover',function(){
                $("#decreaseDegreesBtn").tooltip('hide');
            });

            task.degrees = parseInt($("#rotation").text(),10);
        }
      });
}


function loadUserProgress() {
    pybossa.userProgress(appname).done(function(data){
        var pct = Math.round((data.done*100)/data.total);
        $("#progress").css("width", pct.toString() +"%");
        $("#progress").attr("title", pct.toString() + "% completed!");
        $("#progress").tooltip({'placement': 'bottom'}); 
        $("#total").text(data.total);
        $("#done").text(data.done);
    });
}

pybossa.taskLoaded(function(task, deferred){
    if ( !$.isEmptyObject(task) ) {
        var img = $("<img/>");
        img.load(function(){
            deferred.resolve(task);
        });
        img.attr("src", task.info.url_photo);
        task.img = img;
        task.degrees = 0;
        task.mol_x = 0;
        task.mol_y = 0;
        task.rect;
        task.crosshairpaper;
        task.set;

    }
    else {
        deferred.resolve(task);
    }
});

pybossa.presentTask(function(task, deferred){
    if ( !$.isEmptyObject(task) ) {
        if (task.state=='completed') {
            $('#answer').hide();
            $('#disqus_thread').hide();
            $('#taskcompleted').show();
        }
        loadUserProgress();
        $("#question h2").text(task.info.question);
        $("#task-id").text(task.id);
        if (task.info.img_height != null) {
            $("#img_size").text(task.info.img_width + "x" + task.info.img_height + " nano meters");
        }
        else {
            $("#img_size").hide();
            $("#img_size_p").hide();
        }

        $("#photo-link").html('').append(task.img);
        $("#photo-link").attr("href", task.info.url_photo);

        var bboxpaper = Raphael(document.getElementById('layer2'), 512, 512);

        // This should be uncommented when we clear out the data format of bbox
        //for(i=0;i<task.info.bbox.length;i++) {
        for(i=0;i<1;i++) {
            task.rect = bboxpaper.rect(task.info.bbox[i].x,task.info.bbox[i].y,task.info.bbox[i].width,task.info.bbox[i].height);
            
            // Sets the stroke attribute of the rect
            task.rect.attr("stroke", "white");
        }

        // load the CrossHair
        posX = $("#layer3").offset().left;
        posY = $("#layer3").offset().top;
        // 10% smaller than bbox width
        var diameter= Math.floor( (task.info.bbox[0].width*90)/100 );
        initializeCrosshair(task, "layer3", $("#layer3").offset().left,$("#layer3").offset().top,512,diameter);
        $("#decreaseDegreesBtn").off('click').on('click', function(){decreaseDegrees(task);});
        $("#increaseDegreesBtn").off('click').on('click', function(){increaseDegrees(task);});


        // Configure the action for submiting the answer
        $(".btn-submit").off('click').on('click', function(){
            // Get coordinates:
            var answer = {"photo": task.info.url_photo, "molecule_label": task.info.molecule_label, "x": task.mol_x, "y": task.mol_y, "angle": task.degrees}
            // Save the task
            pybossa.saveTask(task.id, answer).done( function( data ) {
                $("#success").fadeIn();
                console.log(task);
                console.log(answer);
                setTimeout(function() { $("#success").fadeOut() }, 2000);
                deferred.resolve();
            });
        });
    }
    else {
        $(".skeleton").hide();
        $("#finish").fadeIn();
    }
});

pybossa.run(appname);
</script>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-35399028-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>