3 anos atrás · 47c9f233ee
--- a/RGB/.idea/.gitignore
+++ b/RGB/.idea/.gitignore
@@ -0,0 +1,5 @@
 
																+# Default ignored files
															
 
																+/shelf/
															
 
																+/workspace.xml
															
 
																+# Editor-based HTTP Client requests
															
 
																+/httpRequests/
															
--- a/RGB/.idea/.name
+++ b/RGB/.idea/.name
@@ -0,0 +1 @@
 
																+script.js
															
--- a/RGB/.idea/ClassWork.iml
+++ b/RGB/.idea/ClassWork.iml
@@ -0,0 +1,12 @@
 
																+<?xml version="1.0" encoding="UTF-8"?>
															
 
																+<module type="WEB_MODULE" version="4">
															
 
																+  <component name="NewModuleRootManager">
															
 
																+    <content url="file://$MODULE_DIR$">
															
 
																+      <excludeFolder url="file://$MODULE_DIR$/temp" />
															
 
																+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
															
 
																+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
															
 
																+    </content>
															
 
																+    <orderEntry type="inheritedJdk" />
															
 
																+    <orderEntry type="sourceFolder" forTests="false" />
															
 
																+  </component>
															
 
																+</module>
															
--- a/RGB/.idea/modules.xml
+++ b/RGB/.idea/modules.xml
@@ -0,0 +1,8 @@
 
																+<?xml version="1.0" encoding="UTF-8"?>
															
 
																+<project version="4">
															
 
																+  <component name="ProjectModuleManager">
															
 
																+    <modules>
															
 
																+      <module fileurl="file://$PROJECT_DIR$/.idea/ClassWork.iml" filepath="$PROJECT_DIR$/.idea/ClassWork.iml" />
															
 
																+    </modules>
															
 
																+  </component>
															
 
																+</project>
															
--- a/RGB/assets/1@3x.png
+++ b/RGB/assets/1@3x.png
--- a/RGB/assets/skillet_-_hero.mp3
+++ b/RGB/assets/skillet_-_hero.mp3
--- a/RGB/index.html
+++ b/RGB/index.html
@@ -0,0 +1,47 @@
 
																+<!DOCTYPE html>
															
 
																+<html lang="en">
															
 
																+<head>
															
 
																+    <meta charset="UTF-8">
															
 
																+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
															
 
																+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
															
 
																+    <title>Document</title>
															
 
																+    <link rel="stylesheet" href="style.css">
															
 
																+</head>
															
 
																+<body>
															
 
																+
															
 
																+    <div id="container1">
															
 
																+        
															
 
																+    </div>
															
 
																+    <div id="values">
															
 
																+        <div>
															
 
																+        <p>  RED:   </p>
															
 
																+        <input id="red"></input>
															
 
																+    </div>
															
 
																+    <div>
															
 
																+        <p>GREEN: </p>
															
 
																+        <input id="green"></input>
															
 
																+    </div>
															
 
																+    <div>
															
 
																+        <p> BLUE:</p>
															
 
																+        <input id="blue"></input>
															
 
																+    </div>
															
 
																+    </div>
															
 
																+    <div id="container2">
															
 
																+        <figure>
															
 
																+            <figcaption>Listen Skillet - Hero </figcaption>
															
 
																+            <audio id="audio"
															
 
																+                controls
															
 
																+                src="assets/skillet_-_hero.mp3">
															
 
																+                    Your browser does not support the
															
 
																+                    <code>audio</code> element.
															
 
																+            </audio>
															
 
																+        </figure>
															
 
																+    </div>
															
 
																+
															
 
																+
															
 
																+    
															
 
																+    
															
 
																+
															
 
																+    <script src="script.js"></script>
															
 
																+</body>
															
 
																+</html>
															
--- a/RGB/script.js
+++ b/RGB/script.js
@@ -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 для громкости
															
--- a/RGB/style.css
+++ b/RGB/style.css
@@ -0,0 +1,19 @@
 
																+input{
															
 
																+    width: 200px;
															
 
																+    font-size: 25px;
															
 
																+    text-align: center;
															
 
																+    background-color: antiquewhite;
															
 
																+}
															
 
																+body{
															
 
																+    width: fit-content;
															
 
																+    display: flex;
															
 
																+    flex-direction: column;
															
 
																+}
															
 
																+#values{
															
 
																+    display: flex;
															
 
																+    justify-content: space-around;
															
 
																+}
															
 
																+p{
															
 
																+    background-color: antiquewhite;
															
 
																+    font-size: 20px;
															
 
																+}