ucgui下制作漂亮按键 (amobbs.com 阿莫电子技术论坛) -

chun2495 发表于 2013-9-13 13:39:13

ucgui下制作漂亮按键

最近学习ucgui，以前做界面都是贴图的。
现在想用gui做出如下风格的按键

按下的效果为

众所周知 ucgui的按键效果类似于xp以前的风格。
论坛里有位兄弟当时想把按键四周倒圆角，花费了很大力气。
经过一番周折将步骤分享给大家

1，用photoshop做出类似上面两组按键（弹起和按下）
2，用ucgui自带软件uC-GUI-BitmapConvert.exe转换两组位图
3，
hButton3 = BUTTON_Create(110,525,160,70, GUI_ID_OK, BUTTON_CF_SHOW);//创建按钮大小和位图大小一样460*70
BUTTON_SetBitmap(hButton3, 0, &bmpatient_0);//设置弹起位图
BUTTON_SetBitmap(hButton3, 1, &bmpatient_1);//设置按下位图
这段代码很简单，但是做出来的效果如下：
（这个是相机拍摄的效果不好）
能看出来，边框影响效果。
4，为了去掉边框我们将button.c中3d效果去掉
/* Support for 3D effects */
#ifndef BUTTON_USE_3D
#define BUTTON_USE_3D 0
#endif
效果如下：

但是按下时会有白色背景闪烁并且有虚线边框聚焦，如图

闪烁效果我没法捕捉，就是按下时会看到按键白色闪烁一下然后才是按下状态
4，解决闪烁：闪烁的原因是因为默认显示颜色为白色
在button.c里
/* Define colors */
#ifndef BUTTON_BKCOLOR0_DEFAULT
   #define BUTTON_BKCOLOR0_DEFAULT 0xAAAAAA//这个是弹起时的背景颜色
#endif

#ifndef BUTTON_BKCOLOR1_DEFAULT
   #define BUTTON_BKCOLOR1_DEFAULT GUI_WHITE//这个是按下时的背景颜色
#endif
这就是为什么会闪烁了
我们可以这样设置（0x864B2E是按键的背景色）
BUTTON_SetBkColor(hButton3, 0, 0x864B2E);//0代表弹起
BUTTON_SetBkColor(hButton3, 1, 0x864B2E);//1代表按下
5，解决聚焦：有两种方式
1>.BUTTON_SetState(hButton3,BUTTON_STATE_PRESSED);
直接设置状态为按下状态，这样就没有聚焦了。但是在初始化时，该按键会被设置为按下状态，需要在其后添加这一句
BUTTON_SetPressed       (hButton3, 0);//初始状态正常还是按下
这样就可以了。
2>.BUTTON_SetFocusColor    (hButton3, CHUN_MENU);//将聚焦框颜色设为背景色就看不见聚焦效果了
这下按键的谈起和释放都可以按照自己喜欢的风格做了。

现将button里函数说明分享下，说明书上很多都没，这是我一个个调试验证的。

