文档章节

通过WEB控制树莓派RGB灯光

e哥
 e哥
发布于 2016/11/04 19:12
字数 2316
阅读 923
收藏 2

        前段时间玩了下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/>静态&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
33         <input type="radio" name="radio1" value="breath"/>呼吸&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
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还可以制作出很多好玩的,大家不妨也来制作一个玩玩。

© 著作权归作者所有

共有 人打赏支持
e哥
粉丝 7
博文 4
码字总数 7777
作品 0
深圳
私信 提问
Windows系统监听键盘通过UDP协议控制树莓派小车

  树莓派小车硬件从淘宝买到手后已经鼓捣很长时间了,其中最喜欢的应用是控制小车运动了。我的小车控制系统在开发的过程中遇到了很多小问题,都被我一一修正了,将开发经验与大家分享,希望...

FreeBuf
07/30
0
0
基于树莓派如何开发机器人(附PPT+视频) | 硬创公开课

导语:树莓派是为学习计算机编程教育而设计的一种微型电脑,其系统是基于Linux的, 虽然只有信用卡大小,但视频、音频等功能通通皆有,可谓是“麻雀虽小,五脏俱全”。因此自问世以来,受到了...

金红
2017/03/09
0
0
用树莓派通过Java实现远程控制电灯

用树莓派通过Java实现远程控制电灯 本文章由 亓根火柴 原创,转载请注明出处:http://blog.csdn.net/qigenhuochai/article/details/17661845 传说,女娲娘娘炼就七根火柴,来帮助人类度过第一个...

亓根火柴
2014/01/02
0
0
树莓派笔记02—树莓派硬件环境准备

在开始玩转树莓派之前,我们需要了解下树莓派的硬件配置以及所需要的配件。跟电脑PC机类似,树莓派也需要必要的输入输出设备才能工作。 1. 树莓派3B+ 2018年3月14日,树莓派基金会正式发布新...

TonyCode
08/03
0
0
树莓派pi3 串口问题的解决办法

转载: https://blog.csdn.net/aguangg6655la/article/details/54985423 其他参考1:https://blog.csdn.net/xukai871105/article/details/22713925 其他参考2:https://www.briandorey.com/......

zhenguo26
04/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

分布式学习最佳实践:从分布式系统的特征开始(附思维导图)

什么是分布式系统 回到顶部   分布式系统是由一组通过网络进行通信、为了完成共同的任务而协调工作的计算机节点组成的系统。分布式系统的出现是为了用廉价的、普通的机器完成单个计算机无法...

dragon_tech
12分钟前
1
0
TOKEN设计

TOKEN设计 Api_Token 首先需要知道API是什么? API(Application Programming Interface)即应用程序接口。你可以认为 API 是一个软件组件或是一个 Web 服务与外界进行的交互的接口。而我们在...

DrChenXX
21分钟前
0
0
浅谈“李氏代换”——从纪念金庸和斯坦李说起

李氏代换(LSP)简介 李氏代换是软件设计的一个原则,又名依赖倒转原则或依赖倒置原则,其衍生原则有接口分离原则等。该原则由Barbara Liskov于1988年提出。 该原则指出,程序中高级别的元素...

SamYjy
38分钟前
20
0
JavaScript实现在线websocket WSS测试工具 -toolfk程序员工具网

本文要推荐的[ToolFk]是一款程序员经常使用的线上免费测试工具箱,ToolFk 特色是专注于程序员日常的开发工具,不用安装任何软件,只要把内容贴上按一个执行按钮,就能获取到想要的内容结果。T...

toolfk
56分钟前
1
0
linux-scp 远程拷贝报错原因

刚拿到一台重装后的服务器,远程ssh都正常,但是一scp拷贝东西就报错: 本地确定是有scp命令的,而且如果是本地没有scp不会报后面那句lost connection,因此就是远程没有scp这个命令。因此在...

linuxprobe16
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部