frontend cleanup
This commit is contained in:
parent
0ce9deeb2e
commit
0cdaafcc44
@ -1,5 +1,5 @@
|
||||
var width = 600;
|
||||
var height = 500;
|
||||
var width = document.getElementById("viewport").offsetWidth
|
||||
var height = 300;
|
||||
|
||||
var renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setSize(width, height);
|
||||
@ -29,14 +29,14 @@ var cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial2);
|
||||
scene.add(cube);
|
||||
scene.add(cube2);
|
||||
|
||||
var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
|
||||
camera.position.y = 160;
|
||||
camera.position.z = 400;
|
||||
var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 6000);
|
||||
camera.position.y = 100;
|
||||
camera.position.z = 240;
|
||||
camera.lookAt(cube.position);
|
||||
|
||||
scene.add(camera);
|
||||
|
||||
var skyboxGeometry = new THREE.CubeGeometry(10000, 10000, 10000);
|
||||
var skyboxGeometry = new THREE.CubeGeometry(5000, 5000, 5000);
|
||||
var skyboxMaterial = new THREE.MeshBasicMaterial({ color: 0x232323, side: THREE.BackSide });
|
||||
var skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial);
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@ window.addEventListener("load", function(evt) {
|
||||
try{
|
||||
if(!(dat.SOURCE_TCP.Orientation[0] === 0) && !(dat.SOURCE_TCP.Orientation[1] === 0) && !(dat.SOURCE_TCP.Orientation[2] === 0)){
|
||||
// document.getElementById("gyroscopeTCP").style.transform = `rotateX(${(dat.SOURCE_TCP.Orientation[0])%360}deg) rotateY(${(dat.SOURCE_TCP.Orientation[1])%360}deg) rotateZ(0deg)`
|
||||
document.getElementById("gyroscopeTCP").style.transform = `rotateY(0deg) rotateX(${(-dat.SOURCE_TCP.Orientation[0])}deg) rotateZ(${(dat.SOURCE_TCP.Orientation[1])}deg) `
|
||||
// document.getElementById("gyroscopeTCP").style.transform = `rotateY(0deg) rotateX(${(-dat.SOURCE_TCP.Orientation[0])}deg) rotateZ(${(dat.SOURCE_TCP.Orientation[1])}deg) `
|
||||
// document.getElementById("gyroscopeTCP").style.transform = `rotateX(${(dat.SOURCE_TCP.Orientation[0])%360}deg) rotateZ(${(dat.SOURCE_TCP.Orientation[1])%360}deg) rotateY(${(dat.SOURCE_TCP.Orientation[2])%360}deg)`
|
||||
// console.log(dat.SOURCE_TCP.Orientation)
|
||||
renderTCP(dat.SOURCE_TCP.Orientation[0]*Math.PI/180,-dat.SOURCE_TCP.Orientation[1]*Math.PI/180,dat.SOURCE_TCP.Orientation[2]*Math.PI/180)
|
||||
@ -66,7 +66,7 @@ window.addEventListener("load", function(evt) {
|
||||
|
||||
try{
|
||||
if(!(dat.SOURCE_SERIAL.Orientation[0] === 0) && /*!(dat.SOURCE_SERIAL.Orientation[1] === 0) &&*/ !(dat.SOURCE_SERIAL.Orientation[2] === 0)){
|
||||
document.getElementById("gyroscopeSERIAL").style.transform = `rotateX(${dat.SOURCE_SERIAL.Orientation[0]}deg) rotateY(${dat.SOURCE_SERIAL.Orientation[1]}deg) rotateZ(0deg)`
|
||||
// document.getElementById("gyroscopeSERIAL").style.transform = `rotateX(${dat.SOURCE_SERIAL.Orientation[0]}deg) rotateY(${dat.SOURCE_SERIAL.Orientation[1]}deg) rotateZ(0deg)`
|
||||
// document.getElementById("gyroscopeSERIAL").style.transform = `rotateX(${dat.SOURCE_SERIAL.Orientation[0]}deg) rotateY(${dat.SOURCE_SERIAL.Orientation[1]}deg) rotateZ(${dat.SOURCE_SERIAL.Orientation[2]}deg)`
|
||||
renderSerial(dat.SOURCE_SERIAL.Orientation[0]*Math.PI/180,dat.SOURCE_SERIAL.Orientation[1]*Math.PI/180,-dat.SOURCE_SERIAL.Orientation[2]*Math.PI/180)
|
||||
}
|
||||
|
||||
@ -28,9 +28,39 @@ body { margin: 0; padding: 0; }
|
||||
body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;}
|
||||
|
||||
.float-child {
|
||||
width: 45%;
|
||||
width: 50%;
|
||||
float: left;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.sceneMap {
|
||||
width: 200px;
|
||||
height: 50vh;
|
||||
border: 0px solid #CCC;
|
||||
/*margin: 20px;*/
|
||||
perspective: 400px;
|
||||
}
|
||||
|
||||
|
||||
.sceneMap, #map {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.right-col {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
width: 34%;
|
||||
}
|
||||
.left-col {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
width: calc(66% - 20px);
|
||||
padding-right: 20px;
|
||||
|
||||
}
|
||||
|
||||
.compass-container {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
}
|
||||
|
||||
.outer {
|
||||
@ -38,6 +68,7 @@ body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman"
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
margin: 20px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
canvas {
|
||||
@ -88,13 +119,29 @@ canvas {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 20px;
|
||||
/*margin: 20px;*/
|
||||
}
|
||||
#compass1 {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 20px;
|
||||
/*margin: 20px;*/
|
||||
}
|
||||
|
||||
.accuracy-container {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.accuracy-values {
|
||||
margin: 28px 20px 0 20px;
|
||||
}
|
||||
|
||||
.led-container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
#bezel {
|
||||
@ -289,14 +336,6 @@ canvas {
|
||||
}
|
||||
}
|
||||
|
||||
.sceneMap {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 0px solid #CCC;
|
||||
margin: 20px;
|
||||
perspective: 400px;
|
||||
}
|
||||
|
||||
.scene {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
@ -312,6 +351,11 @@ canvas {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.lamps {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
|
||||
.lampinner{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
@ -420,3 +464,8 @@ label { margin-right: 10px; }
|
||||
-webkit-transition: opacity .15s ease-in-out;
|
||||
transition: opacity .15s ease-in-out;
|
||||
}
|
||||
|
||||
#viewport {
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
@ -3,14 +3,14 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>
|
||||
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
|
||||
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
|
||||
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
|
||||
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
|
||||
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet"/>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/three.js"></script>
|
||||
<script src="static/scripts/websocket.js"></script>
|
||||
<link rel="stylesheet" href="static/style.css">
|
||||
<!-- <script src="http://www.x3dom.org/release/x3dom.js"></script>-->
|
||||
<!-- <link rel="stylesheet" href="http://www.x3dom.org/release/x3dom.css">-->
|
||||
<!-- <script src="http://www.x3dom.org/release/x3dom.js"></script>-->
|
||||
<!-- <link rel="stylesheet" href="http://www.x3dom.org/release/x3dom.css">-->
|
||||
</head>
|
||||
<body>
|
||||
<table style="font-size: small">
|
||||
@ -36,22 +36,24 @@
|
||||
<button id="fullReplay">Gesamte Wiedergabe</button>
|
||||
</div>
|
||||
<br>
|
||||
<label id="tracking state" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Tracking state: </label><br>
|
||||
<label id="TCPlong" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone long: </label>
|
||||
<label id="TCPlat" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone lat: </label>
|
||||
<label id="SERIALlong" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox long: </label>
|
||||
<label id="SERIALlat" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox lat: </label>
|
||||
<label id="tracking state" style="font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Tracking
|
||||
state: </label><br>
|
||||
<label id="TCPlong" style="font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone
|
||||
long: </label>
|
||||
<label id="TCPlat" style="font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone lat: </label>
|
||||
<label id="SERIALlong" style="font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox long: </label>
|
||||
<label id="SERIALlat" style="font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox lat: </label>
|
||||
</td>
|
||||
<td valign="top" width="100%">
|
||||
<td valign="top">
|
||||
<div id="output"><p>.</p></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="float-container">
|
||||
<div class="float-child">
|
||||
<div class="sceneMap" style='width: 500px; height: 500px;'>
|
||||
<div id="map" style='width: 500px; height: 500px;'></div>
|
||||
<div class="float-child left-col">
|
||||
<div class="sceneMap">
|
||||
<div id="map"></div>
|
||||
<div id="state-legend" class="legend">
|
||||
<h4>Legende</h4>
|
||||
<div><span style="background-color: rgba(214, 69, 65, 1)"></span>Ublox</div>
|
||||
@ -59,86 +61,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div style="width: 500px; height: 150px;">
|
||||
<canvas id="accuracy" width="500" height="150"></canvas>
|
||||
</div>
|
||||
<div class="float container">
|
||||
<div class="float-child">
|
||||
<div class="container" style="width: 150px; height: 50px">
|
||||
<label id="serialHAcc" style= "color: rgba(214, 69, 65, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox HAcc: </label><br>
|
||||
<label id="serialVAcc" style= "color: rgba(214, 69, 65, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox VAcc: </label>
|
||||
</div>
|
||||
<div class="container" style="width: 150px; height: 50px">
|
||||
<label id="tcpHAcc" style= "color: rgba(30, 139, 195, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone HAcc: </label><br>
|
||||
<label id="tcpVAcc" style= "color: rgba(30, 139, 195, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone VAcc: </label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="float-child">
|
||||
<div class="float container">
|
||||
<div class="float-child">
|
||||
<div class="container" style="width: 350px; height: 50px">
|
||||
<div class="lamp">
|
||||
<div class="lampinner" id="greenlamp" style="background-color: darkgreen"></div>
|
||||
</div>
|
||||
<label style="position: relative; bottom: 40px; left: 70px; color: white; font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Dist. Ublox-Smartphone (m) <= Genauigkeit Ublox (m). </label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="float-child">
|
||||
<div class="container" style="width: 350px; height: 50px">
|
||||
<div class="lamp">
|
||||
<div class="lampinner" id="redlamp" style="background-color: #8b0000"></div>
|
||||
</div>
|
||||
<label style="position: relative; bottom: 40px; left: 70px; color: white; font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Dist. Ublox-Smartphone (m) > Genauigkeit Ublox (m). </label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="viewport" style="height: 500px; width: 500px">
|
||||
</div>
|
||||
<div class="slidecontainer">
|
||||
<button id="calibrate">Smartphone Ausrichtung kalibrieren</button>
|
||||
<button id="deleteCalibration">Kalibrierung zurücksetzen</button>
|
||||
<button id="manualCalibration">Manuelle Kalibrierung</button>
|
||||
<div id="manCalContainer">
|
||||
<p><br>Manuelle Kalibrierung</p>
|
||||
<label>Pitch<input type="range" min="-90" max="90" value="0" class="slider" id="pitchRange" style="margin: 10px 0px"></label>
|
||||
<label>Yaw<input type="range" min="-90" max="90" value="0" class="slider" id="yawRange" style="margin: 10px 0px"></label>
|
||||
<label>Roll<input type="range" min="-90" max="90" value="0" class="slider" id="rollRange" style="margin: 10px 0px"></label>
|
||||
</div>
|
||||
</div>
|
||||
<script src="static/scripts/cubes.js"></script>
|
||||
<div class="scene">
|
||||
<p style="font-size: large">Smartphone</p>
|
||||
<div id="gyroscopeTCP" class="cube">
|
||||
<div class="cube__face cube__face--front">back</div>
|
||||
<div class="cube__face cube__face--back">front</div>
|
||||
<div class="cube__face cube__face--right">right</div>
|
||||
<div class="cube__face cube__face--left">left</div>
|
||||
<div class="cube__face cube__face--top">top</div>
|
||||
<div class="cube__face cube__face--bottom">bottom</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scene">
|
||||
<p style="font-size: large">Ublox</p>
|
||||
<div id="gyroscopeSERIAL" class="cube">
|
||||
<div class="cube__face cube__face--front">back</div>
|
||||
<div class="cube__face cube__face--back">front</div>
|
||||
<div class="cube__face cube__face--right">right</div>
|
||||
<div class="cube__face cube__face--left">left</div>
|
||||
<div class="cube__face cube__face--top">top</div>
|
||||
<div class="cube__face cube__face--bottom">bottom</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="float-child">
|
||||
<div class="outer">
|
||||
<label id="speedTCP" style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed Smartphone (km/h): </label><br>
|
||||
<label id="speedSERIAL" style="color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed Ublox (km/h): </label><br>
|
||||
<div>
|
||||
<label id="speedTCP"
|
||||
style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed
|
||||
Smartphone (km/h): </label><br>
|
||||
<label id="speedSERIAL"
|
||||
style="color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed
|
||||
Ublox
|
||||
(km/h): </label><br>
|
||||
</div>
|
||||
<div>
|
||||
<canvas id="speedometer" width="320" height="230"></canvas>
|
||||
<canvas id="speedometerSpeeds" width="320" height="230"></canvas>
|
||||
@ -148,44 +80,98 @@
|
||||
<p class="speed34">188</p>
|
||||
<p class="speedMax">250</p>
|
||||
</div>
|
||||
</div><br>
|
||||
<div class="float-container">
|
||||
<div class="float-child">
|
||||
<div id="compass">
|
||||
<label id="compassSERIAL" style="color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox </label>
|
||||
<div id="bezel"></div>
|
||||
<div id="NWSE" class="quad"></div>
|
||||
<div id="NESW" class="quad"></div>
|
||||
<div id="NS" class="quad"></div>
|
||||
<div id="WE" class="quad"></div>
|
||||
<span id="N" class="dir">N</span>
|
||||
<span id="E" class="dir">O</span>
|
||||
<span id="S" class="dir">S</span>
|
||||
<span id="W" class="dir">W</span>
|
||||
<div id="needle"></div>
|
||||
<div id="axis"></div>
|
||||
</div>
|
||||
|
||||
<div class="led-container">
|
||||
<div class="lamps">
|
||||
<div class="lamp">
|
||||
<div class="lampinner" id="greenlamp" style="background-color: darkgreen"></div>
|
||||
</div>
|
||||
<div class="lamp">
|
||||
<div class="lampinner" id="redlamp" style="background-color: #8b0000"></div>
|
||||
</div>
|
||||
<label style="margin:auto; margin-left: 10px">Smartphone innerhalb Toleranzbereich</label>
|
||||
</div>
|
||||
<div class="float-child">
|
||||
<div id="compass1">
|
||||
<label id="compassTCP" style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone </label><br>
|
||||
<div id="bezelTCP"></div>
|
||||
<div id="NWSETCP" class="quad"></div>
|
||||
<div id="NESWTCP" class="quad"></div>
|
||||
<div id="NSTCP" class="quad"></div>
|
||||
<div id="WETCP" class="quad"></div>
|
||||
<span id="NTCP" class="dir">N</span>
|
||||
<span id="ETCP" class="dir">O</span>
|
||||
<span id="STCP" class="dir">S</span>
|
||||
<span id="WTCP" class="dir">W</span>
|
||||
<div id="needleTCP"></div>
|
||||
<div id="axisTCP"></div>
|
||||
</div>
|
||||
|
||||
<div class="accuracy-container">
|
||||
<div style="width: 500px; height: 150px;">
|
||||
<canvas id="accuracy" width="500" height="150"></canvas>
|
||||
</div>
|
||||
<div class="accuracy-values">
|
||||
<div class="container" style="width: 150px; height: 50px">
|
||||
<label id="serialHAcc"
|
||||
style="color: rgba(214, 69, 65, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox
|
||||
HAcc: </label><br>
|
||||
<label id="tcpHAcc"
|
||||
style="color: rgba(30, 139, 195, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Phone
|
||||
HAcc: </label>
|
||||
</div>
|
||||
<div class="container" style="width: 150px; height: 50px">
|
||||
<label id="serialVAcc"
|
||||
style="color: rgba(214, 69, 65, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox
|
||||
VAcc: </label><br>
|
||||
<label id="tcpVAcc"
|
||||
style="color: rgba(30, 139, 195, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Phone
|
||||
VAcc: </label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="float-child">
|
||||
|
||||
<div class="float-child right-col">
|
||||
<div class="compass-container">
|
||||
<div id="compass">
|
||||
<label id="compassSERIAL"
|
||||
style="color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox </label>
|
||||
<div id="bezel"></div>
|
||||
<div id="NWSE" class="quad"></div>
|
||||
<div id="NESW" class="quad"></div>
|
||||
<div id="NS" class="quad"></div>
|
||||
<div id="WE" class="quad"></div>
|
||||
<span id="N" class="dir">N</span>
|
||||
<span id="E" class="dir">O</span>
|
||||
<span id="S" class="dir">S</span>
|
||||
<span id="W" class="dir">W</span>
|
||||
<div id="needle"></div>
|
||||
<div id="axis"></div>
|
||||
</div>
|
||||
<div id="compass1">
|
||||
<label id="compassTCP"
|
||||
style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone </label><br>
|
||||
<div id="bezelTCP"></div>
|
||||
<div id="NWSETCP" class="quad"></div>
|
||||
<div id="NESWTCP" class="quad"></div>
|
||||
<div id="NSTCP" class="quad"></div>
|
||||
<div id="WETCP" class="quad"></div>
|
||||
<span id="NTCP" class="dir">N</span>
|
||||
<span id="ETCP" class="dir">O</span>
|
||||
<span id="STCP" class="dir">S</span>
|
||||
<span id="WTCP" class="dir">W</span>
|
||||
<div id="needleTCP"></div>
|
||||
<div id="axisTCP"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="viewport">
|
||||
</div>
|
||||
<div class="slidecontainer">
|
||||
<button id="calibrate">Smartphone Ausrichtung kalibrieren</button>
|
||||
<button id="deleteCalibration">Kalibrierung zurücksetzen</button>
|
||||
<button id="manualCalibration">Manuelle Kalibrierung</button>
|
||||
<div id="manCalContainer">
|
||||
<p><br>Manuelle Kalibrierung</p>
|
||||
<label>Pitch<input type="range" min="-90" max="90" value="0" class="slider" id="pitchRange"
|
||||
style="margin: 10px 0px"></label>
|
||||
<label>Yaw<input type="range" min="-90" max="90" value="0" class="slider" id="yawRange"
|
||||
style="margin: 10px 0px"></label>
|
||||
<label>Roll<input type="range" min="-90" max="90" value="0" class="slider" id="rollRange"
|
||||
style="margin: 10px 0px"></label>
|
||||
</div>
|
||||
</div>
|
||||
<script src="static/scripts/cubes.js"></script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user