延續上一篇的程式內容,接下來我們要把遙控的介面,再加上即時視訊的介面放在網頁上,也就是只要連接上網頁就可以控制這台遙控車,同時可以看到從遙控車上的PiCamera所傳回來的即時影像。在硬體方面,除了使用之前的自走車架構以及硬體之外,當然還要再加上Raspberry Pi 3 B以及官方的PiCamera,就像是前篇文章中介紹的一樣。以下是我們初步設計的Web介面:

2016-04-14_22-36-31

請留意那個IP Address,因為把手機當做是WiFi的基地台,所以當然也可以使用手機來遙控這台車,手機的介面如下(其實就是打開Chrome瀏覽器,然後瀏覽那個網址而已):

2016-04-14 14.36.10

在介面中的影像,是我們在之前文章中的成果【利用Flask來提供樹莓派的Video Streaming】傳回來的即時視訊,而操作的過程,如下所示:

因為車身的部件都還沒有固定,所以只先錄了一個簡短的測試影片。從影片中可以看出,在網頁中可以觀看在車上即時的視訊,而我們可以使用滑鼠點按畫面下方的按鈕直接控制車子的行動。此網頁介面是以【利用Flask來提供樹莓派的Video Streaming】這篇文章中的程式為主架構,再加上我們的控制指定完成。首先,要修改的是template中的index.html,如下所示:

<html>
  <head>
    <title>WiFi Controlled Car (hophd.com)</title>
  </head>
  <body>
    <center>



<h1>WiFi Controlled Car (hophd.com)</h1>



      <img src="{{ url_for('video_feed') }}">
      <a href='/go'>Go</a> . 
      <a href='/back'>Back</a> . 
      <a href='/stop'>Stop</a> . 
      <a href='/right'>Turn Right</a> . 
      <a href='/left'>Turn Left</a>



<hr>



    {% if cmd %}



<h2> Your Command: {{ cmd }} </h2>



    {% endif %}
    </center>
  </body>
</html>

而在Flask Web Framework的app.py中要取得網址中的參數,只要使用如下的方式即可取得:

@app.route('/<cmd>')
def index(cmd=None):

因此,在index函數中只要依照cmd的內容來操作GPIO,就可以在實際渲染index.html之前先對自走車做好控制。除了要在app.py的前面引入GPIO模組以及做好設定之外:

import RPi.GPIO as gpio

gpio.setwarnings(False)
gpio.setmode(gpio.BOARD)
gpio.setup(7, gpio.OUT)
gpio.setup(11, gpio.OUT)
gpio.setup(13, gpio.OUT)
gpio.setup(15, gpio.OUT)

我們要宣告一個setio來簡化每一次控制指令的操作:

def setio(p7, p11, p13, p15):
    gpio.output(7, p7)
    gpio.output(11, p11)
    gpio.output(13, p13)
    gpio.output(15, p15)

接下來index函數就可以寫成這樣:

@app.route('/')
@app.route('/<cmd>')
def index(cmd=None):
    """Video streaming home page."""
    if cmd == 'go':
        setio(False, True, False, True)
    elif cmd == 'stop':
        setio(False, False, False, False)
    elif cmd == 'back':
        setio(True, False, True, False)
    elif cmd == 'right':
        setio(True, False, False, True)
    elif cmd == 'left':
        setio(False, True, True, False)
    return render_template('index.html',cmd=cmd)

最後,只要在Raspberry Pi中啟用python app.py,就可以順利使用網頁的介面來搖控這台車子的行動,並瀏覽在其上攝影機所傳回來的畫面了。

(2916)