Visual Studio Code - How can I pass a dynamically changing variable from Python to HTML and get the browser to rerender the new data without reloading the whole web-page?

LewisDonna
October 2, 2022
170 views
0 votes
2 Answers

I would like to achieve the following:

pass a variable from my Python script to an HTML page
get the browser to display the updated information
Do not rerender, or reload the whole HTML page as this would take too long (new data will be transmitted from the Python script to the HTML page every 250 ms or so.)
data is generated live by the Python script and so the solution have to take this into account

After researching the whole day and watching numerous tutorials, I understood that Flask or Django could be used to achieve this via a concept called "templating". Unfortunately, I am complete beginner and I got lost in the details without seeing the "big picture" of what is need to be done…

So I ended up here, hoping someone can clear up my understanding about the topic without assuming any previous knowledge…

So I have a super simple HTML file as below:

<!DOCTYPE html>
<html>
<head>
    <title>Simple Test</title>
</head>
<body>
    <h1>Changing Number:</h1>
    <h1 id="number">0</h1>

And I also have a Python script:

import random
import time

for i in range(10):
    myvar = random.randint(1, 10)
    time.sleep(1)

The goal is to pass myvar to the HTML element with the id, "number" and have the browser display the new value without reloading the page.

Just to be clear, I do not expect a comprehensive in-depth tutorial as I know that it would take too long to create, (if possible at all…), but instead I would like to get the "birds eye view", or the "big picture" on what I need to do.

Here is my current understanding (which is most likely incorrect):

I have to have a Python file containing the script that calculates the
value to be passed. (I use Visual Studio Code on a Windows based system to edit this file)
I have to import Flask into this Python file (if nothing better is
recommended) as this is the framework with the capacity to create
the "link" in between the python script and the HTML page

So:
Python script calculates desired value → hands the value to Flask → Flask hands the value to the HTML document → the browser renders the document

…but how does the process repeated when a new value is calculated by the Python script?

How do I instruct the browser to rerender only the desired part of the web page?

Is there a simpler way, or better framework that could do that task?

Am I looking in the right direction to solve the problem or should approach the problem from a different angle?

Tags: flask python

Answers

- AlekYo
- October 2, 2022 at 10:07 pm
- 0 votes
0
I don’t think that’s possible without using JavaScript. On a request, Django renders the HTML content and sends it back to the browser, so you have got to reload the page.

Login or Signup to reply.

- ktm5124
- February 27, 2023 at 6:43 am
- 0 votes
0
It sounds like you update the variable called "myvar" every 1 second, and that you want this change to be reflected on the web page.

How does the server inform the client of this change?

The HTTP model is based on requests and responses. The client has to make an HTTP request to the server, and the server responds with an HTTP response.

After the initial transmission (which is when you download the HTML page rendered by the Flask webapp) you have to make new HTTP requests to get updated content.

You can do this by setting a timer and using JavaScript. You can make an asynchronous request to the web server for new content.

You can also achieve the same effect in a much easier way by writing the code in JavaScript and having the JavaScript update the content on the client-side without making any additional requests.

Since the task is simple (updating a variable every 1 second) it’s a good task for JavaScript. The task that you’re doing in Python can be done in JavaScript.

To review, here are the two solutions you can use:
1. Set a timer and make asynchronous requests in JavaScript.
2. Make "myvar" a variable in your JavaScript instead of in your Python script.
Here is a code example of the second solution:
```
<!DOCTYPE html>
<html>

<head>
    <title>Simple Test</title>
</head>

<body>
    <h1>Changing Number:</h1>
    <h1 id="number"></h1>
</body>

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", (event) => {
    var intervalID = window.setInterval(updateNumber, 1000);

    function randomInt(min, max) {
        return Math.floor(Math.random() * (max-min) + min);
    }

    function updateNumber() {
        document.getElementById("number").innerHTML = randomInt(1, 10);
    }
});
</script>
</html>
```
You can open this HTML file in a web browser and see that it updates the variable every 1 second. It shows how the task is well suited to a simple JavaScript.
Login or Signup to reply.