mirror of
https://github.com/PotentiaRobotics/robot-gui.git
synced 2025-04-09 14:20:16 -04:00
283 lines
14 KiB
HTML
283 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tailwind file</title>
|
|
<link rel="stylesheet"
|
|
href="{{url_for('static',filename='dist/css/output.css')}}">
|
|
|
|
|
|
<!-- Script stuff -->
|
|
<script
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js"
|
|
integrity="sha512-odNmoc1XJy5x1TMVMdC7EMs3IVdItLPlCeL5vSUPN2llYKMJ2eByTTAIiiuqLg+GdNr9hF6z81p27DArRFKT7A=="
|
|
crossorigin="anonymous"
|
|
referrerpolicy="no-referrer"></script>
|
|
</head>
|
|
<body class="bg-black" onload="getData()">
|
|
|
|
|
|
|
|
<div class="bg-black">
|
|
<!-- 3 Collums -->
|
|
<div class="grid grid-cols-3 gap-6 bg-black">
|
|
|
|
<div class="bg-slate-600 ml-3 h-screen">
|
|
<p>{{ conf }}</p>
|
|
<!-- import an an image from the static/image folder -->
|
|
<img src="{{url_for('static',filename='images/robot.png')}}"
|
|
alt="image" class="w-full h-full">
|
|
</div>
|
|
<!-- Input buttons -->
|
|
<div class="bg-slate-600">
|
|
|
|
<div class="grid grid-cols-1 grid-rows-3 gap-24 mt-5 ">
|
|
|
|
|
|
<!-- Button 1 -->
|
|
<div class="mx-auto w-10/12 bg-slate-900 grid
|
|
grid-cols-3
|
|
gap-6">
|
|
|
|
<div class="my-auto">
|
|
|
|
<!-- Knee joint pic -->
|
|
<img class="m-auto"
|
|
src="{{url_for('static',filename='images/img-knee.png')}}"
|
|
alt="image" class="w-full h-full">
|
|
</div>
|
|
|
|
<!-- Input -->
|
|
<div>
|
|
<!-- Make an input with a button -->
|
|
|
|
<form
|
|
action='{{url_for("sendData")}}'
|
|
class="enter-angle"
|
|
method="POST">
|
|
|
|
|
|
<input class="mt-1 w-11/12" type="number" id="rot"
|
|
name="rot"
|
|
placeholder="Enter angle"/>
|
|
|
|
<input type="submit" value="Submit"
|
|
class="rounded-lg bg-yellow-300">
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Make a dropdown menu with options for position/force -->
|
|
<div class="my-auto">
|
|
<select name="" class="bg-black
|
|
text-yellow-400">
|
|
<option value="">Position</option>
|
|
<option value="">Percent</option>
|
|
<option value="">Velocity</option>
|
|
<option value="">Voltage</option>
|
|
<option value="">Force</option>
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- Screen 3 -->
|
|
|
|
|
|
<div class="bg-slate-600 mr-3 ">
|
|
<div class=" h-20 mt-10 mx-10
|
|
bg-blue-900">
|
|
<div class="my-auto text-center ">
|
|
<h1 class="text-2xl text-yellow-400">Angle
|
|
Rotation</h1>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<!-- make a grid with 1 collum and 1 row -->
|
|
<div class="grid grid-cols-1 mt-12
|
|
gap-0">
|
|
|
|
<div class="bg-gray-700 h-16 mx-32 grid
|
|
grid-cols-3 ">
|
|
<div class="bg-yellow-500 m-2 w-14
|
|
">
|
|
<h1 class="text-center font-serif
|
|
text-4xl">1</h1></div>
|
|
<div class="bg-red-500 col-span-2 m-2
|
|
grid grid-cols-2 ">
|
|
<!-- Link an image from images folder -->
|
|
<img class="m-auto"
|
|
src="{{url_for('static',filename='images/img-knee.png')}}"
|
|
alt="image"
|
|
class="w-full h-full">
|
|
<div class="my-auto">
|
|
<h1 class="text-center
|
|
font-serif mb-2
|
|
text-4xl">57</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-700 h-16 mx-32 grid
|
|
grid-cols-3 ">
|
|
<div class="bg-yellow-500 m-2 w-14
|
|
">
|
|
<h1 class="text-center font-serif
|
|
text-4xl">2</h1></div>
|
|
<div class="bg-red-500 col-span-2 m-2
|
|
grid grid-cols-2 ">
|
|
<!-- Link an image from images folder -->
|
|
<img class="m-auto"
|
|
src="{{url_for('static',filename='images/img-knee.png')}}"
|
|
alt="image"
|
|
class="w-full h-full">
|
|
<div class="my-auto">
|
|
<h1 class="text-center
|
|
font-serif mb-2
|
|
text-4xl">57</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-700 h-16 mx-32 grid
|
|
grid-cols-3 ">
|
|
<div class="bg-yellow-500 m-2 w-14
|
|
">
|
|
<h1 class="text-center font-serif
|
|
text-4xl">3</h1></div>
|
|
<div class="bg-red-500 col-span-2 m-2
|
|
grid grid-cols-2 ">
|
|
<!-- Link an image from images folder -->
|
|
<img class="m-auto"
|
|
src="{{url_for('static',filename='images/img-knee.png')}}"
|
|
alt="image"
|
|
class="w-full h-full">
|
|
<div class="my-auto">
|
|
<h1 class="text-center
|
|
font-serif mb-2
|
|
text-4xl">57</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-700 h-16 mx-32 grid
|
|
grid-cols-3 ">
|
|
<div class="bg-yellow-500 m-2 w-14
|
|
">
|
|
<h1 class="text-center font-serif
|
|
text-4xl">4</h1></div>
|
|
<div class="bg-red-500 col-span-2 m-2
|
|
grid grid-cols-2 ">
|
|
<!-- Link an image from images folder -->
|
|
<img class="m-auto"
|
|
src="{{url_for('static',filename='images/img-knee.png')}}"
|
|
alt="image"
|
|
class="w-full h-full">
|
|
<div class="my-auto">
|
|
<h1 class="text-center
|
|
font-serif mb-2
|
|
text-4xl">57</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-700 h-16 mx-32 grid
|
|
grid-cols-3 ">
|
|
<div class="bg-yellow-500 m-2 w-14
|
|
">
|
|
<h1 class="text-center font-serif
|
|
text-4xl">5</h1></div>
|
|
<div class="bg-red-500 col-span-2 m-2
|
|
grid grid-cols-2 ">
|
|
<!-- Link an image from images folder -->
|
|
<img class="m-auto"
|
|
src="{{url_for('static',filename='images/img-knee.png')}}"
|
|
alt="image"
|
|
class="w-full h-full">
|
|
<div class="my-auto">
|
|
<h1 class="text-center
|
|
font-serif mb-2
|
|
text-4xl">57</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-700 h-16 mx-32 grid
|
|
grid-cols-3 ">
|
|
<div class="bg-yellow-500 m-2 w-14
|
|
">
|
|
<h1 class="text-center font-serif
|
|
text-4xl">6</h1></div>
|
|
<div class="bg-red-500 col-span-2 m-2
|
|
grid grid-cols-2 ">
|
|
<!-- Link an image from images folder -->
|
|
<img class="m-auto"
|
|
src="{{url_for('static',filename='images/img-knee.png')}}"
|
|
alt="image"
|
|
class="w-full h-full">
|
|
<div class="my-auto">
|
|
<h1 class="text-center
|
|
font-serif mb-2
|
|
text-4xl">57</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-700 h-16 mx-32 grid
|
|
grid-cols-3 ">
|
|
<div class="bg-yellow-500 m-2 w-14
|
|
">
|
|
<h1 class="text-center font-serif
|
|
text-4xl">7</h1></div>
|
|
<div class="bg-red-500 col-span-2 m-2
|
|
grid grid-cols-2 ">
|
|
<!-- Link an image from images folder -->
|
|
<img class="m-auto"
|
|
src="{{url_for('static',filename='images/img-knee.png')}}"
|
|
alt="image"
|
|
class="w-full h-full">
|
|
<div class="my-auto">
|
|
<h1 class="text-center
|
|
font-serif mb-2
|
|
text-4xl">57</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="grid grid-cols-4 gap-4 mx-10
|
|
mt-20">
|
|
<button class="bg-gray-800 h-12 text-white">Manual</button>
|
|
<button class="bg-gray-800 h-12 text-white">SA</button>
|
|
<button class="bg-gray-800 h-12 text-white">Manual</button>
|
|
<button class="bg-cyan-600 h-12
|
|
text-white">Angle
|
|
view</button>
|
|
</div>
|
|
|
|
<script>
|
|
function getData() {
|
|
url = "/api/datapoint";
|
|
console.log("hi");
|
|
axios
|
|
.get(url)
|
|
.then(function (response) {
|
|
// The data will all be returned as a JSON object
|
|
// We can access the data by using the data property of the response object
|
|
|
|
document.getElementById("load1").innerHTML =
|
|
response.data.angle1;
|
|
document.getElementById("load2").innerHTML =
|
|
response.data.angle2;
|
|
document.getElementById("load3").innerHTML =
|
|
response.data.angle3;
|
|
//document.getElementById('rawJsonDiv').innerHTML = JSON.stringify(response.data);
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
}
|
|
|
|
// This calls the function getRandomNumber() every 2 seconds
|
|
var intervalID = window.setInterval(getData, 200);
|
|
</script>
|
|
</body>
|
|
</html> |