Spaces:

SalexAI
/

1A12

Sleeping

App Files Files Community

SalexAI commited on May 27, 2025

Commit

511ccf7

verified ·

1 Parent(s): 4ca3ea0

Update app.py

Browse files

Files changed (1) hide show

app.py +78 -64

app.py CHANGED Viewed

@@ -1,4 +1,4 @@
-# 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
@@ -23,64 +23,78 @@ async def stream():
         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>
@@ -123,28 +137,28 @@ async def dashboard():
       <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>
@@ -155,30 +169,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","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)

+# Sir, updated to require user interaction to start streaming, request camera and GPS permissions with high accuracy, and fix dashboard map centering on first real telemetry.
 from fastapi import FastAPI, WebSocket
 from fastapi.responses import HTMLResponse, StreamingResponse
         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;margin-top:10px;}
         video{border:2px solid #034f84;border-radius:8px;width:50%;height:auto;}
+        button{padding:10px 20px;font-size:1rem;border:none;border-radius:5px;background:#034f84;color:white;cursor:pointer;}
+        button:disabled{background:#ccc;cursor:default;}
       </style>
     </head>
     <body>
       <h1>Emerson Telemetry Stream</h1>
+      <button id="start">Start Streaming</button>
+      <p id="status">Click "Start Streaming" to begin.</p>
+      <div id="streams" style="display:none;">
         <video id="video-back" autoplay muted playsinline></video>
         <video id="video-front" autoplay muted playsinline></video>
       </div>
       <script>
+        const startBtn = document.getElementById('start');
         const statusEl = document.getElementById('status');
+        let ws, buffer = [];
         function initWS() {
           ws = new WebSocket(`wss://${location.host}/ws`);
+          ws.onopen = () => { statusEl.textContent='Streaming'; flushBuffer(); };
           ws.onclose = () => statusEl.textContent='Disconnected';
           ws.onerror = () => statusEl.textContent='WebSocket error';
         }
+        function flushBuffer() {
+          while(buffer.length && ws.readyState===WebSocket.OPEN) {
+            ws.send(buffer.shift());
+          }
+        }
         function sendTelemetry() {
           const backV = document.getElementById('video-back');
           const frontV = document.getElementById('video-front');
           if(!backV.videoWidth || !frontV.videoWidth) return;
+          // capture images
           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);
+          // request high-accuracy GPS
+          navigator.geolocation.getCurrentPosition(pos => {
+            const data = { timestamp: Date.now(), gps: { latitude: pos.coords.latitude, longitude: pos.coords.longitude, altitude: pos.coords.altitude, speed: pos.coords.speed }, images: { back: cb.toDataURL('image/jpeg'), front: cf.toDataURL('image/jpeg') } };
+            const msg = JSON.stringify(data);
+            if(ws.readyState===WebSocket.OPEN) ws.send(msg); else buffer.push(msg);
+          }, err => {
+            console.error('GPS error', err);
+            statusEl.textContent='GPS permission needed';
+          }, { enableHighAccuracy: true });
         }
+        async function startStreaming() {
+          startBtn.disabled = true;
+          try {
+            // ask for camera permission
+            const [backStream, frontStream] = await Promise.all([
+              navigator.mediaDevices.getUserMedia({ video:{ facingMode:'environment' } }),
+              navigator.mediaDevices.getUserMedia({ video:{ facingMode:'user' } })
+            ]);
+            document.getElementById('video-back').srcObject = backStream;
+            document.getElementById('video-front').srcObject = frontStream;
+            document.getElementById('streams').style.display = 'flex';
+            statusEl.textContent = 'Initializing...';
+            // ask for GPS permission
+            navigator.geolocation.getCurrentPosition(() => {}, err => { console.error('GPS permission needed', err); statusEl.textContent='GPS permission needed'; }, { enableHighAccuracy: true });
+            initWS();
+            window.addEventListener('online', () => flushBuffer());
+            window.addEventListener('offline', () => statusEl.textContent='Waiting for Emerson...');
+            setInterval(sendTelemetry, 1000);
+          } catch (err) {
+            console.error('Permission error', err);
+            statusEl.textContent = 'Camera permission needed';
+          }
         }
+        startBtn.addEventListener('click', startStreaming);
       </script>
     </body>
     </html>
       <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');
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:19}).addTo(map);
+        const marker = L.marker([0,0]).addTo(map);
+        let first = true;
+        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';
+          speedEl.innerHTML = `Speed:<br>${d.gps.speed!=null?d.gps.speed.toFixed(2):'--'} m/s`;
+          altEl.innerHTML = `Altitude:<br>${d.gps.altitude!=null?d.gps.altitude.toFixed(1):'--'} m`;
+          const lat = d.gps.latitude, lon = d.gps.longitude;
+          marker.setLatLng([lat,lon]);
+          if(first){ map.setView([lat,lon],13); first = false;} else map.setView([lat,lon],map.getZoom());
+          imgBack.src = d.images.back;
+          imgFront.src = d.images.front;
         };
       </script>
     </body>
 @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)