GUI_COLOR    BUTTON_GetBkColor       (BUTTON_Handle hObj, unsigned int Index);//背景色，index=0 弹起背景；index=1按下背景
const GUI_BITMAP GUI_UNI_PTR * BUTTON_GetBitmap(BUTTON_Handle hObj,unsigned int Index);//取得位图数据index弹起和按下
const GUI_FONT GUI_UNI_PTR * BUTTON_GetFont(BUTTON_Handle hObj);//取得按键字体
void          BUTTON_GetText          (BUTTON_Handle hObj, char * pBuffer, int MaxLen);//取得按键字符串
GUI_COLOR    BUTTON_GetTextColor    (BUTTON_Handle hObj, unsigned int Index);//取得按键字符串颜色
unsigned       BUTTON_IsPressed       (BUTTON_Handle hObj);//检测按键是否按下
void          BUTTON_SetBitmap       (BUTTON_Handle hObj, unsigned int Index, const GUI_BITMAP * pBitmap);//设置位图，位图由uC-GUI-BitmapConvert.exe转换得到
void          BUTTON_SetBitmapEx    (BUTTON_Handle hObj, unsigned int Index, const GUI_BITMAP * pBitmap, int x, int y);//在相对buttonX,Y位置显示位图
void          BUTTON_SetBkColor       (BUTTON_Handle hObj, unsigned int Index, GUI_COLOR Color);//设置谈起和按下背景颜色
void          BUTTON_SetBMP          (BUTTON_Handle hObj, unsigned int Index, const void * pBitmap);//没调试出，不理解
void          BUTTON_SetBMPEx       (BUTTON_Handle hObj, unsigned int Index, const void * pBitmap, int x, int y);//没调试出，不理解
void          BUTTON_SetFont          (BUTTON_Handle hObj, const GUI_FONT GUI_UNI_PTR * pfont);//设置字体
void          BUTTON_SetState       (BUTTON_Handle hObj, int State);                                  /* Not to be doc. */
//设置聚焦还是按下
//#define BUTTON_STATE_FOCUS    WIDGET_STATE_FOCUS
//#define BUTTON_STATE_PRESSED WIDGET_STATE_USER0
void          BUTTON_SetPressed       (BUTTON_Handle hObj, int State);//设置按键初始化状态：弹起0；按下1
GUI_COLOR    BUTTON_SetFocusColor    (BUTTON_Handle hObj, GUI_COLOR Color);//设置聚焦颜色
void          BUTTON_SetFocussable    (BUTTON_Handle hObj, int State);//没调试出，不理解
void          BUTTON_SetStreamedBitmap(BUTTON_Handle hObj, unsigned int Index, const GUI_BITMAP_STREAM * pBitmap);//没调试出，不理解
void          BUTTON_SetStreamedBitmapEx(BUTTON_Handle hObj, unsigned int Index, const GUI_BITMAP_STREAM * pBitmap, int x, int y);//没调试出，不理解
void          BUTTON_SetText          (BUTTON_Handle hObj, const char* s);//添加字符串
void          BUTTON_SetTextAlign    (BUTTON_Handle hObj, int Align);//设置字符串对齐方式
void          BUTTON_SetTextColor    (BUTTON_Handle hObj, unsigned int Index, GUI_COLOR Color);//字符串颜色
void          BUTTON_SetSelfDrawEx    (BUTTON_Handle hObj, unsigned int Index, void (*pDraw)(void), int x, int y); /* Not to be doc. *///没调试出，不理解
void          BUTTON_SetSelfDraw    (BUTTON_Handle hObj, unsigned int Index, void (*pDraw)(void));             /* Not to be doc. *///没调试出，不理解
希望对大家有用，网上关于ucgui的资料不全。
还请高手给我说下我没调试出的函数式什么意思。

wxty 发表于 2013-9-13 15:57:15

传说中的：沙发。？

ark_hd_hero 发表于 2013-9-13 16:04:33

我一般都是先做图片，然后直接显示图片.
PS水平有多高，作出的GUI就有多漂亮.

cc1987 发表于 2013-9-13 16:08:18

{:smile:}高手

shuiluo2 发表于 2013-9-13 16:20:49

这种效果感觉emwin可以实现嘛

Eric2013 发表于 2013-9-13 16:21:02

官网有个文件的，教如何的设计用户控件，这里我传一下例子和文档

上面上传的那个例子的显示效果，这个只是个简单的实例，想做的漂亮点，需要下点功夫

孩子莫悲伤 发表于 2013-9-13 16:22:59

挺漂亮的!~~~~~~~~~~~~

jisaowang 发表于 2013-9-13 16:28:22

现在都流行扁平化了，这些光溜溜的效果都不流行了{:lol:}

Name_006 发表于 2013-9-13 16:34:55

啊哈最喜欢这样的文章最近在弄 em win学习下

lgg88 发表于 2013-9-13 16:53:35

mark

dongfo 发表于 2013-9-13 16:54:00

大爱分享经验者

bbandpp 发表于 2013-9-13 17:03:52

这是个好资料

bbandpp 发表于 2013-9-13 17:26:44

楼主，顺便问下，这个问题遇到过吗
http://www.amobbs.com/thread-5541511-1-1.html

chun2495 发表于 2013-9-16 11:28:05

bbandpp 发表于 2013-9-13 17:26 static/image/common/back.gif
楼主，顺便问下，这个问题遇到过吗
http://www.amobbs.com/thread-5541511-1-1.html

emwin我很想用但据说只有arm芯片才可以我用的是FPGA的软核nios听有位大神说好像emwin不支持FPGA

guer 发表于 2013-9-16 12:48:14

标记一下，看看

Cortex-M4 发表于 2013-9-16 12:53:18

圆角按钮也不是很难实现，可以参考PICgui

犯戒和尚 发表于 2014-1-16 10:20:43

学习下{:smile:}

nuncle 发表于 2014-1-20 13:01:03

{:smile:}{:smile:}MARK

chjf 发表于 2014-1-20 14:23:15

标记.学习学习.

tt1yy1tt1yy1 发表于 2014-2-3 17:50:27

谢谢。学习学习

yehupeng 发表于 2014-2-3 23:42:10

