🦷 Adds simple controller / stream viewer

2023-05-04 18:28:32 +02:00
parent e2a9a620b8
commit e46f84f4bd
3 changed files with 124 additions and 0 deletions
@@ -0,0 +1,6 @@
+At the moment it's not possisble to build svelteKit to single js file or in a flatten structure
+https://github.com/sveltejs/kit/issues/3882
+
+This means that it cannot be stored in SPIFFS as it only support upto 32 bytes filenames include filepath
+
+For the time being the esp32 will serve at static html file
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
+		<meta http-equiv="content-security-policy" content="">
+        <style>
+			body {
+				margin:0;
+				padding:0;
+				display:flex;
+				justify-content: center;
+				align-items: center;
+				background-color: #00bbe3;
+			}
+
+			.stream-wrapper {
+				position: absolute;
+				top: 0;
+				left: 0;
+				height: 100vh;
+				width: 100vw;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				z-index: -1;
+			}
+
+			#stream {
+				object-fit: contain;
+				height: 100%;
+				width: 100%;
+			}
+		</style>
+	</head>
+	<body>
+		<h2>Spot Micro Controller</h2>
+		<div class="stream-wrapper">
+			<img id="stream"/>
+		</div>
+		<script>
+            const init = () => {
+
+                let websocket = new WebSocket("ws://192.168.0.175:81")
+                websocket.onopen = (event) => {
+                    console.log(event);
+                };
+                websocket.onmessage = (event) => {
+                    console.log(event.data);
+                }
+
+                document.getElementById("stream").src = "//192.168.0.175/mjpeg/1"
+            }
+            init()
+		</script>
+	</body>
+</html>
@@ -0,0 +1,60 @@
+const char index_simple_html[] = R"=====(<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
+		<meta http-equiv="content-security-policy" content="">
+        <style>
+			body {
+				margin:0;
+				padding:0;
+				display:flex;
+				justify-content: center;
+				align-items: center;
+				background-color: #00bbe3;
+			}
+
+			.stream-wrapper {
+				position: absolute;
+				top: 0;
+				left: 0;
+				height: 100vh;
+				width: 100vw;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				z-index: -1;
+			}
+
+			#stream {
+				object-fit: contain;
+				height: 100%;
+				width: 100%;
+			}
+		</style>
+	</head>
+	<body>
+		<h2>Spot Micro Controller</h2>
+		<div class="stream-wrapper">
+			<img id="stream"/>
+		</div>
+		<script>
+            const init = () => {
+
+                let websocket = new WebSocket("ws://192.168.0.175:81")
+                websocket.onopen = (event) => {
+                    console.log(event);
+                };
+                websocket.onmessage = (event) => {
+                    console.log(event.data);
+                }
+
+                document.getElementById("stream").src = "//192.168.0.175/mjpeg/1"
+            }
+            init()
+		</script>
+	</body>
+</html>)=====";
+
+size_t index_simple_html_len = sizeof(index_simple_html)-1;