More than 3 years have passed since last update.

TouchGFXのチュートリアル

Posted at 2020-08-02

TouchGFXのTutorial2を実行

##1. はじめに
1年前に、STマイクロエレクトロニクスさんの懸賞で当たって、STM32F746G Discoveryを頂いていましたが、マイコンに載っているものを触っただけにしていましたが、プログラミングしてみたい題材が見つかったので、TouchGFXのTutorial( https://support.touchgfx.com/docs/tutorials/tutorial-02 )からスタートしてみることにしました。しかし、Tutorialの記述に?という部分がありましたので、修正しながら、動かせる状態にしたので、興味があれば参照されるとありがたいです。シミュレーションだけなら、デバイスが無くとも試すことができます。興味が出たところで、デバイスを買えば良いと思います。

##2 STM32F746G Discoveryとは
STマイクロエレクトロニクスが販売しているDisplay付きのマイコンです。

##3. 開発準備

GUI画面を作るためには、TouchGFXのIDEが必要。
このサイト( https://www.st.com/en/embedded-software/x-cube-touchgfx.html )を訪問し、実行ファイルを保存し、インストールする。

2. 画面にアクションを加えるためには、Visual Studioを使用しました。
　私は、Visual Studio 2017 CommunityとVisual Studio 2019 Communityをインストールしていますが、実行時には、前者が選択されて起動されました。
私が、少し躓いたのは、このVisual Studioとの連携の部分でした。実際は、TouchGFXが吐き出すコードのファイル構造を理解しておけば、全然大した問題ではないという事が後でわかります。

##4. 本題(STMicroelectronicsさんが提供しているTutorial2を真似して実行)
最終的に、作り上げるUIは以下のイメージになります。上のボタンを押すと数値が増えて、テキスト文字の数値が大きくなり、下のボタンを押すと数値が減って、テキスト文字の数値が小さくなるという簡単なサンプルプログラムです。

端折って記述する部分もありますが、こちらの方の内容( https://qiita.com/usashirou/items/4fdbeec5c7c154872b19 )を参考にされるとわかると思います。

上記を実現する順番を以下に示します。
###4.1. 新規作成でプロジェクトを作成する。

Create New Application画面では、
・APPLICATION NAMEで適当に好きな名前を入力。
・APPLICATION DIRECTORYに自分が保存したい場所にフォルダを作る。
(例えば、私は、C:\Users\ユーザー名\Desktop\sandbox としました。)。
・APPLICATION TEMPLATE 自分が使用するデバイス今回は、STM32F746G Discovery Kit
変更する場合は、APPLICATION TEMPLATEの画面領域の下方にマウスを持っていくとCHANGEのボタンが出てくるので、クリックして変更できます。
・UI TEMPLATE　UIのベーステンプレート　今回は、Blank UIを使用する。
　変更する場合は、CHANGEのボタンをクリックして選択する。
作業が終わるとCREATEボタンを押すとしたの画面が現れます。

###4.2. 画面を作る。
Tutorialをそのまま真似して作ることを想定しているので、素材が必要になります。
素材は、ここに( https://support.touchgfx.com/docs/tutorials/tutorial-02 )あるので、PCにダウンロードして持ってきてください。下の赤枠の部分のlinkをクリックするとtouchgfx-tutorial-02.zipファイルをダウンロードできます。

自分で何か新たに作る場合でも、この素材を参考にすれば作れると思います。画像フォーマットは、PNGが基本なのか?
####4.2.1 UIのベースを作る。

Mainに名前を変えると後ほど、GenerateCodeボタンを押した後、MainView.hppとかMainView.cppが生成されます。今は、気にしなくても良いですが、Visual Studioのソリューションでコードを見ることができます。

####4.2.2 背景の張り付け

NameをbackgroudImageとする。
IMAGEをクリックして、background.pngを読み込んでくる。

####4.2.3 ボタン、テキストの配置

・2つのボタンのプロパティ
上に配置したボタン(btnUp)と下に配置したボタン(btnDown)のプロパティは次のようにした。

・テキストの背景とテキストのプロパティ

プロパティの設定での注意点
　アクション実行において、textに数値を入れるときに、TEXT AREAのNameのtextCounterという変数を使うので、入力ミスなどには気を付けてください。

入力完了後、画面右上のRun Simulatorボタンを押して、実行することができます。ただし、このシミュレーショではボタンを押しても、テキスト文字の数値は変化しません。

画面右上のGenerate Codeボタンを押すと、初めに指定しておいたフォルダにファイルが保存されます。

####4.3. アクションコードを埋め込む
　Visual Studioを使って、コードを編集します。下の図に示す場所にApplication.sinファイルが生成されているので、ダブルクリックします。

編集ファイルは、MainView.cpp、MainView.hpp、MainViewBase.hppです。

MainView.cpp

#include <gui/main_screen/MainView.hpp>

MainView::MainView()
{

}

void MainView::setupScreen()
{
    MainViewBase::setupScreen();
}

void MainView::tearDownScreen()
{
    MainViewBase::tearDownScreen();
}

void MainView::btnUpClicked()
{
	touchgfx_printf("btnUpClicked\n");
	counter++;
	if (counter >= 9)
	{
		counter = 9;
	}
	Unicode::snprintf(textCounterBuffer, TEXTCOUNTER_SIZE, "%d", counter);
	textCounter.invalidate();
}

void MainView::btnDownClicked()
{
	touchgfx_printf("btnDownClicked\n");
	counter--;
	if (counter < 0)
	{
		counter = 0;
	}
	Unicode::snprintf(textCounterBuffer, TEXTCOUNTER_SIZE, "%d", counter);
	textCounter.invalidate();

}

MainView.hpp

#ifndef MAINVIEW_HPP
#define MAINVIEW_HPP

#include <gui_generated/main_screen/MainViewBase.hpp>
#include <gui/main_screen/MainPresenter.hpp>

class MainView : public MainViewBase
{
public:
    MainView();
    virtual ~MainView() {}
    virtual void setupScreen();
    virtual void tearDownScreen();
	virtual void btnUpClicked();
	virtual void btnDownClicked();
protected:
	int counter;
};

#endif // MAINVIEW_HPP

MainViewBase.hpp

#include <gui/common/FrontendApplication.hpp>
#include <mvp/View.hpp>
#include <gui/main_screen/MainPresenter.hpp>
#include <touchgfx/widgets/Image.hpp>
#include <touchgfx/widgets/Button.hpp>
#include <touchgfx/widgets/TextAreaWithWildcard.hpp>

class MainViewBase : public touchgfx::View<MainPresenter>
{
public:
    MainViewBase();
    virtual ~MainViewBase() {}
    virtual void setupScreen();

    /*
     * Virtual Action Handlers
     */
    virtual void btnUpClicked()
    {
        // Override and implement this function in Main
    }

    virtual void btnDownClicked()
    {
        // Override and implement this function in Main
    }

protected:
    FrontendApplication& application() {
        return *static_cast<FrontendApplication*>(touchgfx::Application::getInstance());
    }

    /*
     * Member Declarations
     */
    touchgfx::Image BaclGround;
    touchgfx::Button btnUp;
    touchgfx::Button btnDown;
    touchgfx::Image textBackground;
    touchgfx::TextAreaWithOneWildcard textCounter;

    /*
     * Wildcard Buffers
     */
    static const uint16_t TEXTCOUNTER_SIZE = 10;
    touchgfx::Unicode::UnicodeChar textCounterBuffer[TEXTCOUNTER_SIZE];

private:

    /*
     * Callback Declarations
     */
    touchgfx::Callback<MainViewBase, const touchgfx::AbstractButton&> buttonCallback;

    /*
     * Callback Handler Declarations
     */
    void buttonCallbackHandler(const touchgfx::AbstractButton& src);

};

#endif // MAINVIEWBASE_HPP

編集して、Visual Studioでコンパイル実行すると、以下のようになります。

この後、TouchGFXに戻って、デバイスをPCに接続し、Run Targetボタンを押すとデバイス側に実行ファイルが転送され、デバイス上で動作を確認できる。

###5. おわりに

この記事で書きたかった事って、ここの投稿と同じ問題に遭遇したが、textCounterのNameが関わっているため、コードとの関わりを理解しないとうまく動かないよという事。
( https://community.st.com/s/question/0D50X0000AlfI7X/missing-variables-textcounterbuffer-and-textcountersize )
Visual Studioとの連携方法。

次は、UIとブラシレスDCモータとの連携を検討してみたいと思います。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up