Add masking image

app/static/js/canvas.js

@@ -7,12 +7,7 @@ $(document).ready(function() {
     try {
         var canvas = $("#embody-canvas")
         var context = document.getElementById("embody-canvas").getContext("2d");
-
-        // Base image
         var img = document.getElementById("baseImage");
-
-        console.log(img)
-        console.log(canvas)
     } catch (e) {
         console.log(e)
         if (e instanceof TypeError) {
@@ -59,6 +54,7 @@ $(document).ready(function() {
 
     // TODO: changing drawradius doesnt affect to the saved datapoints !!!
     // Bigger brush should make more datapoints compared to smaller ones.
+    // add brush size to click arry -> {x:[...], y:[...], size:[...]} ?? 
     $(".canvas-container").bind('DOMMouseScroll',function(event) {
         //event.preventDefault()
 
@@ -128,7 +124,6 @@ $(document).ready(function() {
     }
 
     function redraw(){
-
         /* 
         Check:
         https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
@@ -152,28 +147,10 @@ $(document).ready(function() {
 
         // Draw circle with gradient
         drawPoint(lastX, lastY, drawRadius)
+        drawMaskToBaseImage()
 
-        /*
-        OLD version, where line is drawn continuously (not needed probably)
-
-        for(var i=0; i < clickX.length; i++) {		
-
-            context.beginPath();
-
-            if (clickDrag[i] && i) { 
-                context.moveTo(clickX[i-1], clickY[i-1]);
-            } else {
-                context.moveTo(clickX[i]-1, clickY[i]);
-            }
-
-            context.lineTo(clickX[i], clickY[i]);
-            context.closePath();
-            context.stroke();
-        }
-        */
     }
 
-    // This is not needed, because canvas dont allow to draw on white points (mask points)
     function drawMaskToBaseImage()
     {
         var img = document.getElementById("baseImageMask");
@@ -212,12 +189,8 @@ $(document).ready(function() {
         }
 
         points = JSON.stringify(points)
-
-        console.log(points)
-
         $("#canvas-data").val(points);
         $("#canvas-form").submit();
-
     }
 
     drawBaseImage()

app/task/views.py

@@ -72,8 +72,6 @@ def update_answer_set_type(answer_type):
     the_time = datetime.now()
     the_time = the_time.replace(microsecond=0)
 
-    print("UPDATE TYPE")
-
     updated_answer_set = answer_set.query.filter_by(idanswer_set=session['answer_set']).first()
     updated_answer_set.answer_type = answer_type
     updated_answer_set.last_answer_time = the_time
@@ -86,9 +84,6 @@ def select_form_type():
     form = None
     answer_set_type = answer_set.query.filter_by(idanswer_set=session['answer_set']).first().answer_type
 
-    print(session['answer_set'])
-    print(answer_set_type)
-
     if answer_set_type == 'slider':
         form = TaskForm()
 
@@ -148,8 +143,6 @@ def slider_on():
     experiment_info = get_experiment_info()
     questions = question.query.filter_by(experiment_idexperiment=experiment_info.idexperiment).all()
 
-    print(questions)
-
     if len(questions) == 0:
         return False
     return True
@@ -184,7 +177,6 @@ def task_embody(page_num):
 
     # Check if there are unanswered slider questions -> if true redirect to same page
     if slider_on():
-        print("SLIDER ON")
         update_answer_set_type('slider')
         return redirect( url_for('task.task', page_num=page_num))
 
@@ -245,17 +237,6 @@ def task(page_num):
         randomized_page_id = get_randomized_page(page_id).randomized_idpage
         randomized_stimulus = page.query.filter_by(idpage=randomized_page_id).first()
         
-    # OLD
-    for p in pages.items:
-        #session['current_idpage'] = p.idpage
-        print('p.idpage -loop:', p.idpage)
-
-
-
-    # TODO: if no form found -> go to next page
-
-    # TODO: check if embody ON and no answer
-
     return render_template(
         'task.html', 
         pages=pages,