|
|
@@ -0,0 +1,126 @@
|
|
|
+
|
|
|
+const redValue = document.getElementById("red");
|
|
|
+const greenValue = document.getElementById("green");
|
|
|
+const blueValue = document.getElementById("blue");
|
|
|
+
|
|
|
+function Control(el, {value=0,
|
|
|
+ min=0,
|
|
|
+ max=100,
|
|
|
+ minAngle=0,
|
|
|
+ maxAngle=360,
|
|
|
+ wheelSpeed=0.05,
|
|
|
+ step=1}={}){
|
|
|
+
|
|
|
+const img = document.createElement('img')
|
|
|
+img.src = './assets/1@3x.png'
|
|
|
+el.append(img)
|
|
|
+
|
|
|
+const ratio = (maxAngle - minAngle) / (max - min)
|
|
|
+const getAngle = () => (value - min) * ratio + minAngle
|
|
|
+
|
|
|
+this.setValue = newValue => {
|
|
|
+if (newValue > max)
|
|
|
+newValue = max
|
|
|
+if (newValue < min)
|
|
|
+newValue = min
|
|
|
+
|
|
|
+if (typeof this.onchange === 'function' && newValue !== value)
|
|
|
+this.onchange(newValue)
|
|
|
+
|
|
|
+value = newValue
|
|
|
+
|
|
|
+img.style.transform = `rotate(${getAngle()}deg)`
|
|
|
+}
|
|
|
+
|
|
|
+img.onmousewheel = (event) => {
|
|
|
+const {deltaY} = event
|
|
|
+//console.log(deltaY)
|
|
|
+this.setValue(value + deltaY * wheelSpeed)
|
|
|
+event.preventDefault()
|
|
|
+}
|
|
|
+
|
|
|
+img.onclick = (event) => {
|
|
|
+const {layerX} = event
|
|
|
+if (layerX < img.width/2)
|
|
|
+this.setValue(value -step)
|
|
|
+else
|
|
|
+this.setValue(value +step)
|
|
|
+event.preventDefault()
|
|
|
+}
|
|
|
+
|
|
|
+const event2Deg = event => {
|
|
|
+const {layerX, layerY} = event
|
|
|
+const {width, height} = img
|
|
|
+const x = layerX - width/2
|
|
|
+const y = height/2 - layerY
|
|
|
+
|
|
|
+//console.log(x, y, width, height)
|
|
|
+
|
|
|
+return ((Math.atan2(y, x) / (2 * Math.PI)) * 360 + 360) % 360
|
|
|
+}
|
|
|
+
|
|
|
+let prevAngle = null
|
|
|
+
|
|
|
+img.onmousedown = (event) => {
|
|
|
+prevAngle = event2Deg(event)
|
|
|
+}
|
|
|
+
|
|
|
+img.onmousemove = (event) => {
|
|
|
+if (prevAngle === null) return
|
|
|
+
|
|
|
+const currentAngle = event2Deg(event)
|
|
|
+const deltaValue = (prevAngle - currentAngle) / ratio
|
|
|
+//console.log(prevAngle - currentAngle, deltaValue)
|
|
|
+this.setValue(value +deltaValue)
|
|
|
+
|
|
|
+prevAngle = currentAngle
|
|
|
+event.preventDefault()
|
|
|
+}
|
|
|
+
|
|
|
+img.onmouseup = (event) => {
|
|
|
+prevAngle = null
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+this.setValue(value)
|
|
|
+this.getValue = () => value
|
|
|
+}
|
|
|
+
|
|
|
+const red = new Control(container1, {min: 0, max: 255})
|
|
|
+red.onchange = setRGB;
|
|
|
+const green = new Control(container1, {min: 0, max: 255})
|
|
|
+green.onchange = setRGB
|
|
|
+const blue = new Control(container1, {min: 0, max: 255})
|
|
|
+blue.onchange = setRGB
|
|
|
+
|
|
|
+////сделать три крутилки для RGB
|
|
|
+////и обновлять цвет блока/фона блока при вращении любой из трех
|
|
|
+//setTimeout(() => volumeControl.setValue(80), 2000)
|
|
|
+
|
|
|
+// }
|
|
|
+
|
|
|
+function setRGB(){
|
|
|
+redValue.value = red.getValue().toFixed();
|
|
|
+greenValue.value = green.getValue().toFixed();
|
|
|
+blueValue.value = blue.getValue().toFixed();
|
|
|
+
|
|
|
+document.body.style.backgroundColor = `rgb(${red.getValue()}, ${green.getValue()}, ${blue.getValue()})`;
|
|
|
+//какой то блок, которому меняем цвет через rgba и цвета крутилок
|
|
|
+}
|
|
|
+
|
|
|
+const volumeControl = new Control(container2, {value: 75,
|
|
|
+ min: 0,
|
|
|
+ max: 100,
|
|
|
+ minAngle: -90, maxAngle: 90})
|
|
|
+console.log(volumeControl);
|
|
|
+
|
|
|
+volumeControl.onchange = setVolume;
|
|
|
+const audio = document.getElementById("audio");
|
|
|
+
|
|
|
+function setVolume(){
|
|
|
+ audio.volume = (volumeControl.getValue())/100
|
|
|
+ console.log( audio.volume)
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+//пришейте к нему тэг audio для громкости
|
