【STM32H7S78-DK测评】3.转轮动效菜单的实现

电子烂人 发表于 2025-1-14 17:20

<div class='showpostmsg'> 本帖最后由电子烂人于 2025-1-15 14:06 编辑

1.前言

之前的帖子已经实现了基础的TOUCHGFX效果，我们要在这个基础上加上菜单的动效

ST提供了很多小控件，不过还不足以实现我们的效果，这篇文章在原有的基础上试着添加一些定制的转轮控件

2.工程建立

打开之前的TOUCHGFX工程：

在CONTAINERS里添加一个小控件，同时摆放好图标和文字的样式，记录下各个元素的坐标

 另外，放一些要用的元素进工程

   

记得设置下要用到的字体，这边屏幕比较大，选用宋体，45磅：

  

把控件里的文字也设置好：

  

回到我们的菜单页面，放置一个scrollwheel转动菜单控件



并在Item Template选择做好的Container，这边设置元素多少，列表外观，以及选择循环模式

   

在转盘的中央放置一个透明按钮，表示我们按下这个区域

   到这里就基本设置完成，生成工程，开始代码端的操作。

3.代码修改

主要流程为：显示转轮效果--->绑定图标和文字--->确认转轮当前所选--->按键进入对应函数--->跳转屏幕

全部代码为C++编译，只展示部分核心内容，.HPP自行修改。这部分代码有参考@NATHAN_XI 同学的代码，在此表示感谢。

mainMenuView.CPP

<pre>
<code class="language-cpp">#include <gui/mainmenu_screen/mainMenuView.hpp>
#include <texts/TextKeysAndLanguages.hpp>
#include <BitmapDatabase.hpp>

mainMenuView::mainMenuView():
scrollWheel1_ItemSelectedCallback(this, &mainMenuView::scrollWheel1_ItemSelectedHandler)
{

}

void mainMenuView::setupScreen()
{
scrollWheel1.setItemSelectedCallback(scrollWheel1_ItemSelectedCallback);
mainMenuViewBase::setupScreen();
}

void mainMenuView::tearDownScreen()
{
mainMenuViewBase::tearDownScreen();
}

void mainMenuView::scrollWheel1UpdateItem(CustomContainer1& item, int16_t itemIndex)
{
item.setListElements(itemIndex);
}

void mainMenuView::scrollWheel1_ItemSelectedHandler(int16_t itemSelected)
{
presenter->menuSelected(itemSelected);
}
</code></pre>

model.cpp

<pre>
<code class="language-cpp">#include <gui/model/Model.hpp>
#include <gui/model/ModelListener.hpp>

Model::Model() : modelListener(0)
{

}

void Model::tick()
{

}

void Model::SetmenuSelected(int itemSelected)
{
Screen1Scroll1WheelItemSele = itemSelected;
}

int Model::GetScreenMainMenuScroll1WheelItem(void)
{
return Screen1Scroll1WheelItemSele;
}
</code></pre>

CustomContainer1.CPP

<pre>
<code class="language-cpp">#include <gui/containers/CustomContainer1.hpp>
#include <texts/TextKeysAndLanguages.hpp>
#include <BitmapDatabase.hpp>
#include <gui_generated/containers/CustomContainer1Base.hpp>
#include <math.h>

CustomContainer1::CustomContainer1()
{

}

void CustomContainer1::initialize()
{
CustomContainer1Base::initialize();
}

void CustomContainer1::offset(int16_t x)
{
image1.setX(10 + x);
textArea1.setX(110 + x);
}

void CustomContainer1::alphaAdjust(int16_t a)
{
image1.setAlpha(a);
textArea1.setAlpha(a);
}</code></pre>

4.成果展示

4fcdc66405589a79953dbf4bbe61fafb 
 

后记

部分参考来源：

<a href="https://www.jianshu.com/p/7c9a0533c600">使用TouchGFX开发STM32界面应用之入门篇（四）-- 定制控件-1 - 简书</a>

<a href="https://www.jianshu.com/p/d7a0d4b2ba63">使用TouchGFX开发STM32界面应用之入门篇（四）-- 定制控件-2 - 简书</a>

WIKI：<a href="https://support.touchgfx.com/academy/tutorials/tutorial-04" target="_blank">https://support.touchgfx.com/academy/tutorials/tutorial-04</a>

再次感谢@NATHAN_XI同学的讲解，这部分自己摸索真的很痛苦

<a href="https://www.bilibili.com/opus/1021525625956990998?spm_id_from=333.1387.0.0">NATHAN_XI的动态 - 哔哩哔哩</a>
</div><script> var loginstr = '<div class="locked">查看本帖全部内容，请<a href="javascript:;" style="color:#e60000" class="loginf">登录</a>或者<a href="https://bbs.eeworld.com.cn/member.php?mod=register_eeworld.php&action=wechat" style="color:#e60000" target="_blank">注册</a></div>';

if(parseInt(discuz_uid)==0){
(function($){
var postHeight = getTextHeight(400);
$(".showpostmsg").html($(".showpostmsg").html());
$(".showpostmsg").after(loginstr);
$(".showpostmsg").css({height:postHeight,overflow:"hidden"});
})(jQuery);
} </script><script type="text/javascript">(function(d,c){var a=d.createElement("script"),m=d.getElementsByTagName("script"),eewurl="//counter.eeworld.com.cn/pv/count/";a.src=eewurl+c;m.parentNode.insertBefore(a,m)})(document,523)</script>

qzc飘曳 发表于 2025-1-14 22:15

这个生成后能看到才需要的资源是多少吗？

御坂10032号 发表于 2025-1-14 22:39

真流畅啊

电子烂人 发表于 2025-1-15 09:16

qzc飘曳发表于 2025-1-14 22:15
这个生成后能看到才需要的资源是多少吗？  

是说占用多少FLASH存储吗？要生成之后编译才能看到

不过我感觉用的不多，图片和视频才是最占存储的，可以看这个<a href="https://www.bilibili.com/video/BV1TEcyeYEsL/?spm_id_from=333.337.search-card.all.click">TouchGFX_01. 节省Flash存储器内存_哔哩哔哩_bilibili</a>

yangjiaxu 发表于 2025-1-15 11:00

TGFX真的是高端，但是比较占用内存，和芯片资源，不过还不错，至少画面是好看

chrisrh 发表于 2025-1-15 11:29

电子烂人发表于 2025-1-15 09:16
是说占用多少FLASH存储吗？要生成之后编译才能看到

不过我感觉用的不多，图片和视频才是最占存储的， ...

是的，还是TouchGFX的动画和界面看着舒服~

wangerxian 发表于 2025-1-16 16:51

之前我们就跑过这个例程，后面改成了圆形菜单，那会可有成就感了。

页: [1]

电子工程世界-论坛's Archiver

【STM32H7S78-DK测评】3.转轮动效菜单的实现