Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- tools:piano [30/03/2026 15:03] – Eric Weber
+++ tools:piano [30/03/2026 15:32] (aktuell) – Eric Weber
@@ Zeile 1: / Zeile 1: @@
 <html>
-<!--
-  Interaktive Klaviatur mit Notenzeile
-  Einbindung in DokuWiki: Inhalt zwischen den <div id="piano-app">...</div>-Tags einfügen
-  Alle CSS-Stile sind auf #piano-app begrenzt und beeinflussen die restliche Seite nicht.
--->
 <div id="piano-app">
@@ Zeile 245: / Zeile 239: @@
     #piano-app svg.pa-staff-svg {
-      display: block;
+  height: auto; /* Höhe dynamisch */
-      flex: 1;
+  min-height: 60px;
-      min-width: 0;
+}
-      overflow: visible;
-    }
     /* --- Oktaven-Scrollbar (sichtbar auf allen Geräten) --- */
@@ Zeile 410: / Zeile 402: @@
   <h1 class="pa-title">🎹 Interaktive Klaviatur</h1>
-  <p class="pa-subtitle">E<sub>2</sub> – G<sub>5</sub> &nbsp;|&nbsp; Polyphon &nbsp;|&nbsp; Notenanzeige</p>
+<br></br>
   <!-- Controls -->
@@ Zeile 421: / Zeile 413: @@
     <span class="pa-label">Vorzeichen:</span>
     <div class="pa-btn-group">
-      <button id="pa-btn-sharp" class="pa-active" onclick="paSetAccidental('sharp')">♯ Kreuz</button>
+      <button id="pa-btn-sharp" class="pa-active" onclick="paSetAccidental('sharp')">♯</button>
-      <button id="pa-btn-flat" onclick="paSetAccidental('flat')">♭ Be</button>
+      <button id="pa-btn-flat" onclick="paSetAccidental('flat')">♭</button>
     </div>
     <div class="pa-volume-wrap">
@@ Zeile 581: / Zeile 573: @@
       const totalWidth = whiteKeys.length * WHITE_W;
       keysContainer.style.width = totalWidth + 'px';
+      // Beim Start ganz nach rechts scrollen (hohe Töne sichtbar)
+setTimeout(() => {
+  const scrollEl = document.getElementById('pa-piano-scroll');
+  scrollEl.scrollLeft = scrollEl.scrollWidth;
+}, 0);
       // Weiße Tasten
@@ Zeile 824: / Zeile 821: @@
     // =====================================================
     window.paResizeStaff = function(val) {
-      const wrap = document.getElementById('pa-staff-wrap');
+  const wrap = document.getElementById('pa-staff-wrap');
-      const h = Math.round(val * 0.9); // 60→54px … 200→180px
+  const svg = document.getElementById('pa-staff-svg');
-      wrap.style.padding = Math.round(val * 0.1) + 'px 20px';
+  const badge = document.getElementById('pa-clef-badge');
-      const badge = document.getElementById('pa-clef-badge');
+  // Skalierungsfaktor (100 = Standard)
-      const bSize = Math.round(val * 0.44);
+  const scale = val / 100;
-      badge.style.width  = bSize + 'px';
+  // Padding anpassen
-      badge.style.height = bSize + 'px';
+  const padding = Math.round(16 * scale);
-      badge.style.fontSize = Math.round(bSize * 0.68) + 'px';
+  wrap.style.padding = padding + 'px 20px';
-    };
+  // SVG-Höhe skalieren (Basis: 80px)
+  const svgHeight = Math.round(80 * scale);
+  svg.style.height = svgHeight + 'px';
+  // Badge-Größe anpassen
+  const bSize = Math.round(52 * scale);
+  badge.style.width = bSize + 'px';
+  badge.style.height = bSize + 'px';
+  badge.style.fontSize = Math.round(bSize * 0.73) + 'px';
+};
     // =====================================================
@@ Zeile 840: / Zeile 845: @@
       const scrollEl = document.getElementById('pa-piano-scroll');
       const maxScroll = scrollEl.scrollWidth - scrollEl.clientWidth;
-      scrollEl.scrollLeft = Math.round((val / 100) * maxScroll);
+      scrollEl.scrollLeft = Math.round((1 - val / 100) * maxScroll);
     };
@@ Zeile 848: / Zeile 853: @@
       const maxScroll = scrollEl.scrollWidth - scrollEl.clientWidth;
       if (maxScroll <= 0) return;
-      const pct = Math.round((scrollEl.scrollLeft / maxScroll) * 100);
+      const pct = Math.round((1 - scrollEl.scrollLeft / maxScroll) * 100);
       document.getElementById('pa-octave-slider').value = pct;
     });