Xamarin.Formsで鉄道模型を制御してみた

Xamarin.Formsで
鉄道模型を制御してみた
2015年10月3日
綾瀬ヒロ
Twitter @ayasehiro
第6回 Japan Xamarin User Group Conference 東京
2015/10/3 1All rights reserved. Copyright(C) 2015 AYASE Hiro

目次
1. 自己紹介
2. 事例紹介（本業）
3. 事例紹介（趣味）
・Xamarin.Formsで作った鉄道模型制御アプリ
・デモ

１．自己紹介
2015/10/3All rights reserved. Copyright(C) 2015 AYASE Hiro 3

１．自己紹介
 綾瀬ヒロ（AYASE Hiro）※今日はハンドルネームで
Twitter @ayasehiro
 本業某高速鉄道の輸送管理システムのSE
プロマネ
アーキテクチャ設計
新規技術検証・新規システムの企画・構想
 趣味プログラミング・電子工作・鉄道模型
スキー・ダイビング・写真

１．自己紹介
 ご存知の方、いらっしゃいますか？
偽ペルソナウェアwith”偽春菜”
あれ以外の何かwith”偽春菜”
何か。（仮）
何か
伺か ←いまココ
公式サイト：
http://usada.sakura.vg/

１．自己紹介
 趣味のプログラミング
代表作？『何かon林檎』
2000年頃、ごく一部で流行った
Windows用デスクトップマスコットフリーソフト「偽春菜」を
REALbasicでMacOS9に移植してました。

１．自己紹介
 趣味のプログラミング
代表作？『何かon林檎』
雑誌収録していただきました。

１．自己紹介
 自宅の庭にGゲージ鉄道模型を敷設してます。

２．事例紹介（本業）

 業務用のiOSアプリを開発することに。
 将来的な要員確保と柔軟性
工期：３ヶ月。時間がないので直轄で作った
とりあえずiPad向けのみ
社内でObjective-Cを書ける要員が１人確保できた
Objective-CでiOSアプリを製作した
いつまでもiOSデバイスである保証がない
社内にObjective-C技術者が少ない
社内には、業務システム開発でC#/.NET技術者は多い
そうだXamarinどうよ？

 というわけで、現在、Xamarinの技術検証やってます
 管理者として
若手にXamarinの技術検証をやってもらってます
管理者の自分としても、どんなもんか試してみたい
仕事中はプログラミングしている時間はない
趣味でやればいいじゃない
ただ、プログラミングしていてもつまらないので
自分の趣味分野において、活用できるものを作ることにしました。
実装比較：
Objective-C
Xamarin + Storyboard
Xamarin.Forms

３．事例紹介（趣味）
Xamarin.Formsで作った鉄道模型制御アプリ

 今回作ったもの
「アタッシュケース型Nゲージ鉄道模型ミニレイアウト」
本日持参！
休憩時間等に
ご覧ください

「アタッシュケース型Nゲージ鉄道模型ミニレイアウト」の制御アプリ
列車の在線位置を表示
各種操作する部分
iOSアプリ
Xamarin.Formsで作成

「アタッシュケース型Nゲージ鉄道模型ミニレイアウト」
マイコン
Arduino
共有メモリ
モータドライバ
モータドライバ
PWM
出力
デジタル
IO出力
車両のモーター
分岐器線路
フォトカプラ線路（電流）
デジタル
IO入力
無線LAN接続
FlashAirのWebAPIを制御アプリからリクエストして
共有メモリを読み書き（ステータス情報を読み込み・更新）
ArduinoでFlashAirの共有メモリ上の
ステータス情報を周期的に読み込み、
PWM出力・デジタルI/O出力を行う

 Xamarin.Formsでの実装方の紹介
在線表示
ImageをAbsoluteLayoutで同じ座標に
重ねて表示。
ステータス情報（在線センサーの値）
をFlashAirから周期的に読み取り、
重ねたImageのOpacityを1.0／0.0と切
り替えて、表示を切り替える
列車の在線位置を表示

 在線表示の実装方の紹介
表示用の透過PNG画像ファイルを作成します。
line0.png line1.png line2.png
line3.png line4.png

