From 00a50617ec3c00f4ead8f818e95077c9e1a95abd Mon Sep 17 00:00:00 2001 From: Kijai <40791699+kijai@users.noreply.github.com> Date: Mon, 6 May 2024 15:56:30 +0300 Subject: [PATCH 1/5] Update curve_nodes.py --- nodes/curve_nodes.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/nodes/curve_nodes.py b/nodes/curve_nodes.py index 47086af..00c081c 100644 --- a/nodes/curve_nodes.py +++ b/nodes/curve_nodes.py @@ -898,7 +898,7 @@ CreateInstanceDiffusionTracking -node. colormap = cm.get_cmap('rainbow', len(tracking)) if draw_text: #font = ImageFont.load_default() - font = ImageFont.truetype("arial.ttf", font_size) + font = ImageFont.truetype(font, font_size) # Iterate over each image in the batch for i in range(image.shape[0]): From 06a905414e0f7a6f324815c00ece9bb8f525ee46 Mon Sep 17 00:00:00 2001 From: Kijai <40791699+kijai@users.noreply.github.com> Date: Mon, 6 May 2024 16:55:52 +0300 Subject: [PATCH 2/5] Add fit_in_frame option for InstanceDiffusion bboxes --- nodes/curve_nodes.py | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/nodes/curve_nodes.py b/nodes/curve_nodes.py index 00c081c..12e42e8 100644 --- a/nodes/curve_nodes.py +++ b/nodes/curve_nodes.py @@ -718,10 +718,11 @@ for example: }, "optional": { "size_multiplier": ("FLOAT", {"default": [1.0], "forceInput": True}), + "fit_in_frame": ("BOOLEAN", {"default": True}), } } - def tracking(self, coordinates, class_name, class_id, width, height, bbox_width, bbox_height, prompt, size_multiplier=[1.0]): + def tracking(self, coordinates, class_name, class_id, width, height, bbox_width, bbox_height, prompt, size_multiplier=[1.0], fit_in_frame=True): # Define the number of images in the batch coordinates = coordinates.replace("'", '"') coordinates = json.loads(coordinates) @@ -744,9 +745,16 @@ for example: bottom_right_x = x + adjusted_bbox_width // 2 bottom_right_y = y + adjusted_bbox_height // 2 + if fit_in_frame: + # Clip the coordinates to the frame boundaries + top_left_x = max(0, top_left_x) + top_left_y = max(0, top_left_y) + bottom_right_x = min(width, bottom_right_x) + bottom_right_y = min(height, bottom_right_y) + # Append the top left and bottom right coordinates to the list for the current ID id_coordinates.append([top_left_x, top_left_y, bottom_right_x, bottom_right_y, width, height]) - + class_id = int(class_id) # Assign the list of coordinates to the specified ID within the class_id dictionary tracked[class_name][class_id] = id_coordinates @@ -897,13 +905,11 @@ CreateInstanceDiffusionTracking -node. colormap = cm.get_cmap('rainbow', len(tracking)) if draw_text: - #font = ImageFont.load_default() font = ImageFont.truetype(font, font_size) # Iterate over each image in the batch for i in range(image.shape[0]): # Extract the current image and convert it to a PIL image - # Adjust the tensor to (C, H, W) for ToPILImage current_image = image[i, :, :, :].permute(2, 0, 1) pil_image = transforms.ToPILImage()(current_image) From ca982ecda3f7d305a6ebfeb961409d8abbc73ecf Mon Sep 17 00:00:00 2001 From: kijai <40791699+kijai@users.noreply.github.com> Date: Mon, 6 May 2024 19:52:31 +0300 Subject: [PATCH 3/5] Update curve_nodes.py --- nodes/curve_nodes.py | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/nodes/curve_nodes.py b/nodes/curve_nodes.py index 12e42e8..006d146 100644 --- a/nodes/curve_nodes.py +++ b/nodes/curve_nodes.py @@ -905,7 +905,8 @@ CreateInstanceDiffusionTracking -node. colormap = cm.get_cmap('rainbow', len(tracking)) if draw_text: - font = ImageFont.truetype(font, font_size) + font_path = folder_paths.get_full_path("kjnodes_fonts", font) + font = ImageFont.truetype(font_path, font_size) # Iterate over each image in the batch for i in range(image.shape[0]): From 3b999778f0982ff7e15bd068bb1b5a17e02b1feb Mon Sep 17 00:00:00 2001 From: kijai <40791699+kijai@users.noreply.github.com> Date: Mon, 6 May 2024 21:33:54 +0300 Subject: [PATCH 4/5] background image for SplineEditor --- web/js/spline_editor.js | 46 ++++++++++++++++++++++++++++++++++++++--- 1 file changed, 43 insertions(+), 3 deletions(-) diff --git a/web/js/spline_editor.js b/web/js/spline_editor.js index 42d1495..af5b2e2 100644 --- a/web/js/spline_editor.js +++ b/web/js/spline_editor.js @@ -149,11 +149,17 @@ app.registerExtension({ this.menuItem3 = document.createElement("a"); this.menuItem3.href = "#"; - this.menuItem3.id = "menu-item-2"; + this.menuItem3.id = "menu-item-3"; this.menuItem3.textContent = "Switch point shape"; styleMenuItem(this.menuItem3); - const menuItems = [this.menuItem1, this.menuItem2, this.menuItem3]; + this.menuItem4 = document.createElement("a"); + this.menuItem4.href = "#"; + this.menuItem4.id = "menu-item-4"; + this.menuItem4.textContent = "Background image"; + styleMenuItem(this.menuItem4); + + const menuItems = [this.menuItem1, this.menuItem2, this.menuItem3, this.menuItem4]; menuItems.forEach(menuItem => { menuItem.addEventListener('mouseover', function() { @@ -255,6 +261,40 @@ function createSplineEditor(context, reset=false) { console.log(dotShape) updatePath(); }); + +context.menuItem4.addEventListener('click', function(e) { + // Create file input element + const fileInput = document.createElement('input'); + fileInput.type = 'file'; + fileInput.accept = 'image/*'; // Accept only image files + + // Listen for file selection + fileInput.addEventListener('change', function(event) { + const file = event.target.files[0]; // Get the selected file + + if (file) { + // Create a URL for the selected file + const imageUrl = URL.createObjectURL(file); + + // Set the backgroundImage with the new URL and make it visible + backgroundImage + .url(imageUrl) + .visible(true) + .root.render(); + } + }); + + // If the backgroundImage is already visible, hide it. Otherwise, show file input. + if (backgroundImage.visible()) { + backgroundImage.visible(false) + .root.render(); + } else { + // Trigger the file input dialog + fileInput.click(); + } + context.contextMenu.style.display = 'none'; +}); + var dotShape = "circle"; var drawSamplePoints = false; @@ -437,7 +477,7 @@ function createSplineEditor(context, reset=false) { context.contextMenu.style.top = `${pv.event.clientY}px`; } }) - + var backgroundImage = vis.add(pv.Image) vis.add(pv.Rule) .data(pv.range(0, h, 64)) .bottom(d => d) From 07ba67864a55c4e79c7f5b87729acd444238e05d Mon Sep 17 00:00:00 2001 From: kijai <40791699+kijai@users.noreply.github.com> Date: Mon, 6 May 2024 21:39:22 +0300 Subject: [PATCH 5/5] Update spline_editor.js --- web/js/spline_editor.js | 165 +++++++++++++++++++++------------------- 1 file changed, 85 insertions(+), 80 deletions(-) diff --git a/web/js/spline_editor.js b/web/js/spline_editor.js index af5b2e2..48075c3 100644 --- a/web/js/spline_editor.js +++ b/web/js/spline_editor.js @@ -207,97 +207,101 @@ app.registerExtension({ function createSplineEditor(context, reset=false) { console.log("creatingSplineEditor") - document.addEventListener('contextmenu', function(e) { - e.preventDefault(); - }); - - document.addEventListener('click', function(e) { - if (!context.contextMenu.contains(e.target)) { - context.contextMenu.style.display = 'none'; - } - }); - - context.menuItem1.addEventListener('click', function(e) { - e.preventDefault(); - if (!drawHandles) { - drawHandles = true - vis.add(pv.Line) - .data(() => points.map((point, index) => ({ - start: point, - end: [index] - }))) - .left(d => d.start.x) - .top(d => d.start.y) - .interpolate("linear") - .tension(0) // Straight lines - .strokeStyle("#ff7f0e") // Same color as control points - .lineWidth(1) - .visible(() => drawHandles); - vis.render(); - - - } else { - drawHandles = false - vis.render(); - } - context.contextMenu.style.display = 'none'; - - }); - - context.menuItem2.addEventListener('click', function(e) { + // context menu + function createContextMenu() { + document.addEventListener('contextmenu', function(e) { e.preventDefault(); - drawSamplePoints = !drawSamplePoints; + }); + + document.addEventListener('click', function(e) { + if (!context.contextMenu.contains(e.target)) { + context.contextMenu.style.display = 'none'; + } + }); + + context.menuItem1.addEventListener('click', function(e) { + e.preventDefault(); + if (!drawHandles) { + drawHandles = true + vis.add(pv.Line) + .data(() => points.map((point, index) => ({ + start: point, + end: [index] + }))) + .left(d => d.start.x) + .top(d => d.start.y) + .interpolate("linear") + .tension(0) // Straight lines + .strokeStyle("#ff7f0e") // Same color as control points + .lineWidth(1) + .visible(() => drawHandles); + vis.render(); + + + } else { + drawHandles = false + vis.render(); + } + context.contextMenu.style.display = 'none'; + + }); + + context.menuItem2.addEventListener('click', function(e) { + e.preventDefault(); + drawSamplePoints = !drawSamplePoints; + updatePath(); + }); + + context.menuItem3.addEventListener('click', function(e) { + e.preventDefault(); + if (dotShape == "circle"){ + dotShape = "triangle" + } + else { + dotShape = "circle" + } + console.log(dotShape) updatePath(); - }); + }); - context.menuItem3.addEventListener('click', function(e) { - e.preventDefault(); - if (dotShape == "circle"){ - dotShape = "triangle" - } - else { - dotShape = "circle" - } - console.log(dotShape) - updatePath(); -}); + context.menuItem4.addEventListener('click', function(e) { + // Create file input element + const fileInput = document.createElement('input'); + fileInput.type = 'file'; + fileInput.accept = 'image/*'; // Accept only image files -context.menuItem4.addEventListener('click', function(e) { - // Create file input element - const fileInput = document.createElement('input'); - fileInput.type = 'file'; - fileInput.accept = 'image/*'; // Accept only image files + // Listen for file selection + fileInput.addEventListener('change', function(event) { + const file = event.target.files[0]; // Get the selected file - // Listen for file selection - fileInput.addEventListener('change', function(event) { - const file = event.target.files[0]; // Get the selected file + if (file) { + // Create a URL for the selected file + const imageUrl = URL.createObjectURL(file); + + // Set the backgroundImage with the new URL and make it visible + backgroundImage + .url(imageUrl) + .visible(true) + .root.render(); + } + }); - if (file) { - // Create a URL for the selected file - const imageUrl = URL.createObjectURL(file); - - // Set the backgroundImage with the new URL and make it visible - backgroundImage - .url(imageUrl) - .visible(true) + // If the backgroundImage is already visible, hide it. Otherwise, show file input. + if (backgroundImage.visible()) { + backgroundImage.visible(false) .root.render(); - } - }); - - // If the backgroundImage is already visible, hide it. Otherwise, show file input. - if (backgroundImage.visible()) { - backgroundImage.visible(false) - .root.render(); - } else { - // Trigger the file input dialog - fileInput.click(); + } else { + // Trigger the file input dialog + fileInput.click(); + } + context.contextMenu.style.display = 'none'; + }); } - context.contextMenu.style.display = 'none'; -}); var dotShape = "circle"; var drawSamplePoints = false; - + + createContextMenu(); function updatePath() { let coords = samplePoints(pathElements[0], points_to_sample, samplingMethod, w); @@ -478,6 +482,7 @@ context.menuItem4.addEventListener('click', function(e) { } }) var backgroundImage = vis.add(pv.Image) + .visible(false) vis.add(pv.Rule) .data(pv.range(0, h, 64)) .bottom(d => d)