jens/sheetmusictrainer
1
0
Fork 0
mirror of https://github.com/9x/sheetmusictrainer.git synced 2026-11-03 22:03:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

More detailed note detection settings

Browse Source
This commit is contained in:
Jens Mohrmann
2026-01-01 19:45:16 +01:00
parent a785d188e9
commit d8602e0bd8
5 changed files with 84 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/Fretboard.tsx
View File

@@ -1,5 +1,5 @@
import { useState } from 'react';
import type { Tuning, FretPosition } from '../music/Tunings';
import { useState, useMemo } from 'react';
import { getFretboardPositions, type Tuning, type FretPosition } from '../music/Tunings';
import { getNoteDetails } from '../music/NoteUtils';
interface FretboardProps {
@@ -27,6 +27,14 @@ export function Fretboard({
}: FretboardProps) {
const [hoverPos, setHoverPos] = useState<{ stringIndex: number, fret: number } | null>(null);
const alternatePositions = useMemo(() => {
if (!showHints || !hoverPos) return [];
const midi = tuning.strings[hoverPos.stringIndex] + hoverPos.fret;
return getFretboardPositions(midi, tuning, maxFrets).filter(
p => p.stringIndex !== hoverPos.stringIndex || p.fret !== hoverPos.fret
);
}, [hoverPos, tuning, maxFrets, showHints]);
// Config
const numStrings = tuning.strings.length;
// Visual params
@@ -199,12 +207,29 @@ export function Fretboard({
{/* Hover Highlight (Ghost Dot) */}
{interactive && hoverPos && (
(() => {
const cx = getNoteX(hoverPos.fret);
const cy = getStringY(hoverPos.stringIndex);
<g style={{ pointerEvents: 'none' }}>
{/* Alternate Positions */}
{alternatePositions.map((p, idx) => {
const cx = getNoteX(p.fret);
const cy = getStringY(p.stringIndex);
return (
<circle
key={`alt-${idx}`}
cx={cx}
cy={cy}
r={6}
fill="var(--color-primary)"
fillOpacity={0.4}
stroke="none"
/>
);
})}
return (
<g style={{ pointerEvents: 'none' }}>
{/* Main Hover Selection */}
{(() => {
const cx = getNoteX(hoverPos.fret);
const cy = getStringY(hoverPos.stringIndex);
return (
<circle
cx={cx}
cy={cy}
@@ -213,9 +238,9 @@ export function Fretboard({
stroke="#888"
strokeWidth={2}
/>
</g>
);
})()
);
})()}
</g>
)}
{/* Interaction Overlay (Invisible hit targets) */}

27
src/components/SettingsModal.tsx
View File

@@ -1,6 +1,7 @@
import React, { useState } from 'react';
import { X, Volume2, VolumeX, ChevronDown, ChevronUp, Mic, MicOff, Sun, Moon, Monitor } from 'lucide-react';
import type { AppSettings } from '../types/SettingsTypes';
import { MIC_SENSITIVITY_DB_RANGE, MIC_DEFAULT_SENSITIVITY } from '../AppConfig';
import type { MicrophoneDebugInfo } from '../hooks/usePitchDetector';
interface SettingsModalProps {
@@ -18,9 +19,14 @@ interface SettingsModalProps {
const LevelMeter: React.FC<{ level: number; isActive: boolean }> = ({ level, isActive }) => {
// Convert RMS to dB for display, then normalize to 0-100%
// RMS of 0.001 = -60dB, RMS of 1.0 = 0dB
const db = level > 0 ? 20 * Math.log10(level) : -100;
// Map -60dB to 0dB => 0% to 100%
const percentage = Math.max(0, Math.min(100, ((db + 60) / 60) * 100));
const db = level > 0 ? 20 * Math.log10(level) : -120;
// Map full range from -100dB to 0dB => 0% to 100%
// This ensures even very quiet inputs (-80 or -90dB) show on the meter
const minDb = MIC_SENSITIVITY_DB_RANGE.max; // e.g. -100
const maxDb = 0; // 0dB is full scale
const percentage = Math.max(0, Math.min(100, ((db - minDb) / (maxDb - minDb)) * 100));
return (
<div style={{
@@ -46,7 +52,7 @@ const LevelMeter: React.FC<{ level: number; isActive: boolean }> = ({ level, isA
}} />
</div>
<span style={{ fontSize: '11px', opacity: 0.7, minWidth: '45px', textAlign: 'right' }}>
{isActive ? `${Math.round(db)} dB` : '— dB'}
{isActive && db > -120 ? `${Math.round(db)} dB` : '— dB'}
</span>
</div>
);
@@ -236,18 +242,23 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
</label>
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '12px', opacity: 0.7 }}>
<span>Low (-20dB)</span>
<span>Low ({MIC_SENSITIVITY_DB_RANGE.min}dB)</span>
<span style={{ color: '#4cc9f0' }}>
{Math.round(-20 - ((settings.micSensitivity ?? 0.5) * 40))} dB
{/* Display current estimated threshold in dB */}
{Math.round(
MIC_SENSITIVITY_DB_RANGE.min +
((settings.micSensitivity ?? MIC_DEFAULT_SENSITIVITY) *
(MIC_SENSITIVITY_DB_RANGE.max - MIC_SENSITIVITY_DB_RANGE.min))
)} dB
</span>
<span>High (-60dB)</span>
<span>High ({MIC_SENSITIVITY_DB_RANGE.max}dB)</span>
</div>
<input
type="range"
min="0"
max="1"
step="0.05"
value={settings.micSensitivity ?? 0.5}
value={settings.micSensitivity ?? MIC_DEFAULT_SENSITIVITY}
onChange={(e) => onUpdateSettings({ ...settings, micSensitivity: parseFloat(e.target.value) })}
style={{ width: '100%' }}
/>