From 9ec0c142fece631133bdb9448d00aa1875931679 Mon Sep 17 00:00:00 2001
From: Ossi Laine <ossi.laine@utu.fi>
Date: Wed, 3 Apr 2019 13:46:23 +0300
Subject: [PATCH] Cleaning code
---
app/static/js/canvas.js | 43 +++++-----
app/task/templates/task.html | 4 +-
app/task/views.py | 2 +-
app/templates/base.html | 153 ++++++++++++++---------------------
4 files changed, 85 insertions(+), 117 deletions(-)
diff --git a/app/static/js/canvas.js b/app/static/js/canvas.js
index 54f93cc..0607d0e 100644
--- a/app/static/js/canvas.js
+++ b/app/static/js/canvas.js
@@ -8,6 +8,11 @@ $(document).ready(function()Â {
var canvas = $("#embody-canvas")
var context = document.getElementById("embody-canvas").getContext("2d");
var img = document.getElementById("baseImage");
+
+ $(img).on('load', function() {
+ drawBaseImage()
+ })
+
} catch (e) {
console.log(e)
if (e instanceof TypeError) {
@@ -55,8 +60,13 @@ $(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()
+
+ $(".canvas-container").bind('DOMMouseScroll', changeBrushSize)
+ // DOMMouseScroll is only for firefox
+ //$(".canvas-container").bind('wheel', changeBrushSize)
+
+ function changeBrushSize(event) {
+ event.preventDefault()
// Change brush size
if (event.originalEvent.detail >= 0){
@@ -77,7 +87,7 @@ $(document).ready(function()Â {
} else if (drawRadius == 20) {
this.firstElementChild.innerHTML = "large brush"
}
- })
+ }
$(".clear-button").on('click', function() {
clearCanvas()
@@ -89,8 +99,7 @@ $(document).ready(function()Â {
// Draw methods
- function addClick(x, y, dragging=false)
- {
+ function addClick(x, y, dragging=false) {
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
@@ -103,9 +112,7 @@ $(document).ready(function()Â {
}
function isWhite(color) {
- if (color === 255)
- return true
- return false
+ return (color === 255) ? true : false;
}
// Method for checking if cursor is inside human body before creating brush stroke
@@ -116,14 +123,10 @@ $(document).ready(function()Â {
startG = imageData.data[1];
startB = imageData.data[2];
- if (isWhite(startB) && isWhite(startG) && isWhite(startR)) {
- return false;
- }
-
- return true;
+ return (isWhite(startB) && isWhite(startG) && isWhite(startR)) ? true : false;
}
- function redraw(){
+ function redraw() {
/*
Check:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
@@ -151,27 +154,24 @@ $(document).ready(function()Â {
}
- function drawMaskToBaseImage()
- {
+ function drawMaskToBaseImage() {
var img = document.getElementById("baseImageMask");
context.globalAlpha = 1
context.drawImage(img, 0, 0);
}
- function drawBaseImage()
- {
+ function drawBaseImage() {
var width = img.width;
var height = img.height;
context.canvas.height = height
context.canvas.width = width
+
context.drawImage(img, 0, 0);
- img.classList.add("hidden")
+ $(img).hide()
}
function clearCanvas()Â {
- // Clear canvas
- img.classList.remove("hidden")
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
drawBaseImage()
@@ -182,7 +182,6 @@ $(document).ready(function()Â {
}
function saveData()Â {
-
var points = {
x: clickX,
y: clickY
diff --git a/app/task/templates/task.html b/app/task/templates/task.html
index c2044d6..914943d 100644
--- a/app/task/templates/task.html
+++ b/app/task/templates/task.html
@@ -100,7 +100,7 @@
<div class="canvas-container">
<span class="canvas-info"></span>
- <canvas id="embody-canvas" width="200" height="100" style="border: 1px solid blue;" ></canvas>
+ <canvas id="embody-canvas" width="20" height="20" style="border: 1px solid blue;" ></canvas>
</div>
<img id="baseImage" class="" src={{ url_for('static', filename='img/dummy_600.png') }} />
@@ -120,7 +120,7 @@
</div>
<div class="col-12">
<br>
- <p>{{ _("Reload the page if painting canvas didn't appear.") }} </p>
+ <p>{{ _("Reload the page if canvas didn't appear") }} </p>
<p>{{ _('You can zoom in/out the page view by pressing ctrl+/ctrl- (Windows) or ⌘+/⌘- (Mac)') }} </p>
</div>
</div>
diff --git a/app/task/views.py b/app/task/views.py
index bbe7ac9..25e7904 100644
--- a/app/task/views.py
+++ b/app/task/views.py
@@ -125,7 +125,7 @@ def get_experiment_info():
"""Return experiment information from current session"""
try:
return experiment.query.filter_by(idexperiment=session['exp_id']).first()
- except exc.KeyError as err:
+ except KeyError as err:
flash("No valid session found")
return redirect('/')
diff --git a/app/templates/base.html b/app/templates/base.html
index e566944..0299ece 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -24,118 +24,87 @@
</head>
<body>
- <header>
-<!-- Navigation -->
-<nav class="navbar navbar-expand bg-light fixed-top">
-
-
-
- {% if pages %}
-
- <div class="navbar-brand font-weight-light"><span class="text-primary font-weight-bold">ID:{{ session['user']}}</span>
- </div>
- <div class="progress-bar progress-bar-striped" role="progressbar" style="width: {{ progress_bar_percentage }}%;" aria-valuemin="0" aria-valuemax="100">{{ _('Task progress:') }} {{ progress_bar_percentage }}%
- </div>
-
-
- {% else %}
-
-
- <div class="col-1 navbar-brand">
- <a href="{{ url_for('index') }}">
- <img class="mt-1 mb-1" src="/static/img/onni_LOGO-horizontal-RGB-transparent_bg_cut.png" alt="Logo" height=40">
- </a>
-
-
- {% block navbar %}
- {% with messages = get_flashed_messages() %}
- {% if messages %}
- {% for message in messages %}
-
- <a class="pl-5 text-align-center text-danger">{{ message }}</a>
-
- {% endfor %}
- {% endif %}
- {% endwith %}
- {% endblock %}
-
-
-
-
-
- </div>
-
-
-
-
- {% if current_user.is_authenticated %}
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand bg-light fixed-top">
+ {% if pages %}
- <div class="col-11 text-primary text-right">
-
-
+ <div class="navbar-brand font-weight-light"><span class="text-primary font-weight-bold">ID:{{ session['user']}}</span>
+ </div>
+ <div class="progress-bar progress-bar-striped" role="progressbar" style="width: {{ progress_bar_percentage }}%;" aria-valuemin="0" aria-valuemax="100">{{ _('Task progress:') }} {{ progress_bar_percentage }}%
+ </div>
- <a class="nav-item" href="{{ url_for('researcher_info') }}" class="nav-link">Info |</a>
- <a class="nav-item" href="{{ url_for('create.create_experiment') }}" class="nav-link">Create |</a>
- <a class="nav-item" href="" class="nav-link">Archives |</a>
- <a class="nav-item" href="{{ url_for('logout') }}" class="nav-link">Logout |</a>
+ {% else %}
+ <div class="col-1 navbar-brand">
+ <a href="{{ url_for('index') }}">
+ <img class="mt-1 mb-1" src="/static/img/onni_LOGO-horizontal-RGB-transparent_bg_cut.png" alt="Logo" height="40">
+ </a>
+ {% block navbar %}
+ {% with messages = get_flashed_messages() %}
+ {% if messages %}
+ {% for message in messages %}
+ <a class="pl-5 text-align-center text-danger">{{ message }}</a>
+ {% endfor %}
+ {% endif %}
+ {% endwith %}
+ {% endblock %}
+ </div>
- <a class="nav-item dropdown">
- <a class="nav-item dropdown-toggle text-align-right" href="#" id="navbarDropdown_auth" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- Language
- </a>
- <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown_auth">
- <a class="dropdown-item" href="{{ url_for('set_language', language='Finnish', lang='fi') }}">Finnish</a>
- <a class="dropdown-item" href="{{ url_for('set_language', language='English', lang='en') }}">English</a>
- <a class="dropdown-item" href="{{ url_for('set_language', language='Persian', lang='fa') }}">Persian</a>
- <a class="dropdown-item" href="{{ url_for('set_language', language='Greek', lang='el') }}">Greek</a>
- <a class="dropdown-item" href="{{ url_for('set_language', language='Italian', lang='it') }}">Italian</a>
- <a class="dropdown-item" href="{{ url_for('set_language', language='Chinese', lang='zh') }}">Chinese</a>
- <a class="dropdown-item" href="{{ url_for('set_language', language='All') }}">Show all</a>
- </div>
+ {% if current_user.is_authenticated %}
+ <div class="col-11 text-primary text-right">
+ <a class="nav-item" href="{{ url_for('researcher_info') }}" class="nav-link">Info |</a>
+ <a class="nav-item" href="{{ url_for('create.create_experiment') }}" class="nav-link">Create |</a>
+ <a class="nav-item" href="" class="nav-link">Archives |</a>
+ <a class="nav-item" href="{{ url_for('logout') }}" class="nav-link">Logout |</a>
+
+ <a class="nav-item dropdown">
+ <a class="nav-item dropdown-toggle text-align-right" href="#" id="navbarDropdown_auth" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Language
+ </a>
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown_auth">
+ <a class="dropdown-item" href="{{ url_for('set_language', language='Finnish', lang='fi') }}">Finnish</a>
+ <a class="dropdown-item" href="{{ url_for('set_language', language='English', lang='en') }}">English</a>
+ <a class="dropdown-item" href="{{ url_for('set_language', language='Persian', lang='fa') }}">Persian</a>
+ <a class="dropdown-item" href="{{ url_for('set_language', language='Greek', lang='el') }}">Greek</a>
+ <a class="dropdown-item" href="{{ url_for('set_language', language='Italian', lang='it') }}">Italian</a>
+ <a class="dropdown-item" href="{{ url_for('set_language', language='Chinese', lang='zh') }}">Chinese</a>
+ <a class="dropdown-item" href="{{ url_for('set_language', language='All') }}">Show all</a>
+ </div>
</div>
{% endif %}
-
-
{% if current_user.is_anonymous %}
<div class="col-11 text-primary text-right">
-
-
+ <a class="nav-item" href="{{ url_for('login') }}" class="nav-link">Login |</a>
- <a class="nav-item dropdown-toggle text-align-right" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- Language
- </a>
- <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
-
- <a class="dropdown-item" href="{{ url_for('set_language', language='Finnish', lang='fi') }}">Finnish</a>
- <a class="dropdown-item" href="{{ url_for('set_language', language='English', lang='en') }}">English</a>
- <a class="dropdown-item" href="{{ url_for('set_language', language='Persian', lang='fa') }}">Persian</a>
- <a class="dropdown-item" href="{{ url_for('set_language', language='Greek', lang='el') }}">Greek</a>
- <a class="dropdown-item" href="{{ url_for('set_language', language='Italian', lang='it') }}">Italian</a>
- <a class="dropdown-item" href="{{ url_for('set_language', language='Chinese', lang='zh') }}">Chinese</a>
-
+ <a class="nav-item dropdown-toggle text-align-right" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Language
+ </a>
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
+ <a class="dropdown-item" href="{{ url_for('set_language', language='Finnish', lang='fi') }}">Finnish</a>
+ <a class="dropdown-item" href="{{ url_for('set_language', language='English', lang='en') }}">English</a>
+ <a class="dropdown-item" href="{{ url_for('set_language', language='Persian', lang='fa') }}">Persian</a>
+ <a class="dropdown-item" href="{{ url_for('set_language', language='Greek', lang='el') }}">Greek</a>
+ <a class="dropdown-item" href="{{ url_for('set_language', language='Italian', lang='it') }}">Italian</a>
+ <a class="dropdown-item" href="{{ url_for('set_language', language='Chinese', lang='zh') }}">Chinese</a>
+ </div>
</div>
-
- {% endif %}
-
-
{% endif %}
+ {% endif %}
-
-</nav>
-</header>
-
-<main role="main" class="container">
- {% block content %}{% endblock %}
-</main>
+ </nav>
+
+ <main role="main" class="container">
+ {% block content %}{% endblock %}
+ </main>
+
<footer class="footer">
<div class="container">
<br>
--
GitLab