|
|
@@ -0,0 +1,248 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8" />
|
|
|
+ <meta name="viewport" content="width=device-width" />
|
|
|
+ <title>Rgb</title>
|
|
|
+ <style>
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <script>
|
|
|
+
|
|
|
+ function Control(el, {value=0, step=1,
|
|
|
+ max=100, min=0,
|
|
|
+ maxAngle=360, minAngle=0}={}){
|
|
|
+
|
|
|
+ const img = document.createElement('img')
|
|
|
+ img.src = '1@3x.png'
|
|
|
+ el.append(img)
|
|
|
+
|
|
|
+ const ratio = (maxAngle - minAngle) / (max - min)
|
|
|
+
|
|
|
+ const value2Deg = () => ratio * (value - min) + minAngle
|
|
|
+
|
|
|
+ const changeValue = (delta, fireEvent=false) => {
|
|
|
+ let newValue = value +delta
|
|
|
+ if (newValue >= max) newValue = max
|
|
|
+ if (newValue <= min) newValue = min
|
|
|
+
|
|
|
+ value = newValue
|
|
|
+
|
|
|
+ //console.log(value)
|
|
|
+
|
|
|
+ if (fireEvent && this.onChange && typeof this.onChange === 'function'){
|
|
|
+ this.onChange(value)
|
|
|
+ }
|
|
|
+
|
|
|
+ img.style.transform = `rotate(${value2Deg()}deg)`;
|
|
|
+ }
|
|
|
+
|
|
|
+ const {top, left} = img.getBoundingClientRect()
|
|
|
+
|
|
|
+ changeValue(0)
|
|
|
+
|
|
|
+ console.log(img.width, top, left)
|
|
|
+
|
|
|
+ img.onclick = e => {
|
|
|
+ changeValue(e.clientX - left > img.width/2 ? step : -step, true)
|
|
|
+ }
|
|
|
+
|
|
|
+ img.onmousewheel = e => {
|
|
|
+ changeValue(e.deltaY * step, true)
|
|
|
+ e.preventDefault()
|
|
|
+ }
|
|
|
+
|
|
|
+ let startDragAngle;
|
|
|
+
|
|
|
+ const calcAngle = ({layerX, layerY}) => {
|
|
|
+ const deltaX = layerX - img.width/2
|
|
|
+ const deltaY = layerY - img.height/2
|
|
|
+ return (Math.atan2(deltaY, deltaX)/ Math.PI) * 180
|
|
|
+ }
|
|
|
+
|
|
|
+ img.onmousedown = e => {
|
|
|
+ startDragAngle = calcAngle(e)
|
|
|
+ e.preventDefault()
|
|
|
+ }
|
|
|
+
|
|
|
+ img.onmousemove = e => {
|
|
|
+ if (startDragAngle !== undefined){
|
|
|
+ const currentAngle = calcAngle(e)
|
|
|
+ const deltaAngle = currentAngle - startDragAngle
|
|
|
+ changeValue(deltaAngle/ratio, true)
|
|
|
+ startDragAngle = currentAngle
|
|
|
+ e.preventDefault()
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ img.onmouseup = img.onmouseout = e => {
|
|
|
+ if (startDragAngle){
|
|
|
+ startDragAngle = undefined
|
|
|
+ e.preventDefault()
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.setValue = v => changeValue(v - value)
|
|
|
+ this.changeValue = changeValue
|
|
|
+
|
|
|
+ this.getValue = () => value
|
|
|
+ }
|
|
|
+
|
|
|
+ function rgbConst(parent){
|
|
|
+
|
|
|
+ this.container = document.createElement("div");
|
|
|
+ this.container.style = "display: flex;";
|
|
|
+ parent.appendChild(container);
|
|
|
+
|
|
|
+ this.fullColor = document.createElement("div");
|
|
|
+ this.fullColor.setAttribute("style","background-color: rgb(64, 64, 64); width: 150px; height: 150px; margin: 5px");
|
|
|
+ container.appendChild(this.fullColor);
|
|
|
+
|
|
|
+
|
|
|
+ this.r = new Control(container, {max:255, value: 64});
|
|
|
+ this.r.onChange = () => this.changeColor()
|
|
|
+
|
|
|
+ this.g = new Control(container, {max:255, value: 64});
|
|
|
+ this.g.onChange = () => this.changeColor()
|
|
|
+
|
|
|
+ this.b = new Control(container, {max:255, value: 64});
|
|
|
+ this.b.onChange = () => this.changeColor()
|
|
|
+
|
|
|
+ this.rgbImg = document.getElementsByTagName("img");
|
|
|
+
|
|
|
+ for(let i = 0; i < this.rgbImg.length; i++) {
|
|
|
+ let colors = ["red", "green", "blue"];
|
|
|
+ this.rgbImg[i].style = `width: 130px; padding: 10px; background-color: ${colors[i]}; border-radius: 50%; margin: 5px; transform: rotate(90deg)`;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ this.changeColor = function() {
|
|
|
+ let value1 = this.r.getValue();
|
|
|
+ let value2 = this.g.getValue();
|
|
|
+ let value3 = this.b.getValue();
|
|
|
+ this.fullColor.setAttribute("style",`background-color: rgb(${value1}, ${value2}, ${value3}); width: 150px; height: 150px`);
|
|
|
+ }
|
|
|
+ this.changeColor()
|
|
|
+ }
|
|
|
+
|
|
|
+ function Audio(parent) {
|
|
|
+ this.audioContainer = document.createElement("div");
|
|
|
+ this.audioContainer.id = "volumeControl"
|
|
|
+ parent.appendChild(audioContainer)
|
|
|
+
|
|
|
+ this.audio = document.createElement("audio");
|
|
|
+ this.audio.setAttribute("src", "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-16.mp3")
|
|
|
+ this.audio.setAttribute("controls", "controls")
|
|
|
+ this.audio.style = "margin: 20px"
|
|
|
+ this.audioContainer.appendChild(audio);
|
|
|
+
|
|
|
+ this.audioVolume = new Control(audioContainer, {value: -500, max: 1, min: 0, step: 0.00000001});
|
|
|
+ this.audioVolume.onChange = () => this.changeVolume(this.audioVolume.getValue())
|
|
|
+
|
|
|
+ this.volumeControl = document.getElementById("volumeControl");
|
|
|
+ this.img = volumeControl.getElementsByTagName("img");
|
|
|
+ this.img[0].style = "width: 100px"
|
|
|
+
|
|
|
+ this.valueDirection = document.createElement("span");
|
|
|
+ this.valueDirection.innerText = `${this.audioVolume.getValue()}`
|
|
|
+ this.audioContainer.appendChild(this.valueDirection)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ this.changeVolume = function(value) {
|
|
|
+ this.audio.volume = `${value}`;
|
|
|
+ this.valueDirection.innerText = `${[Math.round(this.audioVolume.getValue() * 100)]}`
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ rgbConst(document.body)
|
|
|
+ Audio(document.body)
|
|
|
+
|
|
|
+
|
|
|
+ // const volumeControl = new Control(container1, {value: 50})
|
|
|
+
|
|
|
+ // volumeControl.onChange = (value) => console.log('VOLUME', value)
|
|
|
+ // const balanceControl = new Control(container2, {maxAngle: 90, minAngle: 0, min: -50, max: 50, value: 25})
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ /*
|
|
|
+ function registerForm(el){
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ const loginInput = document.createElement('input')
|
|
|
+ const passwordInput = document.createElement('input')
|
|
|
+
|
|
|
+ const cancelButton = document.createElement('button')
|
|
|
+ const okButton = document.createElement('button')
|
|
|
+
|
|
|
+ el.append(loginInput)
|
|
|
+ el.append(passwordInput)
|
|
|
+
|
|
|
+ el.append(cancelButton)
|
|
|
+ okButton.innerText = 'ok'
|
|
|
+ el.append(okButton)
|
|
|
+ cancelButton.innerText = 'ne ok'
|
|
|
+
|
|
|
+ function clear(){
|
|
|
+ loginInput.remove()
|
|
|
+ passwordInput.remove()
|
|
|
+
|
|
|
+ okButton.remove()
|
|
|
+ cancelButton.remove()
|
|
|
+ }
|
|
|
+
|
|
|
+ okButton.onclick = () => {
|
|
|
+ clear()
|
|
|
+ resolve({login: loginInput.value, password: passwordInput.value});
|
|
|
+ }
|
|
|
+
|
|
|
+ cancelButton.onclick = () => {
|
|
|
+ clear();
|
|
|
+ reject(new Error('cancel'))
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ async function RegAndLog(){
|
|
|
+ try{
|
|
|
+ title.innerText = 'Register Please'
|
|
|
+ let regLogin, regPassword, a, b;
|
|
|
+ while(!regLogin || !regPassword)
|
|
|
+ {
|
|
|
+ [{login:regLogin, password: regPassword}]= [await registerForm(container)]
|
|
|
+ }
|
|
|
+// await ServerRegister({regLogin, regPassword})
|
|
|
+
|
|
|
+ title.innerText = 'Login Please'
|
|
|
+ const {login, password} = await registerForm(container)
|
|
|
+ console.log(login, password, regLogin, regPassword)
|
|
|
+// await ServerLogin({login, password})
|
|
|
+ if (regLogin === login && regPassword === password){
|
|
|
+ title.innerText = 'Регистрация и Логин прошли ЗБС'
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ title.innerText = 'Регистрация и Логин не прошли'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ catch(e){
|
|
|
+ title.innerText = 'якийс негаразд: ' + e.message
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ RegAndLog()
|
|
|
+ let a=5,b=10;
|
|
|
+ [{a,b}] = [{b,a}]
|
|
|
+ console.log(a, b) */
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
