首页 > 技术服务> emWin学习课堂emWin学习课堂

技术支持与下载

我们为您提供最优质的售前售后服务,有任何问题及建议都可以联系我们。

免费技术服务热线:

市场业务咨询电话:

周一至周五(8:30-12:00、13:00-17:30)

联系我们

广州市番禺区南华路62号华景新城华倚园1梯301

全国销售网络

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

日期:2017-09-14 16:35:43  来源:

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

 

一、在CodeBlocks中使用位图

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

 

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

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

 

       

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

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

 

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

  

 

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

 

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

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

 

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

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

 

修改程序:

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


设置控件使用位图皮肤:

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

 

编译运行:


后续更新:

例程程序中加入了IMAGE控件使用图片,我们利用IMAGE控件使用图片是非常方便的;除了背景图片以外(一般在WM_PAINT消息中用2D绘图方法显示图片),其他地方用IMAGE控件将方便很多,当然控件位图皮肤是用位图皮肤方法实现而不是用IMAGE控件:

    


二、在GLCD屏中使用位图

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

(1)bitmap_n.bmpbitmap_m.bmp拷贝到GLCDNand-Flashpics目录。

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

(3)bitmap.cbitmap.h加到MDK工程,即可像CodeBlocks一样使用bitmap_nbitmap_m两个位图:

 

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

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

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

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

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

 

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

SKIN_button.cskin.h

 

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

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

static WIN_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文件,最后再贴图到控件上面去,那样工作量将是非常恐怖的!

 


本地下载 网盘下载
版权所有©2005-2016 广州尼奇光电科技有限公司 | 粤ICP备17079366号-1

更多...