本文首发于个人博客https://kezunlin.me/post/1e37a6/,欢迎阅读最新内容!

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

Guide

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">

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">

filter

{% set result_count = result_list | length %}

{{ index | string ) }}

filter: length, string

debug html

url_for with params

python code

@app.route('/index')
@app.route('/')
def index():
return 'you are in the index page' @app.route('/questions/<int:question_id>'):
#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

index.html

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

main.py

#===================================================
outputFrame = None
lock = threading.Lock() # initialize a flask object
app = Flask(__name__) @app.route("/")
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:
continue # encode the frame in JPEG format
(flag, encodedImage) = cv2.imencode(".jpg", outputFrame) # ensure the frame was successfully encoded
if not flag:
continue # 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') @app.route("/video_feed")
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":"0.0.0.0","port":8888}
app.run(host=args["ip"], port=args["port"], debug=True,
threaded=True, use_reloader=False)

Example

index

# for web
from flask import Flask,Response,render_template web_params = {
"query_key":"",
"query_segimg_filepath":"",
"query_segmask_filepath":"",
"query_img_height":0,
"query_img_width":0,
"result_list": []
} # initialize a flask object
app = Flask(__name__) @app.route("/")
def index():
global web_params
return render_template("search.html",**web_params) # start the flask app
args = {"ip":"0.0.0.0","port":8888}
app.run(host=args["ip"], port=args["port"], debug=True,threaded=True, use_reloader=False)

index.html

<html>
<head>
<title>Query {{query_key}}</title>
</head>
<body>
<h1>Query Image {{ query_segimg_filepath }} </h1> {#
<img src="{{ url_for('static', filename='images/1.PNG') }}"
height="30"
width="30">
#} <img src="{{ url_for('static', filename = query_segimg_filepath) }}"
height="{{query_img_height}}"
width="{{query_img_width}}">
{#
<img src="{{ url_for('static', filename = query_segmask_filepath) }}"
height="{{query_img_height}}"
width="{{query_img_width}}">
#} {% 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 %} </body>
</html>

Reference

History

  • 20191005: created.

Copyright

flask的模板引擎jinja入门教程 包含一个通过网络实时传输Video视频流的示例的更多相关文章

  1. day94:flask:Jinjia2模板引擎&flask中的CSRF攻击&Flask-SQLAlchemy的创建模型类和基本的增删改查

    目录 1.Jinjia2模板引擎 1.Jinjia2加载模板并传递数据到模板中 2.Jinjia2的模板语句 3.模板中特有的变量和函数 4.模板中内置的过滤器 5.自定义过滤器 6.模板继承 2.在 ...

  2. Python Flask Jinja2模板引擎

    模板 简介 模板是一个包含响应文本的文件,其中包含用占位变量表示的动态部分,其具体值只在请 求的上下文中才能知道. 渲染 使用真实值替换变量,再返回最终得到的响应字符串,这一过程 称为渲染.为了渲染模 ...

  3. Springboot与Thymeleaf模板引擎整合基础教程(附源码)

    前言 由于在开发My Blog项目时使用了大量的技术整合,针对于部分框架的使用和整合的流程没有做详细的介绍和记录,导致有些朋友用起来有些吃力,因此打算在接下来的时间里做一些基础整合的介绍,当然,可能也 ...

  4. Springboot系列:Springboot与Thymeleaf模板引擎整合基础教程(附源码)

    前言 由于在开发My Blog项目时使用了大量的技术整合,针对于部分框架的使用和整合的流程没有做详细的介绍和记录,导致有些朋友用起来有些吃力,因此打算在接下来的时间里做一些基础整合的介绍,当然,可能也 ...

  5. Express入门教程:一个简单的博客

    来自:  http://ourjs.com/detail/56b2a6f088feaf2d031d2468 Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, ...

  6. 无废话WCF入门教程六[一个简单的Demo]

    一.前言 前面的几个章节介绍了很多理论基础,如:什么是WCF.WCF中的A.B.C.WCF的传输模式.本文从零开始和大家一起写一个小的WCF应用程序Demo. 大多框架的学习都是从增.删.改.查开始来 ...

  7. 【转】WCF入门教程六[一个简单的Demo]

    一.前言 前面的几个章节介绍了很多理论基础,如:什么是WCF.WCF中的A.B.C.WCF的传输模式.本文从零开始和大家一起写一个小的WCF应用程序Demo. 大多框架的学习都是从增.删.改.查开始来 ...

  8. (转)PHP模板smarty简单入门教程

    转之--http://blog.163.com/zf_2011@126/blog/static/166861361201062595057962/ 如何在smarty中开始我们程序设计.PHP代码:- ...

  9. 模板引擎ejs入门学习

    1:利用 NPM 安装 EJS 很简单 npm install ejs 2:安装完成肯定就是使用了 var template = ejs.compile(str, options); template ...

随机推荐

  1. Spring Ioc Configration - Annotation

    1.配置类注解@Configuration. 2.Bean注解 @Bean. 3.导入其他配置类@Import. 4.回调函数 @Bean(initMethod = "init", ...

  2. IIS配置svc(IIS8中添加WCF支持几种方法小结)

    方法一 最近在做Silverlight,Windows Phone应用移植到Windows 8平台,在IIS8中测试一些传统WCF服务应用,发现IIS8不支持WCF服务svc请求,后来发现IIS8缺少 ...

  3. JS正则表达式语法(含ES6)(表格简要总结)

    文章目录 JS正则表达式 1. JS中正则表达式定义 2. 直接量字符 3. 字符类 4. 重复字符 5. 选择,分组和引用 6. 指定匹配位置 7. 修饰符 8. String 方法 9. RegE ...

  4. IDC:助力转型、深入变革:中国云专业服务市场持续升温

    来源:IDC 北京,2019 年 10 月 24 日——随着云计算在中国市场更深入和广泛的应用,与云相关的专业服务(咨询.迁移.开发与建设服务)需求旺盛.IDC 首次发布的<2019 年上半年云 ...

  5. .net(C#数据库访问) Mysql,Sql server,Sqlite,Access四种数据库的连接方式

    便签记录Mysql,Sql server,Sqlite,Access四种数据库的简单连接方式 //using MySql.Data.MySqlClient; #region 执行简单SQL语句,使用M ...

  6. Python爬虫实战:批量下载网站图片

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: GitPython PS:如有需要Python学习资料的小伙伴可以 ...

  7. 《Hands-On System Programming with Go》之目录操作

    开一个新书<Hands-On System Programming with Go>,系统的了解一下, 这方面的东东,以前用C语言实现过, 现在用GO,重新来!! package main ...

  8. ES6 学习之 let

    关于闭包: <html> <body> <div> <div> <button >aaa</button> <button ...

  9. 【数据库】SQLite3的安装

    版权声明:本文为博主原创文章,转载请注明出处. https://www.cnblogs.com/YaoYing/ SQLite3的安装 离线安装 SQLite3安装包 下载SQLite3安装包,将文件 ...

  10. IT兄弟连 HTML5教程 CSS3属性特效 小结及习题

    本章小结 CSS3新增了许多属性,CSS3样式新增了一种颜色模式rgba用来制作透明色,比CSS的颜色模式多了一个透明度的设置.文字的CSS3特效有文字阴影.文字描边.文字排版和文字省略等.另外,CS ...