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

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

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

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

 

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

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

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

Widget Properties
Image Name: background
Location:X: 0, Y: 0
Image: main_bg_texture_800x480.png
Text Area Name: textAreaHourCaption
Text: Hour
Typography: 20px
Alignment: Center
Appearance:
Color: #FFFFFFFF
Text Area Name: textAreaHour
Text:
Initiail Value: 09
Buffer size: 3
Typography: 80px
Alignment: Center
Appearance:
Color: #FFFFFFFF
Text Area Name: textAreaMinuteCaption
Text: Minute
Typography: 20px
Alignment: Center
Appearance:
Color: #FFFFFFFF
Text Area Name: textAreaMinute
Text:
Wildcard 1:
Initiail Value: 59
Buffer size: 3
Typography: 80px
Alignment: Center
Appearance:
Color: #FFFFFFFF

 

Widget Properties
Button Name: buttonHourUp
Image:
Released Image: Up_arrow.png
Pressed Image: Up_arrow_pressed.png
Button Name: buttonHourDown
Image:
Released Image: Down_arrow.png
Pressed Image: Down_arrow_pressed.png
Button Name: buttonMinuteUp
Image:
Released Image: Up_arrow.png
Pressed Image: Up_arrow_pressed.png
Button Name: buttonMinuteDown
Image:
Released Image: Down_arrow.png
Pressed Image: Down_arrow_pressed.png
Button With Label Name: 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
Button Name: buttonMinuteDown
Image:
Released Image: Down_arrow.png
Pressed Image: Down_arrow_pressed.png

 

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

 

Interaction Properties
Hour_up_button_is_clicked Trigger: Button is clicked
Clicked Source: HourButtonUP
Action: Call new virtual function
Function Name: buttonHourUpClicked
Hour_down_button_is_clicked Trigger: Button is clicked
Clicked Source: HourButtonDOWN
Action: Call new virtual function
Function Name: buttonHourDownClicked
Minute_up_button_is_clicked Trigger: Button is clicked
Clicked Source: MinuteButtonUP
Action: Call new virtual function
Function Name: buttonMinuteUpClicked
Minute_down_button_is_clicked Trigger: Button is clicked
Clicked Source: MinuteButtonDOWN
Action: Call new virtual function
Function Name: buttonMinuteDownClicked
Save_button_is_clicked Trigger: 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 برای دایره ساعت استفاده شده است.

 

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

Widget Properties
Image Name: background_Img
Location:
X: 0, Y: 0
Image: main_background.png
Button Name: buttonSettings
Location:
X: 683, Y: 6
Image:
Released Image: Setting_48_light.png
Pressed Image: Setting_48_dark.png
Text Area Name: 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
Circle Name: 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 زیر را به اسکرین تنظیم ساعت اضافه کنید.

 

Interaction Properties
ChangetoMainScreen Trigger: Button is clicked
Clicked Source: buttonClock
Action: Change screen
Screen: MainScreen
Transition: Cover
Transition Direction: North

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

 

Interaction Properties
ChangetoClockSettingScreen Trigger: Button is clicked
Clicked Source: setting_button
Action: Change screen
Screen: ClockSettingScreen
Transition: Slide
Transition Direction: South
Move circle into place Trigger: Screen is entered
Action: Move widget
Widget to move: circle
Position: 310, 35
Easing: Cubic, Out
Duration: 750ms
Move circle into place Trigger: 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 نیز استفاده شد و آموختیم که بین صفحات جابجا شویم و ایجاد ویجت های پویا.

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

موفق باشید.

  نظرات

جهت ثبت نظر وارد سایت شوید

راهنمای استفاده از کد در کامنت
````
insert your code
``