第51章emWin(ucgui)MULTIPAGE-多页控件
第一章:emwin介绍

第1章e m W i n介绍本期教程开始带领大家了解一下STemWin的基本知识,其实确切的讲应该叫emWin基础知识,由于教程使用的开发板是ST的微控制器,所以就把名字统一命名成STemWin(为什么叫STemWin,在下面会有详细的讲解)。
1.1 STemWin,emWin,μCGUI之间的关系1.2 SEGGER公司介绍1.3 STemWin介绍1.4 STM32F103和407跑STemWin性能测试1.5 STemWin论坛1.6 总结1.1S T e m W i n,e m W i n,μC G U I之间的关系这个放在最开头进行说明,因为很多的初学者比较的迷惑。
对于一些刚学GUI的用户来说,知道μCGUI的比较多,而不知道所谓的emWin或者STemWin。
这个并不奇怪,主要是因为大部分人只知道SEGGER公司的做的JLINK,而不知道他们还有RTOS和相关的中间件(中间件的意思就是基于RTOS的文件系统,GUI,USB主机和设备协议栈等)。
1.1.1μCGUI在国内比较火的原因μCGUI在国内前几年比较火的原因有三点:●一个是μCOS-II在国内的推广,自从Micrum公司出的那本《嵌入式实时操作系统μCOS-II》发布之后,国内关于μCOS-II的资料就是普天盖起,再加上各种培训机构和开发板的推广,μCOS-II就在国内火起来了。
μCOS-II火的同时,它配套的中间件,特别是μCGUI就跟着在国内火了起来。
●前几年国内有一个μCGUI的论坛,这个论坛在国内的μCGUI方面应该算是做得最好的,特别是那个站长在μCGUI方面的研究,这位站长对于μCGUI在国内的发展功不可没。
●还有一个原因就是μCGUI是带有源码的,很多时候可以通过修改部分的源码实现一些特殊的功能,现在网上流传的μCGUI的源码已经不知道经过多少人的手被修改过,最原始的的代码已经在官网上面找不到了。
1.1.2emWin和μCGUI的关系首先要明白,这两个GUI是一个东西。
uCGUI使用

uCGUI使⽤最好多参考⼏篇⽂章,⽐如UC/GUI中⽂⼿册与emWin5_UM_SC0:画图函数GUI_DrawRect:在当前窗⼝中的指定位置绘制矩形(不填充,画线颜⾊为前景⾊)void GUI_DrawRect(int x0, int y0, int x1, int y1);在当前窗⼝中的指定位置绘制填充的矩形区域(填充前景⾊)(填充前景⾊)GUI_FillRect:在当前窗⼝中的指定位置绘制填充的矩形区域:清除矩形区域(为矩形区域填充背景颜⾊,图形界⾯⽤填充背景⾊达到清除屏幕的矩形区域填充背景颜⾊,图形界⾯⽤填充背景⾊达到清除屏幕的GUI_ClearRect:清除矩形区域(为)效果)效果1:存储设备不使⽤存储设备时,绘制操作直接写⼊显⽰器。
屏幕在执⾏绘制操作时随时更新,从⽽在进⾏各种更新时使屏幕闪烁。
如果在此过程中使⽤存储设备,则所有绘制操作都在存储器中执⾏。
仅在所有操作都完成后才将最终结果显⽰在屏幕上,其优点是没有闪烁。
如果不使⽤存储设备,则可以看到⼀步步的绘制操作效果,缺点是会出现显⽰器闪烁。
使⽤存储设备时,⼀次可见到所有例程的效果,就象单次操作⼀样,不能实际看见中间步骤。
以下例程是在使⽤存储设备时通常会调⽤的,基本⽤法⾮常简单:1. 创建存储设备(使⽤GUI_MEMDEV_Create() )。
2. 激活它(使⽤GUI_MEMDEV_Select() )。
3. 执⾏绘制操作。
4. 将结果复制到显⽰器中(使⽤GUI_MEMDEV_CopyToLCD() )。
5. 不再需要它时,删除该存储设备(使⽤ GUI_MEMDEV_Delete() )。
2:WM窗⼝管理器回调例程:回调例程由⽤户程序定义,指⽰在特定事件出现时图形系统调⽤特定的函数。
它们通常⽤于在窗⼝内容更改时⾃动重绘窗⼝。
窗⼝管理器的默认特性是向每个需要重绘的窗⼝发送⼀条 WM_PAINT 。
当⽤户对窗⼝有操作时,WM会发送相应的消息给该窗⼝,窗⼝可通过回调函数根据消息直接对屏(没有⽤存储设备时)或对窗⼝的存储设备进⾏操作再拷贝到屏幕上,具体的消息说明可以参考emWin的中⽂⼿册。
ucgui做界面切换

