FlashAirを使ったラジコンカーを作ったので、WiFi接続で動かすためのJavascriptを作る。
画面上に９つのボタンを配置して、十字ボタンは[前進]、[後進]、[ターン右]、[ターン左]に割り当てる。
残りは音を鳴らすボタンにした。
HTML5では動画、音声のデコードをブラウザ側で持っているので、再生タグが使えるのでこれを使わない手はない。
手元のスマホとかタブレットで音がなるのである！。
Bluetoothで同様のおもちゃがあるけれど、これはそれの発展型。
音や動画が手元から流れるのでした。
んで音のデータはMP3ファイルをFlashAir内の任意のフォルダー（例の場合FlashAirに設けた"/data"フォルダ下）に保存して、ボタン押しのイベントでそれを読み出してWiFi越しで再生するように仕掛ける。
ボタンの押すイベントに諸々の処理を施して完成〜♪。
後は実際に動かしている動画を撮るかな〜。
つーことでまた続く。w
【FlashAirを使ったWiFiラジコンカー 操作JavaScript ソース】
（HTML5を使ったScript等はその手の解説サイトを見てもらえれば分かってもらえると思います。）
|
|
<html>
<head>
<meta charset="UTF-8">
<title>FlashAir Car Remote Control</title>
</head>
<script language="javascript" type="text/javascript">
<!--
//関数：FlashAirに対してHTTP通信 GETをする
function flashair_get( param ){
var request = new XMLHttpRequest();
request.open("GET", param, false);
request.send(null);
//通信結果
document.getElementById('RESULT').value = (request.responseText+"\r\n");
}
//関数：ロード時実行
function onLoad(){
get_version(); //最初にFlashAirのバージョン取得
gpio_off(); //んで、各ポートをオフにする
}
//関数：バージョン表示
function get_version(){
var ver = "http://flashair/command.cgi?op=108";
var request = new XMLHttpRequest();
request.open("GET", ver, false);
request.send(null);
document.getElementById('VERSION').value = (request.responseText);
}
//関数：GPIOポートをすべてLow
function gpio_off(){
var url = "http://flashair/command.cgi?op=190&CTRL=0x1f&DATA=0x00";
flashair_get(url);
p = 0x00;
}
//関数：任意のポートをHigh/Lowにする
var send_mess = "http://flashair/command.cgi?op=190&CTRL=0x1f&DATA=0x";
var p = 0x00;
function gpio_remo(port){
switch( port ){
case -1: //SE1
var sound2 = document.getElementById('se1');
sound2.play();
break;
case -2: //SE2
var sound3 = document.getElementById('se2');
sound3.play();
break;
case -3: //SE3
var sound4 = document.getElementById('se3');
sound4.play();
break;
case -4: //SE4
var sound5 = document.getElementById('se4');
sound5.play();
break;
case 1: //[↑]前進
gpio_off();
p |= (0x04+0x08); //D1+D2
url = send_mess + p.toString(16);
flashair_get(url);
//BGM スタート
var sound1 = document.getElementById('bgm2');
sound1.play();
break;
case 2: //[＜○]左旋回
gpio_off();
p |= (0x02|0x08); //D0+D2
url = send_mess + p.toString(16);
flashair_get(url);
break;
case 3: //[■]停止
gpio_off(); //All Off
break;
case 4: //[○＞]右旋回
gpio_off();
p |= (0x04+0x01); //D1+CMD
url = send_mess + p.toString(16);
flashair_get(url);
break;
case 5: //[↓]後進
gpio_off();
p |= (0x02|0x01); //D0+CMD
url = send_mess + p.toString(16);
flashair_get(url);
break;
}
}
// -->
</script>
<AUDIO id="bgm1"><source SRC="/data/audio/MarchDrums.mp3"></AUDIO>
<AUDIO id="bgm2"><source SRC="/data/audio/And I Love Car.mp3"></AUDIO>
<AUDIO id="se0"><source SRC="/data/audio/gun.mp3"></AUDIO>
<AUDIO id="se1"><source SRC="/data/audio/qq.mp3"></AUDIO>
<AUDIO id="se2"><source SRC="/data/audio/bike.mp3"></AUDIO>
<AUDIO id="se3"><source SRC="/data/audio/kuraku02.mp3"></AUDIO>
<AUDIO id="se4"><source SRC="/data/audio/kuraku01.mp3"></AUDIO>
<AUDIO id="se5"><source SRC="/data/audio/r2d2-5.mp3"></AUDIO>
<AUDIO id="se6"><source SRC="/data/audio/r2d2-6.mp3"></AUDIO>
<AUDIO id="se7"><source SRC="/data/audio/r2d2-7.mp3"></AUDIO>
<AUDIO id="bgm3"><source SRC="/data/audio/Star Wars.mp3"></AUDIO>
<!-- ロードされたとき、ポートを全てOFFする -->
<body onLoad="onLoad()" style="background-image: url(/data/pic/car.jpg);">
<p><input type="text" id="VERSION" value="FlashAir Version=" style="width:450px"></p>
<P>FlashAir GPIO スイッチ</P>
<form>
<FIELDSET>
<LEGEND>リモコン</LEGEND>
<table>
<tr>
<td width="160" hight="160">
<input type="button" value="♪1" onclick="gpio_remo(-1)" style="WIDTH: 160px; HEIGHT: 160px;FONT-SIZE: 30px">
</td>
<td>
<input type="button" value="↑" onclick="gpio_remo(1)" style="WIDTH: 160px; HEIGHT: 160px;FONT-SIZE: 60px">
</td>
<td width="160" hight="160">
<input type="button" value="♪2" onclick="gpio_remo(-2)" style="WIDTH: 160px; HEIGHT: 160px;FONT-SIZE: 30px">
</td>
</tr>
<tr>
<td>
<input type="button" value="＜○" onclick="gpio_remo(2)" style="WIDTH: 160px; HEIGHT: 160px;FONT-SIZE: 30px">
</td>
<td>
<input type="button" value="■" onclick="gpio_remo(3)" style="WIDTH: 160px; HEIGHT: 160px;FONT-SIZE: 60px">
</td>
<td>
<input type="button" value="○＞" onclick="gpio_remo(4)" style="WIDTH: 160px; HEIGHT: 160px;FONT-SIZE: 30px">
</td>
</tr>
<tr>
<td width="160" hight="160">
<input type="button" value="♪3" onclick="gpio_remo(-3)" style="WIDTH: 160px; HEIGHT: 160px;FONT-SIZE: 30px">
</td>
<td>
<input type="button" value="↓" onclick="gpio_remo(5)" style="WIDTH: 160px; HEIGHT: 160px;FONT-SIZE: 60px">
</td>
<td width="160" hight="160">
<input type="button" value="♪4" onclick="gpio_remo(-4)" style="WIDTH: 160px; HEIGHT: 160px;FONT-SIZE: 30px">
</td>
</tr>
</td></tr></table>
</FIELDSET>
</form>
<input type="text" id="RESULT" value="結果＝" style="width:450px">
<p>
</p>
</body>
</html>
|
コメント