🔬 Moves script to own file
This commit is contained in:
Rune Harlyk
+44
-15
@@ -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>
|
||||
@@ -0,0 +1,70 @@
|
||||
let websocket, scene, camera, rendered, cube;
|
||||
|
||||
function lerp (start, end, amt){
|
||||
return (1-amt)*start+amt*end
|
||||
}
|
||||
|
||||
let floats = new Float32Array(12);
|
||||
let x, y, z;
|
||||
const init = () => {
|
||||
|
||||
websocket = new WebSocket(`ws://leika.local/`) //${location.hostname}
|
||||
websocket.binaryType = "arraybuffer";
|
||||
websocket.onopen = (event) => {
|
||||
console.log(event);
|
||||
};
|
||||
websocket.onmessage = (event) => {
|
||||
if (event.data instanceof ArrayBuffer) {
|
||||
let data = new Uint8Array(event.data);
|
||||
floats = new Float32Array(data.buffer);
|
||||
|
||||
var toDeg = (Math.PI/180);
|
||||
|
||||
cube.rotation.x = lerp (x, floats[5]*toDeg, 0.5);
|
||||
cube.rotation.z = lerp (x, floats[6]*toDeg, 0.5);
|
||||
cube.rotation.y = lerp (x, floats[7]*toDeg, 0.5);
|
||||
|
||||
x = floats[5]*toDeg;
|
||||
y = floats[6]*toDeg;
|
||||
z = floats[7]*toDeg;
|
||||
|
||||
document.querySelector(".rssi").innerHTML = "RSSI: " + floats[0] + "db";
|
||||
document.querySelector(".mpu_temp").innerHTML = "Temp: :" + Math.floor(floats[1]) + "°";
|
||||
document.querySelector(".x").innerHTML = "X: " + x;
|
||||
document.querySelector(".y").innerHTML = "Y: " + y;
|
||||
document.querySelector(".z").innerHTML = "Z: " + z;
|
||||
document.querySelector(".temp").innerHTML = "Cpu temp: " + Math.floor(floats[8]) + "°";
|
||||
document.querySelector(".uss_r").innerHTML = "USS R: " + floats[9]+ "cm";
|
||||
document.querySelector(".uss_l").innerHTML = "USS L: " + floats[10] + "cm";
|
||||
document.querySelector(".heap").innerHTML = "Heap: " + humanFileSize(floats[11]);
|
||||
document.querySelector(".psram").innerHTML = "psram: " + humanFileSize(floats[12]);
|
||||
console.log(x,y,z);
|
||||
renderer.render(scene, camera);
|
||||
} else {
|
||||
console.log(event.data);
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("stream").src = `//leika.local/stream`
|
||||
}
|
||||
function humanFileSize(bytes, si=false, dp=1) {
|
||||
const thresh = si ? 1000 : 1024;
|
||||
|
||||
if (Math.abs(bytes) < thresh) {
|
||||
return bytes + ' B';
|
||||
}
|
||||
|
||||
const units = si
|
||||
? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
|
||||
: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
|
||||
let u = -1;
|
||||
const r = 10**dp;
|
||||
|
||||
do {
|
||||
bytes /= thresh;
|
||||
++u;
|
||||
} while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
|
||||
|
||||
|
||||
return bytes.toFixed(dp) + ' ' + units[u];
|
||||
}
|
||||
Reference in New Issue
Block a user