这次在用ucgui做界面切换的时候,决定不给每个菜单界面都创建一个对话框,和网友讨论的过程中,得出两种方法,一位网友说的是STM32的存储空间足够,可以先把自己所要用到的控件全部建立好,然后根据需要去设置控件是显示还是隐藏。
另一位网友认为这样有点浪费内存,采用的方法是,先建立好一个对话框,然后根据自己的需要去删除和新建控件。
之后我就选择了第二种方法,在菜单的切换中去删除和新建控件。
可能是自己太菜了,第一次删除控件和新建控件就出了问题。
问题是这样的:我先创建一个对话框作为欢迎界面(两个TEXT控件和一个BUTTON控件)hWinMenu = GUI_CreateDialogBox(_aDialogCreate,GUI_COUNTOF(_aDialogCreate),_cbWelcome,0,0,0) ;我的想法是,点击按钮后删掉按钮控件和两个TEXT控件。
然后再新建4个按钮控件。
1.hButton[0] = BUTTON_CreateAsChild(30,26,115,70,hWinMenu ,GUI_ID_BUTTON1,WM_CF_SHOW);2.hButton[1] = BUTTON_CreateAsChild(30,124,115,70,hWinMenu,GUI_ID_BUTTON2,WM_CF_SHOW);3.hButton[2] = BUTTON_CreateAsChild(188,26,115,70,hWinMenu,GUI_ID_BUTTON3,WM_CF_SHOW);4.hButton[3] = BUTTON_CreateAsChild(188,124,115,70,hWinMenu,GUI_ID_BUTTON4,WM_CF_SHOW);5.BUTTON_SetBitmapEx(hButton[0],0,&bmqd,30,10);6.BUTTON_SetBitmapEx(hButton[1],0,&bmpf,30,10);7.BUTTON_SetBitmapEx(hButton[2],0,&bmsz,30,10);8.BUTTON_SetBitmapEx(hButton[3],0,&bmdc,30,10);9.BUTTON_Delete(WM_GetDialogItem(hWinMenu,GUI_ID_BUTTON0));10.TEXT_Delete(WM_GetDialogItem(hWinMenu,GUI_ID_TEXT0));11.TEXT_Delete(WM_GetDialogItem(hWinMenu,GUI_ID_TEXT1));这样写了之后的结果是,原先的控件被删除了,我所需要的4个按钮新建成功。
uCGUI(emWin)的应用与移植

