How to pass a variable from Python back to HTML and display it

Question

I am trying to control a motor using PWM, using Flask and Python on a Raspberry Pi. I have tried the solution in How to display a variable in HTML and it doesn't work for me.

How do I return the value back from the python, and how can I display it in the html. The Html is using a grid to display the options that I can select in the python.

I have tried a few things, possibly the value is being returned, but I haven't been able to display it.

A python segment is here:

app.route('/up_15/')

def up_15():

    global PWM_value

    PWM_value = PWM_value + PWM_increment
    duty_cycle_percentage = PWM_value * 100 / ms_per_cycle
    print("Duty Cycle[F]: " + str(duty_cycle_percentage))
    pwm.start(duty_cycle_percentage)
    time.sleep(.5) 
    pwm.ChangeDutyCycle(0)
    return (render_template('index.html'), PWM_value)

and the HTML that passes the value and gets the return is here.

Setup: css

.grid-container {
  display: grid;
  grid-template-columns: 350px 350px 350px;
  background-color: #ffffff;
  padding: 10px;
  grid-column-gap: 40px;
  grid-row-gap: 30px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 3px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 80px;
  text-align: center;
}

HTML:

<div class="grid-item">

    <a href="/up_15/" data-toggle="tooltip" title="Forward" class="btn btn-success">UP +15%</a>
</div>
<div class="grid-item"></div>     / display PWM_Value here
<div class="grid-item"></div>
<div class="grid-item">
    <a href="/down_15/" data-toggle="tooltip" title="Forward" class="btn btn-success">Down -15%</a>
</div>

Ideally I would like the value of PWM_value displayed in the grid as marked above

Daniel Roseman · Accepted Answer · 2019-08-17 09:15:18Z

1

This is a question about Flask, not HTML.

You should pass the value into your render_template call:

return render_template('index.html', PWM_value=PWM_value)

and use Jinja2 syntax in the template to display it:

<div class="grid-item">{{ PWM_value }}</div>

answered Aug 17, 2019 at 9:15

Daniel Roseman

602k68 gold badges910 silver badges923 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Peter Merchant Over a year ago

Thank you Daniel, this works. I guess that part of my problem was not knowing which aspect of the system I needed to ask about. Problem solved.

Collectives™ on Stack Overflow

How to pass a variable from Python back to HTML and display it

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related