新しいものづくりがわかるメディア

RSS


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スターターキット提供)
相撲会場提供:はんだづけカフェ

おすすめ記事

 

コメント

ニュース

編集部のおすすめ

連載・シリーズ

注目のキーワード

もっと見る