Visual TFTのImageコンポーネントを使ってTFTディスプレイ上に画像(写真)を表示してみたいとおもいます。
Imageコンポーネントのヘルプを見ると以下の通りになっています。

The Image component is used to display images on the screen, and can have the following properties :

Property Description Valid Values
Name Component name. Name should not contain spaces, special characters etc. Since these names are used to create compiler code – they should be valid identifiers.
Left Distance from the left edge (in pixels). Depending on the display size.
Top Distance from the top edge (in pixels). Depending on the display size.
Picture Path Path to the desired picture *.BMP, *.JPG, *.JPEG image.
Picture Ratio Enlarges the image by a given number. Must be an integer.
Visible Sets component to be visible or not.
  • True – Visible.
  • False – Not visible.
  • Active Sets component to be active for Touch Panel events.
  • True – Active.
  • False – Not active.
  • OnUp Double click the edit field to set the OnUp event. OnUp handler routine.
    OnDown Double click the edit field to set the OnDown event. OnDown handler routine.
    OnClick Double click the edit field to set the OnClick event. OnClick handler routine.
    OnPress Double click the edit field to set the OnPress event. OnPress handler routine.

    Picture Path プロパティを見ると画像ファイルはBMPとJPGが可能なようなので、液晶サイズ320*240に合わせた画像ファイルをあらかじめ準備しました。
    また、Picture Ratioというプロパティもあり画像を拡大することもできるようです。ただ、整数値しか受け付けてくれないので段階的な拡大になってしまうと思われます。
     
     

    Visual TFTから新規プロジェクトでScreen1にImageコンポーネントを置いてPicturePathプロパティで320*240のJPG画像を指定

     

    次にメインメニュー[Screen]-[Add]でScreenを追加します。追加したScreen2にImageコンポーネントを置いてPicturePathプロパティで別のJPGファイルを指定

     

    Screen1とScreen2のOnclickイベントハンドラを
    // Event Handlers
    void Image1Click() {
    DrawScreen(&Screen2);
    }

    void Image2Click() {
    DrawScreen(&Screen1);
    }
    のように記述します。これで、Screen1の画像をクリックするとScreen2の画像が表示され、Screen2の画像をクリックするとScreen1の画像が表示されるはずです。
     


     

    ソースコードを生成します。

     

    プロジェクト名TEST2に対して以下の
    TEST2.vft      Visual TFT Project File
    mmmbimg1,mmbimg2    表示用JPGファイル
    TEST2_Code     MikroC for PIC32 用ソースコード
    ファイルとフォルダになります。

     

    ソースコードのフォルダ内は以下のファイル構成になります。

     

    生成されたソースをmikroc for PIC32で開き、Buildします。

     

    生成されたhexファイルをブートローダでアップロードします。

     

    プログラムを実行させ動作を確認してみます。起動時はScreen1にセットした画像が表示されます。

     

    画面をクリックすると、Screen2にセットした画像に切り替わります。

     

    画像の切り替わりは瞬時ではなく一瞬無地の下地が見え上から下に向かって描画されていくのが認識できます。
     
    PIC32MX460F512Lは自分にとっては新しいデバイスですが、開発ボードを使うと初期設定部分がアプリケーションのほうで勝手にやってくれるので、初期設定の不備から動作しないというよくある現象に悩まされないのでありがたいです。
    この辺あたりまではPIC32MX460F512Lのデータシートを読まずに到達できます。

    Tags: ,

    Leave a Reply

    This blog is kept spam free by WP-SpamFree.

    5 visitors online now
    0 guests, 5 bots, 0 members
    Max visitors today: 9 at 03:12 am UTC
    This month: 16 at 10-05-2017 05:28 am UTC
    This year: 42 at 01-23-2017 11:11 am UTC
    All time: 133 at 05-04-2015 11:06 pm UTC