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