در این آموزش می آموزید که چگونه چندین صفحه را در یک برنامه ایجاد کنید و داده ها را بین دو صفحه به اشتراک بگذارید. ما برنامه ای ایجاد می کنیم که یک ساعت را شبیه سازی می کند، که از یک صفحه برای تعیین ساعت و دقیقه استفاده می کند و زمان تعیین شده را به صفحه دیگری که ساعت را اجرا می کند منتقل می کنیم.

همچنین می توانید نحوه استفاده از TouchGFX Designer را برای ایجاد انیمیشن های مبتنی بر interaction مانند تغییرات صفحه نمایش را یاد بگیرید.

یک فایل تصویری دیگر، Settingbackground.png وارد کنید. ویجت تصویر جدید را وارد کنید.

نام آن را background_Img بنویسید. دو دکمه اضافه کنید. البته فایل تصویری آن ها را هم به برنامه اضافه کنید.

اسکرین تنظیم ساعت

صفحه نمایشی که در آن ساعت و دقیقه قابل تنظیم است و به صفحه نمایش ساعت ارسال می شود. این اسکرین شامل دو text box است که شامل زمان مورد نظر برای ساعت و دقیقه است. برای تنظیم مقدار در text box ها از دکمه های بالا و پایین استفاده می شود. برای ذخیره مقادیر انتخاب شده از دکمه Save استفاده می شود. در آخر برای رفتن به صفحه اصلی با فشار دادن دکمه Clock این کار ار انجام می دهیم.

تنظیم ویجت های اسکرین تنظیم ساعت را مطابق جداول زیر انجام دهید.

WidgetProperties
ImageName: background Location:X: 0, Y: 0 Image: main_bg_texture_800x480.png
Text AreaName: textAreaHourCaption Text: Hour Typography: 20px Alignment: Center Appearance: Color: #FFFFFFFF
Text AreaName: textAreaHour Text: Initiail Value: 09 Buffer size: 3 Typography: 80px Alignment: Center Appearance: Color: #FFFFFFFF
Text AreaName: textAreaMinuteCaption Text: Minute Typography: 20px Alignment: Center Appearance: Color: #FFFFFFFF
Text AreaName: textAreaMinute Text: Wildcard 1: Initiail Value: 59 Buffer size: 3 Typography: 80px Alignment: Center Appearance: Color: #FFFFFFFF
WidgetProperties
ButtonName: buttonHourUp Image: Released Image: Up_arrow.png Pressed Image: Up_arrow_pressed.png
ButtonName: buttonHourDown Image: Released Image: Down_arrow.png Pressed Image: Down_arrow_pressed.png
ButtonName: buttonMinuteUp Image: Released Image: Up_arrow.png Pressed Image: Up_arrow_pressed.png
ButtonName: buttonMinuteDown Image: Released Image: Down_arrow.png Pressed Image: Down_arrow_pressed.png
Button With LabelName: buttonSave Text: Save Typography: 25px Alignment: Center Text Appearance Released Color: #FF424242 Pressed Color: #FFA6A6A6 Image: Released Image: btn_round.png Pressed Image: btn_round_pressed.png
ButtonName: buttonMinuteDown Image: Released Image: Down_arrow.png Pressed Image: Down_arrow_pressed.png

با استفاده از عناصر گرافیکی تنظیم شده، مرحله بعدی اضافه کردن interaction برای دکمه ها است که طبق جدول زیر تنظیم کنید.

InteractionProperties
Hour_up_button_is_clickedTrigger: Button is clicked Clicked Source: HourButtonUP Action: Call new virtual function Function Name: buttonHourUpClicked
Hour_down_button_is_clickedTrigger: Button is clicked Clicked Source: HourButtonDOWN Action: Call new virtual function Function Name: buttonHourDownClicked
Minute_up_button_is_clickedTrigger: Button is clicked Clicked Source: MinuteButtonUP Action: Call new virtual function Function Name: buttonMinuteUpClicked
Minute_down_button_is_clickedTrigger: Button is clicked Clicked Source: MinuteButtonDOWN Action: Call new virtual function Function Name: buttonMinuteDownClicked
Save_button_is_clickedTrigger: Button is clicked Clicked Source: buttonSaveHour Action: Call new virtual function Function Name: buttonSaveHourClicked

