【补 DigiKey“智造万物，快乐不停”创意大赛】2.基本gui设计基于STM32H7B3I-DK

Henry-0755

【补 DigiKey“智造万物，快乐不停”创意大赛】2.基本gui设计基于STM32H7B3I-DK [复制链接]

# **【补 DigiKey“智造万物，快乐不停”创意大赛】**2.基本gui设计 基于STM32H7B3I-DK

论坛的各位新年好呀~之前的创意大赛未完成，过年来补一补：

本章是项目ui的设计部分：

使用的版本

Touchgfx 4.22.1

cubemx6.9.2

frameware

cubeide

通过TouchGFX可以生成指定预先设定好的板级配置，选择stm32h7b3i-dk后即可生成带有cubeMX cubeIDE的项目。

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_785701_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>image-20240208110433451.png</strong> <em class="xg1">(405.29 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_785701" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=785701&handlekey=savephoto_785701">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

这个板子也有许多demo可以参考，路径在：

`Repository\XXXX_FW_XXXX\Projects\XXXXX\Demonstrations`

但这块板子的demo都没有适配stm32cubeMX6.10版本，如果通过cube mx的examples生成项目进行编译会报错，需要自己修改，但这些历程很有参考价值，比如将其中自定义的ui组件导出（对Containers中的组件右键导出），在自己的项目中引用，如想使用例程menulauncher的自定义选择组件（外层是个横向的scroller view，内层是选择的图片按键，选择中会给icon highlight）

:exclamation: 在导出的过程中如果重复导入同一个widget哪怕在touchgfx中删除这个widget，（包含图片资源以及code）会无法导入，需要手动删除这些图片代码才可以。这应该算个bug

参照官方教程

`https://support.touchgfx.com/zh-CN/docs/tutorials/tutorial-04`

完成效果：

<ignore_js_op>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_785703" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=785703&handlekey=savephoto_785703">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>
'

添加Menu的监听事件进入到对应的功能

本人没学过c++所以用起来touchgfx有点困难，以未学过的角度看一下如何实现按下中心的icon跳转到对应的界面：

首先是Touchgfx中的这个scrollwheel勾选Use Selected Style Template并在代码中实现UpdateCenterItem实现放大中心选中的icon的效果，其中scrollwheel的Item是自定义的一个image+btn，btn可以添加Interactions，实现按下的时候进行回调，调用虚拟函数来实现跳转：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_785702_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>image-20240210221508812.png</strong> <em class="xg1">(71.52 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_785702" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=785702&handlekey=savephoto_785702">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

```c++
//optionButtonSelected.hpp

+  virtual void btnClicked();

//optionButtonSelected.cpp

+void optionButtonSelected::btnClicked()
+{
+  //TODO跳转
+}
```

Jacktang

需要手动删除这些图片代码才行，这确实是个bug，，，

【补 DigiKey“智造万物，快乐不停”创意大赛】2.基本gui设计基于STM32H7B3I-DK [复制链接]

最新回复

浏览过的版块

【补 DigiKey“智造万物，快乐不停”创意大赛】2.基本gui设计 基于STM32H7B3I-DK [复制链接]

最新回复

浏览过的版块

【补 DigiKey“智造万物，快乐不停”创意大赛】2.基本gui设计基于STM32H7B3I-DK [复制链接]