EEPW论坛

【前言】

TouchGFX有成熟的时钟组件，这篇介绍如果快速的制作一个时钟。

【模拟时钟组件介绍】

模拟时钟是一个控件，能够显示一个传统的模拟时钟，而不是通过文本显示时间的数字时钟。 该时钟使用背景图像作为钟面。 时针、分针和秒针都使用一幅图像，并围绕一个可配置的中心旋转。

模拟时钟位于TouchGFX Designer中的Miscellaneous控件组中。

模拟时钟位于TouchGFX Designer中的Miscellaneous控件组中。

TouchGFX Designer中的模拟时钟

TouchGFX Designer中模拟时钟的属性。

【GUI制作】

根据官方教程，向屏幕添加一个模拟时钟组件：

也可以根据自己的需要，更换不时大小、样式的组件：

当然也还可以使用自定义的表盘图像、时、分、秒等来高度定制自己的摸拟时钟。

时钟组件放置好后，他是不会自己动的，需要用户定时修改组件的时、分、秒来实现实时显示。时钟设置的功能函数为：

analogClock.setTime24Hour(hour, minute, second);

【实现RTC实时时间】

实现RTC实时时间，可以通过STM32CubeMX来配置，这次介绍不是重点，所以我直接引用原来自己已经配置好的RTC函数来直接实现。即从其他已经配置好的工程中复制rtc.c/h到工程之中。

然后在model.c的tick函数来实现每秒钟获取一次时间。其代码如下：

#include <gui/model/Model.hpp>
#include <gui/model/ModelListener.hpp>
#include <cstdint>
#ifndef SIMULATOR
#include "main.h"
#include "rtc.h"

extern RTC_HandleTypeDef hrtc;

RTC_DateTypeDef gSystemDate;  //获取日期结构体
RTC_TimeTypeDef gSystemTime;   //获取时间结构体
#endif


Model::Model() : modelListener(0),hour(0), minute(0),second(0)
{

}

void Model::tick()
{
    static int tick_counter;

    if(tick_counter++ == 60)
    {
       tick_counter = 0;
        get_rtc_Time();
    }
}

#ifndef SIMULATOR
void Model::get_rtc_Time()
{
    HAL_RTC_GetTime(&hrtc, &gSystemTime, RTC_FORMAT_BIN);
    HAL_RTC_GetDate(&hrtc, &gSystemDate, RTC_FORMAT_BIN);
    hour = gSystemTime.Hours;
    minute = gSystemTime.Minutes;
    second = gSystemTime.Seconds;
}
#endif

根据M-P-V模型架构，在ModelLister.hpp中添加代码如下，实现hour、minuter、second转递。

/* 添加时间获取函数 */
/* 2024/9/15 */
    int16_t getHour()
    {
        return model->getHour();
    }

    int16_t getMinute()
    {
        return model->getMinute();
    }
    int16_t getSecond()
    {
        return model->getSecond();
    }
 /* 添加时间获取函数结束 */

在view.cpp中添加handlerEvent函数，每60个tick修改一次时间，实现时钟的实时刷新：

void Screen1View::handleTickEvent() {
    static int16_t  tick;
    tick++;
    if(tick%60==0)
    {
        tick = 0;
        hour = presenter->getHour();
        minute = presenter->getMinute();
        second = presenter->getSecond();
        analogClock.setTime24Hour(hour, minute, second);
    }
}

【实验效果】