From ea5609719b5d867a232b4210aeea8504f41b16be Mon Sep 17 00:00:00 2001
From: Ossi Laine <ossi.laine@utu.fi>
Date: Wed, 10 Apr 2019 10:28:22 +0300
Subject: [PATCH] Show progress bar when creating embody -drawing
---
app/__init__.py | 6 ++-
.../templates/experiment_statistics.html | 7 +++
app/experiment/views.py | 38 +++++++++++++--
app/static/css/main.css | 9 ++++
app/static/js/getDrawing.js | 46 +++++++++++++++++--
embody_plot.py | 15 +++++-
6 files changed, 110 insertions(+), 11 deletions(-)
diff --git a/app/__init__.py b/app/__init__.py
index c0403b5..eb3cdb8 100644
--- a/app/__init__.py
+++ b/app/__init__.py
@@ -8,7 +8,7 @@ from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate
from flask_login import LoginManager
from flask_babel import Babel
-
+from flask_socketio import SocketIO
from config import Config
app = Flask(__name__)
@@ -63,6 +63,10 @@ def get_locale():
"""
+# Run flask app with socketIO
+socketio = SocketIO()
+socketio.init_app(app)
+
#mariabd mysql portti 3306 tarkista?
Bootstrap(app)
diff --git a/app/experiment/templates/experiment_statistics.html b/app/experiment/templates/experiment_statistics.html
index d381258..4a4c79e 100644
--- a/app/experiment/templates/experiment_statistics.html
+++ b/app/experiment/templates/experiment_statistics.html
@@ -107,6 +107,12 @@
</tbody>
</table>
+
+<div class="progress hidden">
+ <div id="image-loading-progress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
+ <!-- Creating image... -->
+ </div>
+</div>
<img class="embody-image-container">
@@ -165,6 +171,7 @@
</tbody>
</table>
+<script src="{{ url_for('static', filename='lib/js/socket.io.js') }}" ></script>
<script src="{{ url_for('static', filename='js/getDrawing.js') }}" ></script>
{% endblock %}
\ No newline at end of file
diff --git a/app/experiment/views.py b/app/experiment/views.py
index cb4b318..7fb547d 100644
--- a/app/experiment/views.py
+++ b/app/experiment/views.py
@@ -851,14 +851,46 @@ def statistics():
import embody_plot
from flask_cors import CORS,cross_origin
+from flask_socketio import emit
+from app import socketio
-@experiment_blueprint.route('/create_embody', methods=['POST'])
-@cross_origin()
-def create_embody():
+'''
+Old method
+#@experiment_blueprint.route('/create_embody', methods=['POST'])
+#@cross_origin()
+def create_embody():
#page = request.args.get("page")
page = request.form["page"]
img_path = embody_plot.get_coordinates(page)
#return send_file('static/' + img_path, 'test')
return json.dumps({'path':img_path})
+'''
+# (https://flask-socketio.readthedocs.io/en/latest/)
+# TODO: Using nginx as a WebSocket Reverse Proxy
+# TODO: Gunicorn Web Server
+
+@cross_origin()
+@socketio.on('connect', namespace="/create_embody")
+def create_embody():
+ print("connection succesful")
+ emit('success', {'connection': 'on'})
+
+@cross_origin()
+@socketio.on('draw', namespace="/create_embody")
+def create_embody(page_id):
+ page = page_id["page"]
+
+ img_path = embody_plot.get_coordinates(page)
+ print(img_path)
+ emit('end', {'path':img_path})
+
+'''
+@socketio.on('end', namespace="/create_embody")
+def create_embody():
+ print("connection end")
+ emit('end', {'connection': 'off'})
+'''
+
+# EOF
diff --git a/app/static/css/main.css b/app/static/css/main.css
index 7da83e0..c6fc263 100644
--- a/app/static/css/main.css
+++ b/app/static/css/main.css
@@ -49,3 +49,12 @@ body {
display: none;
}
+.progress-bar {
+ height:2em;
+}
+.progress {
+ height:2em;
+ background-color:rgb(248, 249, 250);
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ }
diff --git a/app/static/js/getDrawing.js b/app/static/js/getDrawing.js
index 8d0ec0d..b3159fa 100644
--- a/app/static/js/getDrawing.js
+++ b/app/static/js/getDrawing.js
@@ -1,22 +1,57 @@
const baseURI = 'http://127.0.0.1:8000/';
-var getDrawingURI = baseURI + 'experiment/create_embody';
-
+var getDrawingURI = baseURI + 'create_embody';
+//var getDrawingURI = baseURI + 'experiment/create_embody';
$(document).ready(function() {
var drawButtons = $(".embody-get-drawing");
var imageContainer = $(".embody-image-container")
- var source = ''
+ var progressBarContainer = $(".progress")
+ var progressBar = $("#image-loading-progress")
+
+ // With sockets
+ function initConnection(socket) {
+ socket.on('success', function(msg) {
+ console.log(msg)
+ });
+
+ socket.on('progress', function(data) {
+ progressBar.width(100*(data.done/data.from) + '%')
+ });
+
+ socket.on('end', function(img) {
+ socket.disconnect()
+
+ // Draw image to statistic -page
+ var source = img.path
+ d = new Date()
+ imageContainer.attr("src", "/static/" + source + "?" +d.getTime())
+
+ // Remove progress bar
+ progressBarContainer.addClass("hidden")
+ progressBar.width('0%')
+ });
+ }
+
drawButtons.click(function(event) {
event.preventDefault()
- var spinner = $(event.target.firstElementChild)
- spinner.removeClass("hidden")
+ // Init socket
+ var socket = io.connect(getDrawingURI);
+ initConnection(socket)
+ //
var pageId = this.dataset.value
+ socket.emit('draw', {page:pageId})
+ progressBarContainer.removeClass("hidden")
+
+ /*
+ With AJAX -calls
+ var spinner = $(event.target.firstElementChild)
+ spinner.removeClass("hidden")
$.ajax({
url: getDrawingURI,
@@ -29,6 +64,7 @@ $(document).ready(function() {
imageContainer.attr("src", "/static/" + source + "?" +d.getTime())
spinner.addClass("hidden")
})
+ */
})
diff --git a/embody_plot.py b/embody_plot.py
index b7927b7..90e92fd 100644
--- a/embody_plot.py
+++ b/embody_plot.py
@@ -164,8 +164,14 @@ def format_coordinates(cursor):
"coordinates":list(map(map_coordinates, x,y,r))
}
+from flask_socketio import emit
+from app import socketio
+
def plot_coordinates(coordinates):
+ # Total amount of points
+ points_count = len(coordinates['coordinates'])
+
# Load image to a plot
image = mpimg.imread(IMAGE_PATH)
image_mask = mpimg.imread(IMAGE_PATH_MASK)
@@ -183,12 +189,17 @@ def plot_coordinates(coordinates):
ax2.set_title("gaussian disk around points")
frame = np.zeros((HEIGHT,WIDTH))
- for point in coordinates["coordinates"]:
+ for idx, point in enumerate(coordinates["coordinates"]):
frame[point[1], point[0]] = 1
point = ndimage.gaussian_filter(frame, sigma=5)
ax2.imshow(point, cmap='hot', interpolation='none')
- # TODO: send progress information to frontend
+ # Try to send progress information to socket.io
+ try:
+ socketio.sleep(0)
+ emit('progress', {'done':idx+1/points_count, 'from':points_count})
+ except RuntimeError as err:
+ continue
ax2.imshow(image_mask)
--
GitLab