导航：首页 > 互联网科技 >

怎么通过WEB控制树莓派RGB灯光

发表于：2024-11-25 作者：千家信息网编辑

千家信息网最后更新 2024年11月25日，这篇文章主要为大家展示了"怎么通过WEB控制树莓派RGB灯光"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"怎么通过WEB控制树莓派RGB灯光"这篇文章吧。

千家信息网最后更新 2024年11月25日怎么通过WEB控制树莓派RGB灯光

这篇文章主要为大家展示了"怎么通过WEB控制树莓派RGB灯光"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"怎么通过WEB控制树莓派RGB灯光"这篇文章吧。

main.py：

01 #!/usr/bin/env python302 03 import RPi.GPIO as GPIO04 from RGB_light import RGB_light05 from bottle import request, route, run, static_file     #bottle使用介绍：https://git.oschina.net/ginnywzj/web_rgb/attach_files06 import time, threading07 08 rgb = 009 RGBLight = RGB_light(GPIO.BOARD, 1, 33, 35, 37) #初始化rgb灯GPIO引脚，引脚编号系统为GPIO.BOARD、共阳、red通道为33引脚，green通道为35引脚，blue通道为37引脚s10 light_type = 'static'    #'static':静态 'breath':呼吸 'flash':闪烁11 12 #访问文件根目录13 @route('/')14 def index():15     global rgb, light_type16     rgb = 0xffffff17     light_type = 'static'18     return static_file('index.html', './page')19 20 #网页上的静态文件需要做传输处理21 @route('/')22 def server_static(filename):23     return static_file(filename, root='./page')24 25 #POST方式获取Ajax传输过来的rgb值26 @route('/rgb', method='POST')27 def rgbLight():28     red = request.POST.get('red')29     green = request.POST.get('green')30     blue = request.POST.get('blue')31     print('red='+ red +', green='+ green +', blue='+ blue)32     red = int(red)33     green = int(green)34     blue = int(blue)35     if 0 <= red <= 255 and 0 <= green <= 255 and 0 <= blue <= 255:36         global rgb37         rgb = (red<<16) | (green<<8) | blue38 39 #POST方式获取Ajax传输过来的type值40 @route('/lightType', method='POST')41 def lightType():42     global light_type43     light_type = request.POST.get('type')44     print("lightType="+light_type)45 46 #灯光循环检测控制47 def lightLoop():48     global rgb, light_type49     flashTime = [0.3, 0.2, 0.1, 0.05, 0.05, 0.1, 0.2, 0.5, 0.2] #闪烁时间间隔50     flashTimeIndex = 0 #闪烁时间间隔索引51     f = lambda x: (-1/10000.0)*x*x + (1/50.0)*x #用抛物线模拟呼吸灯52     x = 053     while True:54         if light_type == 'static':   #静态显示55             RGBLight.set_rgb(rgb)56             time.sleep(0.05)57         elif light_type == 'breath': #闪烁显示58             red = int(((rgb & 0xff0000)>>16) * f(x))59             green = int(((rgb & 0x00ff00) >> 8) * f(x))60             blue = int((rgb & 0x0000ff) * f(x))61             _rgb = int((red << 16) | (green << 8) | blue)62             RGBLight.set_rgb(_rgb)63             time.sleep(0.02)64             x += 165             if x >= 200:66                 x = 067         elif light_type == 'flash':  #呼吸灯显示68             RGBLight.set_rgb(rgb)69             time.sleep(flashTime[flashTimeIndex])70             RGBLight.set_rgb(0)71             time.sleep(flashTime[flashTimeIndex])72             flashTimeIndex += 173             if flashTimeIndex >= len(flashTime):74                 flashTimeIndex = 075 76 #开辟新线程负责rgb灯光显示77 t = threading.Thread(target = lightLoop)78 t.start()79 80 #设置服务器ip地址和端口(提示：使用前请设置成你的树莓派ip地址)81 run(host='192.168.21.104', port=8080)

（这里要吐槽下，添加代码为什么没有行号(难道是我没发现)，还得自己用UltraEdit添加，添加了行号别人复制了又不能直接用，希望开源中国能更新下）

主要看第21行、26行、40行、77行和81行。

1、第21行是创建一个网页静态文件传输通道。index.html文件中引用了jquery-3.1.1.min.js和两张图片，如果不添加它们的传输通道，这些文件将不能传输到手机，在bottle说明手册中也明确说明了。

2、第26行、40行是接收index.html网页回传数据的方式，可以为GET或者POST，但要保持index.html和main.py一致。

3、第77行是开辟一个python线程。为什么要另外开辟线程呢？main.py有两个任务：1、监听手机传回的数据；2、控制树莓派引脚pwm输出。main.py启动后会产生一个线程，当执行到81行（run(host='192.168.21.104', port=8080)）这个线程就给了bottle。bottle会一直监听手机，如果有数据传回它就会执行被它装饰了的函数（例如27行的rgbLight）。如果灯光只是静态的显示颜色，那么只要监听到一个数据就在装饰函数中修改一次pwm输出就可以，这样单个线程也没问题。但本文的灯光还有闪烁和呼吸效果，这样就需要main.py一直控制pwm输出，单线程的main.py是一直在监听手机的没办法一直控制pwm，所以必须创建新线程来单独控制pwm。

4、第81行是设置服务器的ip地址和端口号，这里必须修改成你自己树莓派的ip地址，否则不能运行会报错。查看ip地址指令：ifconfig。

index.html：

01 02 03 04     05     06     07     08     09     web rgb10     12     15 16 17 18         19             通过WEB控制树莓派RGB灯光20     
21     22    23     24     25         28         29         30     
31     32         静态     33         呼吸     34         闪烁35     
   36 37         82

index.html需要手机浏览器支持html5的canvas元素，现在绝大部分都支持。 jquery的使用可以参考jquery主页API文档：http://api.jquery.com/

看看index.html在手机上显示效果：

1、第52行和53行建立对touchstart事件和touchmove事件监听。这两个事件只在手机端起作用，所以在pc端访问时拖动鼠标，是不能选中颜色的。pc端相对应的事件为：onmousedown、onmousemove。如果想在pc端使用可以修改为相应事件（类似：drawCanvas.onmousedown=function(){}）。

2、第54行的touch函数功能是判断触摸点是否在颜色选择框内，在的话就移动picker和上传被选中点的rgb值给树莓派。

3、第73行是阻止事件上抛，没有它你选择颜色时手机浏览器就会认为是在切换页面。

4、第77行，选择灯光效果，在pc端也能操作。

如果想查看所有代码可到我的码云上看哦：https://git.oschina.net/ginnywzj/web_rgb

你也可以直接用树莓派下载然后运行试玩，方法如下：

git clone https://git.oschina.net/ginnywzj/web_rgb.git

cd web_rgb

//修改main.py中的ip地址

python3 main.py

在这之前我玩过BLE蓝牙控制灯光，蓝牙虽然省电但连接真心慢，每次都要开启手机蓝牙然后等待连接，基本上要消耗10秒。现在树莓派3B有了wifi，让它连上家里的路由器，手机一般都连着，通过wifi来控制灯光速度很快，而且不需要安装APP，只要打开操控网页就行，使用很方便。

以上是"怎么通过WEB控制树莓派RGB灯光"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！

很赞哦！