EEPW论坛

【前言】

【STM32H7S78-DK】制做一个超级时钟-电子产品世界论坛 (eepw.com.cn)

在这篇帖子中，我分享了如何制作一个时钟，但是没有设置时间的功能，本篇是基于上一篇的补充。

本篇将使用滚轮来设置时分秒。

【涉及知识】

1、scrollWheel的使用，在论坛中，我也分享了scrollWheel如何使用：【STM32H7S78-DK】TouchGFX滚轮应用-电子产品世界论坛 (eepw.com.cn)

2、TouchGFX的Model->Presenter->View模型驱动。这个知识在官方的文档有详细的介绍：Model-View-Presenter设计模式 | TouchGFX Documentation 4.18

3、RTC时间更新

【UI设计】

1、新建一个屏幕，命名为ScreenTimeSet，在屏幕中添加两个自定义容器，在我的scrollWheel的文章中有详细介绍，这里不多做介绍。

2、在屏幕中添加用于设置时、分、秒的三个scrollWheel。依次添加自定义容器到界面。

3、添加一个用于更新的的按键，以及一个返回主界面的按键，设置好后如下图所示。

4、给return按键添加返回主界面的自定义功能：

5、给upsetting按键添加自定义函数：

6、同时在主界面添加一个按键用于进入设置界面的按键，同样设置跳传到设置的功能。

【代码实现】

1、添加三个scrollWheel的滚动界面更新函数，以及松开后的回调函数，ScreenTimeSetView.hpp代码如下

SCREEN1VIEW_HPP
SCREEN1VIEW_HPP
: :
    ;
    ;
    ;
    ;
    ;
:
    ;
    ;
    ;
:
;

2、ScreenTimeSetView.cpp代码如下，有详细注释：

#include <gui/screentimeset_screen/ScreenTimeSetView.hpp>

ScreenTimeSetView::ScreenTimeSetView():
        scrollWheelHourAnimateToCallback(this, &ScreenTimeSetView::scrollWheelHourAnimateToHandler),
        scrollWheelSecondAnimateToCallback(this, &ScreenTimeSetView::scrollWheelSecondAnimateToHandler),
        scrollWheelMinuteAnimateToCallback(this, &ScreenTimeSetView::scrollWheelMinuteAnimateToHandler)
{

}

/c++
/// 设置屏幕时间视图的配置函数
///
/// 该函数主要用于初始化和更新屏幕时间视图的显示内容，包括小时、分钟和秒的设置。
/// 它首先调用基类的屏幕设置函数进行基本配置，然后将三个滚动轮（小时、分钟、秒）
/// 的动画回调函数进行设置，以确保滚动轮在动画过程中能正确执行回调。
/// 接着从presenter（演示者）对象中获取当前的小时、分钟和秒，
/// 并使对应的滚动轮动画移动到正确的数值，从而在界面上显示出来。
///
/// 该函数不接受参数，也无返回值。
void ScreenTimeSetView::setupScreen()
{
    // 调用基类的屏幕设置函数进行基本配置
    ScreenTimeSetViewBase::setupScreen();

    // 设置小时滚动轮的动画回调函数
    scrollWheelHour.setAnimateToCallback(scrollWheelHourAnimateToCallback);
    // 设置秒滚动轮的动画回调函数
    scrollWheelSecond.setAnimateToCallback(scrollWheelSecondAnimateToCallback);
    // 设置分钟滚动轮的动画回调函数
    scrollWheelMinute.setAnimateToCallback(scrollWheelMinuteAnimateToCallback);

    // 从presenter（演示者）对象中获取当前的小时
    hour = presenter->getHour();
    // 从presenter（演示者）对象中获取当前的分钟
    minute = presenter->getMinute();
    // 从presenter（演示者）对象中获取当前的秒
    second = presenter->getSecond();

    // 使小时滚动轮动画移动到当前小时的位置
    scrollWheelHour.animateToItem(hour);
    // 使秒滚动轮动画移动到当前秒的位置
    scrollWheelSecond.animateToItem(second);
    // 使分钟滚动轮动画移动到当前分钟的位置
    scrollWheelMinute.animateToItem(minute);
}


void ScreenTimeSetView::tearDownScreen()
{
    ScreenTimeSetViewBase::tearDownScreen();
}


void ScreenTimeSetView::scrollWheelHourUpdateItem(textContainer& item, int16_t itemIndex)
{
    item.updateText(itemIndex);
}
void ScreenTimeSetView::scrollWheelHourUpdateCenterItem(textCenterContainer& item, int16_t itemIndex)
{
    item.updateText(itemIndex);
}


/**
 * 使用滚动条更新分钟选择项的文本。
 *
 * 本函数是ScreenTimeSetView类中用于更新UI显示的一部分，特指的是更新分钟选择项的文本。
 * 它通过调用textContainer对象的updateText方法来实现文本内容的刷新，刷新的内容依据是itemIndex参数。
 *
 * @param item textContainer对象，用于存储和管理文本内容。
 * @param itemIndex 要更新的选择项的索引，决定了具体更新哪一项文本内容。
 */
void ScreenTimeSetView::scrollWheelMinuteUpdateItem(textContainer& item, int16_t itemIndex)
{
    item.updateText(itemIndex);
}

void ScreenTimeSetView::scrollWheelMinuteUpdateCenterItem(textCenterContainer& item, int16_t itemIndex)
{
    item.updateText(itemIndex);
}

void ScreenTimeSetView::scrollWheelSecondUpdateItem(textContainer& item, int16_t itemIndex)
{
    item.updateText(itemIndex);
}
void ScreenTimeSetView::scrollWheelSecondUpdateCenterItem(textCenterContainer& item, int16_t itemIndex)
{
    item.updateText(itemIndex);
}
/* 该函数将itemSelected参数值赋给hour变量。功能如下：
接收一个整数参数itemSelected。
将此参数值赋给成员变量hour。 */

void ScreenTimeSetView::scrollWheelHourAnimateToHandler(int16_t itemSelected)
{
    hour = itemSelected;
}

void ScreenTimeSetView::scrollWheelSecondAnimateToHandler(int16_t itemSelected)
{
    second = itemSelected;
}

void ScreenTimeSetView::scrollWheelMinuteAnimateToHandler(int16_t itemSelected)
{
    minute = itemSelected;
}

3、ScreenTimeSetPresenter.hpp添加向model传递时间设定值的函数：

void updateTimeSetting(int16_t hour, int16_t minute, int16_t second){
    model->updateTimeSetting(hour, minute, second);
}

4、在Model.cpp中添加更新时间的函数：

void Model::updateTimeSetting(int16_t hour, int16_t minute, int16_t second)
{
    gSystemTime.Hours = hour;
    gSystemTime.Minutes = minute;
    gSystemTime.Seconds = second;

    HAL_RTC_SetTime(&hrtc, &gSystemTime, RTC_FORMAT_BIN);
}

同时需要在Model.hpp中添中virtual声明。

virtual void updateTimeSetting(int16_t hour, int16_t minute, int16_t second);

【实现效果】

通过scrollWheel可以方便的设置当时间，完成超级时钟的完善。