4

I have a Raspberry Pi with an I2C temperature sensor.

Python code:

import board
import adafruit_mlx90614
import time

i2c = board.I2C()
mlx = adafruit_mlx90614.MLX90614(i2c)
while True:
    print("Object Temp: ", mlx.object_temperature)

OUTPUT:

Object Temp:  21.89
Object Temp:  22.73
Object Temp:  27.31

It's working fine. But how can I make the output shown on the local webserver? REALTIME, no page refreshing? Just like a text. Nothing fancy.

Thanks

1
  • 1
    This is a complex task. You will need 1) Python Webserver (Django/Flask) for API call that returns temperature value, 2) Javascript code that constantly makes the API call and updates the text of <div> tag, 3) Html code with a single <div> tag whose text will be updated by javascript. This is an interesting & totally doable thing, but it will take 'little' more effort than just printing out in the terminal! Commented Apr 26, 2021 at 2:49

1 Answer 1

4

We will first need to set up a python web server, I chose to use Flask here. Second, we need to create an HTML file with a script that will update the data every few seconds (I chose 5 seconds here). So just make a new file called index.html in a new directory called /templates. Then just add the following html in the index.html file.

PS: You can cahnge that 5000 value in the setInterval function in the script, just make sure you count by the thousands, like 3 seconds would be 3000.

Python Code:

import board
import adafruit_mlx90614
import time

i2c = board.I2C()
mlx = adafruit_mlx90614.MLX90614(i2c)

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/temp')
def getTemp():
    return str(mlx.object_temperature)

@app.route('/')
def hello_world():
    return render_template("index.html")

if __name__ == '__main__':
    app.run(debug=True)

HTML Code:

<html>
<head>
</head>
<body>
<p id="temp">Object Temp: 0</p>
<script>
const Http = new XMLHttpRequest();
const url='http://localhost:5000/temp';

function checkTemp(){
   Http.open("GET", url);
   Http.send();
  Http.onreadystatechange = (e) => {
    document.querySelector("#temp").innerHTML = "Object Temp: " + Http.responseText;
  }
}

setInterval(checkTemp, 5000);
</script>
</body>
</html>
Sign up to request clarification or add additional context in comments.

7 Comments

perfect, that's working, just needed to change 'return str(mlx.object_temperature)' to string as it doesn't work with float, which's fine, but unfortunately, it's not refreshing itself at all
Now? I edited the setInterval function, i switched the parameters around, my javascript is a bit rusty thesse days but this should work now after i edited it
Unfortunately, still not refreshing
Could you try visit localhost:5000/temp ? Does it show the temperature when you refresh it? The code seems to work on my machine after I copied the new edited version, are you absolute sure that its this "setInterval(checkTemp, 5000);" and not "setInterval(5000, checkTemp);" in your code?
Yes, when I manually refresh the page, it's showing me new values each time. But need to do that manually. Tried both "checkTemp" versions.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.