template.html

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.5.min.js"></script>
<style>
    #canvas {
        cursor: crosshair;
    }
</style>
<div class="row">
    <!-- Success and Error Messages for the user --> 
    <div class="span6 offset2" 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
        </div>
        <div id="loading" class="alert alert-info" style="display:none;">
            <a class="close">×</a>
            Loading next task...
        </div>
        <div id="taskcompleted" class="alert alert-info" style="display:none;">
            <strong>The task has been completed!</strong> Thanks a lot!
        </div>
        <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>
        <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>
    </div> <!-- End Success and Error Messages for the user -->
</div> <!-- End of Row -->

<!--
    Task DOM for loading the Flickr Images
    It uses the class="skeleton" to identify the elements that belong to the
    task.
-->

<div class="row skeleton"> <!-- Start Skeleton Row-->
    <div class="span6 "><!-- Start of Question and Submission DIV (column) -->
        <h1 id="question">Question</h1> <!-- The question will be loaded here -->


        <div > <!-- Start DIV for the control buttons -->
        <button id="play-pause" class="btn btn-large btn-success btn-control" value='play-pause'><i class="icon-pause"></i> Pause</button>
        </div> <!-- Start DIV for the control buttons -->
        <div id="controls" class="btn-group" style="margin-top:5px;"> <!-- Start DIV for the control buttons -->
            <button class="btn btn-control" value='frame_bkw'><i class="icon-minus"></i> Decrease speed</button>
            <button class="btn btn-control" value='frame_fwd'><i class="icon-plus"></i> Increase speed</button>
            <button class="btn btn-control" value='frame_reset'><i class="icon-plus"></i> Reset speed</button>
        </div> <!-- Start DIV for the control buttons -->
        <br/> 
        <p class="lead"> You have found  <span id="number-of-tracks" class="badge badge-info">0</span> tracks
        </p> 
        <button class="btn btn-answer" value='save'><i class="icon-save"></i> Save drawn tracks</button>
        <!-- Feedback items for the user -->
        <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
        <!-- Progress bar for the user -->
        <span id="total" class="label label-inverse"></span></p>
        <div class="progress progress-striped">
            <div id="progress" rel="tooltip" title="#" class="bar" style="width: 0%;"></div>
        </div>
        <!-- 
            This application uses Disqus to allow users to provide some feedback.
            The next section includes a button that when a user clicks on it will
            load the comments, if any, for the given task
        -->
        <div id="disqus_show_btn" style="margin-top:5px;">
            <button class="btn btn-primary btn-large btn-disqus" onclick="loadDisqus()"><i class="icon-comments"></i> Show comments</button>
            <button class="btn btn-large btn-disqus" onclick="loadDisqus()" style="display:none"><i class="icon-comments"></i> Hide comments</button>
        </div><!-- End of Disqus Button section -->
        <!-- Disqus thread for the given task -->
        <div id="disqus_thread" style="margin-top:5px;display:none"></div>
    </div><!-- End of Question and Submission DIV (column) -->
    <div class="span6"><!-- Start of Photo DIV (column) -->
        <div id="canvas"></div>
    </div><!-- End of Photo DIV (columnt) -->
</div><!-- End of Skeleton Row -->

<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */

    /* * * DON'T EDIT BELOW THIS LINE * * */
    function loadDisqus() {
    $("#disqus_thread").toggle();
    $(".btn-disqus").toggle();
    var disqus_shortname = 'pybossa'; // required: replace example with your forum shortname
    //var disqus_identifier = taskId;
    var disqus_developer = 1;

    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
    }

</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

<script>

var colors = ['rgb(31,119,180)', 'rgb(255,127,14)', 'rgb(44,160,44)', 'rgb(214,39,40)',
              'rgb(148,103,189)', 'rgb(227,119,194)', 'rgb(188,189,34)', 'rgb(23,190, 207)',
              'rgb(199,233,192)'
             ];

var colorIndex = 0;

function loadUserProgress() {
    pybossa.userProgress('antimatter').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': 'left'}); 
        $("#total").text(data.total);
        $("#done").text(data.done);
    });
}

pybossa.taskLoaded(function(task, deferred) {
    if ( !$.isEmptyObject(task) ) {
        task.period = 20;
        task.maxPictures = 40;
        task.minPictures = 0;
        task.currentTrack = {entry:{x:-1,y:-1,z:0}, exit:{x:-1,y:-1,z:40}};
        task.tracks = [];
        deferred.resolve(task);
    }
    else {
        deferred.resolve(task);
    }
});

function getNewAnimation(task) {
    var frameCounter = 0;
    var anim = new Kinetic.Animation(function(frameObj) {
        if (frameCounter/task.period < task.maxPictures) {
            if (frameCounter === 0 || frameCounter % task.period === 0) {
                var imageIndex = frameCounter === 0 ? 0 : frameCounter/task.period;
                var normalizedIndex = (imageIndex < 10) ? "0" + imageIndex : imageIndex;
                task.imageObj.src = task.info.url + normalizedIndex + '.jpg';
            }
        }
        else {
            frameCounter = 0;
        }
        frameCounter++;
    }, task.layer);
    return anim;
}


