Implement #6

Added Color Wheel for Visualization

README.md

@@ -22,6 +22,8 @@ refer to the parameters and sample images below and play around with the values.
 - **Saturation:** Adjust the overall saturation of the image
 
 #### Color Channels
+- Now comes with a Color Wheel for visualization
+
 <table>
     <thead align="center">
         <tr>
@@ -53,7 +55,7 @@ refer to the parameters and sample images below and play around with the values.
 - **Reset:** Revert all settings to the default values
 - **Randomize:** Randomize `Brightness`, `Contrast`, `Saturation`, `R`, `G`, `B`
 
-#### Styles Preset
+#### Style Presets
 - Use the `Dropdown` to select a Style to apply
 - To save a Style, enter a name in the `Textbox` then click **Save Style**
 - To delete a Style, enter the name in the `Textbox` then click **Delete Style**
@@ -135,12 +137,12 @@ refer to the parameters and sample images below and play around with the values.
 - [X] Add Support for **X/Y/Z Plot**
 - [X] Implement different Noise functions
 - [X] Add Randomize functions
-- [X] Styles Preset
+- [X] Style Presets
 - [ ] Implement a better scaling algorithm
 - [ ] Fix the Brightness issues
 - [ ] Add Gradient feature
 - [ ] Append Parameters onto Metadata
-- [ ] Implement Color Picker / Color Wheel
+- [X] Implement ~~Color Picker~~ Color Wheel
 - [ ] Add Support for **Inpaint**
 
 <p align="center"><img src="samples/XYZ.jpg" width=768></p>

change.log

@@ -0,0 +1,29 @@
+v1.0.0 - 2023 Jun.20
+	Extension Released
+
+v1.1.0 - 2023 Jun.21
+	X/Y/Z Plot Support
+
+v1.1.1 - 2023 Jun.22
+	Batch Support
+
+v1.1.2 - 2023 Jun.23
+	Bug Fix
+
+v1.1.3 - 2023 Jun.26
+	Automatically Refresh Sliders
+
+v1.2.0 - 2023 Jul.03
+	Implement Multiple Noise Functions
+
+v1.2.1 - 2023 Jul.05
+	Add Reset & Randomize Functions
+
+v1.3.0 - 2023 Jul.06
+	Implement Style Presets
+
+v1.3.1 - 2023 Jul.06
+	Bug Fix
+
+v1.3.2 - 2023 Jul.07
+	Implement Color Wheel

javascript/vec_cc.js

@@ -0,0 +1,31 @@
+onUiLoaded(async () => {
+
+    const Modes = ['txt', 'img']
+
+    Modes.forEach((mode) => {
+
+        const container = document.getElementById('cc-colorwheel-' + mode)
+        container.style.height = '200px'
+
+        container.querySelector('.float').remove()
+        container.querySelector('.download').remove()
+
+        const wheel = container.getElementsByTagName('img')[0]
+        wheel.style.width = '100%'
+        wheel.style.height = '100%'
+        wheel.style.margin = 'auto'
+
+        const temp = document.getElementById('cc-temp-' + mode)
+
+        const dot = temp.getElementsByTagName('img')[0]
+        dot.id = 'cc-dot-' + mode
+
+        container.appendChild(dot)
+        dot.style.left = 'calc(50% - 12px)'
+        dot.style.top = 'calc(50% - 12px)'
+
+        temp.remove()
+
+    })
+
+})

scripts/cc.py

@@ -8,6 +8,10 @@ from scripts.cc_version import *
 from scripts.cc_noise import *
 from scripts.cc_style import StyleManager
 
+from scripts.cc_colorpicker import create_colorpicker
+from scripts.cc_colorpicker import horizontal_js
+from scripts.cc_colorpicker import vertical_js
+
 style_manager = StyleManager()
 
 class VectorscopeCC(scripts.Script):
@@ -76,9 +80,19 @@ class VectorscopeCC(scripts.Script):
                 sat = gr.Slider(label="Saturation", minimum=0.5, maximum=1.5, step=0.05, value=1.0)
 
             with gr.Row():
