Spaces:

SalexAI
/

1A12

Sleeping

App Files Files Community

SalexAI commited on May 27, 2025

Commit

4ca3ea0

verified ·

1 Parent(s): ea53bcc

Update app.py

Browse files

Files changed (1) hide show

app.py +121 -99

app.py CHANGED Viewed

@@ -1,4 +1,4 @@
-# Sir, this app.py implements /stream and /dashboard endpoints with telemetry streaming, offline buffering, CSV download, and proper camera permission prompt on mobile.
 from fastapi import FastAPI, WebSocket
 from fastapi.responses import HTMLResponse, StreamingResponse
@@ -8,8 +8,7 @@ import csv
 from io import StringIO
 app = FastAPI()
-telemetry_data = []  # Store telemetry dicts
-# Active WebSocket connections for dashboard clients
 dashboard_connections = []
 @app.get("/stream")
@@ -18,71 +17,71 @@ async def stream():
     <!DOCTYPE html>
     <html lang="en">
     <head>
-        <meta charset="UTF-8">
-        <title>Emerson Telemetry Stream</title>
-        <style>
-            body { margin:0; padding:0; display:flex; flex-direction:column; align-items:center; justify-content:center; height:100vh; background:#eef6fc; font-family:sans-serif; }
-            h1 { margin-bottom:10px; color:#034f84; }
-            #status { font-weight:bold; margin-bottom:20px; color:#fc3d03; }
-            video { border:2px solid #034f84; border-radius:8px; width:100%; max-width:320px; }
-        </style>
     </head>
     <body>
-        <h1>Emerson Telemetry Stream</h1>
-        <p id="status">Initializing...</p>
-        <video id="video" autoplay muted playsinline></video>
-        <script>
         const statusEl = document.getElementById('status');
-        let buffer = [];
-        let ws;
-        // Initialize WebSocket
         function initWS() {
-            ws = new WebSocket(`wss://${location.host}/ws`);
-            ws.onopen = () => { statusEl.textContent = 'Connected'; flushBuffer(); };
-            ws.onclose = () => statusEl.textContent = 'Disconnected';
-            ws.onerror = () => statusEl.textContent = 'WebSocket error';
         }
-        // Send telemetry data
         function sendTelemetry() {
-            if (!videoStream) return;
-            const video = document.getElementById('video');
-            const canvas = document.createElement('canvas');
-            canvas.width = video.videoWidth;
-            canvas.height = video.videoHeight;
-            canvas.getContext('2d').drawImage(video, 0, 0);
-            const image = canvas.toDataURL('image/jpeg');
-            navigator.geolocation.getCurrentPosition(pos => {
-                const data = { timestamp: Date.now(), gps: pos.coords, image };
-                if (ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify(data)); else buffer.push(data);
-            });
         }
         function flushBuffer() {
-            while (buffer.length && ws.readyState === WebSocket.OPEN) {
-                ws.send(JSON.stringify(buffer.shift()));
-            }
         }
-        // Prompt for camera, mobile compatible
-        let videoStream;
-        navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
-            .then(stream => {
-                videoStream = stream;
-                const video = document.getElementById('video');
-                video.srcObject = stream;
-                statusEl.textContent = navigator.onLine ? 'Connected' : 'Waiting for Emerson...';
-                initWS();
-                window.addEventListener('online', () => flushBuffer());
-                window.addEventListener('offline', () => statusEl.textContent = 'Waiting for Emerson...');
-                setInterval(sendTelemetry, 1000);
-            })
-            .catch(err => {
-                console.error('Camera permission error:', err);
-                statusEl.textContent = 'Camera permission needed';
-            });
-        </script>
     </body>
     </html>
     """
@@ -94,41 +93,60 @@ async def dashboard():
     <!DOCTYPE html>
     <html lang="en">
     <head>
-        <meta charset="UTF-8">
-        <title>Emerson Dashboard</title>
-        <style>
-            body { margin:0; padding:20px; background:#f8f9fa; font-family:sans-serif; }
-            h1 { margin-bottom:10px; color:#343a40; }
-            #status { font-weight:bold; margin-bottom:15px; color:#dc3545; }
-            #data { display:grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap:20px; max-height: calc(100vh - 140px); overflow-y:auto; }
-            .entry { background:white; border-radius:8px; padding:15px; box-shadow:0 2px 6px rgba(0,0,0,0.1); display:flex; flex-direction:column; }
-            .entry p { margin:0 0 10px; white-space:pre-line; color:#495057; font-size:0.9rem; }
-            .entry img { width:100%; height:auto; border-radius:4px; flex-shrink:0; }
-            a { display:inline-block; margin-top:15px; color:white; background:#007bff; padding:10px 15px; text-decoration:none; border-radius:5px; }
-        </style>
     </head>
     <body>
-        <h1>Emerson Dashboard</h1>
-        <p id="status">Waiting for Emerson...</p>
-        <div id="data"></div>
-        <a href="/download-csv" download="telemetry.csv">Download CSV</a>
-        <script>
-        const ws = new WebSocket(`wss://${location.host}/ws`);
-        const statusEl = document.getElementById('status');
-        const dataEl = document.getElementById('data');
-        ws.onopen = () => statusEl.textContent = 'Connected';
-        ws.onclose = () => statusEl.textContent = 'Disconnected';
-        ws.onmessage = evt => {
-            const d = JSON.parse(evt.data);
-            statusEl.textContent = 'Streaming';
-            const card = document.createElement('div'); card.className = 'entry';
-            const text = document.createElement('p');
-            text.textContent = `Time: ${new Date(d.timestamp).toLocaleTimeString()}\nGPS: ${d.gps.latitude.toFixed(5)}, ${d.gps.longitude.toFixed(5)}`;
-            const img = document.createElement('img'); img.src = d.image;
-            card.append(text, img);
-            dataEl.prepend(card);
         };
-        </script>
     </body>
     </html>
     """
@@ -137,26 +155,30 @@ async def dashboard():
 @app.get("/download-csv")
 async def download_csv():
     def iter_csv():
-        si = StringIO()
-        writer = csv.writer(si)
-        writer.writerow(["timestamp","latitude","longitude","image"])
         for d in telemetry_data:
-            writer.writerow([d["timestamp"],d["gps"]["latitude"],d["gps"]["longitude"],d["image"]])
             yield si.getvalue(); si.seek(0); si.truncate(0)
-    return StreamingResponse(iter_csv(), media_type="text/csv")
 @app.websocket("/ws")
 async def websocket_endpoint(ws:WebSocket):
-    await ws.accept(); dashboard_connections.append(ws)
     try:
         while True:
-            msg = await ws.receive_text()
-            obj = json.loads(msg); telemetry_data.append(obj)
             for conn in dashboard_connections:
-                try: await conn.send_text(json.dumps(obj))
-                except: dashboard_connections.remove(conn)
     except:
         dashboard_connections.remove(ws)
-if __name__ == "__main__":
-    uvicorn.run(app, host="0.0.0.0", port=7860)

+# Sir, this app.py adds speed, altitude, map, two camera streams, and static dashboard updates.
 from fastapi import FastAPI, WebSocket
 from fastapi.responses import HTMLResponse, StreamingResponse
 from io import StringIO
 app = FastAPI()
+telemetry_data = []
 dashboard_connections = []
 @app.get("/stream")
     <!DOCTYPE html>
     <html lang="en">
     <head>
+      <meta charset="UTF-8">
+      <title>Emerson Telemetry Stream</title>
+      <style>
+        body{margin:0;padding:20px;background:#eef6fc;font-family:sans-serif;display:flex;flex-direction:column;align-items:center;}
+        h1{color:#034f84;}
+        #status{font-weight:bold;color:#fc3d03;margin:10px 0;}
+        #streams{display:flex;gap:10px;width:100%;max-width:680px;}
+        video{border:2px solid #034f84;border-radius:8px;width:50%;height:auto;}
+      </style>
     </head>
     <body>
+      <h1>Emerson Telemetry Stream</h1>
+      <p id="status">Initializing...</p>
+      <div id="streams">
+        <video id="video-back" autoplay muted playsinline></video>
+        <video id="video-front" autoplay muted playsinline></video>
+      </div>
+      <script>
         const statusEl = document.getElementById('status');
+        let buffer = [], ws;
         function initWS() {
+          ws = new WebSocket(`wss://${location.host}/ws`);
+          ws.onopen = () => { statusEl.textContent='Connected'; flushBuffer(); };
+          ws.onclose = () => statusEl.textContent='Disconnected';
+          ws.onerror = () => statusEl.textContent='WebSocket error';
         }
         function sendTelemetry() {
+          const backV = document.getElementById('video-back');
+          const frontV = document.getElementById('video-front');
+          if(!backV.videoWidth || !frontV.videoWidth) return;
+          const cb = document.createElement('canvas'); cb.width=backV.videoWidth; cb.height=backV.videoHeight;
+          cb.getContext('2d').drawImage(backV,0,0);
+          const cf = document.createElement('canvas'); cf.width=frontV.videoWidth; cf.height=frontV.videoHeight;
+          cf.getContext('2d').drawImage(frontV,0,0);
+          navigator.geolocation.getCurrentPosition(pos=>{
+            const data = { timestamp: Date.now(), gps: pos.coords,
+              images: { back: cb.toDataURL('image/jpeg'), front: cf.toDataURL('image/jpeg') }
+            };
+            const payload = JSON.stringify(data);
+            if(ws.readyState===WebSocket.OPEN) ws.send(payload); else buffer.push(payload);
+          });
         }
         function flushBuffer() {
+          while(buffer.length && ws.readyState===WebSocket.OPEN) ws.send(buffer.shift());
         }
+        Promise.all([
+          navigator.mediaDevices.getUserMedia({ video:{ facingMode:'environment' } }),
+          navigator.mediaDevices.getUserMedia({ video:{ facingMode:'user' } })
+        ]).then(([backStream, frontStream])=>{
+          document.getElementById('video-back').srcObject=backStream;
+          document.getElementById('video-front').srcObject=frontStream;
+          statusEl.textContent = navigator.onLine ? 'Connected' : 'Waiting for Emerson...';
+          initWS();
+          window.addEventListener('online', ()=>flushBuffer());
+          window.addEventListener('offline', ()=>statusEl.textContent='Waiting for Emerson...');
+          setInterval(sendTelemetry,1000);
+        }).catch(err=>{
+          console.error('Camera error',err);
+          statusEl.textContent='Camera permission needed';
+        });
+      </script>
     </body>
     </html>
     """
     <!DOCTYPE html>
     <html lang="en">
     <head>
+      <meta charset="UTF-8">
+      <title>Emerson Dashboard</title>
+      <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
+      <style>
+        body{margin:0;padding:20px;background:#f8f9fa;font-family:sans-serif;}
+        h1{color:#343a40;}
+        #status{font-weight:bold;color:#dc3545;}
+        #metrics{display:flex;gap:20px;margin:10px 0;}
+        .metric{flex:1;background:white;padding:10px;border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,0.1);text-align:center;}
+        #map{height:300px;border:1px solid #ccc;border-radius:5px;}
+        #streams{display:flex;gap:10px;margin-top:10px;}
+        #streams img{width:50%;border:2px solid #034f84;border-radius:5px;}
+        a{display:inline-block;margin-top:10px;color:white;background:#007bff;padding:8px 12px;text-decoration:none;border-radius:4px;}
+      </style>
     </head>
     <body>
+      <h1>Emerson Dashboard</h1>
+      <p id="status">Waiting for Emerson...</p>
+      <div id="metrics">
+        <div class="metric" id="speed">Speed:<br>-- m/s</div>
+        <div class="metric" id="altitude">Altitude:<br>-- m</div>
+      </div>
+      <div id="map"></div>
+      <div id="streams">
+        <img id="img-back" src="" alt="Back Camera">
+        <img id="img-front" src="" alt="Front Camera">
+      </div>
+      <a href="/download-csv" download="telemetry.csv">Download CSV</a>
+      <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+      <script>
+        const statusEl=document.getElementById('status');
+        const speedEl=document.getElementById('speed');
+        const altEl=document.getElementById('altitude');
+        const imgBack=document.getElementById('img-back');
+        const imgFront=document.getElementById('img-front');
+        const map=L.map('map').setView([0,0],2);
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:19}).addTo(map);
+        const marker=L.marker([0,0]).addTo(map);
+        const ws=new WebSocket(`wss://${location.host}/ws`);
+        ws.onopen=()=>statusEl.textContent='Connected';
+        ws.onclose=()=>statusEl.textContent='Disconnected';
+        ws.onmessage=evt=>{
+          const d=JSON.parse(evt.data);
+          statusEl.textContent='Streaming';
+          const sp=d.gps.speed!=null?d.gps.speed.toFixed(2):'--';
+          const alt=d.gps.altitude!=null?d.gps.altitude.toFixed(1):'--';
+          speedEl.innerHTML=`Speed:<br>${sp} m/s`;
+          altEl.innerHTML=`Altitude:<br>${alt} m`;
+          marker.setLatLng([d.gps.latitude,d.gps.longitude]);
+          map.setView([d.gps.latitude,d.gps.longitude],map.getZoom());
+          imgBack.src=d.images.back;
+          imgFront.src=d.images.front;
         };
+      </script>
     </body>
     </html>
     """
 @app.get("/download-csv")
 async def download_csv():
     def iter_csv():
+        si=StringIO()
+        writer=csv.writer(si)
+        writer.writerow(["timestamp","latitude","longitude","altitude","speed","back_image","front_image"])
         for d in telemetry_data:
+            writer.writerow([
+              d["timestamp"],d["gps"]["latitude"],d["gps"]["longitude"],
+              d["gps"]["altitude"],d["gps"]["speed"],
+              d["images"]["back"],d["images"]["front"]
+            ]);
             yield si.getvalue(); si.seek(0); si.truncate(0)
+    return StreamingResponse(iter_csv(),media_type="text/csv")
 @app.websocket("/ws")
 async def websocket_endpoint(ws:WebSocket):
+    await ws.accept();dashboard_connections.append(ws)
     try:
         while True:
+            msg=await ws.receive_text();obj=json.loads(msg);
+            telemetry_data.append(obj)
             for conn in dashboard_connections:
+                try:await conn.send_text(json.dumps(obj))
+                except:dashboard_connections.remove(conn)
     except:
         dashboard_connections.remove(ws)
+if __name__ =="__main__":
+    uvicorn.run(app,host="0.0.0.0",port=7860)