ラズパイ3のWeb インターフェースを作成


ラズパイに接続したいろいろなデバイスやセンサーをWebベースで制御したりモニターするためのインターフェースのベースを作成してみます。

ラズパイをIoTプラットフォームにするための準備です。

まぁ、サーバーを立てるっちゅうことですが、ここでは軽量のFlaskを使ってみます。

FlaskはPythonのWebアプリケーションフレームワークです。

Raspbianの最新バージョンならプレインストールされています。

同様にテンプレートエンジンのjinja2もプレインストールされています。

$pip3 list

Flaskの現バージョン(2018/12/07)は0.12.1


適当なディレクトリ(FLASK)を作成して、直下にstaticとtemplatesというサブディレクトリを置いておきます。

これが基本形

FLASK/server.py

FLASK/templates/index.html

FLASK/static/index.js,index.css

実行

$python3 server.py

これを実行することで、 server.pyがindex.htmlを読み込んで、index.htmlがindex.jsやindex.cssを読み込んでサーバーを立てるという構成です。


コードはこんな感じ

【server.py】

”192.168.0.31”はRaspbianのローカルIPの例(確認)

8080は使用するポート番号の例(好み)

 

from flask import Flask, render_template, request

import easygui #メッセージ表示用

import subprocess #シェルスクリプト起動やコマンド実行用


app = Flask(__name__)

@app.route('/')
def index(title='Helllo!'):
    message = 'World!!'
    return render_template('index.html',title=title,message=message)

 
#ajaxで使用
@app.route('/control', methods=['POST'])
def control():

    param1 = request.form['param1'];
    param2 = request.form['param2'];
  
    cmd = param1 + ' ' + param2
    p = subprocess.Popen(cmd,shell=True,stdout=subprocess.PIPE,stderr=subprocess.PIPE)
    stdout_data,stderr_data = p.communicate()
    res = stdout_data

    return res

if __name__ == '__main__':
    app.debug = True
    app.run(host='192.168.0.31', port=8080)

【index.html】

sampleというボタンをクリックすると、param1,param2のvalueが送信され、

  pythonで’ls -al’というコマンドが実行され、結果がダイアログで表示されます。

 

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta name="viewport" content="width=device-width">
	<meta charset="UTF-8">
	{% if title %}<title>{{ title }}</title>{% else %}<title>Maido!</title>{% endif %}
     <link rel="stylesheet" href="{{url_for('static', filename='index.css')}}">
    	<script src="{{url_for('static', filename='index.js')}}"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
         <!-- 必須ではない -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.js"></script> 
</head>
<body>
	{% if message %}<h1>{{ message }}</h1>{% endif %}
	
	
	<form id="frm_sample" style="width:100%;display:none;">
		<input id="command" type="text" name="param1" value="ls">
		<input id="option" type="text" name="param2" value="-al">
	</form>
	<br/>
	<Button onClick="ajax_request('/control','#frm_sample')">sample</Button>
</body>
</html>

【index.js】

function ajax_request(url,id){
			
	$(document).ready(function() {
		$.ajax({
	       	url: url,
	            	data: $(id).serialize(),
	            	type: 'POST',
	            	success: function(response) {
				alert(response);
				
			},
	      		error: function(error) {
	          		//alert("ERR:" + error);
				
	            	}
		});
	});
}

【index.css】

 

Button {width:100px;height:100px;color:green;}

 


 

$python3 server.py

スマホのブラウザーでアクセス

http://192.168.0.31:8080

 

ルータの設定で、例えば192.168.0.31のローカルIPを持っているサーバーのポート番号8080を開放しておけば、外出先からラズパイを制御できます。

 


 

Be the first to comment

Leave a Reply

Your email address will not be published.


*