EmWin使用教程

基于交叉开发的使用教程（使用PC端模拟GUI界面再移植的方法）

相关软件准备

  • 开发使用到的软件和工具:
  • PC仿真文件。文件名称：SeggerEval_WIN32_MSVC_MinGW_GUI_V526
0af63f4a48b44b32a392f08cc9afd0f6~noop.image?_iz=58558&from=article.jpg


  • PC端开发软件。(Visual Studio 2013，用于编译emwin源码以及GUI开发)
  • Emwin使用手册"emWin5中文手册.pdf",用于查看相关API的使用方法或说明。
  • emwin开发小工具。
495c5cb460e34db28e31f1e57d3f8012~noop.image?_iz=58558&from=article.jpg


  • 开发板例程。(使用开发板例程可以直接学习emwin部分内容)

emwin设计流程

  • 建立设计目标。想要做什么事情，想要设计一个什么样的界面或达到什么效果。学习阶段可先从模仿开始，模仿别人设计学习自己需要的知识。
  • 先了解整体的设计流程。清楚每一步所需要做的具体内容。
  • 使用emwinPC仿真文件在PC端进行模拟，在此项目基础上创建自己的GUI设计文件。目的，可以更快的看到设计的效果减少程序下载时所需要的时间，而且仿真文件里有大量使用案例可以参考设计。
  • 把相关设计文件负责到STM32的例程项目中，添加相关文件到工程中。添加相应的头文件和相关的数据处理方法。
  • 例程编译无误后下载到开发板进行最终的测试。
设计案例

  • 设计目的或者动力(在某文章中看到的一个设计界面感觉挺不错的，所以这次就以这个界面为这次设计的最终效果)
da7a2df4e1674e43b0859182fc7ed2c4~noop.image?_iz=58558&from=article.jpg


  • 分解设计。上图目测可以把它分成左，中，右，下四个部分。设计上划分之前需要先创建窗体用于放置控件或者绘图，可以创建一个主窗体。
d8acc82a780d437a912147003a078a3b~noop.image?_iz=58558&from=article.jpg

上图是已经划分好的LCD显示效果。在这里创建了两个窗体，一个用于状态栏，一个用作主窗体放置大部分控件和绘图。
这样做的好处是确定每一个区域的起始坐标，放哪个区域的控件就可以使用哪个坐标做开始。

  • 做完这步后就都是摆放控件的时间了。
dfa0aa324c7e439e8cb4e6cdd6435227~noop.image?_iz=58558&from=article.jpg

cf2b71105f2f4c8fb58a48538985a230~noop.image?_iz=58558&from=article.jpg

f8f40be298264b30839beccd6fe99a59~noop.image?_iz=58558&from=article.jpg


  • 最终摆放完成:
0fcc14ec329742fe9b6d9509032bf697~noop.image?_iz=58558&from=article.jpg


  • 把创建的文件复制到stm3的项目。
87eec7c4f8da49cb8d2934f525e5d33b~noop.image?_iz=58558&from=article.jpg
VS软件内创建的文件

942aa28fa7bf4b5ab8807e2ce7b2da2e~noop.image?_iz=58558&from=article.jpg
复制到Keil软件的文件


  • 把相应的函数添加到对应的任务中就大功告成了。
69148f9f33c64341962feba7c083eff1~noop.image?_iz=58558&from=article.jpg
最后在开发板上运行的效果

我的LCD显示屏坏掉了，显示的颜色有问题。整体学习上还是不影响的。