suby
/
mic-system


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
							<!doctype html>
<html lang="pl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mic System - RPi Zero 2W</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <div class="bg-glow bg-glow-a"></div>
    <div class="bg-glow bg-glow-b"></div>

    <main class="layout">
        <header class="header card">
            <div>
                <h1>System Mikrofonowy</h1>
                <p>RPi Zero 2W + 2x INMP441 + WebSocket</p>
            </div>
            <div class="status-block">
                <div id="serverStatus" class="pill">Laczenie...</div>
                <div id="audioStatus" class="pill">Audio: start</div>
            </div>
        </header>

        <section class="wave-panel card">
            <div class="wave-grid">
                <article class="wave-item">
                    <div class="wave-title">Mikrofon 1 (L)</div>
                    <canvas id="waveMic1" width="640" height="160"></canvas>
                    <div class="vu-wrap">
                        <div class="vu-label">VU</div>
                        <div class="vu-track"><div id="vuMic1" class="vu-fill mic1"></div></div>
                    </div>
                </article>

                <article class="wave-item">
                    <div class="wave-title">Mikrofon 2 (R)</div>
                    <canvas id="waveMic2" width="640" height="160"></canvas>
                    <div class="vu-wrap">
                        <div class="vu-label">VU</div>
                        <div class="vu-track"><div id="vuMic2" class="vu-fill mic2"></div></div>
                    </div>
                </article>

                <article class="wave-item" id="beamBlock">
                    <div class="wave-title">Beamforming</div>
                    <canvas id="waveBeam" width="640" height="160"></canvas>
                    <div class="vu-wrap">
                        <div class="vu-label">VU</div>
                        <div class="vu-track"><div id="vuBeam" class="vu-fill beam"></div></div>
                    </div>
                </article>
            </div>
        </section>

        <section class="controls card">
            <h2>Ustawienia</h2>

            <div class="group">
                <label>Tryb mikrofonow</label>
                <div class="radio-row">
                    <label><input type="radio" name="mode" value="mic1"> Mikrofon 1 (L) - mono</label>
                    <label><input type="radio" name="mode" value="mic2"> Mikrofon 2 (R) - mono</label>
                    <label><input type="radio" name="mode" value="mono_mix"> Mono mix (L+R)</label>
                    <label><input type="radio" name="mode" value="beamforming" checked> Beamforming (mono)</label>
                </div>
            </div>

            <div class="row two-col">
                <div class="group">
                    <label for="gainDb">Gain bazowy: <span id="gainValue">0</span> dB</label>
                    <input id="gainDb" type="range" min="0" max="30" value="0" step="1">
                </div>

                <div class="group">
                    <label for="sampleRate">Sample rate</label>
                    <select id="sampleRate">
                        <option value="16000" selected>16000 Hz</option>
                        <option value="22050">22050 Hz</option>
                        <option value="44100">44100 Hz</option>
                    </select>
                </div>
            </div>

            <div class="group">
                <label><input id="agcEnabled" type="checkbox" checked> Auto gain + redukcja szumu</label>
            </div>

            <div id="agcControls" class="row two-col">
                <div class="group">
                    <label for="attackMs">Attack: <span id="attackValue">8</span> ms</label>
                    <input id="attackMs" type="range" min="1" max="50" value="8" step="1">
                </div>
                <div class="group">
                    <label for="releaseMs">Release: <span id="releaseValue">260</span> ms</label>
                    <input id="releaseMs" type="range" min="50" max="1000" value="260" step="10">
                </div>
            </div>

            <div id="beamControls" class="group hidden">
                <label><input id="beamAuto" type="checkbox" checked> Auto beamforming (priorytet mowy)</label>
                <label>Kierunek aktywny: <span id="autoAngleValue">0</span> deg (<span id="speechState">cisza</span>)</label>
                <div id="manualBeamRow">
                    <label for="beamAngle">Kierunek reczny: <span id="angleValue">0</span> deg</label>
                    <input id="beamAngle" type="range" min="-90" max="90" value="0" step="1">
                </div>
            </div>

            <div class="group">
                <label><input id="monitorOn" type="checkbox"> Podsluch live</label>
                <label for="monitorSource">Zrodlo podsluchu</label>
                <select id="monitorSource">
                    <option value="beam" selected>Beamforming (mono)</option>
                    <option value="mono_mix">Mono mix (L+R)</option>
                    <option value="mic1">Mikrofon 1 (L)</option>
                    <option value="mic2">Mikrofon 2 (R)</option>
                </select>
            </div>
        </section>

        <section class="recording card">
            <h2>Nagrywanie</h2>
            <div class="record-row">
                <button id="recordBtn" class="record-btn">RECORD</button>
                <div id="recordTimer" class="timer">00:00:00</div>
            </div>

            <div class="group">
                <label for="recordSource">Zrodlo nagrywania</label>
                <select id="recordSource">
                    <option value="mic1">Mikrofon 1 (raw)</option>
                    <option value="mic2">Mikrofon 2 (raw)</option>
                    <option value="mono_mix">Mono mix (L+R)</option>
                    <option value="beam">Beamforming (mono)</option>
                    <option value="compare_all">Porownanie: mic1 + mono_mix + beam</option>
                </select>
            </div>

            <div class="group">
                <label for="recordDurationSec">Czas nagrania [s] (0 = recznie stop)</label>
                <input id="recordDurationSec" type="number" min="0" max="3600" step="1" value="0">
            </div>
        </section>

        <section class="files card">
            <h2>Nagrania</h2>
            <div class="table-wrap">
                <table>
                    <thead>
                        <tr>
                            <th>Nazwa</th>
                            <th>Data</th>
                            <th>Czas</th>
                            <th>Rozmiar</th>
                            <th>Akcje</th>
                        </tr>
                    </thead>
                    <tbody id="recordingsBody"></tbody>
                </table>
            </div>
        </section>
    </main>

    <script src="{{ url_for('static', filename='vendor/socket.io.min.js') }}"></script>
    <script src="{{ url_for('static', filename='app.js') }}"></script>
</body>
</html>