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

.NET Gadgeteer のモジュール紹介シリーズ、Display T35 / TE35 モジュール、カラーのタッチスクリーンです。
モジュールの中では豪華な感じのする(笑) モジュールですね。

現在は T35 は販売終了しており、後継の TE35 のみ入手可能です。機能的に同等だと思われますが、私は T35 のみ持っていて TE35 は持っていないので、実際に差異があるのか、差異があるとしてどの程度なのかは分かりません。(すみません)

Display TE35 Module

機能的にリッチなモジュールなので、3回に分けて紹介します。
なお、モジュール紹介のシリーズはメインボードは Cerberus を使ってきましたが、T35 / TE35 は Cerberus では使えません。T35 が要求するコネクターを持っていないためです。このため今回の記事は SpiderHydra および Cobra II で使える内容です。
タッチ非対応で解像度が低いのですが Display N18 モジュールは Cerberus でも使えます。Cerberus な方はディスプレイとしてはそちらを検討してみてください。(紹介記事は別の機会に)

今回紹介するのは SimpleGraphics 機能、文字通り単純な描画機能です。
※2回目に WPF による描画機能、3回目にタッチスクリーンの機能を紹介する予定。

最初にお断りしておくと、SimpleGraphics は「お手軽に描画できます」というものであり、過度な期待はいだかないほうがいいです。スクリーンがシステムからのメッセージを表示するなどの用途に限られる場合には有効ですね。面倒な手続きを踏まずに
SimpleGraphics 機能の中で例外的に(失礼!)便利だなと思うのは DisplayImage メソッドです。カメラモジュールなどとの組み合わせで簡単に画像を表示できるのは大変便利でありがたいです。

