■用意するもの
・パソコン
・ブラウザ(Chrome、Firefoxなど)
・DSair1か、DSair2
■どこから制御するかを考える
DSairには、FlashAir W-04を使ったWebサーバーが搭載されてます。
なので、FlashAirのSDカードの中の隠しフォルダSD_WLANの中に、List.htmというファイル名でHTML5/JavaScriptで書いたWebAppを置くと、http://flashair/でアクセスしたときに、ブラウザで操作画面が表示されます。
この仕組みは、FlashAir Developersに詳しく書いてあります。
■最初の準備
ファイル名はList.htmとします。なお、FlashAirの中に置かなくても、FlashAirにアクセスできるPCに置いても普通に動きます。
list.htm
たぶん、みなさんがまともにDSairのアプリに手を付けないのは、意味不明な命令がたくさん並んでいるからだと思います。
$(function () {
$('#funcbox1').buttonset();
$('#protcolset').buttonset();
$("#protcolset_acc").buttonset();
$('#addrselector').buttonset();
$(radio_adr1_label).text("3");
$(radio_adr2_label).text("-");
$(radio_adr3_label).text("-");
$(radio_adr4_label).text("-");
$('input[type="checkbox"]').button();
$('#tabcontrol').tabs({
fx: {
opacity: 'toggle',
duration: 'fast'
}
});
});
これは、jQueryという外部JavaScriptライブラリを使っているためです。このライブラリが、$という文字を使った独特の命令や記述方法を持っていますが、単にライブラリなので、こういうものだと覚えて頂ければと思います。
jQuery本体と、ボタンなどのUIの命令を追加したjQueryUIの２つを使っています。使用するには、jQueryのjsファイルを呼び出すのと、スタイルシートを呼び出すことの２つが必要です。以下は、FlashAirの中の絶対パスを指定しています。またファイル名も短くしてます。適宜、修正して下さい。
<link rel="stylesheet" href="/SD_WLAN/c/jqui.css" />
<link rel="stylesheet" href="/SD_WLAN/c/jquery-ui-1.12.icon-font.min.css" />
<script src="/SD_WLAN/c/jq.js"></script>
<script src="/SD_WLAN/c/jqui.js"></script>
jQueryを使うだけで、いろいろな機能が入っているおかげで、コード量が減らせるので重宝しています。
たとえば、以下はDSairのファームウェアにパワーオン・オフを命令する関数ですが、こんなにアッサリと書くことが出来ます。もしjQueryを使わない場合には、この３〜４倍のコードを書かないといけません。
function PowerOn(inPon) {
var url = "http://flashair/command.cgi?op=131&ADDR=0&LEN=64&DATA=PW(" + inPon + ")";
$.get(url, function (data) {});
}
こんな感じで、機関車を動かす関数を書くと以下のようになります。
function LocSpeed(inLocAddr, inSpeed) {
var url = "http://flashair/command.cgi?op=131&ADDR=0&LEN=64&DATA=SP(" + inLocAddr+ "," + inSpeed + ",2)";
$.get(url, function (data) {});
}
inLocAddrには、49152を足した値を入れます。アドレス3なら、49152+3=49155です。inSpeedには、0-1024の値を入れます。
■実際に入れ込んだ場合
上記のコードを入れた物が、以下のWebアプリとなります。
webapp_2.zip
