Project Overview
Code
Summary
Read moreThe web interface receives and parses the distance measurement data, historical evolution curves, and statistical information from the Rd-03_V2 radar module.
The optimized display interface visually presents the collected data, enabling developers to quickly apply it in various scenarios and environments.
Hardware ConnectionWiringUse a USB-to-TTL converter to connect the radar module to the computer as follows:
Create a new HTML file and insert the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Radar Module Distance Monitoring Web Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<style>
:root {
--bg: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
--glass: rgba(255, 255, 255, 0.1);
--accent: #4ade80;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background: var(--bg);
color: #fff;
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: auto;
background: var(--glass);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 30px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
border: 1px solid rgba(255, 255, 255, 0.18);
}
h1 {
text-align: center;
margin-bottom: 20px;
font-size: 2.2em;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.controls {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 20px;
}
.control-group {
display: flex;
flex-direction: column;
gap: 8px;
}
label {
font-size: 0.9em;
opacity: 0.9;
}
select, button {
padding: 8px 16px;
border: none;
border-radius: 6px;
background: rgba(255, 255, 255, 0.2);
color: #fff;
cursor: pointer;
transition: background 0.3s;
}
select:hover, button:hover {
background: rgba(255, 255, 255, 0.3);
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.status {
text-align: center;
margin-bottom: 15px;
font-size: 1.1em;
}
.connected {
color: var(--accent);
}
.disconnected {
color: #f87171;
}
.panels {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.panel {
background: rgba(0, 0, 0, 0.25);
border-radius: 12px;
padding: 15px;
}
.panel h2 {
font-size: 1.1em;
margin-bottom: 10px;
opacity: 0.9;
}
/* ===== Minimal Distance Display ===== */
#distanceValue {
font-size: 5em;
font-weight: bold;
color: var(--accent);
text-align: center;
text-shadow: 0 0 12px var(--accent);
margin-top: 20px;
}
#curveCanvas {
max-height: 260px;
}
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.stat-card {
background: var(--glass);
border-radius: 8px;
padding: 12px;
text-align: center;
}
.stat-label {
font-size: 0.85em;
opacity: 0.8;
margin-bottom: 4px;
}
.stat-value {
font-size: 1.4em;
font-weight: bold;
color: var(--accent);
}
.data-log {
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
padding: 15px;
height: 160px;
overflow-y: auto;
font-family: Courier New, monospace;
font-size: 0.85em;
}
.log-entry {
margin-bottom: 4px;
opacity: 0.8;
}
.log-entry.recent {
opacity: 1;
color: var(--accent);
}
@media (max-width: 900px) {
.panels {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<h1>🛰️ Ai-Thinker Rd-03 V2 Radar Module Distance Monitoring</h1>
<div class="controls">
<div class="control-group">
<label>Baud Rate</label>
<select id="baudRate">
<option value="9600">9600</option>
<option value="19200">19200</option>
<option value="38400">38400</option>
<option value="57600">57600</option>
<option value="115200" selected>115200</option>
</select>
</div>
<div class="control-group">
<label> </label>
<button id="connectBtn" onclick="connectSerial()">Connect Serial Port</button>
</div>
<div class="control-group">
<label> </label>
<button id="disconnectBtn" onclick="disconnectSerial()" disabled>Disconnect</button>
</div>
</div>
<div class="status disconnected" id="status">Disconnected</div>
<div class="panels">
<div class="panel">
<h2>Current Distance</h2>
<div id="distanceValue">--</div>
</div>
<div class="panel">
<h2>Distance Evolution Curve</h2>
<canvas id="curveCanvas"></canvas>
</div>
</div>
<div class="stats">
<div class="stat-card">
<div class="stat-label">Average Distance</div>
<div class="stat-value" id="avgDistance">--</div>
</div>
<div class="stat-card">
<div class="stat-label">Maximum Distance</div>
<div class="stat-value" id="maxDistance">--</div>
</div>
<div class="stat-card">
<div class="stat-label">Minimum Distance</div>
<div class="stat-value" id="minDistance">--</div>
</div>
<div class="stat-card">
<div class="stat-label">Data Count</div>
<div class="stat-value" id="dataCount">0</div>
</div>
</div>
<div class="data-log" id="dataLog">
<div class="log-entry">Waiting for data…</div>
</div>
</div>
<script>
/* ================= Serial & Business Logic ================= */
let port = null, reader = null;
let dataHistory = [];
const maxLogEntries = 100;
const chartMaxPoints = 150;
function updateStatus(connected) {
const s = document.getElementById('status');
const connectBtn = document.getElementById('connectBtn');
const disconnectBtn = document.getElementById('disconnectBtn');
s.textContent = connected ? 'Connected' : 'Disconnected';
s.className = connected ? 'status connected' : 'status disconnected';
connectBtn.disabled = connected;
disconnectBtn.disabled = !connected;
}
function addLogEntry(msg, recent = false) {
const log = document.getElementById('dataLog');
const div = document.createElement('div');
div.className = recent ? 'log-entry recent' : 'log-entry';
div.textContent = `[${new Date().toLocaleTimeString()}] ${msg}`;
log.appendChild(div);
while (log.children.length > maxLogEntries) log.removeChild(log.firstChild);
log.scrollTop = log.scrollHeight;
}
function updateStats(dist) {
dataHistory.push(dist);
if (dataHistory.length > 300) dataHistory.shift();
const avg = dataHistory.reduce((a, b) => a + b, 0) / dataHistory.length;
document.getElementById('avgDistance').textContent = avg.toFixed(1) + ' mm';
document.getElementById('maxDistance').textContent = Math.max(...dataHistory) + ' mm';
document.getElementById('minDistance').textContent = Math.min(...dataHistory) + ' mm';
document.getElementById('dataCount').textContent = dataHistory.length;
}
/* ================= Distance Curve ================= */
const ctx = document.getElementById('curveCanvas').getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'Distance mm',
data: [],
borderColor: '#4ade80',
backgroundColor: 'rgba(74,222,128,0.15)',
tension: 0.25,
fill: true,
pointRadius: 0,
borderWidth: 2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
animation: false,
scales: {
x: { title: { display: false }, ticks: { color: '#fff' }, grid: { color: 'rgba(255,255,255,0.15)' } },
y: { title: { display: false }, ticks: { color: '#fff' }, grid: { color: 'rgba(255,255,255,0.15)' } }
},
plugins: { legend: { display: false } }
}
});
let sampleID = 0;
function addCurvePoint(dist) {
sampleID++;
chart.data.labels.push(sampleID);
chart.data.datasets[0].data.push(dist);
if (chart.data.labels.length > chartMaxPoints) {
chart.data.labels.shift();
chart.data.datasets[0].data.shift();
}
chart.update();
}
/* ================= Serial Read/Write ================= */
async function connectSerial() {
try {
port = await navigator.serial.requestPort();
const baud = parseInt(document.getElementById('baudRate').value);
await port.open({ baudRate: baud });
updateStatus(true);
addLogEntry(`Serial connected, baud rate: ${baud}`);
readLoop();
} catch (e) {
addLogEntry(`Connection failed: ${e.message}`);
}
}
async function disconnectSerial() {
if (reader) { await reader.cancel(); reader = null; }
if (port) { await port.close(); port = null; }
updateStatus(false);
addLogEntry('Serial disconnected');
}
async function readLoop() {
const decoder = new TextDecoderStream();
port.readable.pipeTo(decoder.writable);
reader = decoder.readable.getReader();
let buf = '';
while (true) {
const { value, done } = await reader.read();
if (done) break;
buf += value;
const lines = buf.split('\n');
buf = lines.pop();
for (const ln of lines) {
const str = ln.trim();
if (str.startsWith('distance:')) {
const dist = parseInt(str.substring(9));
if (!isNaN(dist)) {
document.getElementById('distanceValue').textContent = dist + ' mm';
updateStats(dist);
addCurvePoint(dist);
addLogEntry(`Received distance: ${dist} mm`, true);
}
}
}
}
reader.releaseLock();
}
/* ================= Serial Enumeration ================= */
async function getPorts() {
if (!('serial' in navigator)) return;
const ports = await navigator.serial.getPorts();
const sel = document.getElementById('portSelect');
sel.innerHTML = '<option value="">Select Serial Port</option>';
ports.forEach((p, i) => {
const opt = document.createElement('option');
opt.value = i;
opt.textContent = `Port ${i + 1}`;
sel.appendChild(opt);
});
}
window.addEventListener('load', () => {
getPorts();
setInterval(getPorts, 5000);
});
window.addEventListener('beforeunload', disconnectSerial);
</script>
</body>
</html>1. Connect the Rd-03_V2 radar module to your computer using a USB-to-TTL converter.
2. Click the “Connect Serial Port” button on the web page.
3. Select the target device from the pop-up list to establish a connection.
4. The web interface will display real-time distance measurements and dynamic historical evolution curves.
This article introduces a distance monitoring project based on the Ai-Thinker Rd-03_V2 radar module using a web-based upper computer interface.
It covers hardware connection, code, and demonstration effects, providing a valuable reference for product development and rapid prototyping applications
97 projects • 41 followers
Ai-Thinker is part of the Boantong Group, offering 160+ wireless communication solutions with modules, antennas and PCBA.
Comments