diff --git a/main.py b/main.py index 5122076d531171aa53fe3fd7a546866daa8b8cb5..29cd4d67c09812cdb58f2ad19282bedb89344b63 100644 --- a/main.py +++ b/main.py @@ -1,4 +1,4 @@ -from flask import Flask, Response, request, jsonify +from flask import Flask, Response, request, stream_with_context from werkzeug.utils import secure_filename from flask_socketio import SocketIO from threading import Thread @@ -15,7 +15,7 @@ import uuid debug = False log_level = "INFO" -if os.environ.get("DEBUG") is not None: +if os.environ.get("DEBUG"): debug = True log_level = "DEBUG" @@ -37,6 +37,7 @@ printers = {} UPLOAD_FOLDER = '/tmp' ALLOWED_EXTENSIONS = {'ctb', 'goo'} app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER +uploadProgress = 0 @app.route("/") @@ -44,6 +45,19 @@ def web_index(): return app.send_static_file('index.html') +@app.route('/progress') +def progress(): + def publish_progress(): + while uploadProgress <= 100: + yield "data:{p}\n\n".format(p=get_upload_progress()) + time.sleep(1) + return Response(publish_progress(), mimetype="text/event-stream") + + +def get_upload_progress(): + return uploadProgress + + @app.route('/upload', methods=['GET', 'POST']) def upload_file(): if request.method == 'POST': @@ -80,6 +94,7 @@ def allowed_file(filename): def upload_file(printer_ip, filepath): + global uploadProgress part_size = 1048576 filename = os.path.basename(filepath) md5_hash = hashlib.md5() @@ -100,6 +115,7 @@ def upload_file(printer_ip, filepath): i = 0 while i <= num_parts: offset = i * part_size + uploadProgress = round(i / num_parts * 100) with open(filepath, 'rb') as f: f.seek(offset) file_part = f.read(part_size) @@ -110,6 +126,7 @@ def upload_file(printer_ip, filepath): break logger.debug("Part {}/{} uploaded.", i, num_parts, offset) i += 1 + uploadProgress = 100 os.remove(filepath) return True diff --git a/web/index.html b/web/index.html index f8ac9153ff054fd890d438853ba8a4695289a2fc..024278dc04d2f0f8e3b872283b1c6d15f5048415 100644 --- a/web/index.html +++ b/web/index.html @@ -115,7 +115,7 @@ <!-- <label for="formFile" class="form-label">Default file input example</label> --> <input id="uploadFile" class="form-control" type="file" name="file"> <input id="uploadPrinter" type="hidden" name="printer" value=""> - <div class="progress mt-3" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> + <div class="progress mt-3" role="progressbar"> <div id="progressUpload" class="progress-bar" style="width: 0%">0%</div> </div> <button id="btnUpload" type="button" class="btn btn-secondary mt-3">Upload</button> diff --git a/web/js/chitui.js b/web/js/chitui.js index ddf5a9abedc10c20972746228a041b4279f0dfcf..6010be58aaefd995a8e976a5a71b9209a7c1508a 100644 --- a/web/js/chitui.js +++ b/web/js/chitui.js @@ -2,6 +2,7 @@ const socket = io(); var websockets = [] var printers = {} var currentPrinter = null +var progress = null socket.on("connect", () => { console.log('socket.io connected: ' + socket.id); @@ -296,9 +297,11 @@ function uploadFile() { myXhr.upload.addEventListener('progress', function (e) { if (e.lengthComputable) { var percent = Math.floor(e.loaded / e.total * 100); - $('#progressUpload').text(percent + '%').css('width', percent + '%'); + $('#progressUpload').text('Upload to ChitUI: '+percent + '%').css('width', percent + '%'); if (percent == 100) { - $('#progressUpload').addClass('progress-bar-striped progress-bar-animated') + setTimeout(function() { + fileTransferProgress() + }, 1000) } } }, false); @@ -317,9 +320,6 @@ function uploadFile() { alert(data.responseJSON.msg) }) req.always(function () { - setTimeout(function () { - $('#progressUpload').text('0%').css('width', '0%').removeClass('progress-bar-striped progress-bar-animated'); - }, 1000) }) } @@ -348,9 +348,28 @@ $(document).ready(function () { $('#btnConfirm').on('click', function () { socket.emit('action_' + $(this).data('action'), { id: currentPrinter, data: $(this).data('value') }) - $('#tableFiles tr[data-file="'+$(this).data('value')+'"]').remove() + $('#tableFiles tr[data-file="' + $(this).data('value') + '"]').remove() }); +function fileTransferProgress() { + $('#progressUpload').addClass('progress-bar-striped progress-bar-animated') + progress = new EventSource('/progress'); + progress.onmessage = function (event) { + if (event.data > 0) { + $('#progressUpload').text('Upload to printer: '+event.data + '%').css('width', event.data + '%').addClass('text-bg-warning'); + } + if (event.data == 100) { + setTimeout(function () { + $('#progressUpload').text('0%').css('width', '0%'); + setTimeout(function () { + $('#progressUpload').removeClass('progress-bar-striped progress-bar-animated text-bg-warning') + }, 1000) + }, 1000) + progress.close() + } + }; +} + /* global bootstrap: false */ (() => { 'use strict'