-                r = gr.Slider(label="R", info='Cyan | Red', minimum=-2.5, maximum=2.5, step=0.05, value=0.0)
-                g = gr.Slider(label="G", info='Magenta | Green',minimum=-2.5, maximum=2.5, step=0.05, value=0.0)
-                b = gr.Slider(label="B", info='Yellow | Blue',minimum=-2.5, maximum=2.5, step=0.05, value=0.0)
+                with gr.Column():
+                    r = gr.Slider(label="R", info='Cyan | Red', minimum=-2.5, maximum=2.5, step=0.05, value=0.0)
+                    g = gr.Slider(label="G", info='Magenta | Green',minimum=-2.5, maximum=2.5, step=0.05, value=0.0)
+                    b = gr.Slider(label="B", info='Yellow | Blue',minimum=-2.5, maximum=2.5, step=0.05, value=0.0)
+                
+                create_colorpicker(is_img2img)
+
+                r.input(None, inputs=[r, g, b], outputs=[], _js=horizontal_js(is_img2img))
+                r.input(None, inputs=[r, g, b], outputs=[], _js=vertical_js(is_img2img))
+                g.input(None, inputs=[r, g, b], outputs=[], _js=horizontal_js(is_img2img))
+                g.input(None, inputs=[r, g, b], outputs=[], _js=vertical_js(is_img2img))
+                b.input(None, inputs=[r, g, b], outputs=[], _js=horizontal_js(is_img2img))
+                b.input(None, inputs=[r, g, b], outputs=[], _js=vertical_js(is_img2img))
 
             with gr.Accordion("Styles", open=False):
                 

scripts/cc_colorpicker.py

@@ -0,0 +1,21 @@
+import modules.scripts as scripts
+import gradio as gr
+
+WHEEL = scripts.basedir() + '/samples/Vectorscope.png'
+DOT = scripts.basedir() + '/scripts/dot.png'
+
+def create_colorpicker(is_img):
+	gr.Image(WHEEL, type='filepath', interactive=False, container=False, elem_id='cc-colorwheel-' + ('img' if is_img else 'txt'))
+	gr.Image(DOT, type='filepath', interactive=False, container=False, elem_id='cc-temp-' + ('img' if is_img else 'txt'))
+
+def horizontal_js(is_img):
+	if is_img:
+		return "(r, g, b) => {document.getElementById('cc-dot-img').style.left = 'calc(50% + ' + (25 * Math.sqrt(r*r+g*g+b*b) * (r * -0.5 + g * -0.5 + b * 1.0) / (Math.abs(r) + Math.abs(g) + Math.abs(b)) - 12) + 'px)'}"
+	else:
+		return "(r, g, b) => {document.getElementById('cc-dot-txt').style.left = 'calc(50% + ' + (25 * Math.sqrt(r*r+g*g+b*b) * (r * -0.5 + g * -0.5 + b * 1.0) / (Math.abs(r) + Math.abs(g) + Math.abs(b)) - 12) + 'px)'}"
+
+def vertical_js(is_img):
+	if is_img:	
+		return "(r, g, b) => {document.getElementById('cc-dot-img').style.top = 'calc(50% + ' + (25 * Math.sqrt(r*r+g*g+b*b) * (r * -0.866 + g * 0.866 + b * 0.0) / (Math.abs(r) + Math.abs(g) + Math.abs(b)) - 12) + 'px)'}"
+	else:
+		return "(r, g, b) => {document.getElementById('cc-dot-txt').style.top = 'calc(50% + ' + (25 * Math.sqrt(r*r+g*g+b*b) * (r * -0.866 + g * 0.866 + b * 0.0) / (Math.abs(r) + Math.abs(g) + Math.abs(b)) - 12) + 'px)'}"

scripts/cc_version.py

@@ -1,7 +1,7 @@
 import modules.scripts as scripts
 import json
 
-VERSION = 'v1.3.0'
+VERSION = 'v1.3.2'
 
 def clean_outdated(EXT_NAME:str):
     with open(scripts.basedir() + '/' + 'ui-config.json', 'r') as json_file:

style.css

@@ -0,0 +1,11 @@
+#cc-dot-txt {
+    position: absolute;
+    width: 24px;
+    height: 24px;
+}
+
+#cc-dot-img {
+    position: absolute;
+    width: 24px;
+    height: 24px;
+}