با توابع virtual ایجاد شده، ما با اعلام چهار تابع برای دکمه هایی بالا و پایین شروع می کنیم. برای اعمال مقادیر به ساعت و دقیقه، دو کانتر نیز اضافه می شود.

بنابراین کد زیر باید به ClockSettingScreenView.hpp اضافه شود.

ClockSettingScreenView.hpp

#ifndef CLOCKSETTINGSCREENVIEW_HPP
#define CLOCKSETTINGSCREENVIEW_HPP

#include <gui_generated/clocksettingscreen_screen/ClockSettingScreenViewBase.hpp>
#include <gui/clocksettingscreen_screen/ClockSettingScreenPresenter.hpp>

class ClockSettingScreenView : public ClockSettingScreenViewBase
{
public:
    ClockSettingScreenView();
    virtual ~ClockSettingScreenView() {}
    virtual void setupScreen();
    virtual void tearDownScreen();
    //for clock
    virtual void buttonHourUpClicked();
    virtual void buttonHourDownClicked();
    virtual void buttonMinuteUpClicked();
    virtual void buttonMinuteDownClicked();
protected:
    int16_t hour;
    int16_t minute;
};

#endif // CLOCKSETTINGSCREENVIEW_HPP

هنگام فشار دادن دکمه، مقدار مربوطه برای ساعت تغییر می کند کد ClockSettingScreenView.cpp به صورت زیر خواهد بود.

ClockSettingScreenView.cpp

#include <gui/clocksettingscreen_screen/ClockSettingScreenView.hpp>
...
void ClockSettingScreenView::buttonHourUpClicked()
{
    hour = (hour + 1) % 24; // Keep new value in range 0..23
    Unicode::snprintf(textAreaHourBuffer, TEXTAREAHOUR_SIZE, "%02d", hour);
    textAreaHour.invalidate();

}
void ClockSettingScreenView::buttonHourDownClicked()
{
    hour = (hour + 24 - 1) % 24; // Keep new value in range 0..23
    Unicode::snprintf(textAreaHourBuffer, TEXTAREAHOUR_SIZE, "%02d", hour);
    textAreaHour.invalidate();

}
void ClockSettingScreenView::buttonMinuteUpClicked()
{
    minute = (minute + 1) % 60; // Keep new value in range 0..59
    Unicode::snprintf(textAreaMinuteBuffer, TEXTAREAMINUTE_SIZE, "%02d", minute);
    textAreaMinute.invalidate();

}
void ClockSettingScreenView::buttonMinuteDownClicked()
{
    minute = (minute + 60 - 1) % 60; // Keep new value in range 0..59
    Unicode::snprintf(textAreaMinuteBuffer, TEXTAREAMINUTE_SIZE, "%02d", minute);
    textAreaMinute.invalidate();
}

اسکرین اصلی

در این اسکرین علاوه بر استفاده از چند عنصر که در داخل اسکرین استفاده شده است، چند عنصر دیگر نیز خارج از اسکرین قرار میگیرند که در تصویر مشخص نیستند مختصات آنها در ادامه آمده است طبق آن وارد کنید. توجه داشته باشید که در این اسکرین از Circle برای دایره ساعت استفاده شده است.

تنظیم ویجت های اسکرین اصلی را مطابق جدول زیر انجام دهید.

WidgetProperties
ImageName: background_Img Location: X: 0, Y: 0 Image: main_background.png
ButtonName: buttonSettings Location: X: 683, Y: 6 Image: Released Image: Setting_48_light.png Pressed Image: Setting_48_dark.png
Text AreaName: textClock Location: X: -130, Y: 110 Text: : Wildcard 1: Initial Value: 09 Buffer size: 3 Wildcard 2: Initiail Value: 59 Buffer size: 3 Typography: 40px Alignment: Center Appearance: Color: #FFFFFFFF
CircleName: circle Location: X: 820, Y: 35 Image & Color: Color: #FFFFFFFF Appearance: Center Position: X: 100, Y: 100 Start & End Angle: Start: 0, End: 310 Radius: 82 Line Width: 4 Cap Style: Round

