基于树莓派的网页控制氛围灯

最新推荐文章于 2025-03-28 18:07:42 发布

\浮生若梦/

最新推荐文章于 2025-03-28 18:07:42 发布

阅读量1.3k

点赞数 3

分类专栏： Flask Raspberrypi 文章标签： python

本文链接：https://blog.csdn.net/qq_44823041/article/details/115002982

版权

Flask 同时被 2 个专栏收录

1 篇文章

订阅专栏

Raspberrypi

1 篇文章

订阅专栏

本文介绍如何使用树莓派和Python制作可网页控制的氛围灯，包括环境搭建、硬件连接、网页服务器搭建等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于树莓派的网页控制氛围灯

这里是用python语言编写的，在树莓派上，python有着丰富的库可以使用，对于初学者来说是最容易上手DIY小项目的，在做这个东西氛围灯之前我也完全是一个树莓派小白。下面让我们从0到1，来开始动手这个有趣项目的DIY吧！

一、前期准备

1、所需硬件：

（1）树莓派开发板一块；
（2）ws2812灯带一条（根据自己需要长度购买即可）
注意：如果灯带较长做好再搭配一个独立电源来供电，这样既不会烧毁树莓派也能有充足的功率带动灯带。

2、所需学习的程序语言

（1）python:会基础的语法，然后会调用相关的模块和库即可，这里会用到rpi_ws281x这个模块来控制灯带。
（2）基于flask搭建web网页来控制灯，采用flask是因为她是一个轻量级的比较适合用于树莓派上，对于初学者来说是非常友好的。
（3）只需会一点基础的HTML5和CSS的基础就行，这主要用来设计你的页面（如果你必将擅长的话就可以设计出一个花里胡哨的页面来了）

二、具体步骤

1、基本环境的搭建

（1）搭建树莓派基本环境https://blog.csdn.net/myfdream/article/details/89672909
这个博主的内容已经比较详细了，大家也可去B站上看视频学习，这里就不详细写了
（2）flask安装
Flask是Python版的Web架构，通过它可以把Raspberry Pi变为一个Web服务器，相当于轻量级的IIS。安装Flask前，需要先安装pip。

sudo apt-get install python-pip

之后，就可以用它来安装Flask和相关的依赖包。

sudo pip install flask

2、硬件连接及注意事项

注意树莓派的引脚与ws2812相接时需要GPIO的pwm输出，这里我用GPIO.1也就是BCM18号引脚，还有一个就是用独立电源的话，树莓派和灯带一定要共地。下面就是事物连接图了：在这里插入图片描述

3、网页服务器的搭建

初学者可以参考这篇博主的文章：
flsak学习 https://github.com/greyli/flask-tutorial/blob/master/chapters/c2-hello.md
Flask 是典型的微框架，作为 Web 框架来说，它仅保留了核心功能：请求响应处理和模板渲染。这两类功能分别由 Werkzeug（WSGI 工具库）完成和 Jinja（模板渲染库）完成，因为 Flask 包装了这两个依赖。选择这个框架在树莓派上是因为它小而灵活的特点，同时对于初学者也非常友好。
网页服务器代码，py文件：

#!/usr/bin/env python
# -*- coding: utf-8 -*-
# @Date    : 2021-03-12 16:24:26
# @Author  :  XiaoBZ
from flask import render_template, request
from  rpi_ws281x import *
#from app import *
#创建实例FLASK
from flask import Flask
app = Flask(__name__)
#建立初始灯带
LED_COUNT      = 30 # led灯的数量
LED_PIN        = 18 #选用的引脚
LED_BRIGHTNESS = 5  # 灯的亮度
LED_FREQ_HZ    = 800000
LED_DMA        = 10
LED_INVERT     = False
strip = Adafruit_NeoPixel(LED_COUNT, LED_PIN, LED_FREQ_HZ, LED_DMA, LED_INVERT, LED_BRIGHTNESS)
strip.begin()


#灯带效果函数，我这里演示就只写了这两个了
def onLight():
    
    for i in range(strip.numPixels()):
        strip.setPixelColor(i, Color(255,255,255))
        
    strip.show()
def offLigth():
    
    for i in range(strip.numPixels()):
        strip.setPixelColor(i, Color(0,0,0))
        
    strip.show()
    # pass
@app.route('/')
def index():
    return render_template('led.html')
 
@app.route('/on', methods=['POST', 'GET'])
def on():

    if request.method == 'POST':
        onLight()
		
    return      render_template('led.html')
  

@app.route('/off', methods=['POST', 'GET'])
def off():

    if request.method == 'POST':
        offLigth()

    return render_template('led.html')

if __name__ == '__main__':
    app.run(host="0.0.0.0",port=8080,debug=True)  #启动app的调试模式，设置ip地址和端口号，如果不设置的就一般是主机地址端口号是5000

下面就是相对应的页面代码了，html文件，

```html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>我的APP</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <!-- Bootstrap CSS --background-size:cover;>
    
    <script src=""></script>
</head>

</style>
<body>
    <div class="container">
        <legend style="text-align: center;">
            <h1>欢迎来到我的智能氛围灯</h1>
        </legend>
        <br>
        <div class="col-md-12">
            <form action="/on" method="POST" role="form">
                <button type="submit" class="btn btn-primary btn-lg btn-block">开灯</button>
            </form>
        </div>
        <br>
        <div class="col-md-12">
            <form action="/off" method="POST" role="form">
                <button type="submit" class="btn btn-primary btn-lg btn-block ">关灯</button>
            </form>
        </div>
	</div>
	<style type = "text/css">
	body{background-image:url(../static/css/led.png);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	width:150;
	height:150;
	
	background-attachment:fixed;
	opacity:0.5;

}
</body>
</html>

注意：html文件要放在和py文件同级的templates文件夹里面，css文件放在static文件夹里，不然的话会报错。bootstrap.min.css这个文件大家可以去官方库里下载，网上也有。
这就是搭建好的页面，这里为了我后期项目的需要增加了一些功能，上面为了演示方便只给出了基本的开关灯的功能。在这里插入图片描述
下面就来看下运行后的结果吧。
注意：只能在同一局域网下访问，不能通过外网访问，要想通过外网也能访问就要设置外网穿透了。