Spaces:

Aragoorn
/

2-3

Running

App Files Files Community

Aragoorn commited on Jul 21

Commit

54bf3de

verified ·

1 Parent(s): a3b0944

Radar code for detecting objects with ultrasonics - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +278 -261

index.html CHANGED Viewed

@@ -3,314 +3,331 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Mahnsi Calculator</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        .calculator {
-            background: linear-gradient(145deg, #1e293b, #0f172a);
-            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
-            border-radius: 20px;
             overflow: hidden;
-            transition: all 0.3s ease;
         }
-        .calculator:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
         }
-        .btn {
-            transition: all 0.2s ease;
-            transform: scale(1);
         }
-        .btn:active {
-            transform: scale(0.95);
         }
-        .display {
-            min-height: 100px;
-            word-wrap: break-word;
-            word-break: break-all;
         }
-        .btn-operator {
-            background: linear-gradient(145deg, #3b82f6, #2563eb);
         }
-        .btn-equals {
-            background: linear-gradient(145deg, #10b981, #059669);
         }
-        .btn-clear {
-            background: linear-gradient(145deg, #ef4444, #dc2626);
         }
-        .btn-number {
-            background: linear-gradient(145deg, #334155, #1e293b);
         }
-        .btn:hover {
-            opacity: 0.9;
-        }
-        .history-btn {
-            transition: all 0.3s ease;
-        }
-        .history-panel {
-            transition: all 0.3s ease;
-            transform: translateX(100%);
-        }
-        .history-panel.active {
-            transform: translateX(0);
         }
     </style>
 </head>
-<body class="bg-slate-900 min-h-screen flex items-center justify-center p-4">
-    <div class="relative">
-        <div class="calculator w-full max-w-md p-5">
-            <!-- Display -->
-            <div class="display bg-slate-800 rounded-xl p-4 mb-4 text-right text-white font-mono">
-                <div id="previous-operand" class="text-slate-400 text-lg h-6 overflow-x-auto whitespace-nowrap"></div>
-                <div id="current-operand" class="text-3xl font-semibold mt-2 overflow-x-auto whitespace-nowrap">0</div>
             </div>
-            <!-- Buttons -->
-            <div class="grid grid-cols-4 gap-3">
-                <button class="btn-clear col-span-2 btn rounded-xl p-4 text-white font-bold text-lg" onclick="clearAll()">AC</button>
-                <button class="btn-operator btn rounded-xl p-4 text-white font-bold text-lg" onclick="deleteLastChar()">
-                    <i class="fas fa-backspace"></i>
-                </button>
-                <button class="btn-operator btn rounded-xl p-4 text-white font-bold text-lg" onclick="appendOperator('/')">/</button>
-                <button class="btn-number btn rounded-xl p-4 text-white font-bold text-lg" onclick="appendNumber('7')">7</button>
-                <button class="btn-number btn rounded-xl p-4 text-white font-bold text-lg" onclick="appendNumber('8')">8</button>
-                <button class="btn-number btn rounded-xl p-4 text-white font-bold text-lg" onclick="appendNumber('9')">9</button>
-                <button class="btn-operator btn rounded-xl p-4 text-white font-bold text-lg" onclick="appendOperator('*')">×</button>
-                <button class="btn-number btn rounded-xl p-4 text-white font-bold text-lg" onclick="appendNumber('4')">4</button>
-                <button class="btn-number btn rounded-xl p-4 text-white font-bold text-lg" onclick="appendNumber('5')">5</button>
-                <button class="btn-number btn rounded-xl p-4 text-white font-bold text-lg" onclick="appendNumber('6')">6</button>
-                <button class="btn-operator btn rounded-xl p-4 text-white font-bold text-lg" onclick="appendOperator('-')">-</button>
-                <button class="btn-number btn rounded-xl p-4 text-white font-bold text-lg" onclick="appendNumber('1')">1</button>
-                <button class="btn-number btn rounded-xl p-4 text-white font-bold text-lg" onclick="appendNumber('2')">2</button>
-                <button class="btn-number btn rounded-xl p-4 text-white font-bold text-lg" onclick="appendNumber('3')">3</button>
-                <button class="btn-operator btn rounded-xl p-4 text-white font-bold text-lg" onclick="appendOperator('+')">+</button>
-                <button class="btn-number btn rounded-xl p-4 text-white font-bold text-lg" onclick="appendNumber('0')">0</button>
-                <button class="btn-number btn rounded-xl p-4 text-white font-bold text-lg" onclick="appendDecimal()">.</button>
-                <button class="btn-equals btn rounded-xl p-4 text-white font-bold text-lg col-span-2" onclick="calculate()">=</button>
             </div>
-            <!-- History Button -->
-            <button id="history-btn" class="history-btn absolute -left-14 top-4 bg-slate-700 text-white p-2 rounded-full hover:bg-slate-600" onclick="toggleHistory()">
-                <i class="fas fa-history"></i>
-            </button>
         </div>
-        <!-- History Panel -->
-        <div id="history-panel" class="history-panel absolute right-0 top-0 h-full w-64 bg-slate-800 rounded-r-xl p-4 overflow-y-auto">
-            <div class="flex justify-between items-center mb-4">
-                <h3 class="text-white font-bold text-lg">History</h3>
-                <button class="text-slate-400 hover:text-white" onclick="clearHistory()">
-                    <i class="fas fa-trash"></i>
-                </button>
             </div>
-            <ul id="history-list" class="text-slate-300 space-y-2"></ul>
         </div>
     </div>
     <script>
-        // Calculator state
-        let currentOperand = '0';
-        let previousOperand = '';
-        let operation = undefined;
-        let resetScreen = false;
-        let calculationHistory = JSON.parse(localStorage.getItem('calculatorHistory')) || [];
-        // DOM elements
-        const currentOperandElement = document.getElementById('current-operand');
-        const previousOperandElement = document.getElementById('previous-operand');
-        const historyList = document.getElementById('history-list');
-        const historyPanel = document.getElementById('history-panel');
-        const historyBtn = document.getElementById('history-btn');
-        // Update display
-        function updateDisplay() {
-            currentOperandElement.innerText = currentOperand;
-            if (operation != null) {
-                previousOperandElement.innerText = `${previousOperand} ${operation}`;
-            } else {
-                previousOperandElement.innerText = previousOperand;
-            }
-        }
-        // Append number
-        function appendNumber(number) {
-            if (currentOperand === '0' || resetScreen) {
-                currentOperand = '';
-                resetScreen = false;
-            }
-            // Prevent multiple leading zeros
-            if (number === '0' && currentOperand === '0') return;
-            currentOperand += number;
-            updateDisplay();
-        }
-        // Append decimal
-        function appendDecimal() {
-            if (resetScreen) {
-                currentOperand = '0';
-                resetScreen = false;
-            }
-            if (currentOperand.includes('.')) return;
-            if (currentOperand === '') {
-                currentOperand = '0';
-            }
-            currentOperand += '.';
-            updateDisplay();
-        }
-        // Append operator
-        function appendOperator(operator) {
-            if (currentOperand === '' && previousOperand === '') return;
-            if (currentOperand === '' && previousOperand !== '') {
-                operation = operator;
-                updateDisplay();
-                return;
             }
-            if (previousOperand === '') {
-                previousOperand = currentOperand;
-                currentOperand = '';
-            } else if (!resetScreen) {
-                calculate();
-            }
-            operation = operator;
-            resetScreen = true;
-            updateDisplay();
-        }
-        // Calculate
-        function calculate() {
-            if (previousOperand === '' || currentOperand === '' || operation === undefined) return;
-            const prev = parseFloat(previousOperand);
-            const current = parseFloat(currentOperand);
-            let result;
-            switch (operation) {
-                case '+':
-                    result = prev + current;
-                    break;
-                case '-':
-                    result = prev - current;
-                    break;
-                case '*':
-                    result = prev * current;
-                    break;
-                case '/':
-                    result = prev / current;
-                    break;
-                default:
-                    return;
-            }
-            // Add to history
-            const historyItem = `${previousOperand} ${operation} ${currentOperand} = ${result}`;
-            calculationHistory.unshift(historyItem);
-            if (calculationHistory.length > 10) {
-                calculationHistory.pop();
             }
-            localStorage.setItem('calculatorHistory', JSON.stringify(calculationHistory));
-            updateHistory();
-            currentOperand = result.toString();
-            operation = undefined;
-            previousOperand = '';
-            resetScreen = true;
-            updateDisplay();
-        }
-        // Clear all
-        function clearAll() {
-            currentOperand = '0';
-            previousOperand = '';
-            operation = undefined;
-            updateDisplay();
-        }
-        // Delete last character
-        function deleteLastChar() {
-            if (currentOperand.length === 1 || (currentOperand.length === 2 && currentOperand.startsWith('-'))) {
-                currentOperand = '0';
-            } else {
-                currentOperand = currentOperand.slice(0, -1);
-            }
-            updateDisplay();
-        }
-        // Update history display
-        function updateHistory() {
-            historyList.innerHTML = '';
-            calculationHistory.forEach(item => {
-                const li = document.createElement('li');
-                li.className = 'py-2 px-3 bg-slate-700 rounded-lg hover:bg-slate-600 cursor-pointer';
-                li.textContent = item;
-                li.onclick = () => {
-                    // When clicking a history item, use it as the current operand
-                    const parts = item.split(' = ');
-                    if (parts.length === 2) {
-                        currentOperand = parts[1];
-                        updateDisplay();
-                    }
-                };
-                historyList.appendChild(li);
-            });
-        }
-        // Clear history
-        function clearHistory() {
-            calculationHistory = [];
-            localStorage.setItem('calculatorHistory', JSON.stringify(calculationHistory));
-            updateHistory();
-        }
-        // Toggle history panel
-        function toggleHistory() {
-            historyPanel.classList.toggle('active');
-            historyBtn.classList.toggle('bg-slate-600');
-        }
-        // Keyboard support
-        document.addEventListener('keydown', (e) => {
-            if (e.key >= '0' && e.key <= '9') appendNumber(e.key);
-            else if (e.key === '.') appendDecimal();
-            else if (e.key === '+' || e.key === '-' || e.key === '*' || e.key === '/') {
-                appendOperator(e.key);
-            }
-            else if (e.key === 'Enter' || e.key === '=') {
-                e.preventDefault();
-                calculate();
-            }
-            else if (e.key === 'Escape') clearAll();
-            else if (e.key === 'Backspace') deleteLastChar();
         });
-        // Initialize
-        updateDisplay();
-        updateHistory();
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Aragoorn/2-3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ultrasonic Radar Detection System</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        .radar {
+            position: relative;
+            width: 300px;
+            height: 300px;
+            border-radius: 50%;
+            background: linear-gradient(to bottom, #0a2e38 0%, #1b1b2f 100%);
+            box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
             overflow: hidden;
         }
+        .radar::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 10px;
+            height: 10px;
+            background: #00ff00;
+            border-radius: 50%;
+            z-index: 10;
         }
+        .radar::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 5px;
+            height: 5px;
+            background: #00ff00;
+            border-radius: 50%;
+            box-shadow: 0 0 5px #00ff00;
+            z-index: 10;
         }
+        .radar-scan {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            background: linear-gradient(45deg, transparent 49%, rgba(0, 255, 0, 0.2) 50%, transparent 51%);
+            animation: rotate 4s linear infinite;
         }
+        .radar-circle {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            border: 1px solid rgba(0, 255, 0, 0.3);
+            border-radius: 50%;
         }
+        .radar-line {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform-origin: left center;
+            width: 50%;
+            height: 1px;
+            background: rgba(0, 255, 0, 0.5);
         }
+        .object {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            background: #00ff00;
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            box-shadow: 0 0 10px #00ff00;
+            z-index: 5;
         }
+        @keyframes rotate {
+            0% { transform: translate(-50%, -50%) rotate(0deg); }
+            100% { transform: translate(-50%, -50%) rotate(360deg); }
         }
+        @keyframes pulse {
+            0% { opacity: 0.3; }
+            50% { opacity: 1; }
+            100% { opacity: 0.3; }
         }
+        .distance-indicator {
+            animation: pulse 2s infinite;
         }
     </style>
 </head>
+<body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col items-center justify-center p-4">
+    <div class="max-w-4xl w-full">
+        <h1 class="text-3xl font-bold text-center mb-6 text-cyan-400">
+            <i class="fas fa-radar mr-2"></i> Ultrasonic Radar Detection System
+        </h1>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            <div class="flex flex-col items-center">
+                <div class="radar mb-6">
+                    <div class="radar-circle" style="width: 80%; height: 80%;"></div>
+                    <div class="radar-circle" style="width: 60%; height: 60%;"></div>
+                    <div class="radar-circle" style="width: 40%; height: 40%;"></div>
+                    <div class="radar-circle" style="width: 20%; height: 20%;"></div>
+                    <div class="radar-line" style="transform: translate(-50%, -50%) rotate(0deg);"></div>
+                    <div class="radar-line" style="transform: translate(-50%, -50%) rotate(90deg);"></div>
+                    <div class="radar-line" style="transform: translate(-50%, -50%) rotate(45deg);"></div>
+                    <div class="radar-line" style="transform: translate(-50%, -50%) rotate(135deg);"></div>
+                    <div class="radar-scan"></div>
+                    <!-- Objects will be added here by JavaScript -->
+                </div>
+                <div class="flex space-x-4 mb-6">
+                    <button id="startBtn" class="px-6 py-2 bg-green-600 hover:bg-green-700 rounded-lg font-medium transition">
+                        <i class="fas fa-play mr-2"></i> Start
+                    </button>
+                    <button id="stopBtn" class="px-6 py-2 bg-red-600 hover:bg-red-700 rounded-lg font-medium transition">
+                        <i class="fas fa-stop mr-2"></i> Stop
+                    </button>
+                </div>
             </div>
+            <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
+                <h2 class="text-xl font-semibold mb-4 text-cyan-300">
+                    <i class="fas fa-info-circle mr-2"></i> Detection Information
+                </h2>
+                <div class="grid grid-cols-2 gap-4 mb-6">
+                    <div class="bg-gray-700 p-4 rounded-lg">
+                        <h3 class="text-sm font-medium text-gray-400">Objects Detected</h3>
+                        <p id="objectCount" class="text-2xl font-bold text-green-400">0</p>
+                    </div>
+                    <div class="bg-gray-700 p-4 rounded-lg">
+                        <h3 class="text-sm font-medium text-gray-400">Max Distance</h3>
+                        <p class="text-2xl font-bold text-cyan-400">400 cm</p>
+                    </div>
+                </div>
+                <div class="mb-6">
+                    <h3 class="text-lg font-medium mb-2 text-gray-300">
+                        <i class="fas fa-ruler mr-2"></i> Distance Indicators
+                    </h3>
+                    <div class="flex items-center justify-between mb-1">
+                        <span class="text-xs">0 cm</span>
+                        <span class="text-xs">100 cm</span>
+                        <span class="text-xs">200 cm</span>
+                        <span class="text-xs">300 cm</span>
+                        <span class="text-xs">400 cm</span>
+                    </div>
+                    <div class="w-full bg-gray-700 h-4 rounded-full overflow-hidden">
+                        <div id="distanceBar" class="h-full bg-gradient-to-r from-green-500 via-yellow-500 to-red-500" style="width: 0%"></div>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="text-lg font-medium mb-2 text-gray-300">
+                        <i class="fas fa-bell mr-2"></i> Detection Log
+                    </h3>
+                    <div id="detectionLog" class="bg-gray-700 p-3 rounded-lg h-40 overflow-y-auto text-sm">
+                        <div class="text-gray-400 italic">No objects detected yet...</div>
+                    </div>
+                </div>
             </div>
         </div>
+        <div class="mt-8 bg-gray-800 rounded-xl p-6">
+            <h2 class="text-xl font-semibold mb-4 text-cyan-300">
+                <i class="fas fa-cogs mr-2"></i> System Configuration
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div>
+                    <label class="block text-sm font-medium mb-1">Scan Speed</label>
+                    <select class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2">
+                        <option>Slow</option>
+                        <option selected>Normal</option>
+                        <option>Fast</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1">Sensitivity</label>
+                    <input type="range" min="1" max="10" value="7" class="w-full">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1">Detection Range</label>
+                    <div class="flex items-center space-x-2">
+                        <input type="number" value="400" class="w-20 bg-gray-700 border border-gray-600 rounded-md px-3 py-2">
+                        <span class="text-sm">cm</span>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
     <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const radar = document.querySelector('.radar');
+            const startBtn = document.getElementById('startBtn');
+            const stopBtn = document.getElementById('stopBtn');
+            const objectCount = document.getElementById('objectCount');
+            const distanceBar = document.getElementById('distanceBar');
+            const detectionLog = document.getElementById('detectionLog');
+            let scanInterval;
+            let objectInterval;
+            let isScanning = false;
+            let objects = [];
+            // Create radar circles and lines
+            for (let i = 0; i < 4; i++) {
+                const angle = i * 22.5;
+                const line = document.createElement('div');
+                line.className = 'radar-line';
+                line.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`;
+                radar.appendChild(line);
             }
+            // Start scanning
+            startBtn.addEventListener('click', function() {
+                if (isScanning) return;
+                isScanning = true;
+                detectionLog.innerHTML = '';
+                updateLog('System started. Scanning for objects...', 'system');
+                // Simulate radar scanning
+                scanInterval = setInterval(() => {
+                    // This is just for visualization - in a real system, this would come from sensor data
+                }, 100);
+                // Simulate object detection
+                objectInterval = setInterval(() => {
+                    // Clear previous objects
+                    document.querySelectorAll('.object').forEach(obj => obj.remove());
+                    objects = [];
+                    // Generate random objects (1-5 objects)
+                    const numObjects = Math.floor(Math.random() * 5) + 1;
+                    objectCount.textContent = numObjects;
+                    for (let i = 0; i < numObjects; i++) {
+                        const distance = Math.random() * 0.9 + 0.1; // 10%-100% of radar
+                        const angle = Math.random() * 360;
+                        const x = 50 + Math.cos(angle * Math.PI / 180) * distance * 50;
+                        const y = 50 + Math.sin(angle * Math.PI / 180) * distance * 50;
+                        const object = document.createElement('div');
+                        object.className = 'object';
+                        object.style.left = `${x}%`;
+                        object.style.top = `${y}%`;
+                        // Add distance indicator
+                        const indicator = document.createElement('div');
+                        indicator.className = 'distance-indicator absolute w-2 h-2 bg-green-500 rounded-full';
+                        indicator.style.left = `${x}%`;
+                        indicator.style.top = `${y}%`;
+                        indicator.style.transform = 'translate(-50%, -50%)';
+                        radar.appendChild(object);
+                        objects.push({distance, angle});
+                        // Update distance bar
+                        const realDistance = Math.round(distance * 400);
+                        distanceBar.style.width = `${distance * 100}%`;
+                        // Add to log
+                        updateLog(`Object detected at ${realDistance} cm, ${Math.round(angle)}°`, 'detection');
+                    }
+                }, 2000);
+            });
+            // Stop scanning
+            stopBtn.addEventListener('click', function() {
+                if (!isScanning) return;
+                isScanning = false;
+                clearInterval(scanInterval);
+                clearInterval(objectInterval);
+                // Clear objects
+                document.querySelectorAll('.object').forEach(obj => obj.remove());
+                objectCount.textContent = '0';
+                distanceBar.style.width = '0%';
+                updateLog('System stopped.', 'system');
+            });
+            // Update detection log
+            function updateLog(message, type) {
+                const now = new Date();
+                const timeString = now.toLocaleTimeString();
+                const logEntry = document.createElement('div');
+                logEntry.className = `mb-1 ${type === 'system' ? 'text-cyan-400' : 'text-green-400'}`;
+                logEntry.innerHTML = `<span class="text-gray-500 text-xs">[${timeString}]</span> ${message}`;
+                detectionLog.prepend(logEntry);
+                // Limit log entries
+                if (detectionLog.children.length > 10) {
+                    detectionLog.removeChild(detectionLog.lastChild);
+                }
             }
+            // Simulate initial system status
+            setTimeout(() => {
+                updateLog('Ultrasonic radar system initialized.', 'system');
+                updateLog('Ready to start scanning.', 'system');
+            }, 500);
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Aragoorn/2-3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>