使用Python控制树莓派的GPIO口的高低电平状态以控制LED的亮与灭,使用Flask搭建web服务，部署远程控制网页,网页开关绑定ajax请求事件，触发Flask后端更改树莓派GPIO高低电平的事件，实现远程控制LED

成果展示

材料准备

  1. 树莓派4B
  2. LED一个
  3. 导线若干
  4. 排线+T型转接板（非必须）

实现原理

  1. 使用Python控制树莓派的GPIO口的高低电平状态以控制LED的亮与灭
  2. 使用Flask搭建web服务，部署远程控制网页
  3. 网页开关绑定ajax请求事件，触发Flask后端更改树莓派GPIO高低电平的事件，实现远程控制LED

前端页面编写

效果：

这里先贴出前端HTML模板，其他静态资源文件会在后面打包下载：

<!DOCTYPE html>
<html lang="zh-CN" >
<head>
<meta charset="UTF-8">
<title>树莓派LED控制</title>
<link rel="stylesheet" href="../static/css/style.css">
<script src="../static/js/jquery.min.js"></script>
</head>
<body>
<label class="switch">
  <input type="checkbox" {{ checked }}/>
  <div class="button">
    <div class="light"></div>
    <div class="dots"></div>
    <div class="characters"></div>
    <div class="shine"></div>
    <div class="shadow"></div>
  </div>
</label>
<script src="../static/js/main.js"></script>
</body>
</html>

后端逻辑实现

这里采用的是GPIO17(BCM编码)接口接LED正极引脚，通过控制GPIO17的高低电平来实现控制LED的亮灭。

import os
import RPi.GPIO as GPIO 
from flask import Flask
from flask import send_from_directory
from flask import render_template

app = Flask(__name__)

GPIO.setwarnings(False)
GPIO.setmode(GPIO.BCM)
GPIO.setup(17,GPIO.OUT)


@app.route('/')
def index():
    sw = GPIO.input(17)
    if sw == 1:
        checked = "checked"
    else:
        checked = ""
    return render_template("index.html",**locals())


@app.route('/favicon.ico')
def favicon():
    return send_from_directory(os.path.join(app.root_path, 'static'),'favicon.ico', mimetype='image/vnd.microsoft.icon')


@app.route('/sw')
def ctrl():
    sw = GPIO.input(17)
    if sw == 1:
        GPIO.output(17,0)
        return "off"
    else:
        GPIO.output(17,1)
        return "on"


if __name__ == '__main__':
    app.run(host="0.0.0.0",debug=True)

在前端部分，按钮绑定ajax的请求事件，当点击按钮时请求/sw路由，然后判断当前引脚状态，再进行相关操作：

$(".switch .button").click(function() {
    $.ajax({
        url: "/sw",
        success: function(data){
            console.log(data)
        },
        error: function(){}
    })
})

总的来说还是挺简单的，完结撒花。

源码下载

[btn href="https://pan.ztongyang.cn/s/RP5uQ" type="block blue" ico=""]源码下载[/btn]