[Supplement DigiKey's "Smart Manufacturing, Non-stop Happiness" Creative Competition] 2. Basic GUI design based on STM32H7B3I-DK

Henry-0755

[Supplement DigiKey's "Smart Manufacturing, Non-stop Happiness" Creative Competition] 2. Basic GUI design based on STM32H7B3I-DK [Copy link]

 

# **【Make up for DigiKey's "Smart Manufacturing, Non-stop Happiness" Creative Competition】**2. Basic gui design based on STM32H7B3I-DK Happy New Year to everyone in the forum~ The previous creative competition was not completed, so I will make up for it during the New Year: This chapter is the design part of the project ui: The version used is Touchgfx 4.22.1 cubemx6.9.2 frameware cubeide TouchGFX can generate a specified pre-set board-level configuration. After selecting stm32h7b3i-dk, you can generate a project with cubeMX cubeIDE. <ignore_js_op> <img style="cursor:pointer;" id="aimg_785701" aid="785701" src="/bbs/static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="//bbs.eeworld.com.cn/data/attachment/forum/202402/10/223032f4ciew45i59iikrz.png" file="//bbs.eeworld.com.cn/data/attachment/forum/202402/10/223032f4ciew45i59iikrz.png" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <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, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</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">save to album</a> </p> <p class="xg1 y">2024-2-10 22:30 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> This board also has many demos for reference, the path is: `Repository\XXXX_FW_XXXX\Projects\XXXXX\Demonstrations` But the demos of this board are not adapted to the stm32cubeMX6.10 version. If you compile the project generated by cube mx's examples, an error will be reported and you need to modify it yourself, but these experiences are very valuable for reference, such as exporting the custom UI components (right-click the components in Containers to export) and referencing them in your own projects. For example, if you want to use the custom selection component of the menulauncher routine (the outer layer is a horizontal scroller view, and the inner layer is the selected image button, and the icon will be highlighted during selection) :exclamation: During the export process, if you repeatedly import the same widget, even if you delete the widget in touchgfx, (including image resources and code) it will not be imported, and you need to manually delete these image codes. This should be considered a bug. Refer to the official tutorial `https://support.touchgfx.com/zh-CN/docs/tutorials/tutorial-04` Finished effect: <ignore_js_op> <img id="aimg_785703" style="cursor:pointer;" aid="785703" src="/bbs/static/image/common/none.gif" zoomfile="//bbs.eeworld.com.cn/data/attachment/forum/202402/10/223041ee32beet9ognohgt.gif" file="//bbs.eeworld.com.cn/data/attachment/forum/202402/10/223041ee32beet9ognohgt.gif" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="700" id="aimg_785703" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_785703_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>menu.gif</strong> <em class="xg1">(3.89 MB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <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">save to album</a> </p> <p class="xg1 y">2024-2-10 22:30 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> ' Add Menu's listening event to enter the corresponding function. I have not learned c++ so it is a bit difficult for me to use touchgfx. From an unlearned perspective, let's take a look at how to realize pressing the center icon to jump to the corresponding interface: First, check Use Selected Style Template for the scrollwheel in Touchgfx and implement UpdateCenterItem in the code to achieve the effect of enlarging the icon selected in the center. The Item of the scrollwheel is a custom image+btn. btn can add Interactions to implement callbacks when pressed, and call virtual functions to achieve jumps: <ignore_js_op> <img style="cursor:pointer;" id="aimg_785702" aid="785702" src="/bbs/static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="//bbs.eeworld.com.cn/data/attachment/forum/202402/10/223033b4ev944eyqvf9ujr.png" file="//bbs.eeworld.com.cn/data/attachment/forum/202402/10/223033b4ev944eyqvf9ujr.png" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <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, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</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">save to album</a> </p> <p class="xg1 y">2024-2-10 22:30 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> ```c++ //optionButtonSelected.hpp + virtual void btnClicked(); //optionButtonSelected.cpp +void optionButtonSelected::btnClicked() +{ + //TODO jump +} ```

Jacktang

You need to manually delete these image codes. This is indeed a bug.