Custom dashboard with Flask

In the previous article you learned how to setup a Flask dashboard. That's great and all, but how do you get your own data in there?

I'll show you how to change the dashboard data, so that you can use the dashboard as user interface for your Python app.

the template

Flask has app logic and templates. Templates are html files with the jinja template langue. Templates are stored in the directory /templates.

The top template is stored in /templates/includes/top-stats.html

Change into this:

    <div class="col">
        <h5 class="card-title text-uppercase text-muted mb-0">CPU</h5>
             <span id="stats_traffic" class="h2 font-weight-bold mb-0">{{ cpu }}</span>
    </div>

where {{ and }} is used to show the variable output
(see template language tutorial).

the view

Then open views.py
Scroll down to where it says:

    # App main route + generic routing                                                                     
    @app.route('/', defaults={'path': 'index.html'})
    @app.route('/<path>')
    def index(path):

Then change the lines:

    return render_template('layouts/default.html',
                                content=render_template( 'pages/'+path ) )

Into

    return render_template('layouts/default.html',
                                content=render_template( 'pages/'+path, cpu=99) )

Now restart your local webserver. Open the index url and you'll see your variable in the dashboard:

That's it. The principle works for all templates and pages. You can pass any data, from database, url request or more.

Related links:

• Python Flask module
• Create apps with Flask course
• Flask hello world tutorial