Skip to content
GitLab
Commit f8d9a884 authored by Ossi Laine's avatar Ossi Laine
Browse files

Clear and save -methods for canvas

parent 5784ec04
Hide whitespace changes
Inline Side-by-side
app/experiment/views.py
View file @ f8d9a884
......@@ -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)
......
app/static/css/main.css
View file @ f8d9a884
......@@ -18,4 +18,8 @@ body {
margin: 0 auto;
margin-bottom: 30px;
}
.clear-button {
margin:10px;
}
\ No newline at end of file
app/static/js/canvas.js
View file @ f8d9a884
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
app/task/templates/task.html
View file @ f8d9a884
......@@ -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>
......
app/task/views.py
View file @ f8d9a884
......@@ -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
......
create_rating_db.txt deleted 100644 → 0
View file @ 5784ec04
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);
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment