ComfyUI-MagnifyGlass

Enhance your ComfyUI workflow with a powerful and customizable magnifying glass!

ComfyUI-MagnifyGlass adds an intuitive magnifying glass to your ComfyUI canvas, allowing you to zoom in on details with ease. Activate it with a simple key combination and customize its appearance and behavior to fit your needs.

[!TIP] Perfect for inspecting fine details in your generated images, node connections, or any part of the ComfyUI canvas!

✨ Features

• 🔍 Smooth Zooming: Magnify any part of the ComfyUI canvas with a configurable zoom factor.
• 🖱️ Cursor Interaction:
  • Follow Cursor: Magnifier can follow your mouse movements.
  • Fixed Position: Alternatively, activate it at a specific spot.
  • Precise Positioning: Position the glass relative to the cursor (Top, Bottom, Left, Right, Corners).
• 🎨 Customizable Appearance:
  • Glass Size: Adjust the diameter of the magnifying glass.
  • Border Styling: Enable/disable border, set custom border width and color.
  • Glass Shape: Choose between Circle, Square, or Rounded Square.
• ⌨️ Keyboard Controls:
  • Configurable Activation: Set your preferred activation key (e.g., X, Z, M) with an optional Alt/Option modifier.
  • Offset Adjustment: Fine-tune the magnified view using arrow keys (Shift + Arrow for larger steps).
  • Offset Reset: Quickly reset the view offset with a configurable key (e.g., R, O) and optional Alt/Option modifier.
• 🛠️ WebGL Powered: Efficient rendering using WebGL for smooth performance.
• 📝 Text Overlay: Magnifies text within input widgets for better readability.
• 🐞 Debug Mode: Optional debug overlay showing detailed information and a visualization of the source area.
• ⚙️ Settings Integration: All options are configurable through the ComfyUI settings dialog.
• 💾 Persistent Offsets: Manually adjusted offsets are saved and loaded across sessions.
• 🖼️ Texture Filtering: Choose between Linear (smooth) and Nearest (pixelated) texture filtering for the magnified view.
• 🔒 Always Active Mode: Toggle the magnifier to stay on/off without holding keys.
• 🔑 Toggle Follow Key: Use a configurable key (default 'H') to toggle the 'Follow Cursor' behavior on the fly.

(🔒 Always Active & 🔑 Toggle Follow Key Showcase: you can essentially set the glass preview where ever you want on the canvas and toggle it off and on.)

📥 Installation

Option 1: Using ComfyUI Manager

1. Install ComfyUI Manager if you don't have it already.
2. Open ComfyUI, go to the Manager tab.
3. Click on Install Custom Nodes.
4. Search for "ComfyUI-MagnifyGlass" and click Install.
5. Restart ComfyUI.

Option 2: Manual Installation

cd /path/to/ComfyUI/custom_nodes
git clone https://github.com/AEmotionStudio/ComfyUI-MagnifyGlass.git

Restart ComfyUI after installation. No additional pip install steps are typically required for JavaScript-based extensions.

🚀 Usage

1. Activation:
   • By default, press X to activate the magnifying glass. If "Always Active Mode" is enabled, this combination toggles the magnifier on or off.
   • The activation key and whether Alt/Option is required can be changed in the settings.
2. Using the Magnifier:
   • While active, move your mouse over the ComfyUI canvas to see the magnified view.
   • If Follow Cursor is disabled, the magnifier will remain where it was activated.
3. Controls (while active):
   • Arrow Keys: Nudge the magnified view (adjusts offsetX/offsetY).
   • Shift + Arrow Keys: Nudge the magnified view by a larger step.
   • Reset Key (default 'R'): Resets offsetX and offsetY to zero. (Configurable, respects the global "Require Alt/Option Key" setting).
   • Toggle Follow Key (default 'H'): Toggles the Follow Cursor behavior on/off. (Configurable, respects the global "Require Alt/Option Key" setting).
