periodically updating a value in flask with Backgroundscheduler

  apscheduler, flask, python, windows

I am working in flask through windows, and I am also using BackgroundScheduler. What I intend to do is to start the backgroundscheduler by clicking a button, afterwards, I would like to see a value increasing according to the time interval that I am specifying. The problem that I am currently having is that I need to press the start button multiple times to see the updated value.

I have the following code:

My simplified flask app:

from flask import Flask, Response, render_template
from flask_wtf import FlaskForm
from flask_bootstrap import Bootstrap
from apscheduler.schedulers.background import BackgroundScheduler

app = Flask(__name__)
# Starting my value in 0
some_value = 0

# This function only increases the variable by 1
def interval_task():
    global some_value
    some_value += 1
    
bootstrap = Bootstrap(app)

# A simplified route with two buttons
@app.route('/page1', methods = ['GET','POST'])
def click_buttons():
    
    img_pause = '/static/img/bootstrap_icons/pause-circle.svg'
    img_working = '/static/img/animated_captura.gif'
    sched = BackgroundScheduler(daemon = True)
    sched.add_job(func = interval_task, trigger = 'interval', id = 'fetch_data_cont', seconds = 5)
    
    if request.form.get('startbtn') == 'startbtn':
    
        sched.start()
        
        # This is were I have problems. If I return the render_template, flask updates the form, but only
        # briefly, I need to keep on pressing the start button to see the updated value.

        return render_template('page1.html', img_source = img_working, some_value = some_value)
        
    if request.form.get('stopbtn') == 'stopbtn':
        
        sched.pause_job('fetch_data_cont')
        return render_template('page1.html', img_source = img_pause)  
    
    else:
        
        sched.pause_job('fetch_data_cont')
        return render_template('page1.html', img_source = img_pause)  

if __name__ == '__main__':
    import webbrowser
    webbrowser.open("http://127.0.0.1:5000/")
    #app.run(debug = True)
    app.run()

and in my html:

<!DOCTYPE html>
    
{% extends "base.html" %}

{% block leftsidebar %}
        
    <form  method="POST">
        <div class="bs-component">
            <div class="card border-dark mb-3" style="max-width: 20rem;">
                <div class="card-header">some fancy title here</div>
                <div class="card-body">
                    <input type="submit" class="btn btn-primary" name="startbtn" value="startbtn">
                    <img src="{{ img_source }}" style="width:80px;height:40px;" onerror="this.style.display='none'">
                    <hr>
                    <input type="submit" class="btn btn-primary" name="stopbtn" value="stopbtn">
                </div>
            </div>  
        </div>
        
        <div class="bs-component">
            <div class="card border-dark mb-3" style="max-width: 20rem;">
                <div class="card-header">Output</div>
                <div class="card-body">
                    
                    <p class="card-text">
                        rms: {{ some_value }}
                    </p>
                        
                </div>
            </div>
        </div>  
        
        
    </form>

{% endblock %}


{% block center %}

    <h2>some other fancy title for the page1</h2>
    <p><i>Some nice info.</i></p>
    <div class="bs-component">
        <div style = "background-image: href="{{ url_for('static', filename='equipo_1.png') }}";"></div>
    </div>

{% endblock %}

I understand that flask works this way; you press a button, it renders something new in the html, but how do I get the multiple changing output by pressing my button only once?

Perhaps my problem has an easy solution, but so far (still kind of a newb to Flask) I haven’t found it. Any assistance will be appreciated.

Source: Windows Questions

LEAVE A COMMENT