I am trying to make an Intranet of Things (IoT) page. I am using Flask for the python backend. I am trying to update the state of my light in real time. I believe the route to go is the AJAX/XMLHttpRequest on the front end. I am struggling to figure out how to send the JSON to the front end from the back end. Every example online seems to be a POST request instead of Get.
I believe I have the object created correctly as well as open and sending it correctly. I think my error is on the python side and not doing request right. I tried copying this example https://gist.github.com/KentaYamada/2eed4af1f6b2adac5cc7c9063acf8720. All the other stack overflow examples seem to do different methods like return or add an if statement for the return. I am not sure example how to setup to return the 'get' argument in request.args.get[]. The suggested potential duplicates only show one end, are in express js with the $ syntax which I'm not familiar with, or something similar
I am currently getting 500 errors. Below is my code.
HTML:
<html> <head>
<meta name = "Viewport" context = "width=device-width. initial-scale=1.0">
<title>Chang's IoT Controls</title>
<link href="{{url_for('static',filename='Styles/Controls.css')}}" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>Controls</h1>
<p> Controls to control Chang's IoT Hub</p>
<figure class="item">
<img src="{{light}}" id="light" onclick="Power(this)" />
<figcaption id = light1 class="caption">Light</figcaption>
</figure>
<figure class="item">
<img src="{{url_for('static',filename='Images/OffLight.jpg')}}" id="temp" onclick="Power(this)" />
<figcaption class="Temperature" id="state" <span style="border:2px solid black">Here</span></figcaption>
<button type = "button" id="toggle" onclick ="Power(this)" > Change Lights </button>
</figure>
<figure class="item">
<img src="{{temp}}" id="temp" onclick="Power(this)" />
<figcaption id = temperature class="caption">{{degree}}</figcaption>
</figure>
<script>
document.getElementById("state").innerHTML = "reached";
const xhttp = new XMLHttpRequest();
xhttp.onload = function () {
const xmlDoc = JSON.parse(this.responseText);
const status = xmlDoc.Status;
document.getElementById("state").innerHTML = status;
if(status == "On")
{
document.getElementById("temp").src = "{{url_for('static',filename='Images/OnLight.jpg')}}";
}
if(status == "Off")
{
document.getElementById("temp").src = "{{url_for('static',filename='Images/OffLight.jpg')}}";
}
}
xhttp.open("GET",'/get_json');
xhttp.send();
console.log(xhttp.response);
</script>
<p>
<a href="/">Homepage</a>
</p>
</body>
</html>
Python:
from flask import Flask, redirect, url_for, render_template, request
app = Flask(__name__)
@app.route("/", methods=["POST", "GET"])
def home():
imgname = url_for('static', filename='Images/OnLight.jpg')
thermo = url_for('static', filename='Images/Thermometer.png')
heat = 50
# if request.method == "GET":
# file = request.form(url_for('static',filename='test.json'))
# return file
return render_template("Controls.html", light=imgname, temp=thermo, degree=heat)
@app.route('/get_json')
def get_json():
return jsonify(Status= "On")
if __name__=="__main__":
app.run(host="0.0.0.0", port=80)
JSON:
{
"Light":
[{"Status": "On"}]
}
I tried looking at examples including git repos like https://gist.github.com/KentaYamada/2eed4af1f6b2adac5cc7c9063acf8720 as well as stack overflow pages like Getting data from xhr request using python and how to properly get data from javascript to my python flask backend using XMLHttpRequest? as well as looked at the APIs
