溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“怎么通過WEB控制樹莓派RGB燈光”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“怎么通過WEB控制樹莓派RGB燈光”這篇文章吧。
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引腳，引腳編號系統(tǒng)為GPIO.BOARD、共陽、red通道為33引腳，green通道為35引腳，blue通道為37引腳s
10 light_type = 'static' #'static':靜態(tài) '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 #網(wǎng)頁上的靜態(tài)文件需要做傳輸處理
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 #燈光循環(huán)檢測控制
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': #靜態(tài)顯示
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 #開辟新線程負(fù)責(zé)rgb燈光顯示
77 t = threading.Thread(target = lightLoop)
78 t.start()
79
80 #設(shè)置服務(wù)器ip地址和端口(提示：使用前請設(shè)置成你的樹莓派ip地址)
81 run(host='192.168.21.104', port=8080)（這里要吐槽下，添加代碼為什么沒有行號(難道是我沒發(fā)現(xiàn))，還得自己用UltraEdit添加，添加了行號別人復(fù)制了又不能直接用，希望開源中國能更新下）
主要看第21行、26行、40行、77行和81行。
1、第21行是創(chuàng)建一個網(wǎng)頁靜態(tài)文件傳輸通道。index.html文件中引用了jquery-3.1.1.min.js和兩張圖片，如果不添加它們的傳輸通道，這些文件將不能傳輸?shù)绞謾C，在bottle說明手冊中也明確說明了。
2、第26行、40行是接收index.html網(wǎng)頁回傳數(shù)據(jù)的方式，可以為GET或者POST，但要保持index.html和main.py一致。
3、第77行是開辟一個python線程。為什么要另外開辟線程呢？main.py有兩個任務(wù)：1、監(jiān)聽手機傳回的數(shù)據(jù)；2、控制樹莓派引腳pwm輸出。main.py啟動后會產(chǎn)生一個線程，當(dāng)執(zhí)行到81行（run(host='192.168.21.104', port=8080)）這個線程就給了bottle。bottle會一直監(jiān)聽手機，如果有數(shù)據(jù)傳回它就會執(zhí)行被它裝飾了的函數(shù)（例如27行的rgbLight）。如果燈光只是靜態(tài)的顯示顏色，那么只要監(jiān)聽到一個數(shù)據(jù)就在裝飾函數(shù)中修改一次pwm輸出就可以，這樣單個線程也沒問題。但本文的燈光還有閃爍和呼吸效果，這樣就需要main.py一直控制pwm輸出，單線程的main.py是一直在監(jiān)聽手機的沒辦法一直控制pwm，所以必須創(chuàng)建新線程來單獨控制pwm。
4、第81行是設(shè)置服務(wù)器的ip地址和端口號，這里必須修改成你自己樹莓派的ip地址，否則不能運行會報錯。查看ip地址指令：ifconfig。
index.html：
01 <!doctype html>
02 <html>
03 <head>
04 <meta charset="utf-8">
05
06 <!--適應(yīng)手機大小，不允許放大縮小-->
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 >
19 通過WEB控制樹莓派RGB燈光
20 </div>
21 <img width="300" height="300" src="color_range.png" id="myimg" alt="range"/>
22
23 <div 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" alt="picker" />
30 </div>
31 <div >
32 <input type="radio" name="radio1" value="static" checked/>靜態(tài)
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); //監(jiān)聽touchstart事件
53 colorRange.addEventListener('touchmove', touch, false); //監(jiān)聽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元素，現(xiàn)在絕大部分都支持。 jquery的使用可以參考jquery主頁API文檔：http://api.jquery.com/
看看index.html在手機上顯示效果：
1、第52行和53行建立對touchstart事件和touchmove事件監(jiān)聽。這兩個事件只在手機端起作用，所以在pc端訪問時拖動鼠標(biāo)，是不能選中顏色的。pc端相對應(yīng)的事件為：onmousedown、onmousemove。如果想在pc端使用可以修改為相應(yīng)事件（類似：drawCanvas.onmousedown=function(){}）。
2、第54行的touch函數(shù)功能是判斷觸摸點是否在顏色選擇框內(nèi)，在的話就移動picker和上傳被選中點的rgb值給樹莓派。
3、第73行是阻止事件上拋，沒有它你選擇顏色時手機瀏覽器就會認(rèn)為是在切換頁面。
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藍(lán)牙控制燈光，藍(lán)牙雖然省電但連接真心慢，每次都要開啟手機藍(lán)牙然后等待連接，基本上要消耗10秒?，F(xiàn)在樹莓派3B有了wifi，讓它連上家里的路由器，手機一般都連著，通過wifi來控制燈光速度很快，而且不需要安裝APP，只要打開操控網(wǎng)頁就行，使用很方便。
以上是“怎么通過WEB控制樹莓派RGB燈光”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