4. Configuration:
   • Access all settings by clicking the ⚙️ (Settings) icon in ComfyUI, then find the "🔍 Magnify Glass" section.

(🐞 Debug Mode & Arrow Keys Showcase: ⚠️ some flickering may occur with the VHS Combine Node Preview when moving the glass across the preview service while active.)

⚙️ Configuration Options

All options are available in the ComfyUI settings dialog under the "🔍 Magnify Glass" section.

| Option | Description | Default Value | |--------------------------------------|-----------------------------------------------------------------------------------------------------------|------------------| | Zoom Factor | Magnification level (e.g., 2.5 means 2.5x zoom). | 3 | | Glass Size (px) | Diameter of the magnifying glass in pixels. | 300 | | Border Width (px) | Width of the border around the magnifying glass. | 2 | | Border Color | Color of the border around the magnifying glass. | #ffffff | | Activation Key | The key (case-insensitive) to hold down to activate the magnifier. | x | | Require Alt/Option Key | If Yes, Alt (Windows/Linux) or Option (Mac) must be held for activation and for reset. | No (false) | | Follow Cursor Position | If Yes, the magnifier window moves with the cursor. If No, it stays where activated. | Yes (true) | | Offset Adjust Step (Graph Units) | How many graph units the view shifts when pressing arrow keys (Shift+Arrow = 5x). | 5 | | Reset Offset Key | The key to press to reset the view offset while active. | o | | Debug Mode | Show detailed logging and the debug visualization overlay. | Disabled (false)| | Glass Position | Position of the magnifying glass relative to the cursor. | Bottom | | Shape | Shape of the magnifying glass (Circle, Square, Rounded Square). | Rounded Square | | Show Border | Enable or disable the border around the magnifying glass. | Yes (true) | | Texture Filtering | Controls how the magnified image is scaled. Linear is smoother, Nearest is sharper/pixelated. | Linear | | Always Active Mode | If Yes, activating the magnifier keeps it on until activated again. If No, it deactivates on key release. | Yes (true) | | Toggle Follow Key | The key to toggle 'Follow Cursor' behavior. Works with Alt/Option if 'Require Alt/Option Key' is Yes. | h |

❓ Troubleshooting

• Magnifier not appearing:
  • Ensure you are pressing the correct activation key combination (check settings for current keys).
  • Make sure ComfyUI has focus.
  • Check the browser console (F12) for any errors related to "ComfyUI Magnifying Glass".
• Performance issues on very complex graphs:
  • While WebGL is used for efficiency, extremely complex scenes might still impact performance. Try reducing the Glass Size if issues occur.
• Text in widgets not sharp enough:
  • The HTML overlay feature aims to render text crisply. If you notice issues, ensure your browser zoom is at 100%.

🤝 Contributing

Contributions are welcome! Whether it's bug reports, feature suggestions, or pull requests, your help is appreciated.

1. Fork the repository.
2. Create a new branch (git checkout -b feature/AmazingFeature).
3. Make your changes.
4. Commit your changes (git commit -m 'Add some AmazingFeature').
5. Push to the branch (git push origin feature/AmazingFeature).
6. Open a Pull Request.

🙏 Acknowledgements

• The ComfyUI team for creating such a flexible and powerful platform.
• The LiteGraph.js library.
• Users and contributors who provide feedback and suggestions.

🔗 Connect with Me (Developer)

• YouTube: AEmotionStudio
• GitHub: AEmotionStudio
• Discord: Join our community
• Website: aemotionstudio.org

☕ Support

If you find ComfyUI-MagnifyGlass useful, consider supporting its development:

Your support helps me dedicate more time to maintaining and improving this project and others with new features, bug fixes, and better documentation.

💖 Additional Ways to Support

• ⭐ Star the repository
• 📢 Share it with others
• 🛠️ Contribute to its development

For business inquiries or professional support, please contact me through my website or join my Discord server.

📜 License

This project is licensed under the GNU General Public License v3.0. See the LICENSE file for details.