在前面的文章中我們陸續介面了Raspberry遙控車實作的硬體Pi相機影音串流介面、以及影音串流的遙控車網頁控制介面,基本上已經可以達到初步的效果。而在這一篇文章中,我們打算把原本設計的網頁介面中影音串流的部份和遙控車控制介面的部份分開,讓回傳的即時影像可以有最佳的顯示效果。因此,在操作此遙控車時,應該會是像以下這樣,同時開啟2個瀏覽器:

2016-04-25_22-24-52

左側的瀏覽器用來觀看目前遙控車傳回的即時影像,而右側的網頁則專責於控制遙控車的動作。為了達成此目的,我們仍然使用的是同一個Flask影音串流程式,這個部份我們就保留不要更動。但是在同一個資料夾之下,加上一個cmd.py做為控制之用,程式碼如下:

#!/usr/bin/env python
from flask import Flask, render_template, Response

import RPi.GPIO as gpio
import time


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)

app = Flask(__name__)

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

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

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=9000, debug=True, threaded=True)

這個程式是典型的Falsk網頁框架的寫法,但是在倒數最後一行的部份,我們另外指定埠號9000做為接收的連接埠。也就是說,原本影音串流用的app.py我們使用預設的連接埠,而我們這個cmd.py則是在同一個網址監聽另外一個連接埠,如此就可以讓兩個Flask網站在同一台機器上運作了。而cmd.py會使用到的模版,也是放在templates下,但是我們命名為cmd.html,如下所示:

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


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

<img id="Image-Maps-Com-image-maps-2016-04-20-094526" src="http://www.image-maps.com/m/private/0/0fqu781nm2cn1gtrk6lk8pq3j5_controlpad.png" border="0" width="220" height="211" orgWidth="220" orgHeight="211" usemap="#image-maps-2016-04-20-094526" alt="" />

<map name="image-maps-2016-04-20-094526" id="ImageMapsCom-image-maps-2016-04-20-094526">

<area alt="" title="" href="/go" shape="rect" coords="75,10,136,69" style="outline:none;" target="_self" />

<area alt="" title="" href="/right" shape="rect" coords="139,61,210,126" style="outline:none;" target="_self" />

<area alt="" title="" href="/stop" shape="rect" coords="74,76,138,137" style="outline:none;" target="_self" />

<area alt="" title="" href="/rights" shape="rect" coords="133,141,197,202" style="outline:none;" target="_self" />

<area alt="" title="" href="/lefts" shape="rect" coords="24,144,77,205" style="outline:none;" target="_self" />

<area alt="" title="" href="/left" shape="rect" coords="4,60,72,132" style="outline:none;" target="_self" />

<area alt="" title="" href="/back" shape="rect" coords="81,143,131,202" style="outline:none;" target="_self" />

<area shape="rect" coords="218,209,220,211" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
</map>

  

<hr>

    {% if cmd %}

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

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

在cmd.html中,我們使用了一張圖形:

controlpad

然後利用影像地圖的方式去對應到每一個命令,接回cmd.py去控制遙控車。安排妥當之後,在Raspberry的作業系統中,在flask-video-streaming專案的目錄下,輸入如下:

$ python app.py &
$ python cmd.py &

如此,就大功告成了。

(949)