メイン･コンテンツまでスキップ

Digital Clock（デジタル･クロック）

TouchGFXのDigital Clockは、アナログ時計の針を使用して時間を表示するAnalogClockとは対照的に、アプリケーションがデジタル･テキストで時間を表示できるようにするウィジェットです。

シミュレータで実行されるDigital Clock（速度を上げた映像）

ウィジェット･グループ​

Digital Clockは、TouchGFX DesignerのMiscellaneousウィジェット･グループ内にあります。

TouchGFX DesignerのDigital Clock

プロパティ​

プロパティ･グループプロパティの説明
Nameウィジェットの名前。 Nameは、TouchGFX Designerおよびコードで使用される一意の識別子です。
LocationXおよびYは、親を基準としてウィジェットの左上隅の位置を指定します。

WおよびHは、ウィジェットの幅と高さを指定します。

Lockは、ウィジェットを現在のX、Y、W、Hでロックするかどうかを指定します。
ウィジェットをロックすると、スクリーンを通したウィジェットとのインタラクションも無効になります。

Visibleは、ウィジェットの可視性を指定します。 ウィジェットを非表示にすると、スクリーンを通したウィジェットとのインタラクションも無効になります。
TimeUse Am/Pmは、時間表示を12時間形式にするのか24時間形式にするのかを指定します。

Display Leading Zero for Hoursは、時間に対して先行ゼロを有効にするかどうかを指定します。

Display Secondsは、秒の表示を有効にするかどうかを指定します。

Initial Timeは、時計が表示する初期時間を指定します。
TextSingle UseまたはResourceは、Digital Clockに使用するテキスト･リソースを指定します。
正しく機能するには、テキストにワイルドカードが必要です。
AppearanceText Colorは、Digital Clockのテキストの色を指定します。

Alphaは、ウィジェットの透明度を指定します。
ウィジェットのアルファ値の範囲は、0～255です。 0は完全に透明で、255は塗りつぶされた状態です。
MixinsDraggableは、実行時にウィジェットをドラッグ可能にするかどうかを指定します。

ClickListenerは、ウィジェットがクリックされたときにコールバックを発行するかどうかを指定します。

FadeAnimatorは、ウィジェットがAlpha値への変更をアニメーション化できるかどうかを指定します。

MoveAnimatorは、ウィジェットがXおよびY値への変更をアニメーション化できるかどうかを指定します。

Time​

Timeプロパティ･グループは、さまざまなプロパティを変更することで、アプリケーションにおける時間の表示方法を調整するために使用されます。 Use Am/Pmを切り替えることで、24時間表示を使用するのか、12時間とAM/PMによる表示を使用するのかを選択できます。 Display Leading Zero for Hoursの切り替えによって、10時より前の時間の表示方法（例: 09:10:00と9:10:00のどちらか）を指定し、Display Secondsで、秒の表示のオン / オフを切り替えます（例: 9:10:00と9:10のどちらか）。

Am/Pmを選択すると、コード生成もわずかに変更されます。 時間を初期化するために、Analog Clockで次の関数:
initializeTime24Hour(uint8_t hour, uint8_t minute, uint8_t second)

を使用する代わりに、次の関数が使用されます（12時間表示の場合）:
initializeTime12Hour(uint8_t hour, uint8_t minute, uint8_t second, bool am)

クロックによって表示される時間を更新するには、次の関数のいずれかを使用できます。
setTime24Hour(uint8_t hour, uint8_t minute, uint8_t second)
setTime12Hour(uint8_t hour, uint8_t minute, uint8_t second, bool am)

インタラクション​

以下のセクションでは、Digital Clockによってサポートされるアクションとトリガについて説明します。

アクション​

標準のウィジェット･アクション説明
Move widget時間の経過に伴ってウィジェットを新しい位置に移動します。
Fade widget時間の経過に伴ってウィジェットのアルファ値を変更します。
Hide widgetウィジェットを非表示にします（可視性をfalseに設定します）。
Show widget非表示のウィジェットを表示します（可視性をtrueに設定します）。

トリガ​

Digital Clockはトリガを発行しません。

パフォーマンス​

Digital Clockは1つのTextAreaで構成され、パフォーマンスに特に目立った影響は与えません。 このため、Digital Clockはほとんどのプラットフォーム上で高速処理のウィジェットであると見なされます。

描画のパフォーマンスの詳細については、「一般的なUIコンポーネントのパフォーマンス」セクションを参照してください。

例​

生成済みコード​

ビューの基底クラスの生成済みコードを見ると、TouchGFX DesignerによるDigital Clockの設定方法がわかります。

mainViewBase.cpp
#include <gui_generated/main_screen/mainViewBase.hpp>
#include "BitmapDatabase.hpp"
#include <texts/TextKeysAndLanguages.hpp>

mainViewBase::mainViewBase()
{
    digitalClock.setPosition(75, 88, 331, 97);
    digitalClock.setColor(touchgfx::Color::getColorFrom24BitRGB(0, 30, 65));
    digitalClock.setTypedText(touchgfx::TypedText(T_SINGLEUSEID2));
    digitalClock.displayLeadingZeroForHourIndicator(true);
    digitalClock.setDisplayMode(touchgfx::DigitalClock::DISPLAY_24_HOUR);
    digitalClock.setTime24Hour(7, 7, 0);

    add(digitalClock);
}

void mainViewBase::setupScreen()
{

}
Tip
ユーザ･コードでは、これらの関数や、DigitalClockクラスで使用可能なその他の関数を使用できます。 ウィジェットの外観を変更する場合には、 digitalClock.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 handleTickEvent();

protected:
    int tickCounter;
    int digitalHours;
    int digitalMinutes;
    int digitalSeconds;
};

#endif // MAINVIEW_HPP

mainView.cpp
#include <gui/main_screen/mainView.hpp>

mainView::mainView()
{
}

void mainView::setupScreen()
{
    mainViewBase::setupScreen();
    digitalHours = digitalClock.getCurrentHour();
    digitalMinutes = digitalClock.getCurrentMinute();
    digitalSeconds = digitalClock.getCurrentSecond();
}

void mainView::tearDownScreen()
{
    mainViewBase::tearDownScreen();
}

void mainView::handleTickEvent()
{
    tickCounter++;

    if (tickCounter % 60 == 0)
    {
        if (++digitalSeconds >= 60)
        {
            digitalSeconds = 0;
            if (++digitalMinutes >= 60)
            {
                digitalMinutes = 0;
                if (++digitalHours >= 24)
                {
                    digitalHours = 0;
                }
            }
        }

        // Update the clock
        digitalClock.setTime24Hour(digitalHours, digitalMinutes, digitalSeconds);
    }
}

TouchGFX Designerの例​

Digital Clockをさらに探索するには、次の例を使用して、TouchGFX Designer内で新しいアプリケーションを作成してみてください。

TouchGFX DesignerのDigital Clock

API参照​

Further reading
  • DigitalClockクラスのAPI参照