nodes/solidlime-Comfyui-Random_Image_Picker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI: Completely hide image_data and add instant preview

Browse Source 
Changes:
1. Complete widget hiding:
   - Added .hidden = true
   - Added setTimeout for reliability
   - Added serializeValue to preserve data

2. Instant preview on file load:
   - Create Image object from base64
   - Set node.imgs for preview display
   - Call setSizeForImage() and setDirtyCanvas()
   - Preview shows immediately without execution

Now has clean UI and instant visual feedback!
This commit is contained in:
solidlime
2026-01-07 22:06:30 +09:00
parent 7e05de431b
commit 3a2c2419c4
1 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/random_image_picker.js
+20 -13
View File
@@ -11,12 +11,16 @@ app.registerExtension({
const result = onNodeCreated ? onNodeCreated.apply(this, arguments) : undefined;
const node = this;
// Hide image_data widget (it's auto-filled by file picker)
const imageDataWidget = node.widgets.find(w => w.name === "image_data");
if (imageDataWidget) {
imageDataWidget.type = "converted-widget";
imageDataWidget.computeSize = () => [0, -4]; // Hide it
}
// Completely hide image_data widget
setTimeout(() => {
const imageDataWidget = node.widgets.find(w => w.name === "image_data");
if (imageDataWidget) {
imageDataWidget.type = "converted-widget";
imageDataWidget.hidden = true;
imageDataWidget.computeSize = () => [0, -4];
imageDataWidget.serializeValue = () => imageDataWidget.value;
}
}, 10);
// Add file picker button
node.addWidget("button", "📁 Choose File", null, () => {
@@ -39,17 +43,20 @@ app.registerExtension({
reader.onload = (event) => {
const base64Data = event.target.result;
// Store image_data in node properties
if (!node.properties) {
node.properties = {};
}
node.properties.image_data = base64Data;
// Also try to set widget if it exists
// Store image_data in widget
let imageDataWidget = node.widgets.find(w => w.name === "image_data");
if (imageDataWidget) {
imageDataWidget.value = base64Data;
}
// Show instant preview
const img = new Image();
img.onload = () => {
node.imgs = [img];
node.setSizeForImage?.();
app.graph.setDirtyCanvas(true);
};
img.src = base64Data;
};
reader.readAsDataURL(file);