今回紹介する機能は以下の通り。モジュール全体に関する機能の一部も今回あわせて紹介してしまいます。

  • モジュール全体に関する情報や操作
    • ディスプレイの解像度を取得
    • バックライトの点灯状態を取得
    • バックライトの点灯/消灯
    • スクリーンの向きを設定 ・・・具体例は 次回 紹介
    • WPF Window を取得 ・・・具体例は 次回 紹介
  • SimpleGraphics 機能
      • ディスプレイの解像度を取得
      • 背景色の設定
      • グラフィックスの描画、消去、消去後の再描画
      • グラフィックス消去後に自動的に再描画するかどうかの設定
      • 矩形を描画
      • 楕円を描画
      • ピクセル単位で描画
      • 文字列を描画
      • 矩形の範囲に文字列を描画
      • 画像を描画 ・・・カメラモジュールの記事で紹介

    それぞれは難解な機能というわけではないので順を追って紹介します。


    ディスプレイの解像度を取得

    まずはモジュール全体に関する情報や操作を紹介します。

    ディスプレイの解像度は想像通り Width, Height で取得できます。といっても、T35 / TE35 に問い合わせると必ず 320, 240 が返ってきますが、ハードコーディングするのもよろしくないしということであればプロパティを使うのがいいでしょうね。

    実際のコードも想像通りだと思いますが、一応、後でまとめて紹介します。

    なお解像度は SimpleGraphics の同名のプロパティでも取得できますのでお好きな方を使ってください。

     

    バックライトの点灯状態を取得、バックライトの点灯/消灯

    バックライトの点灯状態は BBackLightOn プロパティで取得できます。なぜか先頭は “B” が重なっていますが、そんなものだと思いましょう。
    点灯・消灯を操作するには SetBacklight メソッドを使います。後で紹介するデモではタイマーで点灯/消灯を繰り返していますが、実際にはセンサー(照度、赤外線、など)やスイッチモジュールの操作、ディスプレイ自体のタッチなどで点灯するのが正解ですね。

     

    スクリーンの向きを設定、WPF Window を取得

    SimpleGraphics は簡易的な描画をするものですが、.NET Micro Framework では WPF も描画に使えます。
    WPF といっても XAML はサポートされておらず、機能的にも Full .NET には及ばないのですが、それでも小さなデバイスとしてはそれなりに描画にも力を入れてくれているのはうれしいですね。

    SimpleGraphics では画面の向きは固定ですが、WPF を使う場合には 90度回転させた状態や180度回転させた状態で描画を行うことができます。ボードとの結線の都合や要件によっては縦長な画面にしたい場合などに使えますね。

    WPF に関する機能は次の投稿で紹介します。ここでは WPF が使えるよということだけ抑えておいてください。

     


    背景色の設定

    ここからは SimpleGraphics の機能の紹介です。SimpleGraphics はスクリーン全体を覆う簡易描画のためのキャンバスです。

    まずは背景色の設定から。BackgroundColor プロパティを使います。GT.Color の既定の色を指定するなり、FromRGB メソッドで色を指定するなりしてください。

     

    矩形の描画

    矩形の描画は DisplayRectangle メソッドを使います。枠の色、太さ、塗りつぶしの色、左上の座標、矩形のサイズを引数として渡します。
    矩形については、枠の太さ、塗りつぶしの色が指定できて、なかなかいい感じです。描画速度も特に問題ありません。

     

    楕円の描画

    楕円の描画は DisplayEllipse メソッドを使います。ここまでは想像通りなのですが、なんと楕円については枠の太さは指定できません。1 ピクセル固定です。さらに塗りつぶしの色も指定できません。黒です。
    なんとも残念な感じですが、受け入れてそんなものだと思ってください。

     

    ピクセル単位で描画

    SetPixel メソッドでピクセル単位で描画できます。色、座標を渡します。
    ピクセル単位で描画できるので理屈の上ではどんな描画も可能になりますが、速度はちょっと残念な感じです。
    描画するピクセルが多くなると、ジリジリと描画されていくのが見えてしまいます。それこそピンポイントで描画したい時に使うのがいいと思います。

    と、ここまで来て、SimpleGraphics でもう一つ残念なのが、DisplayLine メソッドがないことです。矩形や楕円は描画できるのに直線は描画できません。水平または垂直な直線であれば幅または高さの狭い矩形を描くことで代用できそうですが、残念な仕様です。
    ※あるいは実際に「矩形で代用してよ」ということで実装しなかったのかもしれませんね。なにしろメモリーが潤沢にある環境ではないですから、そういうちょっとした節約でライブラリのサイズを小さくする努力なのかもしれません。

     

    文字列を描画、矩形の範囲に文字列を描画

    文字列描画には2通りのメソッドがあります。DisplayText メソッドDisplayTextInRectangle メソッドです。
    どちらもフォント、色、位置を引数で渡します。違いは DisplayText メソッドは普通に文字列を表示しますが、DisplayTextInRectangle は矩形領域を指定して自動的に折り返して表示するという点です。

    フォントですが、これまた組み込みならではの節約で、 .NET Micro Framework の SDK および .NET Gadgeteer のプロジェクトテンプレートでは2つのフォントのみあらかじめ組み込まれています。残念ながらどちらも英数字のみです。
    不都合がなければこれらを使うのが楽でいいですね。

    Resources.GetFont(Resources.FontResources.NinaB); ・・・大きめのフォント
    Resources.GetFont(Resources.FontResources.small); ・・・小さめのフォント

    とすることでフォントオブジェクトが得られます。これらを DisplayText / DisplayTextInRectangle メソッドに渡します。

    「いや、どうしても別のフォントを使いたい」 ということでしたら、.NET Micro Framework の SDK に含まれる TFConvert コマンド(コマンドラインで実行します、こちらのページ を参考に) で TinyFNT フォーマット形式のフォントファイルを作成してプロジェクトのリソースに追加する必要があります。

     

    画像を描画

    SimpleGraphics は画像(ビットマップ)を描画することができます。カメラモジュールを組み合わせて画像を表示する、などの利用だと 1メソッドで完結するので非常に便利です。

    DisplayImage メソッドがそれです。画像、左上の座標を引数で渡します。

    DisplayImage のサンプルコード/デモは、カメラモジュールの紹介の中で改めて。
    ※ここでやってしまうと、カメラモジュールの時のネタがなくなってしまうのでw


    以上の機能を使った簡単なデモを。

     

    1. using System;
    2. using System.Collections;
    3. using System.Threading;
    4. using Microsoft.SPOT;
    5. using Microsoft.SPOT.Presentation;
    6. using Microsoft.SPOT.Presentation.Controls;
    7. using Microsoft.SPOT.Presentation.Media;
    8. using Microsoft.SPOT.Touch;
    9.  
    10. using Gadgeteer.Networking;
    11. using GT = Gadgeteer;
    12. using GTM = Gadgeteer.Modules;
    13. using Gadgeteer.Modules.GHIElectronics;
    14.  
    15. namespace T35Demo
    16. {
    17.     public partial class Program
    18.     {
    19.         // This method is run when the mainboard is powered up or reset.   
    20.         void ProgramStarted()
    21.         {
    22.             T35Demo();
    23.  
    24.             var timer = new GT.Timer(1000);
    25.             timer.Tick += new GT.Timer.TickEventHandler(timer_Tick);
    26.             timer.Start();
    27.  
    28.             // Use Debug.Print to show messages in Visual Studio's "Output" window during debugging.
    29.             Debug.Print("Program Started");
    30.         }
    31.  
    32.         private void T35Demo()
    33.         {
    34.             var width = display_T35.Width;
    35.             var height = display_T35.Height;
    36.  
    37.             display_T35.SimpleGraphics.BackgroundColor = GT.Color.White;
    38.  
    39.             display_T35.SimpleGraphics.DisplayRectangle(GT.Color.Red, 5, GT.Color.Blue, 10, 10, 80, 100);
    40.             display_T35.SimpleGraphics.DisplayEllipse(GT.Color.Red, 140, 100, 120, 40);
    41.  
    42.             display_T35.SimpleGraphics.DisplayText("Hello", Resources.GetFont(Resources.FontResources.small), GT.Color.Black, 50, 160);
    43.             display_T35.SimpleGraphics.DisplayText("Hello", Resources.GetFont(Resources.FontResources.NinaB), GT.Color.Black, 50, 180);
    44.             display_T35.SimpleGraphics.DisplayText(width.ToString() + ", " + height.ToString(), Resources.GetFont(Resources.FontResources.NinaB), GT.Color.Black, 50, 200);
    45.  
    46.             display_T35.SimpleGraphics.DisplayTextInRectangle("Hello Again", 150, 160, 45, 20, GT.Color.Red, Resources.GetFont(Resources.FontResources.NinaB));
    47.  
    48.             for (uint x = 0; x < 10; x++)
    49.             {
    50.                 for (uint y = 0; y < 8; y++)
    51.                 {
    52.                     display_T35.SimpleGraphics.SetPixel(GT.Color.Black, 250 + x, 180 + y);
    53.                 }
    54.             }
    55.         }
    56.  
    57.         void timer_Tick(GT.Timer timer)
    58.         {
    59.             display_T35.SetBacklight(!display_T35.BBackLightOn);
    60.         }
    61.     }
    62. }

     

    タイマーはバックライトの点灯/消灯をデモするためのもので、実践的な使い方ではないですね。

    SimpleGraphics 描画の実際の結果(バックライト点灯時の状態)はこんな風になります。難しい部分はないと思いますが、それぞれのメソッドの具体的な引数の渡し方の参考にしていただければ。

    WP_000794

    動画でお見せするほどのものでもないんですが、せっかく撮影したので載せておきます。

     

    「こんな簡単な動画見せてるんじゃないよ」 という向きもあろうかと思いますので、描画のパフォーマンスを確認する意味でもう一つ紹介。

    ジョイスティックの位置をディスプレイ上に表示してみます。結線はこんな感じ。

    image

    ソースコードはこうなります。

    1. using System;
    2. using System.Collections;
    3. using System.Threading;
    4. using Microsoft.SPOT;
    5. using Microsoft.SPOT.Presentation;
    6. using Microsoft.SPOT.Presentation.Controls;
    7. using Microsoft.SPOT.Presentation.Media;
    8. using Microsoft.SPOT.Touch;
    9.  
    10. using Gadgeteer.Networking;
    11. using GT = Gadgeteer;
    12. using GTM = Gadgeteer.Modules;
    13. using Gadgeteer.Modules.GHIElectronics;
    14.  
    15. namespace T35Demo2
    16. {
    17.     public partial class Program
    18.     {
    19.         // This method is run when the mainboard is powered up or reset.   
    20.         void ProgramStarted()
    21.         {
    22.             var timer = new GT.Timer(100);
    23.             timer.Tick += new GT.Timer.TickEventHandler(timer_Tick);
    24.             timer.Start();
    25.  
    26.             // Use Debug.Print to show messages in Visual Studio's "Output" window during debugging.
    27.             Debug.Print("Program Started");
    28.         }
    29.  
    30.         void timer_Tick(GT.Timer timer)
    31.         {
    32.             var pos = joystick.GetJoystickPosition();
    33.  
    34.             display_T35.SimpleGraphics.Clear();
    35.             display_T35.SimpleGraphics.DisplayRectangle(GT.Color.Red, 3, GT.Color.Blue, (uint)(60 + pos.X * 200), (uint)(220 – pos.Y * 200), 15, 15);
    36.         }
    37.     }
    38. }

     

    ジョイスティックは 100ミリ秒ごとに位置情報を読み出しています。動画を見ていただくと分かると思いますが、矩形を一つ描くくらいの描画であれば充分追随できていますね。

    繰り返しになりますが、今回紹介した SimpleGraphhics はあくまでも簡易的な描画システムです。もう少し凝りたいということであれば WPF を使うことになります。それは 次の記事 で紹介します。

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

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

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

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

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

    コメントを残す

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

    WordPress.com ロゴ

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

    Twitter 画像

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

    Facebook の写真

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

    Google+ フォト

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

    %s と連携中