diff --git a/docs/websocket_nodes.md b/docs/websocket_nodes.md index 8715f8f..c9a3b37 100644 --- a/docs/websocket_nodes.md +++ b/docs/websocket_nodes.md @@ -145,15 +145,14 @@ A dedicated node for managing and transmitting WebSocket settings parameters sep "bgColourPicker": "#222222", "serverMessages": "", "filters": { - "blur": 4, + "opacity": 1.0, "brightness": 1.2, "contrast": 1.1, - "grayscale": 0.0, + "saturate": 1.4, "hueRotate": 180, "invert": 0.0, - "saturate": 1.4, "sepia": 0.2, - "opacity": 1.0 + "blur": 4 } } } @@ -176,15 +175,16 @@ Provides adjustable CSS image filter parameters as a JSON object for composition 1. **Add the `IMAGE Filter Settings @ vrch.ai` node to your workflow.** 2. **Configure Filter Parameters (inputs):** - - **`blur`**: Integer pixels (0–50) – matches `blur(px)`. - - **`brightness`**: Float (0.0–2.0) – 1.0 is neutral. - - **`contrast`**: Float (0.0–2.0) – 1.0 is neutral. - - **`grayscale`**: Float (0.0–1.0) – 0 is color, 1 is fully grayscale. - - **`hue_rotate`**: Integer degrees (0–360) – applied as CSS `hue-rotate()`. - - **`invert`**: Float (0.0–1.0) – 0 no invert, 1 full invert. - - **`saturate`**: Float (0.0–2.0) – 1.0 is neutral. + Order (updated): `opacity`, `brightness`, `contrast`, `saturate`, `hue_rotate`, `invert`, `sepia`, `blur`. + - **`opacity`**: Float (0.0–1.0) – 1.0 fully opaque. + - **`brightness`**: Float (0.0–2.0) – 1.0 neutral. + - **`contrast`**: Float (0.0–2.0) – 1.0 neutral. + - **`saturate`**: Float (0.0–2.0) – 1.0 neutral. + - **`hue_rotate`**: Integer degrees (0–360) – CSS `hue-rotate()`. + - **`invert`**: Float (0.0–1.0) – 0 none, 1 full invert. - **`sepia`**: Float (0.0–1.0) – 0 none, 1 full sepia. - - **`opacity`**: Float (0.0–1.0) – 1.0 is fully opaque. + - **`blur`**: Integer pixels (0–50) – `blur(px)`. + (Deprecated: `grayscale` has been removed.) 3. **UI Convenience:** - A small green "Reset Filters" button (in the node UI) resets all parameters to their defaults. @@ -194,15 +194,14 @@ Provides adjustable CSS image filter parameters as a JSON object for composition ```json { "filters": { - "blur": 0, + "opacity": 1.0, "brightness": 1.0, "contrast": 1.0, - "grayscale": 0.0, + "saturate": 1.0, "hueRotate": 0, "invert": 0.0, - "saturate": 1.0, "sepia": 0.0, - "opacity": 1.0 + "blur": 0 } } ``` @@ -212,8 +211,8 @@ Provides adjustable CSS image filter parameters as a JSON object for composition - Execute the settings node (with `send_settings=True`) to broadcast both regular settings and filters to the viewer. **Notes:** -- The key names (`blur`, `brightness`, `contrast`, `grayscale`, `hueRotate`, `invert`, `saturate`, `sepia`) match the front‑end's `applyRemoteFilters()` expectations. -- The key names (`blur`, `brightness`, `contrast`, `grayscale`, `hueRotate`, `invert`, `saturate`, `sepia`, `opacity`) match the front‑end's `applyRemoteFilters()` expectations. +- The key names (`opacity`, `brightness`, `contrast`, `saturate`, `hueRotate`, `invert`, `sepia`, `blur`) match the front‑end's `applyRemoteFilters()` expectations. +- Legacy workflows containing `grayscale` will ignore that value silently. - Values are clamped on the viewer side as a safety measure; staying within documented ranges ensures predictable results. - You can route this JSON through additional logic or merge nodes before feeding into the settings node to implement animations or dynamic modulation. diff --git a/nodes/websocket_nodes.py b/nodes/websocket_nodes.py index 86fbed3..d1108c3 100644 --- a/nodes/websocket_nodes.py +++ b/nodes/websocket_nodes.py @@ -329,16 +329,17 @@ class VrchImageWebSocketFilterSettingsNode: def INPUT_TYPES(cls): return { "required": { - # Pure parameter node (no channel/server). Ranges mirror applyRemoteFilters(). - "blur": ("INT", {"default": 0, "min": 0, "max": 50}), + # Reordered & streamlined (grayscale removed) + # New order requested: + # opacity, brightness, contrast, saturate, hueRotate, invert, sepia, blur + "opacity": ("FLOAT", {"default": 1.0, "min": 0.0, "max": 1.0, "step": 0.01}), "brightness": ("FLOAT", {"default": 1.0, "min": 0.0, "max": 2.0, "step": 0.01}), "contrast": ("FLOAT", {"default": 1.0, "min": 0.0, "max": 2.0, "step": 0.01}), - "grayscale": ("FLOAT", {"default": 0.0, "min": 0.0, "max": 1.0, "step": 0.01}), + "saturate": ("FLOAT", {"default": 1.0, "min": 0.0, "max": 2.0, "step": 0.01}), "hue_rotate": ("INT", {"default": 0, "min": 0, "max": 360}), "invert": ("FLOAT", {"default": 0.0, "min": 0.0, "max": 1.0, "step": 0.01}), - "saturate": ("FLOAT", {"default": 1.0, "min": 0.0, "max": 2.0, "step": 0.01}), "sepia": ("FLOAT", {"default": 0.0, "min": 0.0, "max": 1.0, "step": 0.01}), - "opacity": ("FLOAT", {"default": 1.0, "min": 0.0, "max": 1.0, "step": 0.01}), + "blur": ("INT", {"default": 0, "min": 0, "max": 50}), } } @@ -349,27 +350,31 @@ class VrchImageWebSocketFilterSettingsNode: CATEGORY = CATEGORY def build_filters_json(self, - blur, + opacity, brightness, contrast, - grayscale, + saturate, hue_rotate, invert, - saturate, sepia, - opacity): + blur, + **legacy): + """Build the filters JSON. + + Note: grayscale has been removed. Any legacy workflows providing a + grayscale positional/keyword argument will be ignored gracefully via **legacy. + """ # Produce object matching previous spec {"filters": {...}} for backward compatibility payload = { "filters": { - "blur": int(blur), + "opacity": float(opacity), "brightness": float(brightness), "contrast": float(contrast), - "grayscale": float(grayscale), + "saturate": float(saturate), "hueRotate": int(hue_rotate), "invert": float(invert), - "saturate": float(saturate), "sepia": float(sepia), - "opacity": float(opacity), + "blur": int(blur), } } return (payload,) diff --git a/web/comfyui/websocket_nodes.js b/web/comfyui/websocket_nodes.js index 7062e57..78be69b 100644 --- a/web/comfyui/websocket_nodes.js +++ b/web/comfyui/websocket_nodes.js @@ -295,27 +295,26 @@ app.registerExtension({ name: "vrch.ImageWebSocketFilterSettings", async nodeCreated(node) { if (node.comfyClass === "VrchImageWebSocketFilterSettingsNode") { + // New order (grayscale removed): opacity, brightness, contrast, saturate, hue_rotate, invert, sepia, blur const widgetNames = [ - "blur", + "opacity", "brightness", "contrast", - "grayscale", + "saturate", "hue_rotate", "invert", - "saturate", "sepia", - "opacity" + "blur" ]; const defaults = { - blur: 0, + opacity: 1.0, brightness: 1.0, contrast: 1.0, - grayscale: 0.0, + saturate: 1.0, hue_rotate: 0, invert: 0.0, - saturate: 1.0, sepia: 0.0, - opacity: 1.0, + blur: 0, }; // Create button container