From fd23d0c3eea486c9c5f8db88213141d1ec3172f3 Mon Sep 17 00:00:00 2001
From: Jan Grewe <jan@faked.org>
Date: Tue, 8 Oct 2024 08:47:24 +0200
Subject: [PATCH] show progress of ChitUI-to-printer upload
---
main.py | 21 +++++++++++++++++++--
web/index.html | 2 +-
web/js/chitui.js | 31 +++++++++++++++++++++++++------
3 files changed, 45 insertions(+), 9 deletions(-)
diff --git a/main.py b/main.py
index 5122076..29cd4d6 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 f8ac915..024278d 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 ddf5a9a..6010be5 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'
--
GitLab