Indicador Mark / Space HTML
Segue uma abordagem visual do Tuning Scope de tubo (conhecido como Cross-line Indicator)!
Estão sintonizados 2125Hz e 2295Hz
Site com áudio RTTY : http://internet-tty.net:8000/ITTY
Áudio no youtube: RTTY Text-to-Audio File Converter
Segue o código!
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>RTTY Tuning Scope - CRT Style</title>
<style>
body { background: #1a1a1a; color: #00ff00; font-family: 'Courier New', monospace; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; }
.container { border: 4px solid #333; border-radius: 50%; padding: 20px; background: #000; box-shadow: 0 0 50px #004400; position: relative; }
canvas { background: #001100; border-radius: 50%; border: 2px solid #003300; width: 400px; height: 400px; }
.controls { margin-top: 20px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
button { background: #004400; color: #00ff00; border: 1px solid #00ff00; padding: 10px 20px; cursor: pointer; font-size: 16px; transition: 0.3s; font-weight: bold; }
button:hover { background: #00ff00; color: #000; }
.info { font-size: 12px; color: #008800; }
input[type=range] { width: 250px; accent-color: #00ff00; cursor: pointer; }
label { font-size: 14px; }
</style>
</head>
<body>
<h2>RTTY X-Y SCOPE</h2>
<div class="container">
<canvas id="scope" width="400" height="400"></canvas>
</div>
<div class="controls">
<button id="startBtn">ATIVAR SENSOR/ÁUDIO</button>
<div style="display: flex; align-items: center; gap: 10px;">
<label>SENSIVEL.</label>
<input type="range" id="gainSlider" min="1" max="50" step="1" value="15">
</div>
<div class="info">Sintonize em: Mark 2125Hz (V) | Space 2295Hz (H)</div>
</div>
<script>
let audioCtx, analyserMark, analyserSpace, source, gainNode;
const canvas = document.getElementById('scope');
const ctx = canvas.getContext('2d');
const gainSlider = document.getElementById('gainSlider');
async function initAudio() {
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
try {
// DESATIVAR AGC e Noise Suppression para o sinal não sumir
const stream = await navigator.mediaDevices.getUserMedia({
audio: {
echoCancellation: false,
noiseSuppression: false,
autoGainControl: false
}
});
source = audioCtx.createMediaStreamSource(stream);
// Criar o amplificador (Gain Node)
gainNode = audioCtx.createGain();
gainNode.gain.value = gainSlider.value;
// Filtro para Mark (2125 Hz)
const filterMark = audioCtx.createBiquadFilter();
filterMark.type = "bandpass";
filterMark.frequency.value = 2125;
filterMark.Q.value = 25;
// Filtro para Space (2295 Hz)
const filterSpace = audioCtx.createBiquadFilter();
filterSpace.type = "bandpass";
filterSpace.frequency.value = 2295;
filterSpace.Q.value = 25;
analyserMark = audioCtx.createAnalyser();
analyserSpace = audioCtx.createAnalyser();
analyserMark.fftSize = 1024;
analyserSpace.fftSize = 1024;
// Fluxo: Microfone -> Ganho -> Filtros -> Analisadores
source.connect(gainNode);
gainNode.connect(filterMark);
filterMark.connect(analyserMark);
gainNode.connect(filterSpace);
filterSpace.connect(analyserSpace);
draw();
document.getElementById('startBtn').innerText = "INDICADOR ATIVO";
} catch (err) {
alert("Erro ao acessar microfone: " + err);
}
}
function draw() {
requestAnimationFrame(draw);
const dataMark = new Uint8Array(analyserMark.frequencyBinCount);
const dataSpace = new Uint8Array(analyserSpace.frequencyBinCount);
analyserMark.getByteTimeDomainData(dataMark);
analyserSpace.getByteTimeDomainData(dataSpace);
// Limpeza rápida para manter o traço nítido
ctx.fillStyle = "rgba(0, 10, 0, 0.4)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Desenhar a grade (retículo)
ctx.strokeStyle = "rgba(0, 50, 0, 0.5)";
ctx.beginPath();
ctx.moveTo(200, 0); ctx.lineTo(200, 400);
ctx.moveTo(0, 200); ctx.lineTo(400, 200);
ctx.stroke();
// Desenhar o traço X-Y
ctx.beginPath();
ctx.strokeStyle = "#44ff88";
ctx.lineWidth = 2.5;
ctx.shadowBlur = 10;
ctx.shadowColor = "#44ff88";
// Multiplicador visual para expandir o desenho
const zoom = 1.4;
for (let i = 0; i < dataMark.length; i += 2) {
// Normaliza de 0-255 para -1 a 1, e escala para o tamanho do canvas (200px de raio)
let yNorm = (dataMark[i] - 128) / 128;
let xNorm = (dataSpace[i] - 128) / 128;
let y = 200 + (yNorm * 200 * zoom);
let x = 200 + (xNorm * 200 * zoom);
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.stroke();
}
// Atualiza o ganho quando você move o slider
gainSlider.oninput = () => {
if (gainNode) gainNode.gain.value = gainSlider.value;
};
document.getElementById('startBtn').addEventListener('click', () => {
if (!audioCtx) initAudio();
else if (audioCtx.state === 'suspended') audioCtx.resume();
});
</script>
</body>
</html>
Comentários
Postar um comentário