emWin 2天速成实例教程014_BMP位图图片显示以及位图皮肤的使用方法

时间:2024-03-25 16:04:11

备注:(1)打开工程目录下的"Exe\GUISimulationDebug.exe"即可看到效果。(2)看完教程000~005就基本会用emWin做项目,其他章节可以需要时再参考。

 

一、在CodeBlocks中使用位图

备注:GLCD屏支持24bbp(RGB888)、16bbp(RGB565)格式的BMP位图(不支持其他格式的位图),16bbp(RGB565)BMP位图可以通过photoshop保存得到,因此,在CodeBlocks中也需要使用这种格式的位图,以photoshop为例:

emWin 2天速成实例教程014_BMP位图图片显示以及位图皮肤的使用方法


以教程000“如何快速入门ucGUI_emWin”为例介绍emWin位图以及位图皮肤的使用方法。

(1)截屏模拟器并保存为以下两个bmp文件,一个是界面截屏(为了区别截屏界面,特地变了下颜色),另一个是界面截屏的反色,文件名对应为bitmap_n.bmp、bitmap_m.bmp:

emWin 2天速成实例教程014_BMP位图图片显示以及位图皮肤的使用方法


  emWin 2天速成实例教程014_BMP位图图片显示以及位图皮肤的使用方法    emWin 2天速成实例教程014_BMP位图图片显示以及位图皮肤的使用方法

变色的用于正常背景显示,反色的用于按键点击。

备注:如果你想要精美华丽的界面效果,也是按照此方法:截屏原始界面->美工处理->设置emWin使用图片皮肤(整幅图片,不需要切片分解)。

 

(2)用BmpCvt_V530.exe(”软件/资料下载”栏目可下载)将位图转换为C文件:bitmap_n.c、bitmap_m.c

emWin 2天速成实例教程014_BMP位图图片显示以及位图皮肤的使用方法


emWin 2天速成实例教程014_BMP位图图片显示以及位图皮肤的使用方法


(3)将bitmap_n.c、bitmap_m.c拷贝到工程目录并添加到CodeBlocks工程:

emWin 2天速成实例教程014_BMP位图图片显示以及位图皮肤的使用方法


(4)修改程序显示背景位图:

emWin 2天速成实例教程014_BMP位图图片显示以及位图皮肤的使用方法

备注:为何是GUI_DrawBitmap(&bmbitmap_n,-5,-18);而不是GUI_DrawBitmap(&bmbitmap_n,0,0);?因为是在Framewin的Client区中显示图片,所以要把Framewin的边框偏移切掉(当然,你也可以做成不含边框的图片)。

 

(5)按钮位图皮肤的实现:

将skinPRJ_WINemWin530noOS_CodeBlocks_GBK.rar例程(在”GLCD资料包”里面可以找到)的Application/skin目录拷贝到工程目录并添加到CodeBlocks工程,skin目录的程序是尼奇光电编写的skinning方式实现位图皮肤程序(关于实现原理可以看文章的最后)

emWin 2天速成实例教程014_BMP位图图片显示以及位图皮肤的使用方法

  

修改程序:

emWin 2天速成实例教程014_BMP位图图片显示以及位图皮肤的使用方法

这个步骤的目的是将2个状态的皮肤图片的”指针”存于父页面之中,这个父页面之中的所有子控件就可以共享这幅图片(这就是整幅图片不需要切片分解的原理),如果将所有子控件设置为使用该皮肤图片时,emWin内部会自动调用图片作为皮肤(请不要想着还要自己去实现)。2个状态的图片包括:正常、按下/标记(比如选择控件的打勾状态),还有"禁用"和"聚焦"是可选状态。


设置控件使用位图皮肤:

emWin 2天速成实例教程014_BMP位图图片显示以及位图皮肤的使用方法

SKIN_button3C ”3C”是什么意思?请看源码注释。

  

编译运行:

emWin 2天速成实例教程014_BMP位图图片显示以及位图皮肤的使用方法

 

二、在GLCD屏中使用位图

GLCD屏中使用位图,除了生成bitmap_n.cbitmap_m.c不一样以外,其他和CodeBlocks是一样。

(1)将bitmap_n.bmp和bitmap_m.bmp拷贝到GLCD的Nand-Flash的pics目录。

(2)双击Nand-Flash根目录下的bmpGen_v120.exe工具,将生成bitmap.c和bitmap.h两个文件。

(3)将bitmap.c和bitmap.h加到MDK工程,即可像CodeBlocks一样使用bitmap_n、bitmap_m两个位图:

emWin 2天速成实例教程014_BMP位图图片显示以及位图皮肤的使用方法

  

三、emWin通过skinning方式实现控件位图皮肤

1)emWin传统贴皮肤图片的方法,是调用APP函数XXXX_SetBitmap()方式实现,但非常非常麻烦。

2)要想把控件显示出来,emWin每种控件都有1个控件绘制函数,而把这个控件绘制函数改成我们自己编写的"自定义绘制函数",这样我们想把这个控件画成什么样都行,emWin已经不参与这个控件的绘制工作了;在这个自定义绘制函数里面我们什么都不干,只显示出这个控件的图片,这就是用skinning方式实现位图皮肤。

3)支持整幅图片贴图,不需要对整幅图片进行切片分解,可以非常快速做界面贴图。

emWin 2天速成实例教程014_BMP位图图片显示以及位图皮肤的使用方法

如上图所示,(x0,y0)为整幅图片的显示坐标,(x1,y1)和(x2,y2)是emWin为控件自动生成的剪切显示坐标,我们只需要调用GUI_DrawBitmap()函数在(x0,y0)显示整幅图片即可,emWin会自动剪切显示出该控件的位图皮肤。

 

(1)Button控件的自定义绘制函数:

SKIN_button.c、skin.h

 

(2)Skinning方式实现位图皮肤的实施步骤:

1)创建窗体时,将"页面图片结构体指针"保存于窗体中:

staticWIN_BITMAP BMP_WindowDLG1; WIN_BITMAP *pBMP_WindowDLG1 = &BMP_WindowDLG1;

//将不同状态的页面BMP位图赋值给"页面图片结构体"(所有成员都要赋值)

BMP_WindowDLG1.normal= &bmbitmap_n;

BMP_WindowDLG1.mark= &bmbitmap_m;

BMP_WindowDLG1.focus= &bmbitmap_n;

BMP_WindowDLG1.disable= &bmbitmap_n;

BMP_WindowDLG1.thumbN= &bmbitmap_n;

BMP_WindowDLG1.thumbM= &bmbitmap_n;

WM_SetUserData(hWin,&pBMP_WindowDLG1, sizeof(pBMP_WindowDLG1));//将指针写到用户数据区

 

2)在窗体初始化WM_INIT_DIALOG消息中,把BUTTON控件的绘制函数改成自定义绘制函数:
hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_0);//获取句柄
BUTTON_SetSkin(hItem, SKIN_button3C);//将这个BUTTON控件改成自定义绘制函数

  

(3)总结:

以整幅图片实现emWin位图皮肤应该是尼奇光电业界首创的方法,可以大大减轻控件贴图的工作量,保守估计贴图工作效率至少提高10倍以上。如果把每个控件对应的图片先切片分解下来,然后再转换成C文件,最后再贴图到控件上面去,那样工作量将是非常恐怖的!

emWin 2天速成实例教程014_BMP位图图片显示以及位图皮肤的使用方法


 

源码/软件下载