読者です 読者をやめる 読者になる 読者になる

Raspberry Π

Raspberry Piでいろんなことをやってみようというブログです。

mincraft

第18回 Raspberry Piでラジコンを作る。

今回はスマホのWebブラウザからラズコンを操作するための処理を作ります。


f:id:taka230035:20170306084432p:plain:w300



前回の記事は以下です。

rasp0035.hatenablog.com





webサーバ化までの作業

まずlighttpd と php をラズパイにインストールします。
以前の投稿、第9回 Raspberry Piでラジコンを作る。を参照にしてください。

rasp0035.hatenablog.com


前回はラズパイ3でしたが、今回はラズパイzeroを使用しました。
ですので、私の場合は、OSも入れ替えたので、本作業が必要となります。

すでに導入済みの場合は省いて良い工程です。
ここではインストールや設定方法の記載はしません。上記の記事を参照してください。

lighttpdphpのインストールにより、スマホからローカル環境でラズパイへのWebページへ接続できるようになりました。
f:id:taka230035:20170306085318p:plain:w200



phpページの作成

次にphpページの作成となります。
今回はダブルギアボックスに変更したので、右旋回と左旋回が出来るようになったと思っております。
なので、以前のphpプログラムから以下の仕様に修正いたします。
※後退については1つだけのモーターでも実装可能です。

・右旋回rightボタンの追加
左旋回leftボタンの追加
・後退のbackを追加します。



rightは右のタイヤだけ止めて、左のタイヤだけ前進するようにします。
leftは左のタイヤを止めて、右のタイヤだけ前進するようにしました。

上記の仕様より、phpのプログラムは以下のようにしました。
moter.php

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="style.css" type="text/css">
<title>moter</title>
</head>
<body>

<form method="POST" action="">
<p class="sample1">
<input type="submit" value="left" name="button">
 <input type="submit" value="go" name="button"> 
<input type="submit" value="right" name="button">
</p>
</form>

</br>

<form method="POST" action="">
<p class="sample2">
<input type="submit" value="init" name="button">
<input type="submit" value="stop" name="button">
</p>
</form>

</br>

<form method="POST" action="">
<p class="sample2">
<input type="submit" value="back" name="button"> 
</p>
</form>


<?php
if (isset($_POST["button"])) {
    switch (htmlspecialchars($_POST["button"], ENT_QUOTES, "UTF-8")) {
        case "left": shell_exec("sh ./left.sh"); break;//左旋回
        case "go": shell_exec("sh ./start.sh"); break;//直進
        case "right": shell_exec("sh ./right.sh"); break;//右旋回
        case "init": shell_exec("sh ./init.sh"); break;//初期化
        case "stop": shell_exec("sh ./stop.sh"); break;//停止
        case "back": shell_exec("sh ./back.sh"); break;//後退
        default:  echo "error"; exit;
    }
}
?>
</body>
</html>



見た目にもこだわろうと思い上記phpスタイルシートも適用しております。
cssのプログラムは以下のようにしました。
style.css

p.sample1 {margin: 100px 0px 0px 0px;}
p.sample2 {margin: 0px 0px 0px 65px;}



phpから受け渡される直進・旋回・初期化・停止・後退のシェルプログラムは以下のようにしました。


start.sh //直進

gpio -g write 23 1
gpio -g write 24 0
gpio -g write 17 1
gpio -g write 18 0


left.sh //左旋回

gpio -g mode 23 0
gpio -g mode 24 0
gpio -g mode 17 1
gpio -g mode 18 0


right.sh //右旋回

gpio -g write 23 1
gpio -g write 24 0
gpio -g write 17 0
gpio -g write 18 0


init.sh //初期化

gpio -g mode 23 out
gpio -g mode 24 out
gpio -g mode 17 out
gpio -g mode 18 out


stop.sh //停止

gpio -g write 23 0
gpio -g write 24 0
gpio -g write 17 0
gpio -g write 18 0


back.sh //後退

gpio -g write 23 0
gpio -g write 24 1
gpio -g write 17 0
gpio -g write 18 1


スマホブラウザ上の見た目は以下となります。
f:id:taka230035:20170306084432p:plain:w200
はい、見た目にこだわると言いながら、相変わらずしょぼいですね

この状態でブラウザ上のボタンを押してみて、ラズコンが動けば成功となります。
動かない場合は不具合の切り分けを行う必要があります。

・コンソール上でシェルを実行してみる
⇒うまくいく場合は、phpプログラムのwebサーバ側に問題あり。
⇒シェルもうまくいかない場合は、GPIOの方に問題あり。

などが挙げられます。


今回は以上です。
そして、次はいよいよラズコンを動かしたいと思います。
感動のラストとなるでしょうか。
以下のリンクよりご確認ください。

rasp0035.hatenablog.com