【STM32U599J-DK】智能手表之表盘控件的使用

lugl4313820

【STM32U599J-DK】智能手表之表盘控件的使用 [复制链接]

【STM32U599J-DK】视频分享——智能手表之一 - stm32/stm8 - 电子工程世界-论坛 (eeworld.com.cn)

前一篇介绍手表之文字实现。但是没有表盘，怎么能说是手表，在学习touchGFX后这一期给大家分享如何快速实现表盘。

【学习资料】

资料链接：模拟时钟 | TouchGFX Documentation

表盘是touchGFX给出的成个成品表盘，可以以一个控制的形式加载到屏幕，快速实现表盘的制作。

【实现步骤】

把表盘放到屏幕上后，添加一个数字时钟：

再放置一个文本域用于温度计：

【代码实现】

在前面的MPV模式设计中，我们已经实现了对RTC实时时钟的时间与温度值的获取，我们只需要添回第二个屏幕的View的代码实现就行了。

1. 在Presenter.hpp中添回数值转化的虚拟函数：
   virtual void NotifyTempValudChanged(float value, RTC_TimeTypeDef GetTime, RTC_DateTypeDef GetData);
   
2. 在.cpp中实现该函数：
   void ScreenClockConfigPresenter::NotifyTempValudChanged(float value,
   RTC_TimeTypeDef GetTime, RTC_DateTypeDef GetData)
   {
   view.setTempValud(value, GetTime, GetData);
   }
   
3. 在View的.hpp中添加虚拟函数：
   virtual void setTempValud(float value, RTC_TimeTypeDef GetTime, RTC_DateTypeDef GetData);
   
4. 在.cpp实现更新时钟与温度值：

void ScreenClockConfigView::setTempValud(float value,

RTC_TimeTypeDef GetTime, RTC_DateTypeDef GetData)

{

digitalClock.setTime24Hour(GetTime.Hours, GetTime.Minutes, GetTime.Seconds);

analogClock.setTime24Hour(GetTime.Hours, GetTime.Minutes, GetTime.Seconds);

Unicode::snprintfFloat(textAreaTempBuffer, TEXTAREATEMP_SIZE, "%2.2f", value);

textAreaTemp.invalidate();

}

【项目效果】：

【讨论】

在两个时钟的实现方式上，一个是采用textArea，一个是用analogClock与digitalClock控件来实现，相比第二种会简单许多。而且第二种在不用修改代码的前提下，更换多种表盘：

而我们对比两个设计的界面与逻辑代码的实现都是不相同的：

显而易见，第二种实现的方式要简洁、美观得多。

【总结】

在touchGFX中，给出了许多控件，我们要学习并熟练的运用，会收到事半功倍的效果。

soso

嗯 第二种带设计感。

sipower

楼主使用touchGFX渐入佳境哈，做的设计越来越炫酷了

damiaa

touchGFX 还有成品表盘  LVGL都是搞个图片整上去的额。

wangerxian

背景骚紫加分，话说TouchGFX现在有些控件自带素材了？

lugl4313820

damiaa 发表于 2023-12-8 16:12 touchGFX 还有成品表盘  LVGL都是搞个图片整上去的额。

系统提供了素材，好象还可以微调，当然也可以自己做控制。

lugl4313820

lugl4313820 发表于 2023-12-8 19:33 系统提供了素材，好象还可以微调，当然也可以自己做控制。

touchGFX如果跟lvgl一样开放，那就牛了，不过touchgfx对硬件的要求挺高的，有一定的门槛吧。

蒋小星

很有意思的表盘控件，感谢楼主分享，学习到了