tutorial to use python flask jinja templates and a realtime video demo


Jinja delimiters

The default Jinja delimiters are configured as follows:

{% ... %} for Statements
{{ ... }} for Expressions to print to the template output
 for Comments not included in the template output
#  ... ## for Line Statements

url_for static(css+image)

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap/bootstrap.min.css') }}">

<img src="{{ url_for('static', filename='images/1.PNG') }}" height="{{query_img_height}}" width="{{query_img_width}}">

You have by default the static endpoint for static files.

will be converted to

<link rel="stylesheet" type="text/css" href="/static/bootstrap/bootstrap.min.css">
<img src="/static/images/1.PNG" height="1799" width="896">

if we place js and css files in static folder, then we can use

<script src="static/js/lib/jquery-3.4.1.min.js"></script>

to replace

 <script src="{{ url_for('static', filename = 'js/lib/jquery-3.4.1.min.js') }}"></script>

url for static(pass image path)

<h1>Image  {{image_filename}}</h1>
<img src="{{ url_for('static', filename = image_filename) }}" height="{{query_img_height}}" width="{{query_img_width}}">

notice we do’t use

filename = {{image_filename}}

image_filename will be passed to html with value images/1.PNG

will be converted to

<h1>Image  images/1.PNG </h1>
<img src="/static/images/1.PNG" height="1799" width="896">


{% set result_count = result_list | length %}

{{ index | string ) }}

filter: length, string

debug html

debug jinja2 html

url_for with params

python code

def index():
    return 'you are in the index page'

#int has been used as a filter that only integer will be passed 
# in the url otherwise it will give a 404 error

def find_question(question_id):  
    return ('you asked for question {0}'.format(question_id))

html page

<a href={{ url_for('index') }}>Index</a>
<a href = {{ url_for('find_question' ,question_id=1) }}>Question 1</a>

{% if kline_chart %}
   <div class="chart">{{ kline_chart | safe }}</div>
{% endif %}

Realtime Video


<img src="{{ url_for('video_feed') }}" height="480" width="640">


outputFrame = None
lock = threading.Lock()

# initialize a flask object
app = Flask(__name__)

def index():
    # return the rendered template
    return render_template("index.html")

def generate():
        # grab global references to the output frame and lock variables
    global outputFrame, lock

    # loop over frames from the output stream
    while True:
        # wait until the lock is acquired
        with lock:
            # check if the output frame is available, otherwise skip
            # the iteration of the loop
            if outputFrame is None:

            # encode the frame in JPEG format
            (flag, encodedImage) = cv2.imencode(".jpg", outputFrame)

            # ensure the frame was successfully encoded
            if not flag:

        # yield the output frame in the byte format
        yield(b'--frame\r\n' b'Content-Type: image/jpeg\r\n\r\n' +
            bytearray(encodedImage) + b'\r\n')

def video_feed():
    # return the response generated along with the specific media
    # type (mime type)
    return Response(generate(),
        mimetype = "multipart/x-mixed-replace; boundary=frame")

# start the flask app
args = {"ip":"","port":8888}
app.run(host=args["ip"], port=args["port"], debug=True,
        threaded=True, use_reloader=False)



# for web
from flask import Flask,Response,render_template

web_params = {
    "result_list": []

# initialize a flask object
app = Flask(__name__)

_dir = os.path.dirname(os.path.abspath(__file__))
app.template_folder = os.path.join(_dir, "templates")
app.static_folder = os.path.join(_dir, "static")

def index():
    global web_params
    return render_template("search.html",**web_params)

# start the flask app
args = {"ip":"","port":8888}
app.run(host=args["ip"], port=args["port"], debug=True,threaded=True, use_reloader=False)


    <title>Query {{query_key}}</title>
    <h1>Query Image {{ query_segimg_filepath }} </h1>

    <img src="{{ url_for('static', filename = query_segimg_filepath) }}" 

    {% set result_count = result_list | length %}
    <h1>Search Results #{{result_count}}</h1>

    {% for i in range(0,result_count) %}
      {% set item = result_list[i] %}
      {% set segimg_filepath = item["segimg_filepath"] %}
      {% set segmask_filepath = item["segmask_filepath"] %}

      {% set img_height = item["height"] %}
      {% set img_width = item["width"] %}

      <h2>Top # {{i}}  {{ segimg_filepath }}</h2>

      <img src="{{ url_for('static', filename = segimg_filepath) }}" height="{{img_height}}" width="{{img_width}}">
        <img src="{{ url_for('static', filename = segmask_filepath) }}" height="{{img_height}}" width="{{img_width}}">
    {% endfor %}




  • 20191005: created.

Author: kezunlin
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source kezunlin !