.NET Gadgeteer モジュールのデモ:Display T35 / TE35 Module (カラータッチスクリーン) ~ Part 3 – タッチイベント処理機能

.NET Gadgeteer のモジュール紹介シリーズ、Display T35 / TE35 モジュール の紹介の 3回目です。
1 回目は こちら、2回目は こちら

 

今回は T35 / TE35 のタッチ対応について紹介します。これで組み込みであってもユーザーとの対話が充実しますね。かつ、Micro ではあっても .NET Framework ファミリーだけあって比較的簡単に UI を実現できるのが分かると思います。

 


ユーザーから何らかの入力を受けるには、ボタンっぽく画面に表示するのがいいですよね。残念ながら標準の .NET Micro Framework は Button コントロールのようなものはないので、Border と Text を組み合わせるといいでしょう。

UIElement は TouchDown (スクリーンに触れた)TouchUp (スクリーンから指を離した) イベントが定義されています。他にも TouchXXX イベントがいくつかあるので、要求に応じて利用してみてください。

今回は Button (に見立てた) Border でイベントを受けてみます。

  1. using System;
  2. using Microsoft.SPOT;
  3. using Microsoft.SPOT.Presentation;
  4. using Microsoft.SPOT.Presentation.Controls;
  5. using Microsoft.SPOT.Presentation.Media;
  6. using Microsoft.SPOT.Touch;
  7. using GT = Gadgeteer;
  8.  
  9. namespace T35WpfDemo3
  10. {
  11.     public partial class Program
  12.     {
  13.         private Border _button;
  14.         private Text _message;
  15.  
  16.         private int _count = 0;
  17.  
  18.         private Brush _normalButtonBrush = new SolidColorBrush(GT.Color.LightGray);
  19.         private Brush _pressedButtonBrush = new SolidColorBrush(GT.Color.DarkGray);
  20.         private Font _font = Resources.GetFont(Resources.FontResources.NinaB);
  21.  
  22.         // This method is run when the mainboard is powered up or reset.   
  23.         void ProgramStarted()
  24.         {
  25.             WpfDemo();
  26.  
  27.             // Use Debug.Print to show messages in Visual Studio's "Output" window during debugging.
  28.             Debug.Print("Program Started");
  29.         }
  30.  
  31.         private void WpfDemo()
  32.         {
  33.             var window = display_T35.WPFWindow;
  34.             var panel = new StackPanel();
  35.             window.Child = panel;
  36.  
  37.             AddTitleBarTo(panel);
  38.             AddContentsTo(panel);
  39.             AddStatusBarTo(panel);
  40.         }
  41.  
  42.         private void AddContentsTo(StackPanel panel)
  43.         {
  44.             var contents = new Canvas();
  45.             contents.Width = 320;
  46.             contents.Height = 196;
  47.  
  48.             _message = new Text(_font, string.Empty);
  49.             _message.ForeColor = GT.Color.Black;
  50.             contents.Children.Add(_message);
  51.             Canvas.SetLeft(_message, 10);
  52.             Canvas.SetTop(_message, 10);
  53.  
  54.  
  55.             _button = new Border();
  56.             _button.Width = 160;
  57.             _button.Height = 50;
  58.             _button.Background = _normalButtonBrush;
  59.  
  60.             var text = new Text(_font, "Click Me !!");
  61.             text.ForeColor = GT.Color.Black;
  62.             text.HorizontalAlignment = HorizontalAlignment.Center;
  63.             text.VerticalAlignment = VerticalAlignment.Center;
  64.             _button.Child = text;
  65.  
  66.             contents.Children.Add(_button);
  67.             Canvas.SetTop(_button, 70);
  68.             Canvas.SetLeft(_button, 80);
  69.  
  70.             _button.TouchDown += new Microsoft.SPOT.Input.TouchEventHandler(_button_TouchDown);
  71.             _button.TouchUp += new Microsoft.SPOT.Input.TouchEventHandler(_button_TouchUp);
  72.  
  73.             panel.Children.Add(contents);
  74.         }
  75.  
  76.         void _button_TouchDown(object sender, Microsoft.SPOT.Input.TouchEventArgs e)
  77.         {
  78.             _button.Background = _pressedButtonBrush;
  79.         }
  80.  
  81.         void _button_TouchUp(object sender, Microsoft.SPOT.Input.TouchEventArgs e)
  82.         {
  83.             _button.Background = _normalButtonBrush;
  84.  
  85.             _count++;
  86.             _message.TextContent = "Tapped : " + _count.ToString() + " time(s)";
  87.         }
  88.  
  89.         private void AddTitleBarTo(StackPanel panel)
  90.         {
  91.             var titlebar = new Border();
  92.             titlebar.Width = 320;
  93.             titlebar.Height = 24;
  94.             titlebar.Background = new SolidColorBrush(GT.Color.Blue);
  95.  
  96.             var titleText = new Text(_font, "WPF Demo");
  97.             titleText.ForeColor = GT.Color.White;
  98.             titleText.HorizontalAlignment = HorizontalAlignment.Center;
  99.             titleText.VerticalAlignment = VerticalAlignment.Center;
  100.  
  101.             titlebar.Child = titleText;
  102.  
  103.             panel.Children.Add(titlebar);
  104.         }
  105.  
  106.         private void AddStatusBarTo(StackPanel panel)
  107.         {
  108.             var statusbar = new Border();
  109.             statusbar.Width = 320;
  110.             statusbar.Height = 24;
  111.             statusbar.Background = new SolidColorBrush(GT.Color.DarkGray);
  112.  
  113.             var titleText = new Text(Resources.GetFont(Resources.FontResources.small), "Running ");
  114.             titleText.ForeColor = GT.Color.White;
  115.             titleText.HorizontalAlignment = HorizontalAlignment.Left;
  116.             titleText.VerticalAlignment = VerticalAlignment.Center;
  117.  
  118.             statusbar.Child = titleText;
  119.  
  120.             panel.Children.Add(statusbar);
  121.         }
  122.     }
  123. }

ちょっと Windows (XP ?) を意識した画面にしてみました。私にしては上出来なデザインです(笑)。

実行するとこうなります。

WP_000798

せっかくなので動画も載せます。 TouchDown でボタンの色を変えて押されていることをユーザーにフィードバックしています。

※ボタンを押す操作がゆっくりなのは、撮影しているカメラのモニター越しで距離感が分からず、探り探りで操作しているためです(笑)

かなり簡単な UI ですが、ユーザーとの対話を実現する一例としてください。


GHI Electronics は Glide という .NET Micro Framework 用の画面デザイン/実行環境も提供しています。これを使うとリッチな画面を作ることができます。今回紹介したレベルの画面でも要件的に充分だということでしたら、上記のコードと実行結果をぜひ参考に。

広告
カテゴリー: .NET Micro Framework タグ: , パーマリンク

.NET Gadgeteer モジュールのデモ:Display T35 / TE35 Module (カラータッチスクリーン) ~ Part 3 – タッチイベント処理機能 への1件のフィードバック

  1. ピンバック: .NET Gadgeteer モジュールのデモ:Display T35 / TE35 Module (カラータッチスクリーン) ~ Part 2 – WPF 描画機能 | 技術との戯れ

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中