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

🔬 Moves script to own file

Browse Source
This commit is contained in:
Rune Harlyk
2023-05-06 02:19:19 +02:00
parent 445dcaaabf
commit 9a326461de
2 changed files with 114 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
data/index.html
+44 -15
View File
@@ -4,6 +4,7 @@
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/107/three.min.js"></script>
<meta viewport-fit="cover">
<meta name="mobile-web-app-capable" content="yes">
<title>Spot Micro</title>
@@ -16,6 +17,7 @@
justify-content: center;
align-items: center;
background-color: #00bbe3;
overflow: hidden;
}
.stream-wrapper {
@@ -35,27 +37,54 @@
height: 100%;
width: 100%;
}
.info {
position: absolute;
top: 0;
right: 0;
padding: 40px;
height: 400px;
width: 300px;
display: flex;
flex-direction: column;
z-index: 10;
color: WHITE;
}
</style>
</head>
<body>
<h2>Spot Micro Controller</h2>
<div class="info">
<div class="rssi"></div>
<div class="x"></div>
<div class="y"></div>
<div class="z"></div>
<div class="mpu_temp"></div>
<div class="uss_r"></div>
<div class="uss_l"></div>
<div class="heap"></div>
<div class="psram"></div>
<div class="temp"></div>
<select id="framesize" class="action-setting">
<option value="13">UXGA (1600x1200)</option>
<option value="12">SXGA (1280x1024)</option>
<option value="11">HD (1280x720)</option>
<option value="10">XGA (1024x768)</option>
<option value="9">SVGA (800x600)</option>
<option value="8">VGA (640x480)</option>
<option value="7">HVGA (480x320)</option>
<option value="6">CIF (400x296)</option>
<option value="5">QVGA (320x240)</option>
<option value="3">HQVGA (240x176)</option>
<option value="1">QQVGA (160x120)</option>
<option value="0">THUMB (96x96)</option>
</select>
</div>
<div class="stream-wrapper">
<img id="stream"/>
</div>
<script>
const init = () => {
let websocket = new WebSocket(`ws://${location.hostname}`)
websocket.onopen = (event) => {
console.log(event);
};
websocket.onmessage = (event) => {
console.log(event.data);
}
document.getElementById("stream").src = `//${location.hostname}/stream`
}
init()
</script>
<div class="cube-content stream-wrapper">
<div id="3Dcube"></div>
</div>
<script src="script.js"></script>
</body>
</html>