جابجایی بین صفحه نمایش ها

دکمه ساعت در اسکرین تنظیم ساعت و دکمه تنظیمات در اسکرین اصلی برای تعویض صفحه، نیاز به interactions دارند. همچنین، دو عنصری که در خارج از ناحیه صفحه نمایش در اسکرین اصلی قرار میگیرند، باید هنگام ورود به اسکرین اصلی به مکان خود منتقل شوند.

بنابراین interaction زیر را به اسکرین تنظیم ساعت اضافه کنید.

InteractionProperties
ChangetoMainScreenTrigger: Button is clicked Clicked Source: buttonClock Action: Change screen Screen: MainScreen Transition: Cover Transition Direction: North

همچنین interaction زیر را به اسکرین اصلی اضافه کنید.

InteractionProperties
ChangetoClockSettingScreenTrigger: Button is clicked Clicked Source: setting_button Action: Change screen Screen: ClockSettingScreen Transition: Slide Transition Direction: South
Move circle into placeTrigger: Screen is entered Action: Move widget Widget to move: circle Position: 310, 35 Easing: Cubic, Out Duration: 750ms
Move circle into placeTrigger: Screen is entered Action: Move widget Widget to move: textClock Position: 350, 110 Easing: Cubic, Out Duration: 750ms

برای آپدیت ساعت و پویا بودن دایره در زمان اجرا از تابع handleTickEvent استفاده می شود.

handleTickEvent به صورت دوره ای بوسیله فریموروک TouchGFX فراخوانی می شود و این امکان را می دهد تا عناصر موجود در صفحه فعال را به صورت پویا آپدیت کند، که در این حالت ساعت و دایره خواهد بود.

مانند ClockSettingScreen از شمارنده ساعت و دقیقه برای ساعت استفاده می شود. از آنجا که handTickEvent بیش از آنکه ساعت آپدیت شود، فراخوانی می شود، برای تعیین تعداد تیک ها بین آپدیت ساعت، یک TickCounter اضافه می شود. برای آپدیت زاویه دایره از addStart و addEnd استفاده می شود.

MainScreenView.hpp

#ifndef MAINSCREENVIEW_HPP
#define MAINSCREENVIEW_HPP

#include <gui_generated/mainscreen_screen/MainScreenViewBase.hpp>
#include <gui/mainscreen_screen/MainScreenPresenter.hpp>

class MainScreenView : public MainScreenViewBase
{
public:
    virtual void handleTickEvent();
    MainScreenView();
    virtual ~MainScreenView() {}
    virtual void setupScreen();
    virtual void tearDownScreen();

protected:
    //for clock
    int16_t hour;
    int16_t minute;
    int16_t tickCount;
    int16_t addStart;
    int16_t addEnd;
};

#endif // MAINSCREENVIEW_HPP

تابع handTickEvent در MainScreenView.cpp و کدی که ساعت و دایره را آپدیت می کند در زیر نشان داده شده است.

MainScreenView.cpp

void MainScreenView::handleTickEvent()
{
    if (tickCount == 60)
    {
        minute++;
        hour = (hour + (minute / 60)) % 24;
        minute %= 60;

        Unicode::snprintf(textClockBuffer1, TEXTCLOCKBUFFER1_SIZE, "%02d", hour);
        Unicode::snprintf(textClockBuffer2, TEXTCLOCKBUFFER2_SIZE, "%02d", minute);

        textClock.invalidate();

        tickCount = 0;
    }

    if (!textClock.isMoveAnimationRunning())
    {
        tickCount++;

        circle.invalidate();
        circle.setArc(1, (minute *6));
        circle.invalidate();
    }
}

به یاد داشته باشید 0-9 را به ستونهای Wildcard Ranges برای تایپوگرافی هایی که برای ساعت ها و دقیقه ها استفاده می شود اضافه کنید.

در این مرحله از ویجت Circle نیز استفاده شد و آموختیم که بین صفحات جابجا شویم و ایجاد ویجت های پویا.

در ادامه این آموزش بهذخیره داده هاو استفاده در صفحات دیگر خواهیم پرداخت.

موفق باشید.