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

Rearrange embody coloring image right to the stimulus

parent 108ee594
Hide whitespace changes
Inline Side-by-side
app/experiment/templates/add_embody.html
View file @ 3caef327
......@@ -3,8 +3,7 @@
<h1 class="container mt-5 display-4 text-center"><br>Add new embody picture:</h1>
<br>
<p class="lead">
Upload new embody image... instructions here for admins..
<p class="lead"> Upload new embody image. Submit without choosing file if you want to use default embody picture.
</p>
{% from "_formhelpers.html" import render_field %}
......@@ -12,8 +11,8 @@ Upload new embody image... instructions here for admins..
<form method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="Background questions">image question/explanation:</label>
<textarea class="form-control" rows="5" id="embody_picture_text" name="question"></textarea>
<label for="Background questions">Image question/explanation:</label>
<textarea class="form-control" rows="5" id="embody_picture_text" name="question">Color the regions whose activity you feel increasing or getting stronger</textarea>
</div>
<div class="custom-file">
......@@ -23,7 +22,7 @@ Upload new embody image... instructions here for admins..
<hr>
<button type="submit" class="btn btn-primary submit-file" disabled>Submit</button>
<button type="submit" class="btn btn-primary">Submit</button>
<a class="btn btn-primary" href="{{ request.referrer }}" role="button">Cancel</a>
</form>
......
app/experiment/templates/view_experiment.html
View file @ 3caef327
......@@ -211,7 +211,6 @@
</table>
<h1 class="container mt-5 display-4 text-left"><br>Add embody tool:</h1>
<table class="table">
......@@ -231,15 +230,13 @@
{% endif %}
</td>
<td>
<a class="btn btn-primary btn-block btn-sm btn-info" href="{{ url_for('experiment.add_embody', exp_id=exp_id, default=true) }}" role="button">Add default</a>
<a class="btn btn-primary btn-block btn-sm btn-info" href="{{ url_for('experiment.add_embody', exp_id=exp_id) }}" role="button">Add new picture</a>
</td>
</tr>
{% for embody_picture in embody_pictures %}
<tr>
<td>ID: {{ embody_picture.idembody }} <br> {{ embody_picture.question }}</td>
<td>ID: {{ embody_picture.idembody }} <br> {{ embody_picture.question }}</td>
<td><img src="{{ embody_picture.picture }}" class="thumbnail" /></td>
<td><a class="btn btn-primary btn-block btn-sm btn-dark" href="{{ url_for('experiment.remove_embody', exp_id=exp_id, idembody=embody_picture.idembody) }}" role="button">Remove</a></td>
</tr>
......
app/experiment/views.py
View file @ 3caef327
......@@ -566,17 +566,6 @@ def add_embody():
if exp_info.status != 'Hidden':
flash("Experiment is public. Cannot modify structure.")
return redirect(url_for('experiment.view', exp_id=exp_id))
elif default:
# TODO: check if default image already added
default_embody = embody_question(
experiment_idexperiment=exp_id, picture=DEFAULT_EMBODY_PICTURE, question=DEFAULT_EMBODY_QUESTION)
db.session.add(default_embody)
exp_info.embody_enabled = 1
db.session.commit()
return redirect(url_for('experiment.view', exp_id=exp_id))
else:
form = CreateEmbodyForm(request.form)
......@@ -584,6 +573,14 @@ def add_embody():
picture = request.files.get("picture")
question = request.form.get("question")
if not picture:
default_embody = embody_question(
experiment_idexperiment=exp_id, picture=DEFAULT_EMBODY_PICTURE, question=question)
db.session.add(default_embody)
exp_info.embody_enabled = 1
db.session.commit()
return redirect(url_for('experiment.view', exp_id=exp_id))
# get filename
filename = secure_filename(picture.filename)
path = 'static/embody_images/' + str(exp_id)
......
app/static/css/custom.css deleted 100644 → 0
View file @ 108ee594
body{
background-color: #000000;
}
\ No newline at end of file
app/static/css/main.css
View file @ 3caef327
......@@ -77,6 +77,11 @@ body {
}
.stimulus img {
height: 100%;
object-fit: contain;
}
#export-link-container {
margin-top: 20px;
......
app/static/js/canvas.js
View file @ 3caef327
......@@ -59,8 +59,14 @@ $(document).ready(function() {
// Click handlers
canvas.mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
//var mouseX = e.pageX - this.offsetLeft;
//var mouseY = e.pageY - this.offsetTop;
var parentOffset = $(this).offset();
var mouseX = e.pageX - parentOffset.left;
var mouseY = e.pageY - parentOffset.top;
paint = true;
if (pointInsideBaseImage([mouseX, mouseY])) {
......@@ -70,8 +76,10 @@ $(document).ready(function() {
});
canvas.mousemove(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
var parentOffset = $(this).offset();
var mouseX = e.pageX - parentOffset.left;
var mouseY = e.pageY - parentOffset.top;
if (paint && pointInsideBaseImage([mouseX, mouseY])){
addClick(mouseX, mouseY, true);
......@@ -81,8 +89,13 @@ $(document).ready(function() {
canvas.bind('touchmove', function(e){
e.preventDefault()
var mouseX = e.touches[0].pageX - this.offsetLeft;
var mouseY = e.touches[0].pageY - this.offsetTop;
//var mouseX = e.touches[0].pageX - this.offsetLeft;
//var mouseY = e.touches[0].pageY - this.offsetTop;
var parentOffset = $(this).offset();
var mouseX = e.touches[0].pageX - parentOffset.left;
var mouseY = e.touches[0].pageY - parentOffset.top;
[mouseX, mouseY] = scaleClickCoordinates($(this)[0], mouseX, mouseY)
......@@ -94,8 +107,11 @@ $(document).ready(function() {
canvas.bind('touchstart', function(e){
e.preventDefault()
var mouseX = e.touches[0].pageX - this.offsetLeft;
var mouseY = e.touches[0].pageY - this.offsetTop;
var parentOffset = $(this).offset();
var mouseX = e.touches[0].pageX - parentOffset.left;
var mouseY = e.touches[0].pageY - parentOffset.top;
paint = true;
[mouseX, mouseY] = scaleClickCoordinates($(this)[0], mouseX, mouseY)
......
app/task/templates/task.html
View file @ 3caef327
{% extends "base.html" %}
{% block content %}
<br>
{% if session['randomization']=='Off' %}
<div class="container stimulus">
<div class="row justify-content-center">
{% if session['type']=='text' %}
<div class="container text-center mt-5 pt-5">
{% for page in pages.items %}
<h{{ stimulus_size_text }} class="text-center mt-5"><br>{{ page.text }}</h{{ stimulus_size_text }}>
{% endfor %}
</div>
<br><br>
{% endif %}
{% if session['type']=='picture' %}
<div class="container stimulus col-{{stimulus_size}} mt-5 pt-5">
{% for page in pages.items %}
<img src="/{{ page.media }}" class="img-fluid">
{% endfor %}
</div>
{% endif %}
{% if session['type']=='video' %}
<div class="col-{{stimulus_size}} container stimulus mt-5 pt-5">
{% for page in pages.items %}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="/{{ page.media }}" allowfullscreen></iframe>
</div>
{% endfor %}
</div>
{% endif %}
{% if session['randomization']=='Off' %}
{% if session['type']=='audio' %}
<div class="col-{{stimulus_size}} container stimulus mt-5 pt-5">
{% for page in pages.items %}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="/{{ page.media }}" allowfullscreen></iframe>
</div>
{% endfor %}
</div>
{% endif %}
{% if session['type']=='text' %}
<div class="container text-center mt-5 pt-5">
{% for page in pages.items %}
<h{{ stimulus_size_text }} class="text-center mt-5"><br>{{ page.text }}</h{{ stimulus_size_text }}>
{% endfor %}
</div>
<br><br>
{% endif %}
{% if session['type']=='picture' %}
<div class="stimulus col-{{stimulus_size}} mt-5 pt-5">
{% for page in pages.items %}
<img src="/{{ page.media }}" class="img-fluid">
{% endfor %}
</div>
{% endif %}
{% if session['type']=='video' %}
<div class="col-{{stimulus_size}} container stimulus mt-5 pt-5">
{% for page in pages.items %}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="/{{ page.media }}" allowfullscreen></iframe>
</div>
{% endfor %}
</div>
{% endif %}
{% if session['type']=='audio' %}
<div class="col-{{stimulus_size}} container stimulus mt-5 pt-5">
{% for page in pages.items %}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="/{{ page.media }}" allowfullscreen></iframe>
</div>
{% endfor %}
</div>
{% endif %}
{% else %}
{% else %}
{% if session['type']=='text' %}
<div class="container text-center mt-5 pt-5">
{% for page in pages.items %}
<h{{ stimulus_size_text }} class="text-center mt-5"><br>{{ randomized_stimulus.text }}</h{{ stimulus_size_text }}>
{% endfor %}
</div>
<br><br>
{% endif %}
{% if session['type']=='picture' %}
<div class="container stimulus col-{{stimulus_size}} mt-5 pt-5">
{% for page in pages.items %}
<img src="/{{ randomized_stimulus.media }}" class="img-fluid">
{% endfor %}
</div>
{% endif %}
{% if session['type']=='video' %}
<div class="col-{{stimulus_size}} container stimulus mt-5 pt-5">
{% for page in pages.items %}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="/{{ randomized_stimulus.media }}" allowfullscreen></iframe>
</div>
{% endfor %}
</div>
{% endif %}
{% if session['type']=='text' %}
<div class="container text-center mt-5 pt-5">
{% for page in pages.items %}
<h{{ stimulus_size_text }} class="text-center mt-5"><br>{{ randomized_stimulus.text }}</h{{ stimulus_size_text }}>
{% endfor %}
</div>
<br><br>
{% endif %}
{% if session['type']=='picture' %}
<div class="stimulus col-{{stimulus_size}} mt-5 pt-5">
{% for page in pages.items %}
<img src="/{{ randomized_stimulus.media }}" class="img-fluid">
{% endfor %}
</div>
{% endif %}
{% if session['type']=='video' %}
<div class="col-{{stimulus_size}} container stimulus mt-5 pt-5">
{% for page in pages.items %}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="/{{ randomized_stimulus.media }}" allowfullscreen></iframe>
</div>
{% endfor %}
</div>
{% endif %}
{% if session['type']=='audio' %}
<div class="col-{{stimulus_size}} container stimulus mt-5 pt-5">
{% for page in pages.items %}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="/{{ randomized_stimulus.media }}" allowfullscreen></iframe>
</div>
{% endfor %}
</div>
{% endif %}
{% if session['type']=='audio' %}
<div class="col-{{stimulus_size}} container stimulus mt-5 pt-5">
{% for page in pages.items %}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="/{{ randomized_stimulus.media }}" allowfullscreen></iframe>
</div>
{% endfor %}
</div>
{% endif %}
{% endif %}
<br>
<h4 class="text-center">{{ rating_instruction }}</h4>
{% if form.__name__ == 'embody' %}
<div class="col-4 mt-5 pt-5">
<div class="canvas-container">
<span class="canvas-info"></span>
<canvas id="embody-canvas" class="crosshair" width="20" height="20" ></canvas>
</div>
<!-- Select form type -->
{% for embody_question in embody_questions %}
<img id="idembody-{{embody_question.idembody}}" class="embody-image {% if loop.last %}last-embody{% endif %} {% if loop.index != 1 %}hidden{% else %}selected-embody{% endif %}" src={{ embody_question.picture }} />
{% endfor %}
{% for embody_question in embody_questions %}
<p id="idquestion-{{ embody_question.idembody }}" class="embody-question {% if loop.index != 1 %}hidden{% else %}selected-embody{% endif %}"> {{ embody_question.question }}</p>
{% endfor %}
{% if form.__name__ == 'embody' %}
<img id="baseImageMask" class="hidden" src={{ url_for('static', filename='img/dummy_600_mask.png') }} />
<div class="canvas-container">
<span class="canvas-info"></span>
<canvas id="embody-canvas" class="crosshair" width="20" height="20" style="border: 1px solid blue;" ></canvas>
</div>
{% endif %}
</div>
</div>
<br>
<h4 class="text-center">{{ rating_instruction }}</h4>
{% for embody_question in embody_questions %}
<img id="idembody-{{embody_question.idembody}}" class="embody-image {% if loop.last %}last-embody{% endif %} {% if loop.index != 1 %}hidden{% else %}selected-embody{% endif %}" src={{ embody_question.picture }} />
{% endfor %}
{% for embody_question in embody_questions %}
<p id="idquestion-{{ embody_question.idembody }}" class="embody-question {% if loop.index != 1 %}hidden{% else %}selected-embody{% endif %}"> {{ embody_question.question }}</p>
{% endfor %}
<img id="baseImageMask" class="hidden" src={{ url_for('static', filename='img/dummy_600_mask.png') }} />
<!-- Select form type -->
{% if form.__name__ == 'embody' %}
......
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