Show progress bar when creating embody -drawing

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)

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

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

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;
+  }

app/static/js/getDrawing.js

 
 
 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")
         })
+        */
 
     })
 

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)