diff --git a/app.py b/app.py
index 8c216e7..9a4140f 100644
--- a/app.py
+++ b/app.py
@@ -1,6 +1,6 @@
# app.py
-from flask import Flask, render_template, request
+from flask import Flask, render_template, request, jsonify
from flask_assets import Bundle, Environment
import random
app = Flask(__name__)
@@ -16,6 +16,19 @@ css.build()
def homepage():
return render_template("index.html")
+@app.route('/api/datapoint')
+def api_datapoint():
+
+ deg = [int(random.random() * 100) / 100 for _ in range(3)]
+ dictionary_to_return = {
+ 'angle1': deg[0],
+ 'angle2': deg[1],
+ 'angle3': deg[2]
+ }
+
+ return jsonify(dictionary_to_return)
+
+
@app.route("/sendData", methods =["GET", "POST"])
def sendData():
@@ -39,10 +52,7 @@ def sendData():
return render_template("index.html", conf='Invalid Input "'+rot+'"')
except:
return render_template("index.html", conf='Timeout: Unable to reach Pi')
-@app.context_processor
-def inject_load1():
- deg = [int(random.random() * 100) / 100 for _ in range(3)]
- return {'load1': deg[0], 'load2': deg[1], 'load3' :deg[2]}
+
if __name__ == "__main__":
app.run(debug=True)
diff --git a/templates/base.html b/templates/base.html
index 9c8866e..d655e6c 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -8,10 +8,16 @@
{% 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>
+ <body onload="getData()">
<p>{{ conf }}</p>
<div class="main-container">
<div class="main-element e1">
@@ -154,5 +160,32 @@
</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>
diff --git a/templates/drop1.html b/templates/drop1.html
index 69ece47..d402fd7 100644
--- a/templates/drop1.html
+++ b/templates/drop1.html
@@ -3,7 +3,7 @@
src="{{url_for('static', filename='images/img-knee.png')}}"
class="img-part"
/>
- <p class="measure load1" id="load1">{{ load1 }}</p>
+ <p class="measure load1" id="load1">NaN</p>
<form action='{{ url_for("sendData")}}' class="enter-angle" method="POST">
<label for="rot">Input</label>
diff --git a/templates/drop2.html b/templates/drop2.html
index a04cf80..bf2f9f3 100644
--- a/templates/drop2.html
+++ b/templates/drop2.html
@@ -3,7 +3,7 @@
src="{{url_for('static', filename='images/img-knee.png')}}"
class="img-part"
/>
- <p class="measure load2" id="load2">{{ load2 }}</p>
+ <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" />
diff --git a/templates/drop3.html b/templates/drop3.html
index 7b6ebcb..eba5695 100644
--- a/templates/drop3.html
+++ b/templates/drop3.html
@@ -3,7 +3,7 @@
src="{{url_for('static', filename='images/img-knee.png')}}"
class="img-part"
/>
- <p class="measure load3" id="load3">{{ load3 }}</p>
+ <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" />