From 02e9ea55c925276d3d73bb7b43b0bdb177b1fcaf Mon Sep 17 00:00:00 2001 From: tianzi Date: Mon, 17 Mar 2025 19:56:19 +0000 Subject: [PATCH] add websocket_viewer_nodes.md --- docs/websocket_viewer_nodes.md | 32 +++++++++++++++++++++ docs/websocket_viewer_nodes_extra_params.md | 10 +++++++ 2 files changed, 42 insertions(+) create mode 100644 docs/websocket_viewer_nodes.md create mode 100644 docs/websocket_viewer_nodes_extra_params.md diff --git a/docs/websocket_viewer_nodes.md b/docs/websocket_viewer_nodes.md new file mode 100644 index 0000000..7a53bbc --- /dev/null +++ b/docs/websocket_viewer_nodes.md @@ -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. \ No newline at end of file diff --git a/docs/websocket_viewer_nodes_extra_params.md b/docs/websocket_viewer_nodes_extra_params.md new file mode 100644 index 0000000..c15d0cb --- /dev/null +++ b/docs/websocket_viewer_nodes_extra_params.md @@ -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. |