1580158
/
sd-webui-vectorscope-cc
mirror of https://github.com/Haoming02/sd-webui-vectorscope-cc.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve color wheel responsiveness

pull/13/head
catboxanon 2023-09-12 12:48:51 -04:00
parent a7eaa3a54a
commit 6d739194cb
1 changed files with 65 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
javascript/vec_cc.js
View File

@ -1,55 +1,80 @@
function registerPicker(wheel, sliders) {
wheel.onmousemove = function (e) {
e.preventDefault();
if (e.buttons != 1) {
return;
}
for (const event of ['mousemove', 'click']) {
wheel.addEventListener(event, (e) => {
e.preventDefault();
const rect = e.target.getBoundingClientRect();
var x = ((e.clientX - rect.left) - 100.0) / 25;
var y = ((e.clientY - rect.top) - 100.0) / 25;
const rect = e.target.getBoundingClientRect();
const zeta = Math.atan(y / x)
var degree = 0
if (e.type != 'click') {
if (e.buttons != 1) {
return;
}
if (x >= 0) {
if (y >= 0)
degree = zeta * 180 / Math.PI
else
degree = 360 + zeta * 180 / Math.PI
}
else if (x < 0) {
degree = 180 + zeta * 180 / Math.PI
}
const dot = e.target.parentElement.querySelector('#cc-dot-txt');
dot.style.position = 'fixed';
dot.style.left = e.x - (dot.width / 2) + 'px';
dot.style.top = e.y - (dot.height / 2) + 'px';
}
// -0.5r - 0.5g + b = x
// -0.866r + 0.866g = y
// 240r + 120g = z * rgb
x = ((e.clientX - rect.left) - 100.0) / 25;
y = ((e.clientY - rect.top) - 100.0) / 25;
// g = (1 / 0.866)y + r
// -0.5r - 0.5((1 / 0.866)y + r) + b = x
// b = x + 0.5r + 0.5((1 / 0.866)y + r)
const zeta = Math.atan(y / x)
var degree = 0
// 240r + 120(1 / 0.866)y + r = z * r((1 / 0.866)y + r)(x + 0.5r + 0.5((1 / 0.866)y + r))
if (x >= 0) {
if (y >= 0)
degree = zeta * 180 / Math.PI
else
degree = 360 + zeta * 180 / Math.PI
}
else if (x < 0) {
degree = 180 + zeta * 180 / Math.PI
}
var r = -(0.00077 * (433 * x * degree + 750 * y * degree) / degree)
var g = y / 0.866 + r
var b = x + 0.5 * r + 0.5 * g
// -0.5r - 0.5g + b = x
// -0.866r + 0.866g = y
// 240r + 120g = z * rgb
const mag = Math.sqrt(r * r + g * g + b * b)
const len = Math.abs(r) + Math.abs(g) + Math.abs(b)
// g = (1 / 0.866)y + r
// -0.5r - 0.5((1 / 0.866)y + r) + b = x
// b = x + 0.5r + 0.5((1 / 0.866)y + r)
r = r / mag * len
g = g / mag * len
b = b / mag * len
// 240r + 120(1 / 0.866)y + r = z * r((1 / 0.866)y + r)(x + 0.5r + 0.5((1 / 0.866)y + r))
sliders[0].value = r.toFixed(2)
updateInput(sliders[0])
sliders[1].value = g.toFixed(2)
updateInput(sliders[1])
sliders[2].value = b.toFixed(2)
updateInput(sliders[2])
var r = -(0.00077 * (433 * x * degree + 750 * y * degree) / degree)
var g = y / 0.866 + r
var b = x + 0.5 * r + 0.5 * g
const mag = Math.sqrt(r * r + g * g + b * b)
const len = Math.abs(r) + Math.abs(g) + Math.abs(b)
r = r / mag * len
g = g / mag * len
b = b / mag * len
sliders[0].value = r.toFixed(2)
sliders[0].closest('.gradio-slider').querySelector('input[type=range]').value = r.toFixed(2)
sliders[1].value = g.toFixed(2)
sliders[1].closest('.gradio-slider').querySelector('input[type=range]').value = g.toFixed(2)
sliders[2].value = b.toFixed(2)
sliders[2].closest('.gradio-slider').querySelector('input[type=range]').value = b.toFixed(2)
if (e.type == 'click') {
updateInput(sliders[0])
updateInput(sliders[1])
updateInput(sliders[2])
}
})
}
wheel.addEventListener('mouseup', (e) => {
const dot = e.target.parentElement.querySelector('#cc-dot-txt');
dot.style.position = 'absolute';
updateInput(sliders[0])
updateInput(sliders[1])
updateInput(sliders[2])
})
}
onUiLoaded(async () => {