354浏览
查看: 354|回复: 2

[教程] 基于flask框架的树莓派4B视频操控小车3~flask修饰器

[复制链接]
本帖最后由 gray6666 于 2021-4-16 08:48 编辑

一、知识储备
1.什么是Flask?(树莓派搭建flask框架服务器)

Flask是由python实现的一个web微框架,让我们可以使用Python语言快速实现一个网站或Web服务。较其他同类型框架更为灵活、轻便、安全且容易上手。它可以很好地结合MVC模式进行开发,开发人员分工合作,小型团队在短时间内就可以完成功能丰富的中小型网站或Web服务的实现。另外,Flask还有很强的定制性,用户可以根据自己的需求来添加相应的功能,在保持核心功能简单的同时实现功能的丰富与扩展,其强大的插件库可以让用户实现个性化的网站定制,开发出功能强大的网站。

安装命令 pip install flask

Flask小案例

新建py文件,输入7句样例代码

from flask import Flask

app = Flask(__name__)

@app.route('/')

def hello_world():   

        return 'Hello World!'

if __name__ == '__main__':   

        app.run()
ThuApril-202104157750..png
ThuApril-202104153543..png

运行代码(ctrl+C是退出不要按),登录127.0.0.1:5000就可看到网页显示Hello World!

ThuApril-202104151382..png

基本框架可以自建,也可以用pycharm魔板生成
app_car.py 启动树莓派服务器
static文件夹存放CSS文件
templates文件夹存放index.html文件

ThuApril-202104159136..png


2.HTML(超文本标记语言) (编写前端小车操控界面)

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。

核心语句
<link rel="stylesheet" href='/static/style.css' />为调用static中的CSS设置页面文件
img src="{{ url_for('video_feed') }}" width="50%">指定视频流并用50%比例显示
网页用了from控件通过flask框架的post方法通信;也可以用get方法

ThuApril-202104154469..png

html代码我不是很熟悉,手工敲的代码,没有排版稍显凌乱

3.CSS (层叠样式表)(本部分为提高篇,是优化主页的常用技术)
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
用来实现网页特效
水平有限,我测试了背景颜色和文字颜色
ThuApril-202104157739..png

整体效果
ThuApril-202104151183..png

二、Fask修饰器调用GPIO

  1. <font size="4">from flask import Flask,request,render_template,Response   # 导入flask框架所需要的包,模块
  2. import RPi.GPIO as GPIO    #导入RPi.GPIO包
  3. import time                #计时器
  4. #设置GPIO模式
  5. GPIO.setmode(GPIO.BOARD)
  6. #设置in1到in4接口
  7. IN1 = 11
  8. IN2 = 13
  9. IN3 = 15
  10. IN4 = 16
  11. GPIO.setup(IN1,GPIO.OUT)
  12. GPIO.setup(IN2,GPIO.OUT)
  13. GPIO.setup(IN3,GPIO.OUT)
  14. GPIO.setup(IN4,GPIO.OUT)
  15. # 固定写法
  16. app = Flask(__name__)
  17. ############################
  18. # 进入的首个网页
  19. @app.route('/',methods=['GET','POST'])
  20. def main():
  21.     return render_template("index.html")   # 返回网页
  22. # 点击打开
  23. @app.route('/front',methods=['POST'])
  24. def front():
  25.     GPIO.output(IN1,GPIO.HIGH)
  26.     GPIO.output(IN2,GPIO.LOW)
  27.     GPIO.output(IN3,GPIO.HIGH)
  28.     GPIO.output(IN4,GPIO.LOW)
  29.     time.sleep(0.5)            
  30.     return render_template("index.html")  #返回一开始的页面
  31. # 点击后退
  32. @app.route("/back",methods=['POST'])
  33. def back():
  34.     GPIO.output(IN1,GPIO.LOW)
  35.     GPIO.output(IN2,GPIO.HIGH)
  36.     GPIO.output(IN3,GPIO.LOW)
  37.     GPIO.output(IN4,GPIO.HIGH)
  38.     return render_template("index.html")  # #返回一开始的页面
  39. # 点击停止
  40. @app.route("/stop",methods=['POST'])
  41. def stop():
  42.      GPIO.output(IN1,GPIO.LOW)
  43.      GPIO.output(IN2,GPIO.LOW)
  44.      GPIO.output(IN3,GPIO.LOW)
  45.      GPIO.output(IN4,GPIO.LOW)
  46.     return render_template("index.html")  # #返回一开始的页面
  47. if __name__=="__main__":
  48.     app.run(host='0.0.0.0',port=5000)   
  49.    
  50. GPIO.clearnup()</font>
复制代码

运行代码,小车,前进,后退,停止按钮可以控制小车;同样方法试试完善左右转弯功能。(网页不显示视频,视频文件将专贴讲解)

类似代码也可以写成函数在修饰器中套用函数

GPIO.setup(IN1,GPIO.OUT)
GPIO.setup(IN2,GPIO.OUT)
GPIO.setup(IN3,GPIO.OUT)
GPIO.setup(IN4,GPIO.OUT)

可以写成
def init():
    GPIO.setup(IN1,GPIO.OUT)
    GPIO.setup(IN2,GPIO.OUT)
    GPIO.setup(IN3,GPIO.OUT)
    GPIO.setup(IN4,GPIO.OUT)

#########################################
GPIO.output(IN1,GPIO.HIGH)
GPIO.output(IN2,GPIO.LOW)
GPIO.output(IN3,GPIO.HIGH)
GPIO.output(IN4,GPIO.LOW)

可以写成
def front():
    GPIO.output(IN1,GPIO.HIGH)
    GPIO.output(IN2,GPIO.LOW)
    GPIO.output(IN3,GPIO.HIGH)
    GPIO.output(IN4,GPIO.LOW)

参考网站
https://projects.raspberrypi.org/en/projects/python-web-server-with-flask/1



pATAq  版主

发表于 2021-5-5 23:20:22

我之前也搞过类似的
回复

使用道具 举报

Caner  见习技师

发表于 2021-5-25 10:16:02

如果我用VUE写好页面,webpack本身就带服务,python这个服务基本就多余,重点在视频怎么输出,get了
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

为本项目制作心愿单
购买心愿单
心愿单 编辑
[[wsData.name]]

硬件清单

  • [[d.name]]
btnicon
我也要做!
点击进入购买页面
上海智位机器人股份有限公司 沪ICP备09038501号-4

© 2013-2021 Comsenz Inc. Powered by Discuz! X3.4 Licensed

mail