diff --git a/app/static/css/main.css b/app/static/css/main.css index 3efaa8adf059cc6b9d5ef51d38dac232161f8e5a..16a94b8e1e482d81fb9c5413fc87591f5ac90d2b 100644 --- a/app/static/css/main.css +++ b/app/static/css/main.css @@ -22,4 +22,6 @@ body { .clear-button { margin:10px; -} \ No newline at end of file +} + +.crosshair {cursor: crosshair;} \ No newline at end of file diff --git a/app/static/js/canvas.js b/app/static/js/canvas.js index 0607d0ebf36b3bb389dbaab604383e2172631cd4..617cf5157c22c93e75c1282e29c81cce84714bb4 100644 --- a/app/static/js/canvas.js +++ b/app/static/js/canvas.js @@ -6,6 +6,7 @@ $(document).ready(function()Â { try { var canvas = $("#embody-canvas") + var canvasInfo = $(".canvas-info") var context = document.getElementById("embody-canvas").getContext("2d"); var img = document.getElementById("baseImage"); @@ -43,9 +44,10 @@ $(document).ready(function()Â { // TODO: if mousedown -> can draw outside of image var mouseX = e.pageX - this.offsetLeft; var mouseY = e.pageY - this.offsetTop; - if(paint && pointInsideBaseImage([mouseX, mouseY])){ - addClick(mouseX, mouseY, true); - redraw(); + + if (paint && pointInsideBaseImage([mouseX, mouseY])){ + addClick(mouseX, mouseY, true); + redraw(); } }); @@ -57,11 +59,12 @@ $(document).ready(function()Â { paint = false; }); + // 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', changeBrushSize) + $("#embody-canvas").bind('DOMMouseScroll', changeBrushSize) // DOMMouseScroll is only for firefox //$(".canvas-container").bind('wheel', changeBrushSize) @@ -81,11 +84,11 @@ $(document).ready(function()Â { // Show brush size to user if (drawRadius == 10) { - this.firstElementChild.innerHTML = "small brush" + canvasInfo.html("small brush") } else if (drawRadius == 15) { - this.firstElementChild.innerHTML = "normal brush" + canvasInfo.html("normal brush") } else if (drawRadius == 20) { - this.firstElementChild.innerHTML = "large brush" + canvasInfo.html("large brush") } } @@ -123,7 +126,7 @@ $(document).ready(function()Â { startG = imageData.data[1]; startB = imageData.data[2]; - return (isWhite(startB) && isWhite(startG) && isWhite(startR)) ? true : false; + return (isWhite(startB) && isWhite(startG) && isWhite(startR)) ? false : true; } function redraw() { diff --git a/app/task/templates/task.html b/app/task/templates/task.html index 914943d409402dd4aba47fb527c740634718dea7..d262f391666eb1c459feeb781a46e9501e89820d 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="20" height="20" style="border: 1px solid blue;" ></canvas> + <canvas id="embody-canvas" class="crosshair" width="20" height="20" style="border: 1px solid blue;" ></canvas> </div> <img id="baseImage" class="" src={{ url_for('static', filename='img/dummy_600.png') }} />