sup39/pianometer
1
0
Fork 0
Code Issues Pull requests Activity

Merge pull request #2 from jxzhe/color-picker

Browse source 
Add color picker and rainbow mode toggle
This commit is contained in:
Wiwi Kuan 2023-04-03 19:17:06 +08:00 committed by GitHub
commit 2d9b98fa6e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 77 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
globals.js
View file

@ -127,3 +127,18 @@ function controllerChange(number, 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);
}

23
index.html
View file

@ -17,9 +17,26 @@
<div id="controls" class="center">
<div>
<h3>鋼琴鍵盤顯示器 by NiceChord</h3>
<h5>選擇 MIDI 裝置</h5>
<input id="slider" type="range" min="0" max="0" value="0">
<div id="device">Select Input: </div>
<div style="display: flex; justify-content: space-around;">
<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 />

42
style.css
View file

@ -545,3 +545,45 @@ 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%);
}