大过年的，楼主无私奉献的精神值得学习啊。emwin的说明的确很多不全啊

enovo2468 发表于 2014-2-4 11:51:01

哇，好帖

forschumi 发表于 2014-2-4 12:26:06

ark_hd_hero 发表于 2013-9-13 16:04
我一般都是先做图片，然后直接显示图片.
PS水平有多高，作出的GUI就有多漂亮.
...

说的很在理！UI基本上还是建立在图片元素上的，图片质量高了，UI也就漂亮，但是质量高了，带来的是加载速度慢，处理负担重的后果，不知道我说的对不……

unifax001 发表于 2014-2-23 13:15:12

forschumi 发表于 2014-2-4 12:26
说的很在理！UI基本上还是建立在图片元素上的，图片质量高了，UI也就漂亮，但是质量高了，带来的是加载速 ...

不至于，处理个按钮图片加载个ui还说嫌慢是你CPU选择的不行。各有各外设。

Smartist 发表于 2014-3-4 19:56:59

mark~~~~~~~~~~~~~~~~~~~~~~

yangzi8000 发表于 2014-6-22 12:12:04

漂亮按键。。。。。。。。。。。

帅小伙 发表于 2014-6-26 08:03:54

Mark................................

lzchuo 发表于 2014-6-26 09:38:48

还是不错的效果

blue1025 发表于 2014-6-27 08:12:06

这个不错，我那学生有这水平就好了。

wind2100 发表于 2014-6-27 08:16:10

这个和VC里面差不多要想靓就得加载图片

tianming 发表于 2014-7-4 09:43:31

MARK下~~~

bdzhaojing 发表于 2014-7-4 13:15:51

ucgui下制作漂亮按键

adplus 发表于 2014-8-15 10:51:20

学习下，正在研究自定义风格的WIDGET

mcusy 发表于 2014-8-29 15:30:35

顶一下，正打算学习呢

happyliu 发表于 2014-10-5 12:32:44

有源码修改起来方便，选GUI有源码才好，谢谢分享做个标记

lawuweijin 发表于 2014-10-5 12:46:27

不错。学习一下。

liuzhe910422 发表于 2014-10-5 17:59:39

不懂ps的人情何以堪啊！

两个嘴巴笑110 发表于 2014-10-5 18:21:52

看起来好羡慕啊。我还在ucos入门啊。

lingdianhao 发表于 2014-10-5 18:48:58

正学GUI呢。

chun2495 发表于 2014-10-5 23:34:10

liuzhe910422 发表于 2014-10-5 17:59
不懂ps的人情何以堪啊！

下载iphone 或者ipad的psd 直接打开照着用就好了

Vampireyifeng 发表于 2014-10-6 13:50:14

ps才是王道{:biggrin:}

XYH9593 发表于 2014-10-15 22:14:34

学习学习！

lze110 发表于 2014-10-15 22:22:36

不错，高手

kisscontrol 发表于 2014-10-29 15:28:37

楼主是有心人

siquche 发表于 2014-10-31 22:33:24

太好了，可以学习一下

max1992 发表于 2014-11-1 10:51:29

还是有点麻烦

何小小宝 发表于 2014-11-11 22:56:36

请教一下用资源链表创建按键的时候怎么显示位图呢

爺@龙行天下 发表于 2015-7-9 08:49:24

楼主，显示button_setbmp跟显示位图差不多，注意下格式，试问下button怎么让背景是透明的，不要凸起

lyl3257 发表于 2015-7-30 16:06:24

正想学习，谢谢！

SealedGhost 发表于 2015-8-13 17:46:51

万能的WIDGET_SetSelfDraw

chun2495 发表于 2015-8-13 18:01:59

爺@龙行天下发表于 2015-7-9 08:49
楼主，显示button_setbmp跟显示位图差不多，注意下格式，试问下button怎么让背景是透明的，不要凸起
...

这个ucgui已经办不到了要考emwin

wanyyxum 发表于 2015-9-11 09:49:54

好东西，得mark下！{:lol:}

121854416 发表于 2015-9-11 10:27:12

楼主发贴的板块不对。

zuokong2006 发表于 2015-9-11 14:18:33

学习下{:smile:}

modbus 发表于 2015-9-11 17:23:29

确实感觉PS才是王道，万能钥匙

小Z 发表于 2016-7-27 10:45:55

好资料，谢谢lz分享

hxhz123456 发表于 2017-7-8 17:42:04

谢谢，下载了

页: [1]

amobbs.com 阿莫电子技术论坛's Archiver

ucgui下制作漂亮按键