uCGUI(emWin)的应用与移植uC/GUI(emWin)的应用与移植 2006-11-19 01:38当你开始使用emWin进行编程时,通常遵循以下的步骤:第1步:配置emWin第一步通常是通过修改头文件LCDConf.h来配置emWin。
LCDConf.h中的宏定义描述了LCD显示部分硬件特性;根据你的具体情况修改这些宏定义(例如显示屏的长、宽,每像素点用几位表示,LCD控制器的类型等参数)。
第2步:定义LCD的底层驱动函数底层函数包括对LCD(控制器)的初始化函数,LCD显示缓冲区的读写函数等,完成对LCD显示硬件的直接操作。
对于映射在系统存储器上的LCD,对显示缓冲区的操作仅需要在LCDConf.h中进行定义就可以了。
但对于采用I/O端口/缓冲区操作的LCD,就必须定义相应的接口函数了。
第3步:编译,链接和测试例子代码emWin对于单任务和多任务环境下的应用都提供了例子代码。
在编程之前,对这些例子代码进行编译、链接和测试,使你能够初步了解这些代码的使用。
第4步:修改例子程序对例子代码作少量的修改。
逐步添加一些额外的指令,例如显示不同大小的文字,显示多行等等,从而进一步理解代码的应用。
第5步:emWin的多任务应用,加入到你的操作系统中如果你的系统有可能多个任务同时对显示进行操作,这时就要用到GUITask.C文件中的GUI_MAXTASK和GUI_OS宏。
第6步:采用emWin编写你自己的应用到这一步你应该对怎样使用emWin有一个清楚的了解了。
考虑如何采用emWin提供的函数来构建你的应用,并通过阅读手册来获得各函数更详细的功能和使用上的信息。
emWin的移植移植是指对emWin进行配置和修改,使它能够在你的目标系统上运行。
参考第3.4节中的第一步和第二步,移植工作主要是针对配置头文件中的宏定义进行修改。
这些宏包括:1. LCD宏,定义了显示的尺寸和一些可选择的特性(例如镜像,等等)2.LCD控制器宏,定义了怎样对控制器进行操作。
原创ucGUI入门心得