function goToFrame(task, frameNumber) {
     if (frameNumber > task.maxPictures || frameNumber < task.minPictures)
         return;
     var normalizedIndex = (frameNumber < 10) ? "0" + frameNumber : frameNumber;
     task.imageObj.src = task.info.url + normalizedIndex + '.jpg';
     task.layer.draw();
}

function unscale(track, width, height) {
    track.entry.x = Math.floor((track.entry.x * 1240)/width);
    track.entry.y = Math.floor((track.entry.y * 1024)/height);
    track.exit.x = Math.floor((track.exit.x * 1240)/width);
    track.exit.y = Math.floor((track.exit.y * 1024)/height);
    return track;
}


pybossa.presentTask(function(task, deferred) {
    if ( !$.isEmptyObject(task) ) {
        loadUserProgress();
        // KINECT
        var width =  460;
        var height = Math.floor(width / 1.21); 
        task.stage = new Kinetic.Stage({
          container: 'canvas',
          width: width,
          height: height 
        });

        task.layer = new Kinetic.Layer();

        task.imageObj = new Image();
        var image = new Kinetic.Image({
            x: 0,
            y: 0,
            image: task.imageObj,
            width: width,
            height: height
        });

        image.on('mousedown', function () {
            var mousePos = task.stage.getMousePosition();
            var circle = new Kinetic.Circle({
                x: mousePos.x,
                y: mousePos.y,
                radius: 2,
                fill: colors[colorIndex],
                stroke: colors[colorIndex],
                strokeWidth: 4
            });
            if (task.currentTrack.entry.x == -1) {
                task.currentTrack.entry.x = mousePos.x;
                task.currentTrack.entry.y = mousePos.y;
            }
            else {
                if (task.currentTrack.exit.x == -1) {
                    task.currentTrack.exit.x = mousePos.x;
                    task.currentTrack.exit.y = mousePos.y;
                }
            }
            if ((task.currentTrack.entry.x != -1) && (task.currentTrack.exit.y != -1)){
                var newTrack = $.extend(true, {}, task.currentTrack);

                // Draw a line showing the track with the same color
                var line = new Kinetic.Line({
                    points: [[newTrack.entry.x, newTrack.entry.y],[newTrack.exit.x, newTrack.exit.y]],
                    stroke: colors[colorIndex],
                    });
                task.layer.add(line);
                // Unscale the points to save them with the real picture size
                newTrack = unscale(newTrack, $("#canvas").width(),$("#canvas").height());
                task.tracks.push(newTrack);
                $("#number-of-tracks").text(task.tracks.length);
                task.currentTrack.entry.x = -1;
                task.currentTrack.entry.y = -1;
                task.currentTrack.exit.x = -1;
                task.currentTrack.exit.y = -1;
                if (colorIndex < colors.length) {
                    colorIndex += 1;
                }
                else {
                    colorIndex = 0;
                }
            }

            task.layer.add(circle);
           task.layer.draw();
        });
        task.imageObj.src = task.info.url + "00.jpg";

        // add the shape to the layer
        task.layer.add(image);

        // add the layer to the stage
        task.stage.add(task.layer);
         
        task.currentAnimation = getNewAnimation(task);
        task.currentAnimation.start();

        $('.btn-control').off('click').on('click', function(evt) {
            var action = $(evt.target).attr("value");
            if (action == 'frame_fwd') {
                if (task.period > 0 ){
                task.period -= 1;
                }
            }

            if (action == 'frame_bkw') {
                if (task.period < 60 ){
                task.period += 1;
                }
            }

            if (action == 'frame_reset') {
                task.period += 20;
            }


            if (action == 'play-pause') {
                if (task.currentAnimation.isRunning()) {
                    task.currentAnimation.stop();
                    $("#play-pause").html('<i class="icon-play"></i> Play');
                }
                else {
                    task.currentAnimation.start();
                    $("#play-pause").html('<i class="icon-pause"></i> Pause');
                }
            }
        });


        $('.btn-track-control').off('click').on('click', function(evt) {
            var action = $(evt.target).attr("value");
            if (action == 'add') {
                console.log(action);
            }
        });

        $("#question").html(task.info.question);
        $('#task-id').html(task.id);
        $('.btn-answer').off('click').on('click', function(evt) {
            var answer = $(evt.target).attr("value");
            if (answer == 'save') {
                console.log(task.tracks);
                pybossa.saveTask(task.id, task.tracks).done(function() {
                    deferred.resolve();
                });
                $("#loading").fadeIn(500);
                if ($("#disqus_thread").is(":visible")) {
                    $('#disqus_thread').toggle();
                    $('.btn-disqus').toggle();
                }
            }
            else {
                $("#error").show();
            }
        });
        $("#loading").hide();
    }
    else {
        $(".skeleton").hide();
        $("#loading").hide();
        $("#finish").fadeIn(500);
    }
});

pybossa.run('antimatter');
</script>