ブラウザ側からRaspberry Pi(+ブレッドボード)につないだLEDを制御してみる

スポンサーリンク

IMG_3928

前回の Raspberry Piを使って「複数」のLEDの点滅(Lチカ)を制御してみる に続いて、今度はブラウザ側からRaspberry Pi(+ブレッドボード)につないだLEDの点灯制御に挑戦します。

はじめる前に

今回の作業は前回の Raspberry Piを使って「複数」のLEDの点滅(Lチカ)を制御してみる をそのまま使って進めて行きます。用意するパーツなどは過去の記事をご参考ください。
言語はPython, HTML, jQueryを使っていきます。

SimpleHTTPServerを使って簡易サーバを構築する

SimpleHTTPServerというPythonの標準ライブラリーを使って簡易サーバを構築します。

公式ドキュメントによるとSimpleHTTPServerは、

現在のディレクトリ以下にあるファイルを、HTTP リクエストにおけるディレクトリ構造に直接対応付けて提供します。

ということらしいです。
つまり、サーバにしたいディレクトリに移動してSimpleHTTPServerコマンドを叩くか、簡易サーバを作成するPythonファイルを実行するだけで簡易的なサーバがその領域で出来るということです。これは便利。

早速、簡易サーバを立ててみます。
今回は、Pythonファイルを実行させて簡易サーバをたてます。

ledServer.py

import SimpleHTTPServer
import BaseHTTPServer

port = 8000
serverAddress = ('', port)
httpd = BaseHTTPServer.HTTPServer(serverAddress, SimpleHTTPServer.SimpleHTTPRequestHandler)
print('port',port)
httpd.serve_forever()

1行目で SimpleHTTPServerモジュールをインポートします。
2行目で BaseHTTPServerモジュールをインポートします。
この2つを使って簡易サーバをたてていきます。

4行目はポート番号です。バッティングに注意。
6行目の BaseHTTPServer.HTTPServer でサーバをたてます。引数には、第一にホストとポート番号がまとまったもの、第二にSimpleHTTPServerのリクエストハンドラーを指定します。
7行目は実際に接続出来たいるかどうかデバックとして文字列を出しています。
8行目でサーバを永続化させます。

ledServer.pyが置いてある階層へ移動して下記Pythonコマンドで実行します。

python ledServer.py

下記のように表示されたら接続完了です。

('port', 8000)

サーバがたっているか確認してみます。
同じ階層にindex.htmlというHTMLファイルを作成します。

<html>
    <head>
    </head>
    <body>
        ok
    </body>
</html>

http://127.0.0.1:8000/にアクセスして「OK」と表示されたら成功です。
スクリーンショット 2015-12-23 18.16.51

jQueryを使ってPythonスクリプトへデータをPOST送信する

jQueryを使ってPythonへPOST送信できるように、先ほどのindex.htmlを変更していきましょう。

index.html

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(function(){
                $('#led1, #led2, #led3').click(function(){
                    id = this.id;
                    ledId = $('#'+id).val();
                    
                    $.ajax({
                        url: 'ledServer.py',
                        type: 'POST',
                        dataType: 'json',
                        data : {'id': ledId}
                    });
                });
            });
        </script>
    </head>
    <body>
        <form id="form">
            <input type="button" id="led1" name="led1" value="led1" />
            <input type="button" id="led2" name="led2" value="led2" />
            <input type="button" id="led3" name="led3" value="led3" />
        </form>
    </body>
</html>

ブラウザで表示すると下記のようにボタンが3つできます。
スクリーンショット 2015-12-23 18.22.28

23行目、24行目、25行目にあるボタンがLEDの制御ボタンになります。このボタンをクリックすることにより対応するLEDを点灯させるイメージです。

ざっくりとした処理の流れは、jQueryで押されたボタンの情報を取得し、AjaxでPythonスクリプト(ledServer.py)へPOST送信しています。

LEDの制御スクリプトを作成する

POSTされた情報をPython(ledServer.py)で受け取ります。POST情報は、cgiというモジュールとSimpleHTTPRequestHandlerというハンドラクラス内に定義されているdo_POSTメソッドで取得が可能です。
※GET情報を受け取りたい場合は、do_GETメソッドで取得可能です。
前回の Raspberry Piを使って「複数」のLEDの点滅(Lチカ)を制御してみる で作成したPythonの点滅プログラムを入れ込んで書いてみたPythonスクリプト(ledServer.py)が下記です。

ledServer.py

import SimpleHTTPServer
import BaseHTTPServer
import cgi
import os
import RPi.GPIO as GPIO
import time

seconds = 0.5

class handler(SimpleHTTPServer.SimpleHTTPRequestHandler):

    def do_POST(self):
        os.environ['REQUEST_METHOD']= 'POST'
        datas = cgi.FieldStorage(self.rfile, self.headers)
        data = datas.getvalue('ledId', '')

        GPIO.setmode(GPIO.BCM)
        GPIO.setup(21, GPIO.OUT)
        GPIO.setup(20, GPIO.OUT)
        GPIO.setup(16, GPIO.OUT)

        if data == 'led1':
            GPIO.output(21, GPIO.HIGH)
            time.sleep(seconds)
            GPIO.output(21, GPIO.LOW)
        elif data == 'led2':
            GPIO.output(20, GPIO.HIGH)
            time.sleep(seconds)
            GPIO.output(20, GPIO.LOW)
        else:
            GPIO.output(16, GPIO.HIGH)
            time.sleep(seconds)
            GPIO.output(16, GPIO.LOW)

        GPIO.cleanup()
        

port = 8000
serverAddress = ('', port)
httpd = BaseHTTPServer.HTTPServer(serverAddress, handler)
print('serving at port', port)
httpd.serve_forever()

10行目で新しいクラスのhandlerを作成して、SimpleHTTPRequestHandlerクラスを継承します。
12行目でdo_POSTメソッドを定義して、POST情報を取得し処理を書いていきます。
気をつけるべきところは13行目の os.environ[‘REQUEST_METHOD’]= ‘POST’ です。この記述がないと FieldStorage(None, None, []) と出てきて、空の情報しか返ってきてません。
14行目でcgiモジュールのFieldStorageメソッドを使ってPOST情報を取得します。
欲しい情報は15行目のようにgetvalueメソッドの第一引数にjsonのkeyを指定してあげると取得できます。

後は取り出してきた情報をもとに条件分岐を行い対応するLEDを点灯するように処理を書いていきます。このあたりの点灯処理は前回とほぼ変わりません。

ブラウザからLEDを点灯してみる

では、ブラウザからLEDの点灯を操作できるか試してみましょう。

IMG_3928

IMG_3929

IMG_3930

上記の感じでled1とled2とled3をクリックすと、対応LEDがばっちり点灯しました。
次回は タクトスイッチを使ってLEDを点灯してみる ことに挑戦します。

参考文献

・SimpleHTTPServer — 簡潔な HTTP リクエストハンドラ:http://docs.python.jp/2/library/simplehttpserver.html
・CGIモジュールを使う:http://docs.python.jp/2.4/lib/node457.html
・Raspberry Pi につないだLEDをブラウザから制御する:http://chicklab.blog84.fc2.com/blog-entry-53.html
・みんなのPython Webアプリ編 – Webアプリケーションサーバを作る:http://coreblog.org/ats/stuff/minpy_web/13/03.html
・Raspberry Piで学ぶ電子工作(金丸隆志 著)

スポンサーリンク
スポンサーリンク
スポンサーリンク

フォローする

スポンサーリンク
スポンサーリンク