本文首发于个人博客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

Post author: kezunlin
Post link: https://kezunlin.me/post/1e37a6/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 3.0 unless stating additionally.

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

day94:flask:Jinjia2模板引擎&flask中的CSRF攻击&Flask-SQLAlchemy的创建模型类和基本的增删改查
目录 1.Jinjia2模板引擎 1.Jinjia2加载模板并传递数据到模板中 2.Jinjia2的模板语句 3.模板中特有的变量和函数 4.模板中内置的过滤器 5.自定义过滤器 6.模板继承 2.在 ...
Python Flask Jinja2模板引擎
模板简介模板是一个包含响应文本的文件,其中包含用占位变量表示的动态部分,其具体值只在请求的上下文中才能知道. 渲染使用真实值替换变量,再返回最终得到的响应字符串,这一过程称为渲染.为了渲染模 ...
Springboot与Thymeleaf模板引擎整合基础教程(附源码)
前言由于在开发My Blog项目时使用了大量的技术整合,针对于部分框架的使用和整合的流程没有做详细的介绍和记录,导致有些朋友用起来有些吃力,因此打算在接下来的时间里做一些基础整合的介绍,当然,可能也 ...
Springboot系列：Springboot与Thymeleaf模板引擎整合基础教程(附源码)
前言由于在开发My Blog项目时使用了大量的技术整合,针对于部分框架的使用和整合的流程没有做详细的介绍和记录,导致有些朋友用起来有些吃力,因此打算在接下来的时间里做一些基础整合的介绍,当然,可能也 ...
Express入门教程：一个简单的博客
来自: http://ourjs.com/detail/56b2a6f088feaf2d031d2468 Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, ...
无废话WCF入门教程六[一个简单的Demo]
一.前言前面的几个章节介绍了很多理论基础,如:什么是WCF.WCF中的A.B.C.WCF的传输模式.本文从零开始和大家一起写一个小的WCF应用程序Demo. 大多框架的学习都是从增.删.改.查开始来 ...
【转】WCF入门教程六[一个简单的Demo]
一.前言前面的几个章节介绍了很多理论基础,如:什么是WCF.WCF中的A.B.C.WCF的传输模式.本文从零开始和大家一起写一个小的WCF应用程序Demo. 大多框架的学习都是从增.删.改.查开始来 ...
(转)PHP模板smarty简单入门教程
转之--http://blog.163.com/zf_2011@126/blog/static/166861361201062595057962/ 如何在smarty中开始我们程序设计.PHP代码:- ...
模板引擎ejs入门学习
1:利用 NPM 安装 EJS 很简单 npm install ejs 2:安装完成肯定就是使用了 var template = ejs.compile(str, options); template ...

随机推荐

5G 调制与解调
调制,就是将原始信号转换为适合在信道中传输的形式的一种过程,在无线通信中,调制一般均指载波调制,而解调则是调制的逆过程,即将原始信号从已调信号中恢复出来. 进行载波调制,主要为实现以下目标: 1)在无 ...
sql语句对int类型进行模糊查询
重点:select * from course where cast(courseId as char) like '%118%'; 首先可以将int类型转换为string类型的值再进行模糊查询,用方 ...
你不知道的JavaScript（上）this和对象原型（二）
第三章对象 1.语法两种形式定义:声明(文字)形式和构造形式 (1)文字语法大概是这样 1 var myObj = { 2 key: value 3 // ... 4 }; (2)构造形式大概是这 ...
Wonder发布v1.1正式版本，新增资产预览、脚本、AssetBundle等
更新说明本次版本重点增加了脚本组件,并且实现了类似于unity的AssetBundle,支持动态加载场景和资源. 相关链接官网 Wonder官方QQ群: 106047770 相关资料 Wonder ...
SpringMVC框架之第一篇
2.SpringMVC介绍 2.1.SpringMVC是什么 SpringMVC是Spring组织下的一个表现层框架.和Struts2一样.它是Spring框架组织下的一部分.我们可以从Spring的 ...
Sqoop 抽数报错： java.io.FileNotFoundException: File does not exist
Sqoop 抽数报错: java.io.FileNotFoundException: File does not exist 一.错误详情 2019-10-17 20:04:49,080 INFO [ ...
利用Fiddler对Jmeter的请求进行抓包
前言有时候,为了得到更详细的请求结果,我们可能需要使用Fiddler结合Jmeter来抓包分析,从而更好的辅助测试. 遇到的问题这里以一个获取学生信息的接口为例进行说明. 当我在Jmeter里按接 ...
HttpRunner学习2--用例格式和简单使用
前言 HttpRunner中,测试用例支持两种文件格式:YAML 和 JSON.两种格式的用例是完全等价的,对于相同的信息内容,使用 YAML /JSON 得到的测试结果和报告也是一致的. 本人环境: ...
antdesign的input增加自定义校验规则
rules: [ {required: true, message: '请输入姓名'}, {max: 16, message: '姓名过长'}, { validator: (rule, val, ca ...
python基础(36):pymysql模块
1. pymysql模块在使用pymysql模块前需要学习数据库MySQL:<MySQL基础>. 1.1 pymysql的下载和使用看完MySQL基础,我们都是通过MySQL自带的命令 ...

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

Guide

Jinja delimiters

url_for static(css+image)

url for static(pass image path)

filter

debug html

url_for with params

Realtime Video

index.html

main.py

Example

index

index.html

Reference

History

Copyright

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

随机推荐

热门专题

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

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