通过WEB控制树莓派RGB灯光
2016-11-04 00:00
567 查看
摘要: python调用bottle在树莓派上创建服务器。html+javascript生成网页让手机访问。手机通过网页操控树莓派上的rgb灯光。
前段时间玩了下RPi.GPIO,感觉挺有意思的。之后也看了wiringPi和BCM2835库。
wiringPi:http://wiringpi.com/ BCM2835:http://www.airspayce.com/mikem/bcm2835/
如果是用python操作树莓派GPIO推荐用RPi.GPIO,如果用C的话推荐用BCM2835,BCM2835主页对它使用介绍比wiringPi主页要明了些,使用起来很方便。
好了回到今天的主题,前一篇博客介绍了RPi.GPIO的使用方法,今天就准备写写用它来实现手机网页操控rgb灯光。实现的功能有:改变灯光颜色、灯光闪烁和呼吸效果。
先来看看视频演示:http://v.qq.com/x/page/v03437u3g8d.html
要使手机能访问树莓派的网页,就得在树莓派上搭建网络服务器。bottle这个包搭建网络服务非常方便,只需简单几行代码就行,而且使用它也不需要安装其他软件,你甚至不需要安装bottle直接把bottle.py放入自己的项目中就行,我就是这么做的。bottle主页:http://www.bottlepy.org/docs/dev/ 或者直接下载pdf手册:https://git.oschina.net/ginnywzj/web_rgb/attach_files
接下来连接树莓派和RGB灯光:
电路示意图用Fritzing画的。
接下来就是上代码了:
本项目总共5个代码文件:bottle.py、main.py、RGB_light.py、jquery-3.1.1.min.js、index.html。bottle.py和jquery-3.1.1.min.js是直接从网上下载的就不在这里介绍了,RGB_light.py是一个python包里面有个python类(RGB_light)用来控制树莓派引脚的pwm输出,如果想知道它的工作原理可以查看《RPi.GPIO使用手册.pdf》。下文主要介绍main.py和index.html。
main.py:
(这里要吐槽下,添加代码为什么没有行号(难道是我没发现),还得自己用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:
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,只要打开操控网页就行,使用很方便。
RPi.GPIO+bottle还可以制作出很多好玩的,大家不妨也来制作一个玩玩。
前段时间玩了下RPi.GPIO,感觉挺有意思的。之后也看了wiringPi和BCM2835库。
wiringPi:http://wiringpi.com/ BCM2835:http://www.airspayce.com/mikem/bcm2835/
如果是用python操作树莓派GPIO推荐用RPi.GPIO,如果用C的话推荐用BCM2835,BCM2835主页对它使用介绍比wiringPi主页要明了些,使用起来很方便。
好了回到今天的主题,前一篇博客介绍了RPi.GPIO的使用方法,今天就准备写写用它来实现手机网页操控rgb灯光。实现的功能有:改变灯光颜色、灯光闪烁和呼吸效果。
先来看看视频演示:http://v.qq.com/x/page/v03437u3g8d.html
要使手机能访问树莓派的网页,就得在树莓派上搭建网络服务器。bottle这个包搭建网络服务非常方便,只需简单几行代码就行,而且使用它也不需要安装其他软件,你甚至不需要安装bottle直接把bottle.py放入自己的项目中就行,我就是这么做的。bottle主页:http://www.bottlepy.org/docs/dev/ 或者直接下载pdf手册:https://git.oschina.net/ginnywzj/web_rgb/attach_files
接下来连接树莓派和RGB灯光:
电路示意图用Fritzing画的。
接下来就是上代码了:
本项目总共5个代码文件:bottle.py、main.py、RGB_light.py、jquery-3.1.1.min.js、index.html。bottle.py和jquery-3.1.1.min.js是直接从网上下载的就不在这里介绍了,RGB_light.py是一个python包里面有个python类(RGB_light)用来控制树莓派引脚的pwm输出,如果想知道它的工作原理可以查看《RPi.GPIO使用手册.pdf》。下文主要介绍main.py和index.html。
main.py:
01 #!/usr/bin/env python3 02 03 import RPi.GPIO as GPIO 04 from RGB_light import RGB_light 05 from bottle import request, route, run, static_file #bottle使用介绍:https://git.oschina.net/ginnywzj/web_rgb/attach_files 06 import time, threading 07 08 rgb = 0 09 RGBLight = RGB_light(GPIO.BOARD, 1, 33, 35, 37) #初始化rgb灯GPIO引脚,引脚编号系统为GPIO.BOARD、共阳、red通道为33引脚,green通道为35引脚,blue通道为37引脚s 10 light_type = 'static' #'static':静态 'breath':呼吸 'flash':闪烁 11 12 #访问文件根目录 13 @route('/') 14 def index(): 15 global rgb, light_type 16 rgb = 0xffffff 17 light_type = 'static' 18 return static_file('index.html', './page') 19 20 #网页上的静态文件需要做传输处理 21 @route('/<filename>') 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 rgb 37 rgb = (red<<16) | (green<<8) | blue 38 39 #POST方式获取Ajax传输过来的type值 40 @route('/lightType', method='POST') 41 def lightType(): 42 global light_type 43 light_type = request.POST.get('type') 44 print("lightType="+light_type) 45 46 #灯光循环检测控制 47 def lightLoop(): 48 global rgb, light_type 49 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 = 0 53 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 += 1 65 if x >= 200: 66 x = 0 67 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 += 1 73 if flashTimeIndex >= len(flashTime): 74 flashTimeIndex = 0 75 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 <!doctype html> 02 <html> 03 <head> 04 <meta charset="utf-8"> 05 06 <!--适应手机大小,不允许放大缩小--> 07 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 08 09 <title>web rgb</title> 10 <script src="jquery-3.1.1.min.js"> 11 </script> 12 <style type="text/css"> 13 body,div,img{ border:0; margin:0; padding:0;} 14 </style> 15 </head> 16 17 <body> 18 <div style="width:100%; height:40px; line-height:40px; text-align:center; font-size:20px; color:white; background-color:blue; margin:auto"> 19 通过WEB控制树莓派RGB灯光 20 </div> 21 <img width="300" height="300" src="color_range.png" id="myimg" style="display:none" alt="range"/> 22 23 <div style="width:300px; height:300px; position:relative; text-align:center; margin:auto; margin-top:20px; margin-bottom:40px;" id="colorRange"> 24 25 <canvas id="mycanvas" width="300" height="300"> 26 你的浏览器不支持html5 Canvas元素。 27 </canvas> 28 29 <img width="30" height="30" src="color_picker.png" id="picker" style="position:absolute; top:135px; left:135px;" alt="picker" /> 30 </div> 31 <div style="font-size:20px; text-align:center; border:1px solid gray; border-radius:10px; width:100%; height:40px; line-height:40px;"> 32 <input type="radio" name="radio1" value="static" checked/>静态 33 <input type="radio" name="radio1" value="breath"/>呼吸 34 <input type="radio" name="radio1" value="flash"/>闪烁 35 </div> 36 </body> 37 <script> 38 var RadiusRange = 150; 39 var RadiusPicker = 15; 40 var offsetX = window.screen.width / 2 - RadiusRange; 41 var offsetY = 60; 42 var centerX = offsetX + RadiusRange; 43 var centerY = offsetY + RadiusRange; 44 45 var colorRange = $('#colorRange')[0]; 46 var colorPicker = $('#picker')[0]; 47 var myCanvas = $('#mycanvas')[0]; 48 var myImg = $('#myimg')[0]; 49 var ctx = myCanvas.getContext('2d'); 50 myImg.onload = function(){ctx.drawImage(myImg, 0, 0);} 51 52 colorRange.addEventListener('touchstart', touch, false); //监听touchstart事件 53 colorRange.addEventListener('touchmove', touch, false); //监听touchmove事件 54 function touch(e) 55 { 56 var X = e.touches[0].clientX; 57 var Y = e.touches[0].clientY; 58 var x = X - centerX; 59 var y = Y - centerY; 60 if(Math.sqrt(x*x + y*y) < RadiusRange-5) 61 { 62 colorPicker.style.left = X - offsetX - RadiusPicker +'px'; 63 colorPicker.style.top = Y - offsetY - RadiusPicker +'px'; 64 65 var rgba = ctx.getImageData(X-offsetX, Y-offsetY, 1, 1).data; 66 var red = rgba['0']; 67 var green = rgba['1']; 68 var blue = rgba['2']; 69 $.post('/rgb', {red: red, green: green, blue: blue}); 70 } 71 72 //阻止事件上抛给浏览器 73 event.preventDefault(); 74 } 75 76 //rgb灯光显示类型选择 77 $('input').click(function() { 78 var type = this.value; 79 $.post('/lightType', {type: type});; 80 }); 81 </script> 82 </html>
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,只要打开操控网页就行,使用很方便。
RPi.GPIO+bottle还可以制作出很多好玩的,大家不妨也来制作一个玩玩。
相关文章推荐
- 树莓派-通过Web控制GPIO针脚输出高低电平
- 树莓派-通过Web控制GPIO针脚输出高低电平(改进版)
- 一个嵌入式web服务器项目,实现通过手机Android App实现对嵌入式设备的控制
- 树莓派实现web控制GPIO教程(安装方法更简单,网页效果更好)
- 树莓派2代通过人体红外感应器控制继电器
- 基于TCP协议的树莓派灯光控制
- (14)树莓派B+使用L298N驱动控制四驱车并实现一个简单的web控制端
- 解析通过web.xml文件控制利用过滤器实现编码格式步骤
- mini2440基于boa服务器通过WEB控制GPIO
- 树莓派的玩具:用三轴加速度计来控制web页面上的飞机姿态
- 树莓派通过GPIO控制步进电机(python)
- 使用Python简单的实现树莓派的WEB控制
- 通过Raspberry Pi(树莓派)的GPIO接口控制发光二极管
- 【原创】通过Web远程浏览并控制Mini6410上的摄像头(二)
- 【原创】通过Web远程浏览并控制Mini6410上的摄像头(一)
- 树莓派-Web控制家电
- java网络编程--解析通过web.xml文件控制利用过滤器实现编码格式步骤
- 【原创】通过Web远程浏览并控制Mini6410上的摄像头(一)
- IIS7 下通过web.config来控制html文件的访问
- 如何通过WEB方式,来控制iis的禁用IP名单