line0.pngのみOpacity=1.0、それ以外はOpacity=0.0とする。
var lineImage = new Image {
Source = ImageSource.FromResource(“MyApp.images.line0.png"),
Opacity = 1.0,
BackgroundColor = Color.White,
};
var lineImage1 = new Image {
Opacity = 0.0,
};
〜略〜
var lineImage4 = new Image {
Opacity = 0.0,
};
var layoutLineImage = new AbsoluteLayout ();
layoutLineImage.Children.Add(lineImage, new Rectangle(0, 10, 600, 400));
layoutLineImage.Children.Add(lineImage1, new Rectangle(0, 10, 600, 400));
〜略〜
layoutLineImage.Children.Add(lineImage4, new Rectangle(0, 10, 600, 400));

１秒周期でステータス情報を読み取り、値に応じてOpacity値を変える。
Device.StartTimer (new TimeSpan (0, 0, 1), () =>
{
Device.BeginInvokeOnMainThread (async () =>
{
string strState = await getFlashairSharedMem();
if(strState.Substring(8, 1) == "1"){
lineImage1.Opacity = 1.0;
}
else{
}
〜略〜
if(strState.Substring(11, 1) == "1"){
}
else{
}
});
return true;
});

 Xamarin.Formsの実装方の紹介
操作用ボタン
各種操作する部分
２つの方法を試しました
（方法１）
ImageとButtonを重ねて表示
（方法２）
ImageにTapGestureRecognizerを
追加する

Opacity = 1.0,
};
var button_speedup = new Button {
Opacity = 0.0,
};
button_speedup.Clicked += async (sender, e) =>
{
〜略〜
};
layoutSpeed.Children.Add(button_speedup, new Rectangle(XXX, YYY, 120, 120));
 操作用ボタンのタップ実装方の紹介（方法１）
ImageとButtonをAbsoluteLayoutで同じ座標位置に重ねて表示。
ButtonのClickedイベントにタップされたときの処理を記述する。
問題あり！
iOSでは、Opacityの定義不要。
Opacity=0.0だとClickedイベント拾えず。
一方…
Androidでは、Opacity=0.0必須。

 操作用ボタンのタップ実装方の紹介（方法２）
ImageにTapGestureRecognizerを追加して、
Tappedイベントにタップされたときの処理を記述する。
Opacity = 1.0,
};
var icon_run_speed_up_tgr = new TapGestureRecognizer ();
icon_run_speed_up_tgr.Tapped += async (sender, e) =>
{
〜略〜
};
icon_run_speed_up.GestureRecognizers.Add(icon_run_speed_up_tgr);

最後に…

最後に
 最新作：Gゲージ鉄道模型の遠隔制御システム
最近、流行り？の
WiFiモジュール
ESP-WROOM-02
（ESP8266）
もちろん
Xamarin.Formsで作成
無線LANで
遠隔操縦可能

最後に
 最新作：Gゲージ鉄道模型の遠隔制御システム
ESP8266でGゲージ車両を遠隔制御（LGB 22300）屋外試運転
https://www.youtube.com/watch?v=S-FcjC__Zq0
ESP8266でGゲージ車両を遠隔制御（LGB 22300）
https://www.youtube.com/watch?v=HqhPZ8RPOL4

ご静聴ありがとうございました
利用フォント：「国鉄方向幕書体OTF」
http://makufont.dip.jp/memo/?page_id=1178

参考
 そのほか、電子工作ネタは以下で紹介しています。
日経Linux2015年5月号に
特集記事「Arduinoで鉄道模型を自動運転」を寄稿。
MacとArduinoで、鉄道模型を自動運転する装置
Macのソフトは、Xojo（旧REALbasic）で作成。
日経Linux2015年5月号

参考
Maker Faire Tokyo 2015の東芝FlashAirブースで
配布された「FlashAir同人誌2」に寄稿しました。
「FlashAirの共有メモリを使い倒せ！」
FlashAir同人誌２

参考
東芝FlashAirの開発者向けサイトにて、
ユーザーチュートリアルを寄稿しました。
FlashAir Developers

Xamarin.Formsで鉄道模型を制御してみた

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (18)

Xamarin.Formsで鉄道模型を制御してみた