Update app.py
Browse files
app.py
CHANGED
@@ -1,5 +1,4 @@
|
|
1 |
-
# Sir, this app.py implements /stream and /dashboard endpoints with telemetry streaming, offline buffering, and
|
2 |
-
# Sir, UI improved: dashboard uses responsive cards with shadows, two-column layout, scrollable feed; stream page styled simply.
|
3 |
|
4 |
from fastapi import FastAPI, WebSocket
|
5 |
from fastapi.responses import HTMLResponse, StreamingResponse
|
@@ -25,25 +24,29 @@ async def stream():
|
|
25 |
body { margin:0; padding:0; display:flex; flex-direction:column; align-items:center; justify-content:center; height:100vh; background:#eef6fc; font-family:sans-serif; }
|
26 |
h1 { margin-bottom:10px; color:#034f84; }
|
27 |
#status { font-weight:bold; margin-bottom:20px; color:#fc3d03; }
|
28 |
-
video { border:2px solid #034f84; border-radius:8px; }
|
29 |
</style>
|
30 |
</head>
|
31 |
<body>
|
32 |
<h1>Emerson Telemetry Stream</h1>
|
33 |
-
<p id="status">
|
34 |
-
<video id="video"
|
35 |
<script>
|
36 |
-
const ws = new WebSocket(`wss://${location.host}/ws`);
|
37 |
-
let buffer = [];
|
38 |
const statusEl = document.getElementById('status');
|
39 |
-
|
40 |
-
|
41 |
-
|
42 |
-
|
43 |
-
|
44 |
-
|
|
|
|
|
|
|
|
|
45 |
|
|
|
46 |
function sendTelemetry() {
|
|
|
47 |
const video = document.getElementById('video');
|
48 |
const canvas = document.createElement('canvas');
|
49 |
canvas.width = video.videoWidth;
|
@@ -55,13 +58,30 @@ async def stream():
|
|
55 |
if (ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify(data)); else buffer.push(data);
|
56 |
});
|
57 |
}
|
58 |
-
function flushBuffer() { while(buffer.length) ws.send(JSON.stringify(buffer.shift())); }
|
59 |
|
60 |
-
|
61 |
-
|
62 |
-
|
63 |
-
|
64 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
65 |
</script>
|
66 |
</body>
|
67 |
</html>
|
@@ -96,15 +116,15 @@ async def dashboard():
|
|
96 |
const ws = new WebSocket(`wss://${location.host}/ws`);
|
97 |
const statusEl = document.getElementById('status');
|
98 |
const dataEl = document.getElementById('data');
|
99 |
-
ws.onopen = () => statusEl.textContent='Connected';
|
100 |
-
ws.onclose = () => statusEl.textContent='Disconnected';
|
101 |
ws.onmessage = evt => {
|
102 |
const d = JSON.parse(evt.data);
|
103 |
-
statusEl.textContent='Streaming';
|
104 |
-
const card = document.createElement('div'); card.className='entry';
|
105 |
const text = document.createElement('p');
|
106 |
text.textContent = `Time: ${new Date(d.timestamp).toLocaleTimeString()}\nGPS: ${d.gps.latitude.toFixed(5)}, ${d.gps.longitude.toFixed(5)}`;
|
107 |
-
const img = document.createElement('img'); img.src=d.image;
|
108 |
card.append(text, img);
|
109 |
dataEl.prepend(card);
|
110 |
};
|
@@ -135,7 +155,8 @@ async def websocket_endpoint(ws:WebSocket):
|
|
135 |
for conn in dashboard_connections:
|
136 |
try: await conn.send_text(json.dumps(obj))
|
137 |
except: dashboard_connections.remove(conn)
|
138 |
-
except:
|
|
|
139 |
|
140 |
if __name__ == "__main__":
|
141 |
uvicorn.run(app, host="0.0.0.0", port=7860)
|
|
|
1 |
+
# Sir, this app.py implements /stream and /dashboard endpoints with telemetry streaming, offline buffering, CSV download, and proper camera permission prompt on mobile.
|
|
|
2 |
|
3 |
from fastapi import FastAPI, WebSocket
|
4 |
from fastapi.responses import HTMLResponse, StreamingResponse
|
|
|
24 |
body { margin:0; padding:0; display:flex; flex-direction:column; align-items:center; justify-content:center; height:100vh; background:#eef6fc; font-family:sans-serif; }
|
25 |
h1 { margin-bottom:10px; color:#034f84; }
|
26 |
#status { font-weight:bold; margin-bottom:20px; color:#fc3d03; }
|
27 |
+
video { border:2px solid #034f84; border-radius:8px; width:100%; max-width:320px; }
|
28 |
</style>
|
29 |
</head>
|
30 |
<body>
|
31 |
<h1>Emerson Telemetry Stream</h1>
|
32 |
+
<p id="status">Initializing...</p>
|
33 |
+
<video id="video" autoplay muted playsinline></video>
|
34 |
<script>
|
|
|
|
|
35 |
const statusEl = document.getElementById('status');
|
36 |
+
let buffer = [];
|
37 |
+
let ws;
|
38 |
+
|
39 |
+
// Initialize WebSocket
|
40 |
+
function initWS() {
|
41 |
+
ws = new WebSocket(`wss://${location.host}/ws`);
|
42 |
+
ws.onopen = () => { statusEl.textContent = 'Connected'; flushBuffer(); };
|
43 |
+
ws.onclose = () => statusEl.textContent = 'Disconnected';
|
44 |
+
ws.onerror = () => statusEl.textContent = 'WebSocket error';
|
45 |
+
}
|
46 |
|
47 |
+
// Send telemetry data
|
48 |
function sendTelemetry() {
|
49 |
+
if (!videoStream) return;
|
50 |
const video = document.getElementById('video');
|
51 |
const canvas = document.createElement('canvas');
|
52 |
canvas.width = video.videoWidth;
|
|
|
58 |
if (ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify(data)); else buffer.push(data);
|
59 |
});
|
60 |
}
|
|
|
61 |
|
62 |
+
function flushBuffer() {
|
63 |
+
while (buffer.length && ws.readyState === WebSocket.OPEN) {
|
64 |
+
ws.send(JSON.stringify(buffer.shift()));
|
65 |
+
}
|
66 |
+
}
|
67 |
+
|
68 |
+
// Prompt for camera, mobile compatible
|
69 |
+
let videoStream;
|
70 |
+
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
|
71 |
+
.then(stream => {
|
72 |
+
videoStream = stream;
|
73 |
+
const video = document.getElementById('video');
|
74 |
+
video.srcObject = stream;
|
75 |
+
statusEl.textContent = navigator.onLine ? 'Connected' : 'Waiting for Emerson...';
|
76 |
+
initWS();
|
77 |
+
window.addEventListener('online', () => flushBuffer());
|
78 |
+
window.addEventListener('offline', () => statusEl.textContent = 'Waiting for Emerson...');
|
79 |
+
setInterval(sendTelemetry, 1000);
|
80 |
+
})
|
81 |
+
.catch(err => {
|
82 |
+
console.error('Camera permission error:', err);
|
83 |
+
statusEl.textContent = 'Camera permission needed';
|
84 |
+
});
|
85 |
</script>
|
86 |
</body>
|
87 |
</html>
|
|
|
116 |
const ws = new WebSocket(`wss://${location.host}/ws`);
|
117 |
const statusEl = document.getElementById('status');
|
118 |
const dataEl = document.getElementById('data');
|
119 |
+
ws.onopen = () => statusEl.textContent = 'Connected';
|
120 |
+
ws.onclose = () => statusEl.textContent = 'Disconnected';
|
121 |
ws.onmessage = evt => {
|
122 |
const d = JSON.parse(evt.data);
|
123 |
+
statusEl.textContent = 'Streaming';
|
124 |
+
const card = document.createElement('div'); card.className = 'entry';
|
125 |
const text = document.createElement('p');
|
126 |
text.textContent = `Time: ${new Date(d.timestamp).toLocaleTimeString()}\nGPS: ${d.gps.latitude.toFixed(5)}, ${d.gps.longitude.toFixed(5)}`;
|
127 |
+
const img = document.createElement('img'); img.src = d.image;
|
128 |
card.append(text, img);
|
129 |
dataEl.prepend(card);
|
130 |
};
|
|
|
155 |
for conn in dashboard_connections:
|
156 |
try: await conn.send_text(json.dumps(obj))
|
157 |
except: dashboard_connections.remove(conn)
|
158 |
+
except:
|
159 |
+
dashboard_connections.remove(ws)
|
160 |
|
161 |
if __name__ == "__main__":
|
162 |
uvicorn.run(app, host="0.0.0.0", port=7860)
|