この記事では、最初の個人的なブログ登場https://kezunlin.me/post/1e37a6/最新の内容に、ようこそ!
パイソンフラスコ神社テンプレートとリアルタイムビデオデモを使用するためのチュートリアル
ガイド
Jinja delimiters
次のようにデフォルト神社の区切り文字が設定されています。
{% ... %} for Statements
{{ ... }} for Expressions to print to the template output
{# ... #} for Comments not included in the template output
# ... ## for Line Statements
静的なurl_for(CSS +画像)
<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}}">
あなたは、デフォルトで持っている
static
静的ファイルのためのエンドポイントを。
に変換されます
<link rel="stylesheet" type="text/css" href="/static/bootstrap/bootstrap.min.css">
<img src="/static/images/1.PNG" height="1799" width="896">
静的のURL(画像のパスを渡します)
<h1>Image {{image_filename}}</h1>
<img src="{{ url_for('static', filename = image_filename) }}" height="{{query_img_height}}" width="{{query_img_width}}">
私たちが使用しdo't気づきます
filename = {{image_filename}}
image_filename
値をHTMLに渡されますimages/1.PNG
に変換されます
<h1>Image images/1.PNG </h1>
<img src="/static/images/1.PNG" height="1799" width="896">
フィルタ
{% set result_count = result_list | length %}
{{ index | string ) }}
フィルタ:長さ、文字列
デバッグHTML
paramsとなurl_for
Pythonコード
@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ページ
<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 %}
リアルタイムのビデオ
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)
例
指数
# 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>
参照
歴史
- 20191005:作成しました。
著作権
- 投稿者:kezunlin
- ポストリンク:https://kezunlin.me/post/1e37a6/
- 著作権:別途明記しない限り、このブログのすべての記事はCC BY-NC-SA 3.0の下でライセンスされています。