RobinsAIWorld/WiFi-VISION
2
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>WiFi Vision Radar</title>7 <style>8 body {9 background: #000;10 margin: 0;11 padding: 20px;12 display: flex;13 flex-direction: column;14 align-items: center;15 font-family: monospace;16 color: #0f0;17 overflow: hidden;18 }19 20 #container {21 display: flex;22 gap: 20px;23 }24 25 .vision-container {26 position: relative;27 width: 640px;28 height: 480px;29 border: 2px solid #0f0;30 }31 32 #wifiVision {33 position: absolute;34 top: 0;35 left: 0;36 }37 38 #heatmap {39 position: absolute;40 top: 0;41 left: 0;42 opacity: 0.7;43 }44 45 .controls {46 width: 300px;47 padding: 15px;48 border: 1px solid #0f0;49 }50 51 .stats {52 margin-top: 10px;53 padding: 10px;54 border: 1px solid #0f0;55 }56 57 button {58 background: #000;59 color: #0f0;60 border: 1px solid #0f0;61 padding: 10px;62 width: 100%;63 margin: 5px 0;64 cursor: pointer;65 }66 67 button:hover {68 background: #0f0;69 color: #000;70 }71 72 .reading {73 margin: 5px 0;74 padding: 5px;75 border-bottom: 1px solid #0f0;76 }77 78 #signalGraph {79 width: 300px;80 height: 100px;81 border: 1px solid #0f0;82 margin-top: 10px;83 }84 </style>85</head>86<body>87 <h1>WiFi Vision System</h1>88 89 <div id="container">90 <div class="vision-container">91 <canvas id="wifiVision" width="640" height="480"></canvas>92 <canvas id="heatmap" width="640" height="480"></canvas>93 </div>94 95 <div class="controls">96 <button id="startBtn">Start Scanning</button>97 <button id="stopBtn">Stop Scanning</button>98 99 <div class="stats">100 <div class="reading">Status: <span id="status">Inactive</span></div>101 <div class="reading">Access Points: <span id="apCount">0</span></div>102 <div class="reading">Signal Strength: <span id="signalStrength">0 dBm</span></div>103 <div class="reading">Frame Rate: <span id="fps">0 FPS</span></div>104 <div class="reading">Resolution: <span>32x24</span></div>105 </div>106 107 <canvas id="signalGraph"></canvas>108 </div>109 </div>110 111 <script>112 const visionCanvas = document.getElementById('wifiVision');113 const heatmapCanvas = document.getElementById('heatmap');114 const signalGraph = document.getElementById('signalGraph');115 const visionCtx = visionCanvas.getContext('2d');116 const heatmapCtx = heatmapCanvas.getContext('2d');117 const graphCtx = signalGraph.getContext('2d');118 119 const GRID_WIDTH = 32;120 const GRID_HEIGHT = 24;121 const CELL_WIDTH = visionCanvas.width / GRID_WIDTH;122 const CELL_HEIGHT = visionCanvas.height / GRID_HEIGHT;123 124 let isScanning = false;125 let wifiGrid = Array(GRID_HEIGHT).fill().map(() => Array(GRID_WIDTH).fill(0));126 let signalHistory = [];127 let lastFrame = performance.now();128 let frameCount = 0;129 130 class WifiPoint {131 constructor() {132 this.x = Math.random() * GRID_WIDTH;133 this.y = Math.random() * GRID_HEIGHT;134 this.strength = -Math.random() * 50 - 30; // -30 to -80 dBm135 this.velocity = {136 x: (Math.random() - 0.5) * 0.1,137 y: (Math.random() - 0.5) * 0.1138 };139 }140 141 update() {142 this.x += this.velocity.x;143 this.y += this.velocity.y;144 145 if (this.x < 0 || this.x >= GRID_WIDTH) this.velocity.x *= -1;146 if (this.y < 0 || this.y >= GRID_HEIGHT) this.velocity.y *= -1;147 148 this.strength += (Math.random() - 0.5) * 2;149 this.strength = Math.max(-90, Math.min(-30, this.strength));150 }151 }152 153 let wifiPoints = [];154 155 function generateSignalMap() {156 wifiGrid = Array(GRID_HEIGHT).fill().map(() => Array(GRID_WIDTH).fill(-100));157 158 wifiPoints.forEach(point => {159 point.update();160 161 for (let y = 0; y < GRID_HEIGHT; y++) {162 for (let x = 0; x < GRID_WIDTH; x++) {163 const distance = Math.sqrt(164 Math.pow(x - point.x, 2) + 165 Math.pow(y - point.y, 2)166 );167 const signal = point.strength - (20 * Math.log10(distance + 1));168 wifiGrid[y][x] = Math.max(wifiGrid[y][x], signal);169 }170 }171 });172 }173 174 function drawVisionView() {175 visionCtx.clearRect(0, 0, visionCanvas.width, visionCanvas.height);176 177 for (let y = 0; y < GRID_HEIGHT; y++) {178 for (let x = 0; x < GRID_WIDTH; x++) {179 const signal = wifiGrid[y][x];180 const intensity = Math.min(255, Math.max(0, (signal + 100) * 3));181 visionCtx.fillStyle = `rgb(0, ${intensity}, 0)`;182 visionCtx.fillRect(183 x * CELL_WIDTH, 184 y * CELL_HEIGHT, 185 CELL_WIDTH, 186 CELL_HEIGHT187 );188 }189 }190 }191 192 function drawHeatmap() {193 heatmapCtx.clearRect(0, 0, heatmapCanvas.width, heatmapCanvas.height);194 195 for (let y = 0; y < GRID_HEIGHT; y++) {196 for (let x = 0; x < GRID_WIDTH; x++) {197 const signal = wifiGrid[y][x];198 const value = (signal + 100) / 70;199 const hue = Math.max(0, Math.min(240, (1 - value) * 240));200 heatmapCtx.fillStyle = `hsla(${hue}, 100%, 50%, 0.5)`;201 heatmapCtx.fillRect(202 x * CELL_WIDTH, 203 y * CELL_HEIGHT, 204 CELL_WIDTH, 205 CELL_HEIGHT206 );207 }208 }209 }210 211 function updateSignalGraph() {212 const avgSignal = wifiGrid.flat().reduce((a, b) => a + b, 0) / (GRID_WIDTH * GRID_HEIGHT);213 signalHistory.push(avgSignal);214 if (signalHistory.length > 100) signalHistory.shift();215 216 graphCtx.clearRect(0, 0, signalGraph.width, signalGraph.height);217 graphCtx.beginPath();218 graphCtx.strokeStyle = '#0f0';219 220 signalHistory.forEach((signal, i) => {221 const x = (i / 100) * signalGraph.width;222 const y = ((signal + 100) / 70) * signalGraph.height;223 if (i === 0) graphCtx.moveTo(x, y);224 else graphCtx.lineTo(x, y);225 });226 227 graphCtx.stroke();228 }229 230 function updateStats() {231 const now = performance.now();232 frameCount++;233 234 if (now - lastFrame >= 1000) {235 document.getElementById('fps').textContent = `${frameCount} FPS`;236 frameCount = 0;237 lastFrame = now;238 }239 240 const avgSignal = wifiGrid.flat().reduce((a, b) => a + b, 0) / (GRID_WIDTH * GRID_HEIGHT);241 document.getElementById('signalStrength').textContent = `${Math.round(avgSignal)} dBm`;242 document.getElementById('apCount').textContent = wifiPoints.length;243 }244 245 function animate() {246 if (!isScanning) return;247 248 generateSignalMap();249 drawVisionView();250 drawHeatmap();251 updateSignalGraph();252 updateStats();253 254 requestAnimationFrame(animate);255 }256 257 function startScanning() {258 if (isScanning) return;259 260 isScanning = true;261 document.getElementById('status').textContent = 'Active';262 263 // Generate random WiFi points264 wifiPoints = Array(5).fill().map(() => new WifiPoint());265 266 animate();267 }268 269 function stopScanning() {270 isScanning = false;271 document.getElementById('status').textContent = 'Inactive';272 wifiPoints = [];273 signalHistory = [];274 }275 276 document.getElementById('startBtn').addEventListener('click', startScanning);277 document.getElementById('stopBtn').addEventListener('click', stopScanning);278 279 // Initial clear280 visionCtx.fillStyle = '#000';281 visionCtx.fillRect(0, 0, visionCanvas.width, visionCanvas.height);282 graphCtx.fillStyle = '#000';283 graphCtx.fillRect(0, 0, signalGraph.width, signalGraph.height);284 </script>285</body>286</html><script async data-explicit-opt-in="true" data-cookie-opt-in="true" src="https://vercel.live/_next-live/feedback/feedback.js"></script>