ucGUI 入门心得学习ucGUI 近一个月,感觉已经达到入门的级别,先前掌握的Windows 应用程序开发经验对于学习ucGUI 有着很大的帮助。
首先,我使用的是ucGUI 的高版本——emwin5.22 。
这个版本较旧版本多了些可用的控件和皮肤,这会让我们设计出外观更好,功能更强的界面。
然后,我们设计出来的界面需要在VC6.0 上进行调试。
网上可以下载到移植好的emwin及附带的小工具。
这些工具包括界面设计工具GUIBuilder ,图片转16进制数据工具BmpCvt和字体生成工具FontCvt。
用好这些工具对我们开发GUI有很大的帮助。
接着开始创建一个GUI 工程。
第一步用GUIBuilder 创建一个对话框做为窗体,第二步在这个对话框上面放上一些用到的控件,接下来对这些控件进行属性设置,这些都做完以后,点击保存菜单就会生成一个C文件。
VC6.0引用这个C文件就可以显示刚才设计的界面了。
如果让我们的界面更加美观就需要用到BmpCvt 工具,它可以把图片生成16 进制数据供图片框调用。
BmpCvt可以生成透明背景的图片,效果相当不错。
制作透明图片需要用到Photoshop,在PS里新建一个带透明背景的图片,然后把我们图片粘贴进去,再擦除一此不需要的颜色就可以了。
带透明背景的图片用BmpCvt打开以后,可以看到透明部分显示的是马赛克就对了。
用FontCvt 工具可以生成我们需要的各种字体,也包括汉字。
我习惯使用Keil 开发环境,Keil 里使用汉字是Ansi 编码,而FontCvt 生成的是Unicode 编码,这显然不能兼容。
这需要转换一下就可以直接使用了。
最后总结一下在使用emwin 过程中遇到的一些问题。
1. 在对话框里使用画线画多边形或显示文字这些基本绘图功能。
只需要在窗口回调函数下的WM_PAINT肖息里操作即可。
2. 在点取下拉列表的表项时,会点击到其下边的其它控件,造成误操作。
[STemWin教程入门篇]第一期:emWin介绍
![[STemWin教程入门篇]第一期:emWin介绍](https://img.taocdn.com/s3/m/2f913f52bf1e650e52ea551810a6f524ccbfcbf4.png)
[STemWin教程⼊门篇]第⼀期:emWin介绍特别说明:原创教程,未经许可禁⽌转载,教程采⽤回复可见的形式,谢谢⼤家的⽀持。
armfly-x2,x3,v2,v3,v5开发板裸机和带系统的emWin⼯程已经全部建⽴,链接如下:SEGGER公司介绍了解emWin之前,先了解⼀下SEGGER这家公司,了解⽣产商才能对emWin有更加全⾯的认识。
SEGGER公司成⽴于1997年,到现在的2013年,有差不多16年的历史了,这家公司主要有两个office,⼀个是在德国的Hilden,另个在美国的 Massachusetts。
官⽹还有⼀个他们⼯作地⽅的照⽚,看着很不错,我这⾥也把这个照⽚贴上这家公司的产品主要有三个⼤的⽅向,下⾯分别的说⼀下:RTOS和中间件embOS (Real Time Operating System)embOS/IP (TCP/IP Stack)emWin (Graphic Software & GUI)emFile (File System)emUSB Device (USB Device Stack)emUSB Host (USB Host Stack)J-Link Debug ProbesJ - Link PROJ - Link ULTRA+J - Link PLUSJ - LinkJ - Trace Cortex-M3J - Trace ARMProduction ProgrammersFlasher ARMFlasher RXFlasher STM8Flasher ST7Flasher 5Flasher 5 PRO官⽹上⾯也有⼀个论坛,不过论坛的打开速度⽐较的慢,⽽且是英⽂的,问个问题也不太⽅便Energy Micro获得了SEGGER的授权,可以免费的使⽤,想了解其他信息的可以去官⽹查看,这⾥有⼏个官⽹张贴的,客户设计界⾯,设计的的确很好看。
其实话说回来,要想设计⽐较好的界⾯还是得⼿⼯设计,⽤控件很难做出这种效果,除⾮有这种效果的控件。
uCGUIBuilder使用说明

一、ucGUBuilder使用方法 (2)1,新建ucGUI窗体 (2)2、设置窗体的属性 (3)3、向窗体添加控件 (4)二、V ersion 2.1.0.5 新增功能 (9)1、新增C语言语法高亮显示 (9)2、支持设计的窗体保存为文件,并可以打开 (9)3、对所有控件属性添加了Description (12)4、保存窗体布局 (13)三、Version 3.0.0.0 新增功能 (15)1、支持窗体设计器基本操作 (15)2、多控件操作 (15)3、文件关联 (16)4、在线检查更新 (18)5、自定义控件ID (20)四、Version 3.1.0.0新增功能 (22)1、添加了控件ID自动增加功能 (22)2、用户自定义字体 (22)3、中英文切换 (23)4、自动检查更新 (24)6、问题反馈或提建议 (25)五、Version 4.0新增功能 (27)1、代码分离 (27)2、添加编辑器工具栏 (28)3、内嵌VC编译器能直接运行模拟器 (29)4、如何使用代码自动完成功能 (30)声明:此程序用C#开发,需要.Net Framework 3.5或跟高版本支持大家在测试的过程中发现什么BUG或者有什么建议可以发Email:ucguibuilder@给我,一、ucGUBuilder使用方法1,新建ucGUI窗体或者单击新建窗体设计器工具栏按钮或者点下拉箭头选择新建窗体设计器新建后的效果:2、设置窗体的属性(包括大小,标题栏文本,……)3、向窗体添加控件(1)、在工具箱单击选中你要添加的控件将鼠标移动到窗体上,鼠标光标变成了十字形然后按住鼠标左键,拖动会出现一个矩形,拖动到合适大小,松开鼠标,在刚才矩形区域的地方就会添加一个同样大小的在工具箱选中的控件。
或者在工具箱中选中控件,将鼠标移动到窗体上,鼠标光标变成十字形时,单击鼠标,也能在单击处添加一个默认大小的选择的控件。
4、调整控件的大小及属性把鼠标移动到选中的控件四周的小方块上,当鼠标指针变成箭头时,按住鼠标左键就可向对应的方向调整控件大小,把鼠标移动到控件上,按住鼠标左键就可拖动控件,移动控件位置也可以,修改控件属性,来调整控件二、Version 2.1.0.5 新增功能1、新增C语言语法高亮显示2、支持设计的窗体保存为文件,并可以打开单击保存按钮或者菜单-》保存会弹出保存文件对话框选择路径,输入文件名即可保存(保存格式为ucfrm 格式)保存完毕。
原创emWin显示中文(步步带图)

由于项目需要,使用emWin做机器的GUI,但是GUI官方文档中没有关于显示中文化文档和实例,经过查看网上某位网友的博客,但由于该网友说得也不是太清,也不全,所以我决定写一份比较详细的文档。
以下是具体步骤:1.首先下载emWin源码,要带模拟器的那种(就是在VC6.0下能模拟的那种版本)2.在VC6.0下(更为版本亦可),运行一个实例,如果能运行起来,说明环境OK。
3.下载一个完整版的FontCvt.exe,因为源码tool下的版本很多同志反映转换出来的是乱码,有的在tool下甚至就没这个工具,我的就没有。
网上有完整版的下载,百度“完整版FontCvt”即可4.生成字库。
打开FontCvt.exe,界面如下,选择“Standard”点击以上界面中的“OK”,弹出:然后选择你想生成的汉字字体,以及生成字体的大小。
如选择宋体,大小为16.点击“确定”后,在出现的窗口中点击edit/Disable all characters(禁用unicode下的所有字体,因为很多是不们用不上的,后续再选择我们需要的汉字及字符)选择我们需要的字符或汉字加入到字库首先我们加入常用的英文和数字字符Edit->Enable range of characters如下图,输入字符编码的起始范围点击OK后上图中,白色字符部分为我们要加入字库中的字符,灰色部分为我们不需要的(未加入字库)。
接下来,我们要加入汉字到字库了。
为了加入我们所需要的汉字到字库,我们就得知道汉字的unicode编码。
那就从网上下个小工具,专门用来查汉字的unicode。
百度“汉字转unicode “,在西西软件中找到了一个(其它网站的工具亦可,只要能方便查到某个汉字对应的unicode编码即可),见下:打开Unicode.exe上面我们输入一个“科”字,下面是其对应的unicode编码,此处要注意,编码为:D1 79(16进制),但是由于大小端问题,其实际的编码应为:79D1.到此,我们知道“科”的编码了,那么就在FontCvt里找这个字吧。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
*
*
MainTask
*/
void MainTask(void) {
WM_HWIN hMultiPage;
WM_HWIN hFrameWin;
WM_HWIN hDialog;
// // 使能窗口使用内存设备 // WM_SetCreateFlags(WM_CF_MEMDEV); GUI_Init(); /* 设置桌面窗口的回调函数 */ WM_SetCallback(WM_HBKWIN, _cbBkWindow);
*/
static const GUI_WIDGET_CREATE_INFO _aDialogCreate1[] = {
{ WINDOW_CreateIndirect, "Dialog 1", 0,
0, 0, 260, 100, FRAMEWIN_CF_MOVEABLE },
{ BUTTON_CreateIndirect, "Button", GUI_ID_BUTTON0,
*
*
Public code
*
**********************************************************************
*/
/*********************************************************************
*
*
Static code
*
**********************************************************************
*/
/*********************************************************************
MULTIPAGE 控件的结构
第1页 共8页
STM32-V5 开发板 STemWin 教程
包含 n 个页面的 MULTIPAGE 小工具由 n+2 个 窗口组成: 1 个 MULTIPAGE 窗口 1 个客户端窗口 N 个页面窗口 页面窗口将被添加到小工具的客户端窗口。右图显示了控件的结构。
*
*
Static data
*
**********************************************************************
*/
/*********************************************************************
};
0, 0, 260, 100, FRAMEWIN_CF_MOVEABLE }, 5, 30, 0, 0, 0, 3}, 25, 30, 50, 15, TEXT_CF_LEFT }, 25, 50, 50, 15, TEXT_CF_LEFT }, 25, 70, 50, 15, TEXT_CF_LEFT }, 5, 10, 50, 20, TEXT_CF_LEFT }
{ TEXT_CreateIndirect,
"Select 1", GUI_ID_TEXT1,
{ TEXT_CreateIndirect,
"Dialog 2", 0,
};
0, 0, 260, 100, FRAMEWIN_CF_MOVEABLE }, 5, 30, 0, 0, 0}, 5, 50, 0, 0, 0}, 25, 30, 50, 15, TEXT_CF_LEFT }, 25, 50, 50, 15, TEXT_CF_LEFT }, 5, 10, 50, 20, TEXT_CF_LEFT }
51.1.1 多页支持的通知代码
以下事件是编辑框控件作为 WM_NOTIFY_PARENT 消息的一部分发送给其父窗口的:
消息
描述
WM_NOTIFICATION_CLICKED
已被点击。
WM_NOTIFICATION_RELEASED
已被释放。
WM_NOTIFICATION_MOVED_OUT
已被点击,且指针已移出控件,但没有释放。
STM32-V5 开发板 STemWin 教程
第51章 MULTIPAGE-多页控件
本期教程讲解 STemWin 支持的多页控件。 51. 1 多页控件介绍 51. 2 官方 WIDGET_Multipage 实例 51. 3 使用 GUIBulder 建立多页控件 51. 4 总结
51.1 多页控件介绍
*
*
Dialog resource
*
* These tables contain the information required to create the dialogs.
* It has been created manually, but could also be created by the GUIBuilder.
STM32-V5 开发板 STemWin 教程
官方的这个实例很好的演示了 MULTIPAGE 的使用,这个例子在模拟器中的位置:
‘
源码如下(程序中进行了详细的注释):
#include <stdlib.h>
#include "GUI.h" #include "MULTIPAGE.h"
/*********************************************************************
MULTIPAGE 类似于笔记本中的分隔卡或文件柜中的标签。通过使用 MULTIPAGE 控件,应用程序可为 窗口或对话框的相同区域定义多个页面。每个页面包含特定类型的信息或用户选择相应页面时应用程序会显 示的一组控件。如果要选择一个页面,则必须单击该页面的选项卡。如果无法显示所有选项卡,则 MULTIPAGE 控件会自动在边缘处显示一个小滚动条以滚动页面。下表显示 MULTIPAGE 控件的外观:
*
*
_cbDialog4
*/
static void _cbDialog4(WM_MESSAGE * pMsg) {
WM_HWIN hItem;
WM_HWIN hDlg;
hDlg = pMsg->hWin; switch (pMsg->MsgId) { case WM_INIT_DIALOG:
hItem = WM_GetDialogItem(hDlg, GUI_ID_MULTIEDIT0); MULTIEDIT_SetText(hItem, "MULTIEDIT widget"); MULTIEDIT_SetInsertMode(hItem, 1); break; default:
第4页 共8页
WM_DefaultProc(pMsg); } }
STM32-V5 开发板 STemWin 教程
/*********************************************************************
*
*
_cbBkWindow
*
* 桌面窗口的回调函数,主要是重绘部分
*/
static void _cbBkWindow(WM_MESSAGE * pMsg) {
switch (pMsg->MsgId) {
case WM_PAINT:
GUI_SetBkColor(GUI_BLUE);
GUI_Clear();
GUI_SetColor(GUI_WHITE);
GUI_SetFont(&GUI_Font24_ASCII);
static const GUI_WIDGET_CREATE_INFO _aDialogCreate6[] = {
{ WINDOW_CreateIndirect, "Dialog 6", 0,
{ SCROLLBAR_CreateIndirect, "",
GUI_ID_SCROLLBAR0,
{ TEXT_CreateIndirect,
5, 30, 80, 20, 0},
{ TEXT_CreateIndirect,
"Dialog 1", 0,
5, 10, 50, 20, TEXT_CF_LEFT }
};
第3页 共8页
STM32-V5 开发板 STemWin 教程
static const GUI_WIDGET_CREATE_INFO _aDialogCreate2[] = {
GUI_DispStringHCenterAt("WIDGET_Multipage - Sample", 160, 5);
break;
default:
WM_DefaultProc(pMsg);
}
}
/*********************************************************************
// // 创建框架窗口 // hFrameWin = FRAMEWIN_Create("FrameWindow", NULL, WM_CF_SHOW, 40, 44, 240, 152); /* 设置窗口的属性 */ FRAMEWIN_SetClientColor(hFrameWin, GUI_GREEN); FRAMEWIN_SetActive(hFrameWin, 1); FRAMEWIN_SetMoveable(hFrameWin, 1);
WM_NOTIFICATION_VALUE_CHANGED 编辑小工具的值 (内容)已更改。
51.1.2 多页支持的键盘反应