Rune Harlyk
90 lines
2.3 KiB
HTML
90 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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>
|
|
<meta http-equiv="content-security-policy" content="">
|
|
<style>
|
|
body {
|
|
margin:0;
|
|
padding:0;
|
|
display:flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #00bbe3;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
.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>
|
|
<div class="cube-content stream-wrapper">
|
|
<div id="3Dcube"></div>
|
|
</div>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |