javascript python html dynamic micropython

How can I fix that my variable goes into the formatted string of my html code in python

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.

Solution

Let's distill the relevant parts of this question.

You have a script that functionally does the following.

sensor_temp = 10
html = """
The current temperature is {sensor_temp}.
"""
response = html
print(response)

#> The current temperature is {sensor_temp}.

That is, you acquire a sensor_temp from 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 f and use fstrings.

sensor_temp = 10
# Note the f on the following line, the only change.
html = f"""   
The current temperature is {sensor_temp}.
"""
response = html
print(response)

#> The current temperature is 10.

Or you could use old format strings, e.g.

sensor_temp = 10
# Now no f, and no labelled input in braces {} below.
html = """   
The current temperature is {}.
"""
response = html.format(sensor_temp)
print(response)

#> The current temperature is 10.

Or you could manually create the string.

sensor_temp = 10
html = "The current temperature is " + str(sensor_temp) +".\n" 
response = html
print(response)

#> The current temperature is 10.

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.