Commit ea560971 authored by Ossi Laine's avatar Ossi Laine
Browse files

Show progress bar when creating embody -drawing

parent ccd10549
......@@ -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)
......
......@@ -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
......@@ -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
......@@ -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;
}
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")
})
*/
})
......
......@@ -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)
......
Markdown is supported
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