nodes/VrchStudio-comfyui-web-viewer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add websocket_viewer_nodes.md

Browse Source
This commit is contained in:
tianzi
2025-03-17 19:56:19 +00:00
parent 7e3ccb6db0
commit 02e9ea55c9
2 changed files with 42 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/websocket_viewer_nodes.md
+32
View File
@@ -0,0 +1,32 @@
### Node: `IMAGE WebSocket Web Viewer @ vrch.ai` (vrch.ai/viewer)
1. **Add the `IMAGE WebSocket Web Viewer @ vrch.ai` node to your ComfyUI workflow.**
2. **Configure the Node:**
- **Image Input:**
- **`images`**: Connect the image(s) you wish to display in the WebSocket-based web viewer.
- **Channel:**
- **`channel`**: Select a channel number from **"1"** to **"8"** (default is **"1"**) to differentiate WebSocket connections.
- **Server:**
- **`server`**: Enter the server's domain or IP address along with its port in the format `IP:PORT`. The default typically uses your IP and port **8001** (e.g., **`127.0.0.1:8001`**).
- **Image Format:**
- **`format`**: Choose the image format for transmission, supporting **PNG** and **JPEG** (default is **JPEG**).
- **Window Dimensions:**
- **`window_width`**: Set the width of the web viewer window (default is **1280**).
- **`window_height`**: Set the height of the web viewer window (default is **960**).
- **Show URL:**
- **`show_url`**: Toggle the display of the constructed URL in the interface. When enabled, the **`url`** field becomes visible.
- **Debug Mode:**
- **`debug`**: Enable this option to print detailed debug information to the console for troubleshooting.
- **Extra Parameters:**
- **`extra_params`**: The extra parameters for Image WebSocket Web Viewer, see [websocket_viewer_nodes_extra_params.md](./websocket_viewer_nodes_extra_params.md)
- **URL Input:**
- **`url`**: This field is automatically updated with a constructed URL based on your inputs (server, channel, extra parameters, etc.). You can control its visibility with the **`show_url`** option.
3. **Open Web Viewer:**
- Click the **"Open Web Viewer"** button to launch the generated URL in a new browser window, where your image will be displayed in real time via the WebSocket connection.
**Notes:**
- Make sure that the server address and configuration are correct and that the server is accessible.
- This node uses the WebSocket protocol to transmit image data in real time to the specified channel; ensure your client browser supports WebSocket connections.
- When debug mode is enabled, the node outputs detailed logs to the console, which can help you track the image transmission process and troubleshoot any issues.
docs/websocket_viewer_nodes_extra_params.md
+10
View File
@@ -0,0 +1,10 @@
### Image WebSocket Viewer
| Name | Code | Description | Type | Value | Remarks |
|-------------------------|---------------------|--------------------------------------------------------------------|---------|---------|---------------------------------------------------------------------------------------|
| Auto Fullscreen | autoFullscreen | Automatically enters fullscreen mode on start. | Boolean | false | When true, the viewer enters fullscreen automatically. |
| Skip Settings Page | skipSettingsPage | Bypasses the settings page to start the viewer immediately. | Boolean | false | Directly initiates the viewer if true. |
| Image Display Option | imageDisplayOption | Determines how the image is scaled or fitted. | String | fit | Options: original, fit, resize, crop. |
| Image Alignment | imageAlignment | Sets the alignment of the image within its container. | String | center | Options: top-left, top, top-right, left, center, right, bottom-left, bottom, bottom-right. |
| Background Colour | bgColourPicker | Sets the background color of the image container. | String | #222222 | Accepts hex color codes. |
| Fade Animation Duration | fadeAnimDuration | Duration of fade animation in milliseconds. | Number | 200 | Controls the speed of the fade effect when updating images. |