Merge pull request #2 from jxzhe/color-picker

Add color picker and rainbow mode toggle

globals.js

@@ -126,4 +126,19 @@ function controllerChange(number, value) {
         cc67now = value;
 
     }
+}
+
+function toggleRainbowMode(cb) {
+    rainbowMode = cb.checked;
+    if (rainbowMode)
+        select('#colorpicker').attribute('disabled', true)
+    else
+        select('#colorpicker').removeAttribute('disabled')
+}
+
+function changeColor() {
+    keyOnColor = pedaledColor = color(select('#colorpicker').value());
+    darkenedColor = keyOnColor.levels.map(x => floor(x * .7));
+    pedaledColor = color(`rgb(${darkenedColor[0]}, ${darkenedColor[1]}, ${darkenedColor[2]})`)
+    console.log(pedaledColor.levels);
 }

index.html

@@ -17,9 +17,26 @@
            <div id="controls" class="center">
             <div>
                 <h3>鋼琴鍵盤顯示器 by NiceChord</h3>
-                <h5>選擇 MIDI 裝置</h5>
+                <div style="display: flex; justify-content: space-around;">
-                <input id="slider" type="range" min="0" max="0" value="0">
+                    <div>
-                <div id="device">Select Input: </div>  
+                        <h5>選擇 MIDI 裝置</h5>
+                        <input id="slider" type="range" min="0" max="0" value="0">
+                        <div id="device">Select Input: </div>
+                    </div>
+                    <div style="display: flex; flex-direction: column; justify-content: center; align-items: start;">
+                        <div>
+                            <label for="colorpicker">選擇顏色</label>
+                            <input type="color" id="colorpicker" value="#ff0090" oninput="changeColor()">
+                        </div>
+                        <div style="display: flex; align-items: center;">
+                            <span style="margin-right: 5px;">彩虹模式</span>
+                            <input type="checkbox" id="rainbow-mode-checkbox" onclick="toggleRainbowMode(this)">
+                            <label for="rainbow-mode-checkbox">
+                                <span class="switch-txt" turnOn="On" turnOff="Off"></span>
+                            </label>
+                        </div>
+                    </div>
+                </div>
             </div>
             <br />
             

style.css

@@ -544,4 +544,46 @@ template {
 
 [hidden] {
     display: none;
+}
+
+input[type=checkbox] {
+    height: 0;
+    width: 0;
+    visibility: hidden;
+}
+
+label[for=rainbow-mode-checkbox] {
+    cursor: pointer;
+    width: 50px;
+    height: 25px;
+    background: grey;
+    display: inline-block;
+    border-radius: 25px;
+    position: relative;
+    transition: .3s;
+}
+
+label[for=rainbow-mode-checkbox]:after {
+    content: '';
+    position: absolute;
+    top: 1.25px;
+    left: 1.25px;
+    width: 22.5px;
+    height: 22.5px;
+    background: #fff;
+    border-radius: 22.5px;
+    transition: .3s;
+}
+
+input:checked + label[for=rainbow-mode-checkbox] {
+	background: #6f42c1;
+}
+
+label[for=rainbow-mode-checkbox]:active:after {
+	width: 32.5px;
+}
+
+input:checked + label[for=rainbow-mode-checkbox]:after {
+	left: calc(100% - 1.25px);
+	transform: translateX(-100%);
 }