From e7a4a09b611ac46048cd7de88a6910a2eb8438d6 Mon Sep 17 00:00:00 2001 From: xPand4B Date: Fri, 23 May 2025 22:03:54 +0200 Subject: [PATCH 1/3] Added .gitignores --- .gitignore | 2 ++ static/data/uploads/.gitignore | 2 ++ 2 files changed, 4 insertions(+) create mode 100644 .gitignore create mode 100644 static/data/uploads/.gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f24accc --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.DS_Store +venv \ No newline at end of file diff --git a/static/data/uploads/.gitignore b/static/data/uploads/.gitignore new file mode 100644 index 0000000..c96a04f --- /dev/null +++ b/static/data/uploads/.gitignore @@ -0,0 +1,2 @@ +* +!.gitignore \ No newline at end of file From cacb445cf5385cc7f7bb405d2c95e63bf9ee4e91 Mon Sep 17 00:00:00 2001 From: xPand4B Date: Fri, 23 May 2025 22:05:15 +0200 Subject: [PATCH 2/3] Updated js events --- static/js/controller.js | 29 +++++++++++++------------ static/js/pattern.js | 4 ++-- static/js/upload.js | 41 +++++++++++++++++++++-------------- static/templates/pattern.html | 8 +++---- 4 files changed, 46 insertions(+), 36 deletions(-) diff --git a/static/js/controller.js b/static/js/controller.js index 4775d08..2ccec3d 100644 --- a/static/js/controller.js +++ b/static/js/controller.js @@ -35,25 +35,26 @@ define(["lib/jquery", "lib/underscore", "js/upload", "js/colors", "js/pattern", // Colors -> Pattern // Generate pattern when we click - colors.on("generate-pattern", function() { + $('#generate-pattern').on('click', function () { // Get colors - var pattern_colors = colors.get("colors").slice(0); - var gauge = colors.get("size.gauge"); - var width = colors.get("size.width"); + const pattern_colors = colors.get("colors").slice(0); + const gauge = colors.get("size.gauge"); + const width = colors.get("size.width"); // Collect data - var params = collect_params(); + const params = collect_params(); // Replace PNG with gif of spinning gear - var image = new Image(); - var path = "/static/images/generate.gif"; - image.onload = function(){ // always fires the event. - colors.set('generate.src', path) - // Send JSON - $.getJSON("/pattern.json", params, function(data) { - pattern.init(data.data, pattern_colors, gauge, width); - colors.set('generate.src', "/static/images/generate.png"); - }); + const image = new Image(); + const path = "/static/images/generate.gif"; + + image.onload = function () { // always fires the event. + colors.set('generate.src', path); + // Send JSON + $.getJSON("/pattern.json", params, function (data) { + pattern.init(data.data, pattern_colors, gauge, width); + colors.set('generate.src', "/static/images/generate.png"); + }); }; image.src = path; }); diff --git a/static/js/pattern.js b/static/js/pattern.js index 9c57c5e..776caad 100644 --- a/static/js/pattern.js +++ b/static/js/pattern.js @@ -81,8 +81,7 @@ define(["lib/jquery", "lib/underscore", "text!templates/pattern.html", "ractive" view.on("save-pattern", save_pattern); // Save pattern - view.off("download-pattern") - view.on("download-pattern", download); + $('#download-pattern').off('click').on('click', download); } //////////////////////////////////////// @@ -402,6 +401,7 @@ define(["lib/jquery", "lib/underscore", "text!templates/pattern.html", "ractive" * Inspired by: http://techslides.com/save-svg-as-an-image/ */ var download = function(e) { + console.log("Download pattern", e); // Enable credits view.set("show_credits", true) var svg = document.querySelector("svg") diff --git a/static/js/upload.js b/static/js/upload.js index 5a6694f..e66e6c2 100644 --- a/static/js/upload.js +++ b/static/js/upload.js @@ -37,18 +37,23 @@ define(["lib/jquery", "js/capture", "text!templates/upload.html", "ractive", "ra view.events = function() { // For uploading an image - view.on("upload-image", function() { - $("#upload-input").click(); + $('#upload-image').on('click', () => { + $('#upload-input').click() // triggers the file input dialog }) // Show preview once the image has been uploaded - view.observe("upload.file", upload_image) + // view.observe("upload.file", upload_image) + $('#upload-input').on('change', upload_image) // For uploading from web - view.on("upload-web-enable", upload_web_enable); + // view.on("upload-web-enable", upload_web_enable); + $('#upload-web-enable').on('click', upload_web_enable) + // For capturing image with webcam - view.on("upload-web", upload_web); + // view.on("upload-web", upload_web); + $('#upload-web').on('click', upload_web) + // Make sure we delete the image before leaving the page $(window).on('beforeunload', view.cleanUp); @@ -112,33 +117,37 @@ define(["lib/jquery", "js/capture", "text!templates/upload.html", "ractive", "ra // Uploads image to server and receives the url back - var upload_image = function(new_value, old_value) { + var upload_image = (new_value) => { + const file = new_value.target.files?.[0] - view.set("upload.file_name", new_value[0].name); + if (!file) { + return + } - // Now upload image - var data = new FormData(); - data.append('image', new_value[0]); + view.set("upload.file_name", file.name) - // Set listener for progress - var xhr_provider = init_progress(); + var data = new FormData() + data.append('image', file) + + var xhr_provider = init_progress() $.ajax({ url: '/upload/', data: data, cache: false, - xhr : xhr_provider, + xhr: xhr_provider, contentType: false, processData: false, type: 'POST', success: function(response){ - progress(0); + progress(0); view.show_preview($.parseJSON(response).path); - } - }); + }, + }) } + view.cleanUp = function() { var file = _(view.get("preview.src").split("/")).last(); $.ajax({ diff --git a/static/templates/pattern.html b/static/templates/pattern.html index 3a30519..c983dad 100644 --- a/static/templates/pattern.html +++ b/static/templates/pattern.html @@ -10,18 +10,18 @@

{{ name }}

on them to cycle through the colors.

{{ #save }} -
+ -