Hugging Face's logo

Spaces:
SalexAI
/
1A12
Sleeping

App Files Community
SalexAI commited on
Commit
730e56f
·
verified ·
1 Parent(s): 7af7a7a

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +30 -9
app.py CHANGED
@@ -1,5 +1,5 @@
1
  # Sir, this app.py implements /stream and /dashboard endpoints with telemetry streaming, offline buffering, and CSV download.
2
- # Sir, let me know if you'd like a detailed walkthrough.
3
 
4
  from fastapi import FastAPI, WebSocket, Request
5
  from fastapi.responses import HTMLResponse, StreamingResponse
@@ -18,13 +18,21 @@ async def stream():
18
  html = """
19
  <!DOCTYPE html>
20
  <html>
21
- <head><title>Emerson Telemetry Stream</title></head>
 
 
 
 
 
 
 
 
22
  <body>
23
  <h1>Emerson Telemetry Stream</h1>
24
  <p id="status">Connecting...</p>
25
  <video id="video" width="320" height="240" autoplay muted></video>
26
  <script>
27
- const ws = new WebSocket(`ws://${location.host}/ws`);
28
  let buffer = [];
29
  document.getElementById("status").innerText = navigator.onLine ? "Connected" : "Waiting for Emerson...";
30
  window.addEventListener("online", () => flushBuffer());
@@ -77,26 +85,39 @@ async def dashboard():
77
  html = """
78
  <!DOCTYPE html>
79
  <html>
80
- <head><title>Emerson Dashboard</title></head>
 
 
 
 
 
 
 
 
 
 
 
81
  <body>
82
  <h1>Emerson Dashboard</h1>
83
  <p id="status">Waiting for Emerson...</p>
84
  <div id="data"></div>
85
  <a href="/download-csv" download="telemetry.csv">Download CSV</a>
86
  <script>
87
- const ws = new WebSocket(`ws://${location.host}/ws`);
88
  ws.onopen = () => document.getElementById("status").innerText = "Connected";
89
  ws.onmessage = msg => {
90
  const data = JSON.parse(msg.data);
91
  document.getElementById("status").innerText = "Streaming";
92
  const div = document.getElementById("data");
 
 
93
  const p = document.createElement("p");
94
- p.innerText = `Time: ${new Date(data.timestamp).toLocaleTimeString()} GPS: ${data.gps.latitude.toFixed(5)}, ${data.gps.longitude.toFixed(5)}`;
95
  const img = document.createElement("img");
96
  img.src = data.image;
97
- img.width = 160;
98
- div.prepend(img);
99
- div.prepend(p);
100
  };
101
  ws.onclose = () => document.getElementById("status").innerText = "Disconnected";
102
  </script>
 
1
  # Sir, this app.py implements /stream and /dashboard endpoints with telemetry streaming, offline buffering, and CSV download.
2
+ # Sir, now includes HTTPS-compatible WSS endpoint and UI upgrades for visuals.
3
 
4
  from fastapi import FastAPI, WebSocket, Request
5
  from fastapi.responses import HTMLResponse, StreamingResponse
 
18
  html = """
19
  <!DOCTYPE html>
20
  <html>
21
+ <head>
22
+ <title>Emerson Telemetry Stream</title>
23
+ <style>
24
+ body { background-color: #f0f8ff; font-family: sans-serif; text-align: center; padding: 20px; }
25
+ h1 { color: #004080; }
26
+ #status { font-weight: bold; color: green; margin-bottom: 10px; }
27
+ video { border: 2px solid #004080; border-radius: 8px; }
28
+ </style>
29
+ </head>
30
  <body>
31
  <h1>Emerson Telemetry Stream</h1>
32
  <p id="status">Connecting...</p>
33
  <video id="video" width="320" height="240" autoplay muted></video>
34
  <script>
35
+ const ws = new WebSocket(`wss://${location.host}/ws`);
36
  let buffer = [];
37
  document.getElementById("status").innerText = navigator.onLine ? "Connected" : "Waiting for Emerson...";
38
  window.addEventListener("online", () => flushBuffer());
 
85
  html = """
86
  <!DOCTYPE html>
87
  <html>
88
+ <head>
89
+ <title>Emerson Dashboard</title>
90
+ <style>
91
+ body { background-color: #ffffff; font-family: sans-serif; padding: 20px; }
92
+ h1 { color: #222244; }
93
+ #status { font-weight: bold; margin-bottom: 15px; color: #d9534f; }
94
+ #data { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
95
+ .entry { border: 1px solid #ccc; border-radius: 5px; padding: 10px; background: #f9f9f9; }
96
+ img { max-width: 100%; height: auto; border-radius: 4px; }
97
+ a { margin-top: 20px; display: inline-block; color: white; background: #007bff; padding: 10px 15px; text-decoration: none; border-radius: 5px; }
98
+ </style>
99
+ </head>
100
  <body>
101
  <h1>Emerson Dashboard</h1>
102
  <p id="status">Waiting for Emerson...</p>
103
  <div id="data"></div>
104
  <a href="/download-csv" download="telemetry.csv">Download CSV</a>
105
  <script>
106
+ const ws = new WebSocket(`wss://${location.host}/ws`);
107
  ws.onopen = () => document.getElementById("status").innerText = "Connected";
108
  ws.onmessage = msg => {
109
  const data = JSON.parse(msg.data);
110
  document.getElementById("status").innerText = "Streaming";
111
  const div = document.getElementById("data");
112
+ const block = document.createElement("div");
113
+ block.className = "entry";
114
  const p = document.createElement("p");
115
+ p.innerText = `Time: ${new Date(data.timestamp).toLocaleTimeString()}\nGPS: ${data.gps.latitude.toFixed(5)}, ${data.gps.longitude.toFixed(5)}`;
116
  const img = document.createElement("img");
117
  img.src = data.image;
118
+ block.appendChild(p);
119
+ block.appendChild(img);
120
+ div.prepend(block);
121
  };
122
  ws.onclose = () => document.getElementById("status").innerText = "Disconnected";
123
  </script>