diff --git a/app/experiment/views.py b/app/experiment/views.py
index d297abf805d79b5339cfde9f04cab73017747517..c0283881e1c9bec3db5372282b152dc54fe62cae 100644
--- a/app/experiment/views.py
+++ b/app/experiment/views.py
@@ -306,7 +306,7 @@ def view_forced_id_list():
db.session.add(input_id)
db.session.commit()
- return redirect(url_for('view_forced_id_list', exp_id=exp_id))
+ return redirect(url_for('experiment.view_forced_id_list', exp_id=exp_id))
return render_template('view_forced_id_list.html', exp_id=exp_id, id_list=id_list)
diff --git a/app/static/css/main.css b/app/static/css/main.css
index efc6260167dc9116c0c496392121b096c60de2b6..3efaa8adf059cc6b9d5ef51d38dac232161f8e5a 100644
--- a/app/static/css/main.css
+++ b/app/static/css/main.css
@@ -18,4 +18,8 @@ body {
margin: 0 auto;
margin-bottom: 30px;
+}
+
+.clear-button {
+ margin:10px;
}
\ No newline at end of file
diff --git a/app/static/js/canvas.js b/app/static/js/canvas.js
index b01079b689e86ab982cdc03245ffa2697596bf6a..7b084dd5b1051a443860b170aaf3eb24f8c3e4dc 100644
--- a/app/static/js/canvas.js
+++ b/app/static/js/canvas.js
@@ -1,24 +1,49 @@
+const url = 'http://127.0.0.1:8000/';
+
$(document).ready(function()Â {
+ try {
+ var canvas = $("#embody-canvas")
+ var context = document.getElementById("embody-canvas").getContext("2d");
- $("#canvas-data").val("hello world");
- 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) {
+ return
+ }
+ }
+
+ // Init draw variables
+ var clickX = new Array();
+ var clickY = new Array();
+ var clickDrag = new Array();
+ var paint;
+ var drawRadius=15;
+
+ // Click handlers
canvas.mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
-
paint = true;
- addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
- redraw();
+
+ if (pointInsideBaseImage([mouseX, mouseY])) {
+ addClick(mouseX, mouseY);
+ redraw();
+ }
});
canvas.mousemove(function(e){
- if(paint){
- addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
+ var mouseX = e.pageX - this.offsetLeft;
+ var mouseY = e.pageY - this.offsetTop;
+ if(paint && pointInsideBaseImage([mouseX, mouseY])){
+ addClick(mouseX, mouseY, true);
redraw();
}
});
@@ -31,16 +56,10 @@ $(document).ready(function()Â {
paint = false;
});
- var clickX = new Array();
- var clickY = new Array();
- var clickDrag = new Array();
- var paint;
- var drawRadius=15;
-
// TODO: changing drawradius doesnt affect to the saved datapoints !!!
// Bigger brush should make more datapoints compared to smaller ones.
$(".canvas-container").bind('DOMMouseScroll',function(event) {
- event.preventDefault()
+ //event.preventDefault()
// Change brush size
if (event.originalEvent.detail >= 0){
@@ -63,13 +82,20 @@ $(document).ready(function()Â {
}
})
- function addClick(x, y, dragging)
+ $(".clear-button").on('click', function() {
+ clearCanvas()
+ })
+
+ $(".next-page").click(function() {
+ saveData()
+ })
+
+
+ // Draw methods
+ function addClick(x, y, dragging=false)
{
clickX.push(x);
clickY.push(y);
-
- // ClickDrag array is unnecessary beacause all the coordinates are saved to
- // X & Y -arrays
clickDrag.push(dragging);
}
@@ -79,6 +105,26 @@ $(document).ready(function()Â {
context.fill()
}
+ function isWhite(color) {
+ if (color === 255)
+ return true
+ return false
+ }
+
+ // Method for checking if cursor is inside human body before creating brush stroke
+ function pointInsideBaseImage(point) {
+ var imageData = context.getImageData(point[0], point[1],1,1)
+
+ startR = imageData.data[0];
+ startG = imageData.data[1];
+ startB = imageData.data[2];
+
+ if (isWhite(startB) && isWhite(startG) && isWhite(startR)) {
+ return false;
+ }
+
+ return true;
+ }
function redraw(){
@@ -105,13 +151,6 @@ $(document).ready(function()Â {
// Draw circle with gradient
drawPoint(lastX, lastY, drawRadius)
- /*
- drawPoint(lastX + 3, lastY, drawRadius)
- drawPoint(lastX - 3, lastY, drawRadius)
- drawPoint(lastX, lastY + 3, drawRadius)
- drawPoint(lastX, lastY - 3, drawRadius)
- */
- drawMaskToBaseImage()
/*
OLD version, where line is drawn continuously (not needed probably)
@@ -131,9 +170,9 @@ $(document).ready(function()Â {
context.stroke();
}
*/
-
}
+ // This is not needed, because canvas dont allow to draw on white points (mask points)
function drawMaskToBaseImage()
{
var img = document.getElementById("baseImageMask");
@@ -143,9 +182,8 @@ $(document).ready(function()Â {
function drawBaseImage()
{
- var img = document.getElementById("baseImage");
- var width = img.clientWidth;
- var height = img.clientHeight;
+ var width = img.width;
+ var height = img.height;
context.canvas.height = height
context.canvas.width = width
@@ -153,6 +191,34 @@ $(document).ready(function()Â {
img.classList.add("hidden")
}
+ function clearCanvas()Â {
+ // Clear canvas
+ img.classList.remove("hidden")
+ context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+ drawBaseImage()
+
+ // Remove saved coordinates
+ clickX = []
+ clickY = []
+ clickDrag = []
+ }
+
+ function saveData()Â {
+
+ var points = {
+ x: clickX,
+ y: clickY
+ }
+
+ points = JSON.stringify(points)
+
+ console.log(points)
+
+ $("#canvas-data").val(points);
+ $("#canvas-form").submit();
+
+ }
+
drawBaseImage()
});
\ No newline at end of file
diff --git a/app/task/templates/task.html b/app/task/templates/task.html
index 5ea8239dc57dd60a2da2bf4f5d226521649910fe..c2044d628e040707739186a4fea3d974f035078c 100644
--- a/app/task/templates/task.html
+++ b/app/task/templates/task.html
@@ -105,14 +105,18 @@
<img id="baseImage" class="" src={{ url_for('static', filename='img/dummy_600.png') }} />
<img id="baseImageMask" class="hidden" src={{ url_for('static', filename='img/dummy_600_mask.png') }} />
- <form class="form-group mt-5" action="/task/embody/{{ page_num }}" method="post">
+ <form id="canvas-form" class="form-group mt-5" action="/task/embody/{{ page_num }}" method="post">
- <input id="canvas-data" type="hidden" value="" name="text">
+ <input id="canvas-data" type="hidden" value="" name="coordinates">
+
+ <div class="row justify-content-md-center">
+ <button type="button" class="btn btn-primary clear-button">Clear</button>
+ </div>
<div class="form-row text-center">
- <div class="col-12">
+ <div class="centered col-12">
<a class="btn btn-primary" href={{ url_for('task.quit') }} role="button">{{ _('Quit task') }}</a>
- <button type="submit" class="btn btn-primary">{{ _('Next page') }}</button>
+ <button type="button" class="btn btn-primary next-page">{{ _('Next page') }}</button>
</div>
<div class="col-12">
<br>
diff --git a/app/task/views.py b/app/task/views.py
index 9b779454d8ff669ba26d615907780ce0eb3bc686..d4204417a0b63a79d4ac76b84288f21e91fabff6 100644
--- a/app/task/views.py
+++ b/app/task/views.py
@@ -2,6 +2,7 @@
import math
+import json
from datetime import datetime
from flask import (
@@ -95,9 +96,15 @@ def task_embody(page_num):
if form.validate():
data = request.form.to_dict()
- for key, value in data.items():
- print(key)
- print(value)
+
+ coordinates = json.loads(data['coordinates'])
+ print("x:",coordinates['x'])
+ print("y:",coordinates['y'])
+
+
+
+ # Test that everything OK
+ return json.dumps(coordinates)
# Check if there are unanswered slider questions
if slider_question_has_answers(session['user'], page_id):
@@ -265,7 +272,7 @@ def continue_task():
#If participant has done just the registration redirect to the first page of the experiment
if participant.answer_counter == 0:
#flash("Ei vastauksia ohjataan ekalle sivulle")
- return redirect( url_for('task', page_num=1))
+ return redirect( url_for('task.task', page_num=1))
redirect_to_page = participant.answer_counter + 1
diff --git a/create_rating_db.txt b/create_rating_db.txt
deleted file mode 100644
index 7d522481ad7afd6ba9d2f31d51ec7a22ae50d379..0000000000000000000000000000000000000000
--- a/create_rating_db.txt
+++ /dev/null
@@ -1,119 +0,0 @@
-CREATE TABLE background_question (
- idbackground_question INTEGER NOT NULL AUTO_INCREMENT,
- background_question VARCHAR(120),
- experiment_idexperiment INTEGER,
- PRIMARY KEY (idbackground_question)
-);
-CREATE TABLE experiment (
- idexperiment INTEGER NOT NULL AUTO_INCREMENT,
- name VARCHAR(120),
- instruction MEDIUMTEXT,
- directoryname VARCHAR(120),
- language VARCHAR(120),
- status VARCHAR(120),
- randomization VARCHAR(120),
- short_instruction MEDIUMTEXT,
- single_sentence_instruction MEDIUMTEXT,
- is_archived VARCHAR(120),
- creator_name VARCHAR(120),
- research_notification_filename VARCHAR(120),
- creation_time DATETIME,
- stimulus_size VARCHAR(120),
- consent_text MEDIUMTEXT,
- use_forced_id VARCHAR(120),
- PRIMARY KEY (idexperiment)
-);
-CREATE TABLE trial_randomization (
- idtrial_randomization INTEGER NOT NULL AUTO_INCREMENT,
- page_idpage INTEGER,
- randomized_idpage INTEGER,
- answer_set_idanswer_set INTEGER,
- experiment_idexperiment INTEGER,
- PRIMARY KEY (idtrial_randomization)
-);
-CREATE TABLE user (
- id INTEGER NOT NULL AUTO_INCREMENT,
- username VARCHAR(64),
- email VARCHAR(120),
- password_hash VARCHAR(128),
- PRIMARY KEY (id)
-);
-INSERT INTO user VALUES(1,'Yngwie',NULL,'pbkdf2:sha256:50000$QioS5ICE$17a468394e72aef1243576aa80d29c296c6482ada48be9d25bd7c3b6e8129b40');
-CREATE TABLE answer_set (
- idanswer_set INTEGER NOT NULL AUTO_INCREMENT,
- experiment_idexperiment INTEGER,
- session VARCHAR(120),
- agreement VARCHAR(120),
- answer_counter INTEGER,
- registration_time DATETIME,
- last_answer_time DATETIME,
- PRIMARY KEY (idanswer_set),
- FOREIGN KEY(experiment_idexperiment) REFERENCES experiment (idexperiment)
-);
-CREATE TABLE background_question_option (
- idbackground_question_option INTEGER NOT NULL AUTO_INCREMENT,
- background_question_idbackground_question INTEGER,
- option VARCHAR(120),
- PRIMARY KEY (idbackground_question_option),
- FOREIGN KEY(background_question_idbackground_question) REFERENCES background_question (idbackground_question)
-);
-CREATE TABLE forced_id (
- idforced_id INTEGER NOT NULL AUTO_INCREMENT,
- experiment_idexperiment INTEGER,
- pregenerated_id VARCHAR(120),
- PRIMARY KEY (idforced_id),
- FOREIGN KEY(experiment_idexperiment) REFERENCES experiment (idexperiment)
-);
-CREATE TABLE page (
- idpage INTEGER NOT NULL AUTO_INCREMENT,
- experiment_idexperiment INTEGER,
- type VARCHAR(120),
- text VARCHAR(120),
- media VARCHAR(120),
- PRIMARY KEY (idpage),
- FOREIGN KEY(experiment_idexperiment) REFERENCES experiment (idexperiment)
-);
-CREATE TABLE question (
- idquestion INTEGER NOT NULL AUTO_INCREMENT,
- experiment_idexperiment INTEGER,
- question VARCHAR(120),
- `left` VARCHAR(120),
- `right` VARCHAR(120),
- PRIMARY KEY (idquestion),
- FOREIGN KEY(experiment_idexperiment) REFERENCES experiment (idexperiment)
-);
-CREATE TABLE answer (
- idanswer INTEGER NOT NULL AUTO_INCREMENT,
- question_idquestion INTEGER,
- answer_set_idanswer_set INTEGER,
- answer VARCHAR(120),
- page_idpage INTEGER,
- PRIMARY KEY (idanswer),
- FOREIGN KEY(answer_set_idanswer_set) REFERENCES answer_set (idanswer_set),
- FOREIGN KEY(page_idpage) REFERENCES page (idpage),
- FOREIGN KEY(question_idquestion) REFERENCES question (idquestion)
-);
-CREATE TABLE background_question_answer (
- idbackground_question_answer INTEGER NOT NULL AUTO_INCREMENT,
- answer_set_idanswer_set INTEGER,
- answer VARCHAR(120),
- background_question_idbackground_question INTEGER,
- PRIMARY KEY (idbackground_question_answer),
- FOREIGN KEY(answer_set_idanswer_set) REFERENCES answer_set (idanswer_set),
- FOREIGN KEY(background_question_idbackground_question) REFERENCES background_question (idbackground_question)
-);
-CREATE INDEX ix_experiment_consent_text ON experiment (consent_text);
-CREATE INDEX ix_experiment_creation_time ON experiment (creation_time);
-CREATE UNIQUE INDEX ix_experiment_directoryname ON experiment (directoryname);
-CREATE INDEX ix_experiment_instruction ON experiment (instruction);
-CREATE INDEX ix_experiment_name ON experiment (name);
-CREATE INDEX ix_experiment_short_instruction ON experiment (short_instruction);
-CREATE INDEX ix_experiment_single_sentence_instruction ON experiment (single_sentence_instruction);
-CREATE UNIQUE INDEX ix_user_email ON user (email);
-CREATE UNIQUE INDEX ix_user_username ON user (username);
-CREATE INDEX ix_answer_set_last_answer_time ON answer_set (last_answer_time);
-CREATE INDEX ix_answer_set_registration_time ON answer_set (registration_time);
-CREATE INDEX ix_page_media ON page (media);
-CREATE INDEX ix_page_text ON page (text);
-CREATE INDEX ix_page_type ON page (type);
-