Darkages/SpotMicroESP32-Leika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🦷 Adds simple controller / stream viewer

Browse Source
This commit is contained in:
Rune Harlyk
2023-05-04 18:28:32 +02:00
parent e2a9a620b8
commit e46f84f4bd
3 changed files with 124 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/README.md
+6
View File
@@ -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
data/index.html
+58
View 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>
include/index_other.h
+60
View File
@@ -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;