下载文档原格式
第17章STemWin外语支持本期教程的主要内容来自官方的用户手册，我这里专门的把这里的内容整理出一章主要是通过一些实例来帮助大家理解。
阿拉伯语、泰语或汉语等外语文本一般含有emWin标准字体以外的字符。
本章将介绍一些基本知识，比如定义全球所有可用字符的Unicode标准，以及UTF-8编码方案，emWin 使用该方案来解码以Unicode字符编写的文本。
同时还将说明如何启用阿拉伯语支持，以及如何采用Shift-JIS（日本工业标准）编码方案来显示文本。
17. 1 Unicode17. 2 阿拉伯语支持17. 3 泰语支持17. 4 Shift JIS支持17. 5 总结17.1Unicode关于unicode的编码方面的知识在百度百科或者wiki百科上面有详尽的介绍，初学的一定要认真的看一下，了解这方面的知识对于以后学习大有裨益。
这里我们主要的介绍一下UTF-8。
17.1.1UTF-8 编码方案Unicode是国际组织制定的可以容纳世界上所有文字和符号的字符编码方案。
Unicode用数字0-0x10FFFF来映射这些字符，最多可以容纳1114112个字符，或者说有1114112个码位。
码位就是可以分配给字符的数字。
UTF-8，UTF-16，UTF-32都是将数字转换到程序数据的编码方案。
ISO/IEC 10646-1定义了一种称为通用字符集(UCS)的多八位字符集，收入了全球大多数文字系统。
然而，多八位字符并不兼容许多现有的应用程序和协议，因此就扩展出了一些各有特色的UCS转换格式(UTF)。
举个例子帮助大家理解，在Unicode中，汉字“字”对应的数字是23383（十进制），十六进制表示为0x5B57。
在Unicode中，我们有很多方式将数字23383表示成程序中的数据，包括：UTF-8，UTF-16，UTF-32。
UTF是“UCS Transformation Format”的缩写，可以翻译成Unicode字符集转换格式，即怎样将Unicode定义的数字转换成程序数据。
第52章PROGBAR-进度条控件本期教程讲解STemWin支持的进度条控件。
51. 1 进度条控件介绍51. 2 官方WIDGET_Multipage实例51. 3 使用GUIBulder建立多页控件51. 4 总结52.1进度条控件介绍进度条通常在应用程序中用于实现虚拟化，下面的截图是设置了皮肤和没有设置皮肤时的显示效果：设置皮肤后显示效果如下：52.2官方WIDGET_Multipage实例官方的这个实例很好的演示了MULTIPAGE的使用，这个例子在模拟器中的位置：源码如下（程序中进行了详细的注释）：---------------------------------------------------------------------- File : WIDGET_Progbar.cPurpose : Simple demo shows the use of the PROGBAR widget---------------------------------------------------------------------- */#include "GUI.h"#include "PROGBAR.h"#include <stddef.h>/******************************************************************* ** static code********************************************************************* *//******************************************************************* ** _DemoProgBar0 对应的是上面的进度条，1 对应的是下面的进度条。
uC/GUI图形界面系统提供了非常多的功能强大的用户接口函数，利用uC/GUI提供的图象绘制函数GUI_DrawGraph(），可以非常容易的绘制出想要的函数的波形。
GUI_DrawGraph(）函数的原型为：void GUI_DrawGraph(I16 *paY, int NumPoints, int x0, int y0);需要提供的参数：paY为纵坐标的数组头指针NumPoints，顾名思义，为所需绘制的图象的点数x0,y0为坐标原点在TFT_LCD屏幕上的坐标这个函数的效果为在屏幕上依次绘制出相对于（x0,y0）坐标为（*（paY+0），0），（*（paY+1），1），（*（paY+2），2）.。
（*（paY+NumPoints），NumPoints）的一系列的点，由于一般TFT屏都是设置成向下为坐标加的，所以这个函数的效果也是向下为正，向上为负。
写个简单的程序测试一下；复制代码1.I16 aY[240];//纵坐标数组，相当于函数值2.3.int main()4.{5. u16 i;6. cdz_rcc_init();7. GUI_Init();8. GUI_SetBkColor(GUI_WHITE);//白色背景9. GUI_Clear();10. GUI_SetColor(GUI_BLACK);//黑色字体11.12.for (i = 0; i < GUI_COUNTOF(aY); i++) {13.aY[i] = rand() % 80; //rand()函数产生一个0-100之间的随机数，aY[i]为0-80之间一随机数14.}15.GUI_DrawGraph(aY, GUI_COUNTOF(aY), 0, 160);//调用绘图函数16.}效果如下：本文源自/read.php?tid=435。
emwin快速设计界面的方法-回复如何使用emwin快速设计界面。
emwin（Embedded Wizard）是一种用于嵌入式系统开发的图形用户界面（GUI）设计工具，它提供了丰富的组件库和定制化选项，使开发人员能够快速设计和开发高质量的用户界面。
本文将分为以下几个步骤，介绍如何使用emwin快速设计界面。
第一步：准备开发环境在使用emwin之前，需要先准备好开发环境。
首先，确保你的嵌入式系统支持emwin，并已经安装了emwin的开发软件包。
然后，根据开发系统的要求，配置好编译器和调试工具。
最后，在你的开发板上连接显示屏，并确保能够正确驱动显示。
第二步：创建新工程在emwin的开发环境中，创建一个新的工程是开始设计界面的第一步。
打开emwin的开发软件包，并选择“新工程”选项。
根据你的项目需求，设置工程的名称和路径。
然后，选择一个适当的目标设备和显示分辨率，并设置其他工程属性。
点击“确定”按钮，创建一个新的emwin 工程。
第三步：设计界面在emwin的工程中，设计界面是一个非常重要的任务。
emwin提供了一个方便的可视化界面设计器，可以让你通过拖放组件来快速创建用户界面。
首先，选择一个适当的窗口尺寸，并在界面设计器中创建一个新窗口。
然后，在工具箱中选择你需要的组件（如按钮、文本框、图像等），并将它们拖放到窗口中。
接下来，通过调整组件的大小和位置，以及设置组件的属性，来定制化界面。
emwin的界面设计器支持多种属性设置，例如背景颜色、文字字体、按钮样式等。
通过设置这些属性，你可以根据你的项目需求来设计出一个高效美观的界面。
第四步：添加交互逻辑设计一个界面只是第一步，为了使界面具有实际的功能，还需要添加一些交互逻辑。
emwin提供了一种基于事件的编程模型，可以让你很方便地添加交互逻辑。
通过选择一个组件，并在属性面板中设置事件回调函数，你可以将该组件与一个自定义的处理函数进行关联。
在处理函数中，你可以针对不同的事件类型（如按钮点击、滑动等）编写相应的逻辑。
emWin 5.22 (uCGUI) 图形用户接口移植实例——STM32作者：Ach日期：2013年12月29日联系方式：ox000008@1.概要移植图形用户接口的好处是不言而喻的。
本文图文并茂地介绍了一个emWin 5.22（uCGUI）的移植实例。
文章具体分为emWin简介，硬件平台简介，开发环境及项目简介，移植过程以及总结几个部分。
2.emWin简介emWin是一种高效的而图形用户界面，是我们能够摆脱处理器和显示控制器而更专注于GUI的设计。
这里借用STemWin的一幅图来说明emWin的作用和结构。
它通过LCD及GUI的配置来驱动底层硬件，而应用程序又是通过调用emWin来实现各种GUI。
5.22版的emWin带有许多常用的显示控制器的驱动（在参考手册Display Driver一章中有详细介绍），因此为我们移植带来了诸多方便。
emWin的更详细的内容可参照它的参考手册。
图1. emWin在项目中的结构3.硬件平台简介笔者使用的是一块以STM32F103VET6为核心的ARM开发板，没有外部的SRAM及Flash。
显示屏为2.8”320*240的彩色液晶屏，屏的驱动芯片为ILI9341（emWin 5.22带有它的驱动）。
屏与CPU 的连接方式为该ARM核心所特有的FSMC_SRAM方式，访问LCD内容时操作就如同读写SRAM一样方便。
如果你想使用其它硬件平台来移植emWin，本文亦有一定的参考价值。
希望本文能助你成功移植emWin。
图2. 硬件平台4.开发环境简介笔者所使用的开发软件为MDK-ARM 4.70。
项目模板使用的是STemWin库中的（可从ST官方下载）。
图3. 项目截图如图，项目下面有3个文件夹，其中Appli存放的是应用层的程序，第二个文件夹就如文件名，存放了emWin5.22所有部件，第三个文件夹存放了一些STM32及其它的库。
具体见附件。
5.移植过程有了MDK-ARM以及STemWin库，整个移植过程应该比较简单。
第54章SCROLLBAR-滚动条控件本期教程讲解STemWin支持的滚动条控件。
54. 1滚动条控件介绍54. 2 官方DIALOG_Scrollbar实例54. 3 使用官方GUIBulder建立单选按钮控件54. 4 总结54.1滚动条控件介绍滚动条用于滚动列表框或任何其他类型的窗口。
它们可以水平 （如下所示）或垂直创建。
通常，滚动条将附加到现有窗口，例如下图所示的列表框：设置皮肤后显示效果如下：54.1.1滚动条支持的通知代码以下事件是滚动条作为WM_NOTIFY_PARENT消息的一部分发送给其父窗口的：消息 描述WM_NOTIFICATION_CLICKED 已单击滚动条。
WM_NOTIFICATION_RELEASED 已释放滚动条。
WM_NOTIFICATION_SCROLLBAR_ADDED 滚动条刚刚被添加 （附加）至现有窗口。
需要通知窗口，以便使其能初始化滚动条。
WM_NOTIFICATION_VALUE_CHANGED 滚动条的值可以通过移动缩略图或按下箭头按钮进行更改54.1.2滚动条支持的键盘反应如果控件具有输入焦点，则它将对下列各键做出反按键 反应GUI_KEY_RIGHT 将滚动条的当前值增加1。
GUI_KEY_DOWN 将滚动条的当前值增加1。
GUI_KEY_PGDOWN 将滚动条的当前值增加1页。
GUI_KEY_LEFT 将滚动条的当前值减小1。
GUI_KEY_UP 将滚动条的当前值减小1。
GUI_KEY_PGUP 将滚动条的当前值减小1页。
54.2官方WIDGET_Scrollbar实例官方的这个实例很好的演示了scrollbar的使用，这个例子在模拟器中的位置：源码如下（程序中进行了详细的注释）：#include "GUI.h"#include "SCROLLBAR.h"#include "EDIT.h"#include <stddef.h>/********************************************************************* defines**********************************************************************//* 制作行3列的方框*/#define EDIT_MAX_X 10#define EDIT_MAX_Y 3/********************************************************************* static variables**********************************************************************/static EDIT_Handle _aahEdit[EDIT_MAX_Y][EDIT_MAX_X];static int _x,_y; /* 注意默认是初始化为的要不就不对了*//********************************************************************* _cbWindow* 桌面窗口的回调函数，当接受到滚动条的WM_NOTIFICATION_VALUE_CHANGED消息时，移动所有的编辑框 **/static void _cbWindow(WM_MESSAGE *pMsg) {/*结构体WM_SCROLL_STATE的定义如下：typedef struct {int NumItems;int v;int PageSize;} WM_SCROLL_STATE;*/WM_SCROLL_STATE ScrollState;switch (pMsg->MsgId) {case WM_NOTIFY_PARENT:/* 接受到的是WM_NOTIFICATION_VALUE_CHANGED消息*/if (pMsg->Data.v == WM_NOTIFICATION_VALUE_CHANGED) {/* 消息时来自水平的滚动条*/if (WM_GetId(pMsg->hWinSrc) == GUI_ID_HSCROLL) {WM_GetScrollState(pMsg->hWinSrc, &ScrollState);/* 根据当前滚动条的位置，移动编辑框*/if (_x != ScrollState.v) {int x, y;for (y = 0; y < EDIT_MAX_Y; y++) {for (x = 0; x < EDIT_MAX_X; x++) {WM_MoveWindow(_aahEdit[y][x], _x - ScrollState.v, 0);}}_x = ScrollState.v;}}}case WM_PAINT:GUI_SetBkColor(GUI_RED);GUI_Clear();break;default:WM_DefaultProc(pMsg);}}/********************************************************************* _DemoScrollbarMove*/static void _DemoScrollbarMove(void) {int x, y;WM_HWIN hWindow;SCROLLBAR_Handle hScroll;/*基本设置*/GUI_SetBkColor(GUI_BLUE);GUI_Clear();GUI_SetColor(GUI_WHITE);GUI_SetFont(&GUI_Font24_ASCII);GUI_SetTextAlign(GUI_TA_HCENTER);GUI_DispStringAt("SCROLLBAR_Move - Sample", 160, 5);GUI_SetTextAlign(GUI_TA_LEFT);GUI_SetColor(0xFFFFFF);GUI_SetFont(&GUI_Font8x16);/* 创建窗口*/hWindow = WM_CreateWindow(50, 90, 220, 79, WM_CF_SHOW, &_cbWindow, 0);/* 创建窗口的子控件*/hScroll = SCROLLBAR_CreateAttached(hWindow, 0);/* 设置滚动条条目的数量*/SCROLLBAR_SetNumItems(hScroll, 48 * EDIT_MAX_X);/* 设置页尺寸页面大小被指定为一页的项目数。
![[STemWin教程入门篇]第一期：emWin介绍](https://uimg.taocdn.com/2f913f52bf1e650e52ea551810a6f524ccbfcbf4.webp)
[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的授权，可以免费的使⽤，想了解其他信息的可以去官⽹查看，这⾥有⼏个官⽹张贴的，客户设计界⾯，设计的的确很好看。
其实话说回来，要想设计⽐较好的界⾯还是得⼿⼯设计，⽤控件很难做出这种效果，除⾮有这种效果的控件。
第12章JPEG图片显示本期主要讲emWin支持的JPEG图片的显示，官方支持的主要有两种显示方法，一种是从外部存储器读取数据到内部存储器后，再显示图片，这种的显示速度要快些。
另一种方法是直接从外部存储器读取数据并显示，这种办法的好处就是不要大的RAM需求，每次读取一些数据显示一次，坏处就是显示速度比较的慢。
由于官方提供的JPEG的显示方法比较耗RAM，这里将2MB的外部SRAM做为emWin的动态内存。
12. 1 JPEG图片支持12. 2 绘制已经加载到存储器的JPEG图片12. 3 绘制无须加载到存储器的JPEG图片12. 4 实验总结12.1J P E G图片支持JPEG（读音为 “jay-peg”）是全彩和灰度图像的标准压缩方法。
JPEG用于压缩 “真实世界”的景象、线条画、卡通，其他非现实图像并不是其强项。
JPEG会有损耗，意指输出图像与输入图像并不完全相同。
因此，如果您必须达到完全相同的输出位，则不能使用JPEG。
不过，对于常见的照片图像，可以得到非常好的压缩级别，看不出变化。
并且如果您能容忍低质量的图像，则可以实现相当高的压缩级别。
这里有一点要特别的注意：出于法律原因，不得分发JPEG算术编码变体的代码。
JPEG规范的算术编码选项似乎属于归IBM、AT&T和Mitsubishi所有的专利。
因此，从法律上讲，如未获得一个或多个许可，则不能使用算术编码。
因此，尚未包含对算术编码的支持。
（由于算术编码相对于未获专利的Huffman模式仅具有限界收益，因此不太可能有太多实施支持它。
）JPEG文件支持不包含提供标准中定义的层次式或无损流程。
12.1.1JPEG格式图标转换某些情况下，将JPEG文件作为C文件添加到项目中非常有用。
这时，首先需要将JPEG文件转换为 C文件。
使用emWin随附的工具Bin2C.exe可完成此任务。
这个Bin2C.exe工具在STemWin软件包里面没有，需要到MDK安装目录里面找。
第50章MULTIEDIT-多行文本控件本期教程讲解STemWin支持的多行文本控件。
50. 1 多行文本控件介绍50. 2 官方WIDGET_Multiedit实例50. 3 使用uCGUIBulder建立多行文本控件50. 4 总结50.1多行文本控件介绍通过MULTIEDIT小工具可编辑多行文本。
它既可以被用作简单的文本编辑器，也可以用来显示静态文本。
该小工具支持带滚动条和不带滚动条的滚动。
下表显示MULTIEDIT小工具的外观：50.1.1多行文本支持的通知代码以下事件是多行文本控件作为WM_NOTIFY_PARENT消息的一部分发送给其父窗口的：消息 描述WM_NOTIFICATION_CLICKED 已单击小工具。
WM_NOTIFICATION_RELEASED 已释放小工具。
WM_NOTIFICATION_MOVED_OUT 已单击小工具，并且指针已移出小工具，但没有释放。
WM_NOTIFICATION_SCROLL_CHANGED 可选滚动条的滚动位置已更改。
WM_NOTIFICATION_VALUE_CHANGED 小工具的文本已更改。
50.1.2多行文本支持的键盘反应如果控件具有输入焦点，则它将对下列各键做出反应：按键 反应GUI_KEY_UP 将光标向上移动一行。
GUI_KEY_DOWN 将光标向下移动一行。
GUI_KEY_RIGHT 将光标向右移动一个字符。
GUI_KEY_LEFT 将光标向左移动一个字符。
GUI_KEY_END 将光标移到当前行的末尾。
GUI_KEY_HOME 将光标移到当前行的开头。
GUI_KEY_BACKSPAC 如果小工具在读/写模式下工作，此按键将删除光标之前的字符。
GUI_KEY_DELETE 如果小工具在读/写模式下工作，此按键将删除光标之下的字符。
GUI_KEY_INSERT 在插入模式和覆盖模式之间切换。
GUI_KEY_ENTER 如果小工具在读/写模式下工作，此按键将在当前位置插入一个新行(’\n’)。
第55章SLIDER-滑块控件本期教程讲解STemWin支持的滑块控件。
55. 1滑块控件介绍55. 2 官方DIALOG_SliderColor实例55. 3 使用官方GUIBulder建立滑块控件55. 4 总结55.1滑块控件介绍滑块控件的常见用途是：使用滑动条来修改各项数值。
滑块包含滑动条和滑动条旁边的刻度标记。
在拖动滑动条时，这些刻度标记可规定光标按指定间距移动。
设置皮肤后显示效果如下：55.1.1滑块支持的通知代码以下事件是滑块控件作为WM_NOTIFY_PARENT消息的一部分发送给其父窗口的：消息 描述WM_NOTIFICATION_CLICKED 已单击滑块小工具。
WM_NOTIFICATION_RELEASED 已释放滑块小工具。
WM_NOTIFICATION_VALUE_CHANGED 滑块控件的值可以通过移动缩略图进行更改。
55.1.2滑块支持的键盘反应如果控件具有输入焦点，则它将对下列各键做出反按键 反应GUI_KEY_RIGHT 将滑动条的当前值增加一个项目。
GUI_KEY_LEFT 将滑动条的当前值减小一个项目。
55.2官方DIALOG_SliderColor实例官方的这个实例很好的演示了slider的使用，这个例子在模拟器中的位置：源码如下（程序中进行了详细的注释，数据部分没有贴出）：/*********************************************************************** Dialog resource* 对话框资源表*/static const GUI_WIDGET_CREATE_INFO _aDialogCreate[] = {{ FRAMEWIN_CreateIndirect, "Adjust color", 0, 10, 40, 300, 160, FRAMEWIN_CF_MOVEABLE}, { TEXT_CreateIndirect, "Red:" , 0, 5, 20, 35, 20, TEXT_CF_LEFT },{ TEXT_CreateIndirect, "Green:", 0, 5, 50, 35, 20, TEXT_CF_LEFT },{ TEXT_CreateIndirect, "Blue:", 0, 5, 80, 35, 20, TEXT_CF_LEFT },{ TEXT_CreateIndirect, "Preview",0, 205, 4, 81, 15, TEXT_CF_HCENTER },{ SLIDER_CreateIndirect, NULL, GUI_ID_SLIDER0, 40, 20, 100, 20 },{ SLIDER_CreateIndirect, NULL, GUI_ID_SLIDER1, 40, 50, 100, 20 },{ SLIDER_CreateIndirect, NULL, GUI_ID_SLIDER2, 40, 80, 100, 20 },{ EDIT_CreateIndirect, NULL, GUI_ID_EDIT0, 145, 20, 30, 20, 0, 3 },{ EDIT_CreateIndirect, NULL, GUI_ID_EDIT1, 145, 50, 30, 20, 0, 3 },{ EDIT_CreateIndirect, NULL, GUI_ID_EDIT2, 145, 80, 30, 20, 0, 3 },{ BUTTON_CreateIndirect, "OK", GUI_ID_OK, 10, 110, 60, 20 },{ BUTTON_CreateIndirect, "Cancel", GUI_ID_CANCEL, 230, 110, 60, 20 },};/*********************************************************************** Static data, colors************************************************************************/static U8 _aColorSep[3] = {0, 127, 255}; // Red, green and blue components/*********************************************************************** _OnPaint* 这个函数用于绘制三个小的单色矩形方框和一个大的举行方框*/static void _OnPaint(void) {//// 绘制RGB颜色方框//GUI_SetColor(_aColorSep[0]);GUI_FillRect(180, 20, 199, 39);GUI_SetColor(_aColorSep[1] << 8);GUI_FillRect(180, 50, 199, 69);GUI_SetColor(((U32)_aColorSep[2]) << 16);GUI_FillRect(180, 80, 199, 99);//// 绘制RGB三种颜色混合后的结果//GUI_SetColor(_aColorSep[0] | (((U32)_aColorSep[1]) << 8) | (((U32)_aColorSep[2]) << 16));GUI_FillRect(205, 20, 285, 99);}/*********************************************************************** _OnValueChanged*/static void _OnValueChanged(WM_HWIN hDlg, int Id) {unsigned Index;unsigned v;WM_HWIN hSlider;WM_HWIN hEdit;Index = 0;v = 0;if ((Id >= GUI_ID_SLIDER0) && (Id <= GUI_ID_SLIDER2)) {Index = Id - GUI_ID_SLIDER0;//// 滑块的数值被更改后，更新编辑框中的数值//hSlider = WM_GetDialogItem(hDlg, GUI_ID_SLIDER0 + Index);hEdit = WM_GetDialogItem(hDlg, GUI_ID_EDIT0 + Index);v = SLIDER_GetValue(hSlider);EDIT_SetValue(hEdit, v);} else if ((Id >= GUI_ID_EDIT0) && (Id <= GUI_ID_EDIT2)) {Index = Id - GUI_ID_EDIT0;//// 编辑框中的数值更改后，更新滑块的数值//hSlider = WM_GetDialogItem(hDlg, GUI_ID_SLIDER0 + Index);hEdit = WM_GetDialogItem(hDlg, GUI_ID_EDIT0 + Index);v = EDIT_GetValue(hEdit);SLIDER_SetValue(hSlider, v);}_aColorSep[Index] = v;//// 最后通过使得对话框客户端窗口无效，进而执行对话框回调函数中的WM_PAINT消息 //WM_InvalidateWindow(WM_GetClientWindow(hDlg));}/*********************************************************************** _cbBkWindow* 桌面窗口回调函数*/static void _cbBkWindow(WM_MESSAGE * pMsg) {int xPos;int yPos;xPos = LCD_GetXSize() / 2 - bmSeggerLogoBlue.XSize/2;yPos = LCD_GetYSize() / 2 - bmSeggerLogoBlue.YSize/2 ;switch (pMsg->MsgId) {case WM_PAINT:GUI_SetBkColor(GUI_BLUE);GUI_Clear();GUI_SetColor(GUI_WHITE);GUI_SetFont(&GUI_Font24_ASCII);GUI_DispStringHCenterAt("DIALOG_SliderColor - Sample", 160, 5);GUI_DrawBitmap(&bmSeggerLogoBlue, xPos, yPos );default:WM_DefaultProc(pMsg);}}/*********************************************************************** _cbCallback*/static void _cbCallback(WM_MESSAGE * pMsg) {WM_HWIN hDlg;WM_HWIN hItem;int i;int NCode;int Id;hDlg = pMsg->hWin;switch (pMsg->MsgId) {case WM_PAINT:_OnPaint();return;case WM_INIT_DIALOG:for (i = 0; i < 3; i++) {/* 初始化滑块 */hItem = WM_GetDialogItem(hDlg, GUI_ID_SLIDER0 + i);SLIDER_SetRange(hItem, 0, 255);SLIDER_SetValue(hItem, _aColorSep[i]);//// 初始化编辑框//hItem = WM_GetDialogItem(hDlg, GUI_ID_EDIT0 + i);EDIT_SetDecMode(hItem, _aColorSep[i], 0, 255, 0, 0);}break;case WM_KEY:switch (((WM_KEY_INFO*)(pMsg->Data.p))->Key) {case GUI_KEY_ESCAPE:;break;case GUI_KEY_ENTER:GUI_EndDialog(hDlg, 0);break;}break;case WM_NOTIFY_PARENT:Id = WM_GetId(pMsg->hWinSrc); // Id of widgetNCode = pMsg->Data.v; // Notification codeswitch (NCode) {case WM_NOTIFICATION_RELEASED: // React only if released if (Id == GUI_ID_OK) { // OK ButtonGUI_EndDialog(hDlg, 0);}if (Id == GUI_ID_CANCEL) { // Cancel ButtonGUI_EndDialog(hDlg, 1);}break;case WM_NOTIFICATION_VALUE_CHANGED: // Value has changed_OnValueChanged(hDlg, Id);break;}break;default:WM_DefaultProc(pMsg);}}/********************************************************************* ** Public code*********************************************************************** *//********************************************************************* ** MainTask*/void MainTask(void) {GUI_Init();GUI_CURSOR_Show();WM_SetCallback(WM_HBKWIN, _cbBkWindow);WM_SetCreateFlags(WM_CF_MEMDEV); // Use memory devices on all windows to avoid flicker while (1) {GUI_ExecDialogBox(_aDialogCreate, GUI_COUNTOF(_aDialogCreate), &_cbCallback, 0, 0, 0); GUI_Delay(1000);}}实际显示效果如下：55.3使用官方GUIBulder建立单选按钮控件这里用GUIBulder5.22建立一个如下的界面（分辨率480*272）：默认建立的是水平滑块，可以通过选中滑块后，右击鼠标更改为垂直的：将生成的代码直接复制到模拟器或者开发板上面运行，实际显示效果如下（生成的代码在本期教程配套的例子中）：55.4总结本期教程主要是跟大家讲解了滑块控件的基础知识。
基于EMWIN的微控制器图形界面开发摘要：开发微控制器的图形界面，能更好的完成微控制器与人的人机交互，Segger公司推出的EMWIN图形软件库，适应于微控制器界面开发。
本文以STM32F429为控制芯片，移植STemWin软件库，设计了光耦参数测试仪的显示界面，通过测试，证明了EMWIN的可行性和在微控制器中的优势所在。
关键词：微控制器，图形界面，EMWIN，STM32F429Abstract: The development of micro-controller graphical interface, can better complete the microcontroller and human human-computer interaction, Segger launched EMWIN graphics software library, adapted to the microcontroller interface development. In this paper, STM32F429 as the control chip, transplant STemWin software library, designed the optocoupler parameter tester display interface, through testing, proved the feasibility of EMWIN and the advantages of the microcontroller.Keyword: micro-controller，graphical interface，EMWIN，STM32F4291引言随着微控制器的发展，人机交互界面变得越来越多样化。
图形界面耗费内存较大，但微控制器的处理能力有限，因此一种小型的图形界面系统EMWIN得以广泛应用。
emWIN——Graph控件的负数刻度//关键代码节选hItem = pMsg->hWin;FRAMEWIN_SetText(hItem, "realiot");/* 初始化Framewin控件 */hItem = pMsg->hWin;FRAMEWIN_SetText(hItem, "This is a test for STM32F429 graph");FRAMEWIN_SetFont(hItem, GUI_FONT_20_1);/* 初始化Graph控件 */hItem = WM_GetDialogItem(pMsg->hWin, ID_GRAPH_0);GRAPH_SetColor(hItem, GUI_WHITE, GRAPH_CI_BK);GRAPH_SetColor(hItem, GUI_BLACK, GRAPH_CI_GRID);GRAPH_SetBorder(hItem, 40, 5, 5, 5); //设置左、右、上、下屏幕边距；合适的边距参数可以影响Y轴刻度的显⽰效果。
GRAPH_SetGridDistX(hItem, 25);//设置X轴的⽹格宽度GRAPH_SetGridDistY(hItem, 25);//设置Y轴的⽹格宽度GRAPH_SetLineStyleH(hItem, GUI_LS_DOT);GRAPH_SetLineStyleV(hItem, GUI_LS_DOT);GRAPH_SetGridVis(hItem, 1);/* 创建垂直刻度对象 */hScaleV = GRAPH_SCALE_Create(20, GUI_TA_HCENTER | GUI_TA_LEFT, GRAPH_SCALE_CF_VERTICAL, 25);GRAPH_AttachScale(hItem, hScaleV);GRAPH_SCALE_SetOff(hScaleV, 200); //设置Y轴刻度的偏移量，⽤于产⽣负数的刻度；本代码对应的屏幕尺⼨是800*480//⽽graph控件的位置⼤致是420⾼度，考虑到边界的⾼度，将偏移量设为200，实测Y轴的0刻度是控件中间位置。
第40章BUTTON-按钮控件从本期教程开始讲解STemWin支持的控件。
现在STemWin支持的控件类似已经非常完善了。
利用好这些控件，会让设计的人机界面更加人性化。
本期教程先从按钮的设计开始跟大家讲解。
40. 1 按钮控件介绍40. 2 官方WIDGET_SimpleButton实例40. 3 官方WIDGET_PhoneButton实例40. 4 对话框上使用按钮控件40. 5 总结40.1按钮控件介绍按钮控件默认的显示效果如下：开启皮肤后显示效果如下：40.1.1按钮支持的通知代码以下事件是按钮控件作为WM_NOTIFY_PARENT消息的一部分发送给其父窗口的：消息 描述WM_NOTIFICATION_CLICKED 按钮已被点击。
WM_NOTIFICATION_RELEASED 按钮已被释放。
WM_NOTIFICATION_MOVED_OUT 按钮已被点击，且指针已移出按钮并且没有释放。
40.1.2按钮支持键盘反应如果控件具有输入焦点，则它将对下列各键做出反应：按键 反应GUI_KEY_ENTER 此类键按下后，按钮认为它被按下并立即释放，然后作出相应反应。
GUI_KEY_SPACE 此类键按下后，按钮状态改变为已按下。
键释放后，按钮状态改变为未按下。
40.2官方WIDGET_SimpleButton实例这个例子就是实现一个简单的按键显示功能。
这个例子的位置在：源代码如下：#include "GUI.h"#include "BUTTON.h"/********************************************************************* static code**********************************************************************//********************************************************************* _DemoButton*/static void _DemoButton(void) {BUTTON_Handle hButton;（1）GUI_SetFont(&GUI_Font8x16);GUI_DispStringHCenterAt("Click on button...", 160, 90);//// Create the button and set text//hButton = BUTTON_Create(110, 110, 100, 40, GUI_ID_OK, WM_CF_SHOW);（2） BUTTON_SetText(hButton, "Click me...");（3）//// Let window manager handle the button//while (GUI_WaitKey() != GUI_ID_OK); （4）//// Delete the button//BUTTON_Delete(hButton);（5）GUI_ClearRect(0, 50, 319, 239);GUI_Delay(1000);}/*********************************************************************** Public code************************************************************************//*********************************************************************** MainTask*/void MainTask(void) {GUI_Init();GUI_SetBkColor(GUI_BLACK);GUI_Clear();GUI_SetColor(GUI_WHITE);GUI_SetFont(&GUI_Font24_ASCII);GUI_DispStringHCenterAt("WIDGET_SimpleButton - Sample", 160, 5);while (1) {_DemoButton();}}1.按钮句柄。
