Raspberry PiでIoTを始めよう企画
紙相撲が無駄にIoTになった！～Raspberry Piで始めるIoTデバイス入門
次に、HTMLファイルです。
HTMLファイルはdoc-rootに設置します。今回は2プレーヤー分の操作画面 nishi.html と higashi.html 、それと、各ページへのリンクを置いた index.html を用意しました。
index.htmlは普通のHTMLなので、ここではhigashi.htmlの中身を掲載します。nishi.htmlはこれとほとんど同じです。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<title>東</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
var player = 1;
webiopi().ready(function() {
$.each([0, 1, 2, 3, 4], function(i){
var servoButton = webiopi().createButton("servoButton" + i, "(" + (i + 1) + ")", function(){
webiopi().callMacro("pwm", [player, i], enableButton);
disableButton();
});
$("#controls").append(servoButton);
});
var enableButton = function(macro, args, response){
$('button').removeAttr("disabled");
};
var disableButton = function(){
$('button').attr("disabled", "disabled");
};
});
</script>
<style type="text/css">
button {
display: block;
margin: 25px;
width: 160px;
height: 45px;
font-size: 24pt;
font-weight: bold;
color: white;
background-color: blue;
}
button:disabled {
background-color: white;
}
</style>
</head>
<body>
<div id="help" align="center"><img src="img/dohyo2.png"></div>
<div id="controls" align="center"></div>
</body>
</html>
実際に表示される画面はこんな感じ。
では、Javascriptの部分だけご説明していきましょう。
<script type="text/javascript" src="/webiopi.js"></script>
webiopi.jsを必ずロードしておきます。なお、これをロードすることで自動的にjQueryもロードされるようです。
<script type="text/javascript">
var player = 1;
これはプレーヤー指定（西か東か）の変数です。nishi.htmlでは0を指定しています。
webiopi().ready(function() {
$.each([0, 1, 2, 3, 4], function(i){
WebIOPiの準備ができたら、操作ボタンを配置します。今回は（1）～（5）の5つ（プログラム上は0~4番です）を配置するので、jQueryのeachで5回ループします。
var servoButton = webiopi().createButton("servoButton" + i, "(" + (i + 1) + ")", function(){
ボタンを生成しました。creareButtonのパラメータは、こちらにリファレンスがあります。ここでは、ボタンのID、ボタンのラベル文字、押したときのアクション、を指定しました。押された場合……
webiopi().callMacro("pwm", [player, i], enableButton);
サーバ側のPythonスクリプトの中のpwm関数を呼び出してね、という指定です。第2引数はpwm関数に渡すパラメータです。これで先ほどのスクリプトとの連携が見えてきましたね。 第3引数に関数を指定しておくと、サーバ側処理が終わった後に自動的に実行されます。ここではenableButton関数を指定。
disableButton();
ボタンが連打されるのを避けるため、通信が始まったら押せなくするようにしました。前の行でcallMacroの第3引数にenableButtonを指定したので、サーバ側の処理が終わったらボタンは自動的に有効化されます。
});
$("#controls").append(servoButton);
});
生成したボタンを配置しました。
あとはボタンを有効化するenableButton、押せなくするdisableButton、それぞれの関数を定義しています。
var enableButton = function(macro, args, response){
$('button').removeAttr("disabled");
};
var disableButton = function(){
$('button').attr("disabled", "disabled");
};
});
</script>
これでコードの説明は終了です。や、やばい。script.pyとHTML、2つのコードを書くだけでIoTが実現できました！
最後に、GPIOピンに土俵デバイスのコネクタを接続。
そして
sudo webiopi -d -c /etc/webiopi/config
としてWebIOPiを立ち上げれば、IoT紙相撲の完成！Raspberry Pi の起動時に自動的にWebIOPiを立ち上げる方法もチュートリアルに書いてありますので、よかったら参考にしてください。
以上で、メイキングは終了です。
この記事がみなさまの快適なIoT生活の一助となれば幸いです。
取材協力：プラネックスコミュニケーションズ（Cloud Pi提供）
スイッチサイエンス（Raspberry Pi 2スターターキット提供）
相撲会場提供：はんだづけカフェ
