<!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" />
{% assets 'css' %}
<link rel="stylesheet" href="{{ ASSET_URL }}" />
{% endassets %}
<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>
<title>Potentia Robotics GUI</title>
</head>
<body onload="getData()">
<p>{{ conf }}</p>
<div class="main-container">
<div class="main-element e1">
<img
src="{{url_for('static', filename='images/robot.png')}}"
class="robotimg"
/>
</div>
<div class="main-element e2">
<div class="dropdowns">
<div class="dropdown d1">
<img
src="{{url_for('static', filename='images/img-knee.png')}}"
class="img-part"
/>
<p class="measure load1" id="load1">NaN</p>
<form
action='{{ url_for("sendData")}}'
class="enter-angle"
method="POST"
>
<label for="rot">Input</label>
<input
class="inputbox"
type="text"
id="rot"
name="rot"
/>
<input type="submit" value="Enter" />
</form>
<p class="units">Deg</p>
<select name="input" id="unit">
<option value="Position">Position</option>
<option value="Percent">Percent</option>
<option value="Velocity">Velocity</option>
<option value="Voltage">Voltage</option>
<option value="Force">Force</option>
</select>
</div>
<div class="dropdown d2">
<img
src="{{url_for('static', filename='images/img-knee.png')}}"
class="img-part"
/>
<p class="measure load2" id="load2">NaN</p>
<form
action='{{ url_for("sendData")}}'
class="enter-angle"
method="POST"
>
<label for="rot">Input</label>
<input
class="inputbox"
type="text"
id="rot"
name="rot"
/>
<input type="submit" value="Enter" />
</form>
<p class="units">Deg</p>
<select name="input" id="unit">
<option value="Position">Position</option>
<option value="Percent">Percent</option>
<option value="Velocity">Velocity</option>
<option value="Voltage">Voltage</option>
<option value="Force">Force</option>
</select>
</div>
<div class="dropdown d3">
<img
src="{{url_for('static', filename='images/img-knee.png')}}"
class="img-part"
/>
<p class="measure load3" id="load3">NaN</p>
<form
action='{{ url_for("sendData")}}'
class="enter-angle"
method="POST"
>
<label for="rot">Input</label>
<input
class="inputbox"
type="text"
id="rot"
name="rot"
/>
<input type="submit" value="Enter" />
</form>
<p class="units">Deg</p>
<select name="input" id="unit">
<option value="Position">Position</option>
<option value="Percent">Percent</option>
<option value="Velocity">Velocity</option>
<option value="Voltage">Voltage</option>
<option value="Force">Force</option>
</select>
</div>
</div>
<div class="panel2-btns">
<a class="btn-2 power" href="https://google.com">Power</a>
<a class="btn-2 battery" href="https://google.com"
>Battery</a
>
</div>
</div>
<div class="main-element e3">
<div class="panel3-btns">
<a class="btn-3 manual" href="https://google.com">Manual</a>
<a class="btn-3 semi-automatic" href="https://google.com"
>SA</a
>
<a class="btn-3 automatic" href="https://google.com"
>Manual</a
>
<a class="btn-3 angle-view" href="https://google.com"
>Angle View</a
>
</div>
<div class="angle-rot-header">
<p class="angle-rot">Angle Rotation</p>
</div>
<div class="position-grid">
<div class="pos-num">
<p class="pos-angle-num">1</p>
</div>
<div class="pos-angle">
<img
src="{{url_for('static', filename='images/img-knee.png')}}"
class="pos-img"
/>
<p class="pos-angle-num">57</p>
</div>
<div class="pos-num">
<p class="pos-angle-num">2</p>
</div>
<div class="pos-angle">
<img
src="{{url_for('static', filename='images/img-knee.png')}}"
class="pos-img"
/>
<p class="pos-angle-num">57</p>
</div>
<div class="pos-num">
<p class="pos-angle-num">3</p>
</div>
<div class="pos-angle">
<img
src="{{url_for('static', filename='images/img-knee.png')}}"
class="pos-img"
/>
<p class="pos-angle-num">57</p>
</div>
<div class="pos-num">
<p class="pos-angle-num">4</p>
</div>
<div class="pos-angle">
<img
src="{{url_for('static', filename='images/img-knee.png')}}"
class="pos-img"
/>
<p class="pos-angle-num">57</p>
</div>
<div class="pos-num">
<p class="pos-angle-num">5</p>
</div>
<div class="pos-angle">
<img
src="{{url_for('static', filename='images/img-knee.png')}}"
class="pos-img"
/>
<p class="pos-angle-num">57</p>
</div>
<div class="pos-num">
<p class="pos-angle-num">6</p>
</div>
<div class="pos-angle">
<img
src="{{url_for('static', filename='images/img-knee.png')}}"
class="pos-img"
/>
<p class="pos-angle-num">57</p>
</div>
<div class="pos-num">
<p class="pos-angle-num">7</p>
</div>
<div class="pos-angle">
<img
src="{{url_for('static', filename='images/img-knee.png')}}"
class="pos-img"
/>
<p class="pos-angle-num">57</p>
</div>
<div class="pos-num">
<p class="pos-angle-num">8</p>
</div>
<div class="pos-angle">
<img
src="{{url_for('static', filename='images/img-knee.png')}}"
class="pos-img"
/>
<p class="pos-angle-num">57</p>
</div>
<div class="pos-num">
<p class="pos-angle-num">9</p>
</div>
<div class="pos-angle">
<img
src="{{url_for('static', filename='images/img-knee.png')}}"
class="pos-img"
/>
<p class="pos-angle-num">57</p>
</div>
<div class="pos-num">
<p class="pos-angle-num">10</p>
</div>
<div class="pos-angle">
<img
src="{{url_for('static', filename='images/img-knee.png')}}"
class="pos-img"
/>
<p class="pos-angle-num">57</p>
</div>
</div>
</div>
</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>