1

I would like to ask how to implement Python run time and graphics on website as seen in this Udacity lesson on PD controller?

If run locally, matplotlib will generate a popup window containing the graphics. How is it capture and shown on the website? The text output is shown in the terminal. On Udacity, all of that are shown in a single page. How are they captured and displayed as such? What if you want to display live animation generated by things like turtle graphics?

And how do you provide a code input area with the code presentation as shown to the user? And how do you provide features like LaTex on your page like math.stackexchange.com?

Are there certain frameworks, API and languages you have to use, or is it independent of all that?

img

Improve this question

2 Answers 2

Reset to default
1

You need to use a python backend framework, I use Django or Flask and run the mathplotlib on my backend and display it in the image formation using the HTML img tag Here is the example in the flask

app.py

from flask import Flask, render_template
import matplotlib.pyplot as plt

plt.plot([1, 2, 3, 4, 5])
plt.ylabel('some numbers')
plt.savefig('static/graph.png')
app = Flask(__name__)


@app.route('/')
def home():
    return render_template("index.html")


if __name__ == "__main__":
    app.run(debug=True)

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>MathPlotLib</title>
    </head>
    <body>
        <div><img alt="Sample Work" src="{{ url_for('static', filename='graph.png') }}">
        </div>
    </body>
</html>

File System

Main Folder
----templates
    ----index.html
----static
    ----graph.png
----app.py
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

What about live animation like turtle graphics?
1

Savefig

So the answer to your question would be instead of plt.show() you do a plt.savefig() as a temporary file in the backend and later add it to the website. There are saving formats like svg that will give you all the benefits of resizing and rendering on the front end side too.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.