Dynamically update parts of SVG with Turbo Flask?

Question

This is my first web dev project. I have a small flask app hosted on a Raspberry Pi. I'm using turbo-flask to send updated data to the client(s) every second. I am updating parts of 3 large SVGs over the turbo steam every second.

At times it stops working after a few minutes. I see a turbo steam 500 on my server. There's no detailed error message. On other occasions, the SVG rendering stutters and skips a few beats.

I guess the stream may be crashing/stuttering because the SVGs are quite large and rendered very frequently.

This is what my code looks like

flask_app.py

def update_data():
    """ Thread Body """
    with app.app_context():
        while True:
            time.sleep(DATA_UPDATE_TIME_STEP)
            read_data()  # Periodically read data

            # Update the HTML template with new data
            with app.test_request_context():
                turbo.push(turbo.replace(render_template('first-template.html'), 'first_data'))
                turbo.push(turbo.replace(render_template('second-template.html'), 'second_data'))
                turbo.push(turbo.replace(render_template('third-template.html'), 'third_data'))

base-first.html (I have 3 base templates; one for each; they all look the same as below)

<!DOCTYPE html>
<html>
   <head>
    {{turbo()}}
   </head>
   <body>
      {% include "first-template.html" %}
   </body>
</html>

first-template.html

{% include "first.svg" %}

first.svg

<svg>
....
....
{bunch of svg code}
...
<g id = "first_data">
<text id="elapsed_secs" class="cls-27" transform="translate(100.00 100.00)"><tspan x="0" y="0">Heartbeat : {{elapsed_secs}}</tspan></text>
</g>
</svg>

Note that the identifier for turbo steam is within the SVG element.

Following are my questions —

How do I fix the 500 error/stuttering?
How do I ensure turbo-flask only reloads only a part of my SVG?
Is there a better way to do this using JS/AJAX? In that case, I still need to feed updated data to javascript over turbo-flask.

Dynamically update parts of SVG with Turbo Flask?

0 Answers0