2018年10月26日

DSairのWebアプリの作り方

DSairアプリの作り方を、ちゃんと紹介したいと思います。

■用意するもの

・パソコン
・ブラウザ(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の2つを使っています。使用するには、jQueryのjsファイルを呼び出すのと、スタイルシートを呼び出すことの2つが必要です。以下は、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を使わない場合には、この3〜4倍のコードを書かないといけません。

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

webapp_ui.png
posted by yaasan at 06:53 | Comment(0) | 鉄道模型
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。