From 4122760cd710a873b12ab4d7740cf36c50df4a6a Mon Sep 17 00:00:00 2001
From: Wiwi Kuan <wiwikuan@gmail.com>
Date: Mon, 3 Jun 2024 11:19:38 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=9F=B3=E5=90=8D=E9=A1=AF?=
 =?UTF-8?q?=E7=A4=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 globals.js          |  5 +++++
 index.html          |  7 +++++++
 piano-visualizer.js | 23 ++++++++++++++++++++---
 style.css           | 23 ++++++++++++++---------
 4 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/globals.js b/globals.js
index f9bf036..4b4c5a0 100644
--- a/globals.js
+++ b/globals.js
@@ -17,6 +17,7 @@ let bRadius = 4; // 黑鍵圓角(default: 4)
 let keyAreaY = 3; // 白鍵從 Y 軸座標多少開始？(default: 3)
 let keyAreaHeight = 70; // 白鍵多高？(default: 70)
 let rainbowMode = false; // 彩虹模式 (default: false)
+let displayNoteNames = false; // 白鍵要不要顯示音名 (default: false)
 let cc64now = 0; // 現在的踏板狀態
 let cc67now = 0;
 
@@ -136,6 +137,10 @@ function toggleRainbowMode(cb) {
         select('#colorpicker').removeAttribute('disabled')
 }
 
+function toggleDisplayNoteNames(cb) {
+    displayNoteNames = cb.checked;
+}
+
 function changeColor() {
     keyOnColor = pedaledColor = color(select('#colorpicker').value());
     darkenedColor = keyOnColor.levels.map(x => floor(x * .7));
diff --git a/index.html b/index.html
index 06517f1..b1b32ea 100644
--- a/index.html
+++ b/index.html
@@ -35,6 +35,13 @@ <h5>選擇 MIDI 裝置</h5>
                                 <span class="switch-txt" turnOn="On" turnOff="Off"></span>
                             </label>
                         </div>
+                        <div style="display: flex; align-items: center;">
+                            <span style="margin-right: 5px;">顯示音名</span>
+                            <input type="checkbox" id="display-note-names-checkbox" onclick="toggleDisplayNoteNames(this)">
+                            <label for="display-note-names-checkbox">
+                                <span class="switch-txt" turnOn="On" turnOff="Off"></span>
+                            </label>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/piano-visualizer.js b/piano-visualizer.js
index ca9b8ee..39c4c8c 100644
--- a/piano-visualizer.js
+++ b/piano-visualizer.js
@@ -14,9 +14,7 @@ function draw() {
   pushHistories();
   drawWhiteKeys();
   drawBlackKeys();
-  // drawPedalLines();
-  // drawNotes();
-
+  if (displayNoteNames) {drawNoteNames();};
   drawTexts();
 }
 
@@ -98,6 +96,25 @@ function drawBlackKeys() {
   }
 }
 
+function drawNoteNames() {
+  let noteNames = ["A", "B", "C", "D", "E", "F", "G"]; // 音名數組
+  
+  textSize(12); // 設置文字大小
+  noStroke();
+  fill(0, 0, 0, 75); // 設置文字顏色為黑色
+  textAlign(CENTER, CENTER); // 設置文字對齊方式為居中
+  textStyle(NORMAL);
+  
+  let wIndex = 0; // 白鍵索引
+  for (let i = 0; i < 52; i++) { // 遍歷所有白鍵
+    let thisX = border + wIndex * (whiteKeyWidth + whiteKeySpace);
+    let thisY = keyAreaY + keyAreaHeight - 11; // 調整文字的垂直位置
+    let noteName = noteNames[i % 7]; // 獲取對應的音名
+    text(noteName, thisX + whiteKeyWidth / 2, thisY); // 繪製音名文字
+    wIndex++;
+  }
+}
+
 function drawTexts() {
   stroke(0, 0, 10, 100);
   fill(0, 0, 100, 90)
diff --git a/style.css b/style.css
index d6a410b..1ea1a12 100644
--- a/style.css
+++ b/style.css
@@ -552,7 +552,8 @@ input[type=checkbox] {
     visibility: hidden;
 }
 
-label[for=rainbow-mode-checkbox] {
+label[for=rainbow-mode-checkbox],
+label[for=display-note-names-checkbox] {
     cursor: pointer;
     width: 50px;
     height: 25px;
@@ -563,7 +564,8 @@ label[for=rainbow-mode-checkbox] {
     transition: .3s;
 }
 
-label[for=rainbow-mode-checkbox]:after {
+label[for=rainbow-mode-checkbox]:after,
+label[for=display-note-names-checkbox]:after {
     content: '';
     position: absolute;
     top: 1.25px;
@@ -575,15 +577,18 @@ label[for=rainbow-mode-checkbox]:after {
     transition: .3s;
 }
 
-input:checked + label[for=rainbow-mode-checkbox] {
-	background: #6f42c1;
+input:checked + label[for=rainbow-mode-checkbox],
+input:checked + label[for=display-note-names-checkbox] {
+    background: #6f42c1;
 }
 
-label[for=rainbow-mode-checkbox]:active:after {
-	width: 32.5px;
+label[for=rainbow-mode-checkbox]:active:after,
+label[for=display-note-names-checkbox]:active:after {
+    width: 32.5px;
 }
 
-input:checked + label[for=rainbow-mode-checkbox]:after {
-	left: calc(100% - 1.25px);
-	transform: translateX(-100%);
+input:checked + label[for=rainbow-mode-checkbox]:after,
+input:checked + label[for=display-note-names-checkbox]:after {
+    left: calc(100% - 1.25px);
+    transform: translateX(-100%);
 }
\ No newline at end of file