HTML
javascriptを利用しています。余熱さんのサンプルを参考にさせていただきました。
List.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Line Tracing Car</title>
<style type="text/css">
<!--
input[type="button"] {font-size:50; font-weight:bold; height:25%; width:33%; background-color:#999999;}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
var msg130 = "http://flashair/command.cgi?op=130&ADDR=0&LEN=";
var msg131 = "http://flashair/command.cgi?op=131&ADDR=0&LEN=1&DATA=";
var msg106 = "http://flashair/command.cgi?op=106";
var msg190 = "http://flashair/command.cgi?op=190&CTRL=0x00";
var request = new XMLHttpRequest();
function command(url) {
request.open("GET", url, false);
request.send(null);
document.getElementById('RESULT').value = "Result: " + request.responseText;
}
function memwrite(ch) {
request.open("GET", msg131+ch, false);
request.send(null);
document.getElementById('RESULT').value = "Result: " + ch + " " + request.responseText;
}
// -->
</script>
</head>
<body>
<input type="button" value="左" onclick="memwrite('L')" style="background-color:#22FF00;">
<input type="button" value="前" onclick="memwrite('F')" style="background-color:#EEEE00;">
<input type="button" value="右" onclick="memwrite('R')" style="background-color:#0099EE;"><br><br>
<input type="button" value="MAC" onclick="command(msg106)">
<input type="button" value="停止" onclick="memwrite('S')" style="background-color:#FF2222;">
<input type="button" value=" "><br><br>
<input type="button" value="I/O" onclick="command(msg190)">
<input type="button" value="トレース" onclick="memwrite('T')" style="background-color:#00EEBB;">
<input type="button" value="メモリー" onclick="command(msg130 + '8')"><br><br>
<input type="text" id="RESULT" style="WIDTH: 90%; font-size:200%" value="Initialized">
</body>
</html>
6-10行目： ボタンのスタイルシートです。
11-29行目： FlashAirとの通信のためのjavascriptです。
13行目： 共有メモリーから1文字読み出すためのcommand.cgiです。
14行目： 共有メモリーかに1文字書き込むためのcommand.cgiです。
15行目： 無線LANで接続されているデバイスのMACアドレスを取得するためのcommand.cgiです。
16行目： gpioの状態を取得するためのcommand.cgiです。
18-22行目： 共有メモリーへの書き込み以外のcommand.cgiを利用するための関数です。
23-27行目： 共有メモリーへの書き込みをするための関数です。
32-34,36,39行目： ブラウザに
左、前、右、停止、トレースのボタンを表示させます。これらのボタンが押されると、共有メモリーにそれぞれL、F、R、S、Tの文字を書き込みます。。35行目： ブラウザに
MACのボタンを表示させます。このボタンが押されると無線LANで接続されているデバイスのMACアドレスが下の窓に表示されます。37行目： ブラウザにブランクボタンを表示させます。このボタンは未定義です。
38行目： ブラウザに
I/Oのボタンを表示させます。このボタンが押されると、gpioの状態が下の窓に表示されます。35行目： ブラウザに
メモリのボタンを表示させます。このボタンが押されると、共有メモリの内容が下の窓に表示されます。41行目： command.cgiの実行結果を表示させるための窓です。