آموزش TouchGFX - Multi Screen

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

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

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

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

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

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

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

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

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

بنابراین کد زیر باید به 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 به صورت زیر خواهد بود.

#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 برای دایره ساعت استفاده شده است.

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

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

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

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

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

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

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

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

#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 و کدی که ساعت و دایره را آپدیت می کند در زیر نشان داده شده است.

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 نیز استفاده شد و آموختیم که بین صفحات جابجا شویم و ایجاد ویجت های پویا.

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

موفق باشید.