removed no longer needed html file for readme.
This commit is contained in:
loficoding
-249
@@ -1,249 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ComfyUI Node HUD 🛠️</title>
|
||||
<style>
|
||||
/* From extension vscode.github */
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.vscode-dark img[src$=\#gh-light-mode-only],
|
||||
.vscode-light img[src$=\#gh-dark-mode-only],
|
||||
.vscode-high-contrast:not(.vscode-high-contrast-light) img[src$=\#gh-light-mode-only],
|
||||
.vscode-high-contrast-light img[src$=\#gh-dark-mode-only] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/markdown.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/highlight.css">
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.task-list-item {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.task-list-item-checkbox {
|
||||
margin-left: -20px;
|
||||
vertical-align: middle;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
:root {
|
||||
--color-note: #0969da;
|
||||
--color-tip: #1a7f37;
|
||||
--color-warning: #9a6700;
|
||||
--color-severe: #bc4c00;
|
||||
--color-caution: #d1242f;
|
||||
--color-important: #8250df;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-note: #2f81f7;
|
||||
--color-tip: #3fb950;
|
||||
--color-warning: #d29922;
|
||||
--color-severe: #db6d28;
|
||||
--color-caution: #f85149;
|
||||
--color-important: #a371f7;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
.markdown-alert {
|
||||
padding: 0.5rem 1rem;
|
||||
margin-bottom: 16px;
|
||||
color: inherit;
|
||||
border-left: .25em solid #888;
|
||||
}
|
||||
|
||||
.markdown-alert>:first-child {
|
||||
margin-top: 0
|
||||
}
|
||||
|
||||
.markdown-alert>:last-child {
|
||||
margin-bottom: 0
|
||||
}
|
||||
|
||||
.markdown-alert .markdown-alert-title {
|
||||
display: flex;
|
||||
font-weight: 500;
|
||||
align-items: center;
|
||||
line-height: 1
|
||||
}
|
||||
|
||||
.markdown-alert .markdown-alert-title .octicon {
|
||||
margin-right: 0.5rem;
|
||||
display: inline-block;
|
||||
overflow: visible !important;
|
||||
vertical-align: text-bottom;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.markdown-alert.markdown-alert-note {
|
||||
border-left-color: var(--color-note);
|
||||
}
|
||||
|
||||
.markdown-alert.markdown-alert-note .markdown-alert-title {
|
||||
color: var(--color-note);
|
||||
}
|
||||
|
||||
.markdown-alert.markdown-alert-important {
|
||||
border-left-color: var(--color-important);
|
||||
}
|
||||
|
||||
.markdown-alert.markdown-alert-important .markdown-alert-title {
|
||||
color: var(--color-important);
|
||||
}
|
||||
|
||||
.markdown-alert.markdown-alert-warning {
|
||||
border-left-color: var(--color-warning);
|
||||
}
|
||||
|
||||
.markdown-alert.markdown-alert-warning .markdown-alert-title {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.markdown-alert.markdown-alert-tip {
|
||||
border-left-color: var(--color-tip);
|
||||
}
|
||||
|
||||
.markdown-alert.markdown-alert-tip .markdown-alert-title {
|
||||
color: var(--color-tip);
|
||||
}
|
||||
|
||||
.markdown-alert.markdown-alert-caution {
|
||||
border-left-color: var(--color-caution);
|
||||
}
|
||||
|
||||
.markdown-alert.markdown-alert-caution .markdown-alert-title {
|
||||
color: var(--color-caution);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body class="vscode-body vscode-light">
|
||||
<h1 id="comfyui-node-hud-️">ComfyUI Node HUD 🛠️</h1>
|
||||
<p><strong>Stop the spaghetti. Keep the data.</strong></p>
|
||||
<p>A lightweight UI extension for <a href="https://github.com/comfyanonymous/ComfyUI">ComfyUI</a> that adds a smart "Heads-Up Display" (HUD) to your nodes. It allows you to stack nodes behind one another to clean up your workspace, while still seeing exactly what is happening inside the stack via a sleek, tinted-glass dock.</p>
|
||||
<p><img src="file:///c:\Users\bthom\OneDrive\Desktop\ComfyUI_windows_portable\ComfyUI\custom_nodes\ComfyUI-Node-HUD\placeholder_for_your_screenshot.png" alt="Main Screenshot"></p>
|
||||
<h2 id="-features">✨ Features</h2>
|
||||
<h3 id="1-hiding-nodes">1. Hiding Nodes</h3>
|
||||
<p>Hide utility nodes (like String Primitives, Notes, or multiple LoRAs) behind a single "Parent" node. Clean Layout Dock detects these hidden nodes and generates a live status bar attached to the bottom of the parent.</p>
|
||||
<h3 id="2-smart-io-indicators-">2. Smart I/O Indicators 🚦</h3>
|
||||
<p>No more guessing if a hidden node is connected. The dock displays <strong>Smart Dots</strong> that visualize the data flow:</p>
|
||||
<ul>
|
||||
<li><strong>Left Dots (Inputs):</strong> Shows active incoming connections.</li>
|
||||
<li><strong>Right Dots (Outputs):</strong> Shows active outgoing data.</li>
|
||||
<li><strong>Color Coded:</strong> The dots match ComfyUI's standard wire colors:
|
||||
<ul>
|
||||
<li>🟣 <strong>Purple:</strong> Model</li>
|
||||
<li>🟡 <strong>Yellow:</strong> CLIP</li>
|
||||
<li>🔴 <strong>Red:</strong> VAE</li>
|
||||
<li>🌸 <strong>Pink:</strong> Latent</li>
|
||||
<li>🔵 <strong>Blue:</strong> Image</li>
|
||||
<li>🟢 <strong>Green:</strong> String / Text</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h3 id="3-live-status-feedback">3. Live Status Feedback</h3>
|
||||
<p>The dock updates in real-time to reflect the state of your nodes:</p>
|
||||
<ul>
|
||||
<li><strong>Active:</strong> Green text / Standard border.</li>
|
||||
<li><strong>Muted:</strong> Gray border & dimmed text.</li>
|
||||
<li><strong>Bypassed:</strong> Purple border.</li>
|
||||
<li><strong>Disconnected:</strong> If a node has no active inputs or outputs, a red error dot 🔴 appears.</li>
|
||||
</ul>
|
||||
<h3 id="4-tinted-glass-ui">4. "Tinted Glass" UI</h3>
|
||||
<p>The dock uses a semi-transparent dark background (85% opacity) to ensure readability without feeling "heavy" or blocking the grid entirely.</p>
|
||||
<hr>
|
||||
<h2 id="-installation">📥 Installation</h2>
|
||||
<h3 id="method-1-manager-coming-soon">Method 1: Manager (Coming Soon)</h3>
|
||||
<p><em>Once indexed, you can install this via the ComfyUI Manager.</em></p>
|
||||
<h3 id="method-2-manual-install">Method 2: Manual Install</h3>
|
||||
<ol>
|
||||
<li>Navigate to your ComfyUI <code>custom_nodes</code> directory:<pre><code class="language-bash"><span class="hljs-built_in">cd</span> ComfyUI/custom_nodes/
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>Clone this repository:<pre><code class="language-bash">git <span class="hljs-built_in">clone</span> [https://github.com/YOUR_USERNAME/ComfyUI-Clean-Dock.git](https://github.com/YOUR_USERNAME/ComfyUI-Clean-Dock.git)
|
||||
</code></pre>
|
||||
</li>
|
||||
<li><strong>Restart ComfyUI</strong>.</li>
|
||||
</ol>
|
||||
<hr>
|
||||
<h2 id="️-usage">🖱️ Usage</h2>
|
||||
<ol>
|
||||
<li><strong>Stack Your Nodes:</strong> Drag utility nodes (like <em>Primitive</em> or <em>Note</em>) physically behind a larger "Parent" node (like <em>Prompt Manager</em> or <em>KSampler</em>).</li>
|
||||
<li><strong>Activate the Dock:</strong>
|
||||
<ul>
|
||||
<li>Right-click the Parent Node.</li>
|
||||
<li>Select <strong>"Toggle Stack Info"</strong> from the menu.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><strong>That's it!</strong> The dock will appear. If you move the nodes out from behind the parent, the dock updates instantly.</li>
|
||||
</ol>
|
||||
<hr>
|
||||
<h2 id="-color-legend">🎨 Color Legend</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="text-align:left">Color</th>
|
||||
<th style="text-align:left">Meaning</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="text-align:left">🟣</td>
|
||||
<td style="text-align:left"><strong>Model</strong> (Checkpoint / LoRA)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align:left">🟡</td>
|
||||
<td style="text-align:left"><strong>CLIP</strong> (Conditioning)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align:left">🔴</td>
|
||||
<td style="text-align:left"><strong>VAE</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align:left">🌸</td>
|
||||
<td style="text-align:left"><strong>Latent</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align:left">🔵</td>
|
||||
<td style="text-align:left"><strong>Image</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align:left">🟢</td>
|
||||
<td style="text-align:left"><strong>String</strong> / Text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align:left">🔴 (Solid)</td>
|
||||
<td style="text-align:left"><strong>Error</strong> / Disconnected</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h2 id="-contributing">🤝 Contributing</h2>
|
||||
<p>This extension is pure JavaScript. Feel free to submit PRs for new features or styling tweaks!</p>
|
||||
<h2 id="-license">📄 License</h2>
|
||||
<p>MIT License.</p>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user