diff --git a/nodes/curve_nodes.py b/nodes/curve_nodes.py index 707e408..4498fb1 100644 --- a/nodes/curve_nodes.py +++ b/nodes/curve_nodes.py @@ -719,10 +719,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) @@ -745,9 +746,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 @@ -898,13 +906,12 @@ CreateInstanceDiffusionTracking -node. colormap = cm.get_cmap('rainbow', len(tracking)) if draw_text: - #font = ImageFont.load_default() - 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]): # 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) diff --git a/web/js/spline_editor.js b/web/js/spline_editor.js index 71873c5..860fad2 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() { @@ -215,63 +221,101 @@ class SplineEditor { var context = this.context 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; - updatePath(); - }); + }); + + 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.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'; + }); + } - context.menuItem3.addEventListener('click', function(e) { - e.preventDefault(); - if (dotShape == "circle"){ - dotShape = "triangle" - } - else { - dotShape = "circle" - } - console.log(dotShape) - updatePath(); -}); var dotShape = "circle"; var drawSamplePoints = false; - + + createContextMenu(); function updatePath() { let coords = samplePoints(pathElements[0], points_to_sample, samplingMethod, w); @@ -496,7 +540,8 @@ class SplineEditor { context.contextMenu.style.top = `${pv.event.clientY}px`; } }) - + var backgroundImage = vis.add(pv.Image) + .visible(false) vis.add(pv.Rule) .data(pv.range(0, h, 64)) .bottom(d => d)