For a project I'm running a raspberry pi Pico wh based webserver that should get the inputs of the temperature sensor and display it on the website. I am however not very informed about javascript and html. Because my code already looks bad I've removed the css elements. The reason it has to be like this is because the main program needs to run in micropython on my pi.
Note: It is however important the sensor and the raspberry keep being the only physical components.
I'm hoping someone can give a solution or guidance, maybe even a diffrent aproach.
Here is my code:
#import libraries
from machine import Pin, I2C
import time
import mcp9808
import ssd1306
import network
import socket
#initialize temp sensor
i2c = I2C(1,scl=Pin(3), sda=Pin(2), freq=10000)
mcp = mcp9808.MCP9808(i2c)
#initialize display
i2c = I2C(0, sda=Pin(20), scl=Pin(21))
display = ssd1306.SSD1306_I2C(128, 64, i2c)
#initialize onboard led
led = machine.Pin("LED", machine.Pin.OUT)
led.on()
ssid = 'SSID'
password = 'WIFI_PASSWORD'
wlan = network.WLAN(network.STA_IF)
wlan.active(True)
wlan.connect(ssid, password)
while True:
# get the temperature (float)
SensTemp = mcp.get_temp()
SensTemp = "{:.2f}".format(SensTemp)
#display.poweron()
display.fill(0)
display.text(SensTemp, 0, 0, 1)
display.text("C", 42, 0, 1)
display.show()
html = """<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Temperature Display</title>
</head>
<body>
<h1>Current Temperature:</h1>
<p id="temperature"></p>
<script>
// Simulated temperature value
var temperatureValue = {SensTemp}; // You can replace this with actual temperature data
// Update the temperature display
function updateTemperature() {
var temperatureElement = document.getElementById("temperature");
temperatureElement.textContent = temperatureValue + "°C";
}
// Call the function to initially display the temperature
updateTemperature();
</script>
</body>
</html>
"""
# Wait for connect or fail
max_wait = 10
while max_wait > 0:
if wlan.status() < 0 or wlan.status() >= 3:
break
max_wait -= 1
print('waiting for connection...')
time.sleep(1)
# Handle connection error
if wlan.status() != 3:
raise RuntimeError('network connection failed')
else:
print('connected')
status = wlan.ifconfig()
print( 'ip = ' + status[0] )
# Open socket
addr = socket.getaddrinfo('0.0.0.0', 80)[0][-1]
s = socket.socket()
s.bind(addr)
s.listen(1)
print('listening on', addr)
# Listen for connections
while True:
try:
cl, addr = s.accept()
print('client connected from', addr)
cl_file = cl.makefile('rwb', 0)
while True:
line = cl_file.readline()
if not line or line == b'\r\n':
break
response = html
cl.send('HTTP/1.0 200 OK\r\nContent-type: text/html\r\n\r\n')
cl.send(response)
cl.close()
except OSError as e:
cl.close()
print('connection closed')
Ive tried making the entire html block a formatted string(python), so I can adjust the value but it doesnt work.
Ive done a few days of research but I'm not much further.
Let's distill the relevant parts of this question.
You have a script that functionally does the following.
That is, you acquire a
sensor_tempfrom somewhere, stick it into a string, and later serve (or here, print) that string. The HTML, javascript, and raspberry pi are all red herrings — this is really a question about string formatting.The easiest thing to do is to preface the string by
fand usefstrings.Or you could use old format strings, e.g.
Or you could manually create the string.
If this is a broad type of project that you're going to do, it might be worth looking into using the jinja templating engine. This is a small library that plays very well with python.