自己改造SLIDER显示外观的方法分享

sealedghost · 发表于 2015-9-8 22:30:36

刚进公司第一个项目就要用emWin，边学边用了一个月，初步掌握了emWin的机制，但是一直想做出比较出彩的外观却找不到符合意愿的经验贴，最后通过分析UCGUI的源码，才对emWin中WIDGET有了更深一层的了解。在此发帖分享，以自己写的SLIDER为例。
声明：实际上我只是将ucGUI中的方法”翻译“过来，已经学习过ucGUI 的”大神“没必要再看下去，此贴适合emWin浅学者。另，本帖中代码大部分来自ucGUI源码，欲”大彻大悟“请参悟ucGUI源码[s:129]。

原始样式

这是emWin手册(V5.12)中的滑块样式    这是自己改造后的样式，改造的地方有：1.将滑块的方形变为圆形；2.去除了刻度线，滑块的当前值显示在滑块中央;3.滑块中间的Slot和滑块可设置颜色和有焦点时的颜色(我没有仔细看过emWin的API是否支持)。
  接下来说一下自己的做法：
      1.首先是搞清楚小工具的后台数据结构。
         emWin中的每个WIDGET都有一个结构体记录该WIDGET的各种属性（位置、颜色、内容等），通过指向每个WIDGET的结构体的指针pObj，在emWin的api范围内只能访问所有WIDGET共用的部分元素,结构体为WM_Obj，通过Keil的自动提示可看出这个结构体只包含了基础的WIDGET属性。

pObj

但是具体到SLIDER、BUTTON...的SLIDER_Obj、BUTTON_Obj...的结构体是什么样子，emWin中并没有给出。我们改造WIDGET样式的核心是定义自用的结构体(<WIDGET_Obj>)，并将自定义的结构“注册”到emWin的空间中去。我理解的UCGUI就是这么做的。
2.定义数据结构,ucGUI中定义的SLIDER_Obj结构体类型如下：

typedef struct
{
WIDGET Widget; // emWin可见的结构体，每个小工具都含此结构体，类似于面向对象语言中所继承的父类。
GUI_COLOR aBkColor[2]; // 自定义的背景颜色属性
GUI_COLOR aColor[4]; // 自定义的颜色属性
int Min,Max,v; // 自定义用来表示滑块最大值、最小值、当前值的变量
int Flags; // 我暂时没用到
int NumTicks; // 刻度线数目
I16 Width; // 滑块的宽度
}SLIDER_Obj;

复制代码

   3.将自定义数据结构“注册”到emWin的空间。
      我理解的emWin本身的"SLIDER_Obj"肯定包含了上述属性，奈何我们看不到，只能不管三七二十一，重新定义一遍。
      "注册"结构体的方法为

这里说是“注册”就是在创建你的<WIDGET>这个窗口时（别忘了每个小工具本质就是窗口）,为这个<WIDGET>分配 sizeof(SLIDER_Obj) - sizeof(WM_Obj) 的额外字节的用户数据。因为我还没想到应该怎么称呼这个操作，姑且就叫“注册”吧。
刚开始学习是这个设置用户额外数据(<WIDGET>_SetUserData)是个“然并卵‘的功能，想不到用这么大的能耐。分析到这儿，我们可以猜测emWin的后台结构体的样子目前是这个样子：

struct

4.访问和修改结构体中的属性
   访问和修改通过指向相应小工具结构体的指针，而指针通过小工具的句柄获得。
   <WIDGET>_Obj * pObj  = (<WIDGET>_Obj *) GUI_ALLOC_h2p(hObj)。 hObj为小工具的句柄。
   例如：SLIDER_Obj * pObj = (SLIDER_Obj *) GUI_ALLOC_h2p(pMsg->hWin) ;
   通过得到的pObj 指针可以访问结构体。
5.绘制窗口
   更改样式的最后一步是重新定义小工具的Paint函数，毕竟虽然自定义了小工具的数据结构，但是绘制函数不改变的话，样式是不会改变的。
case WM_PAINT 后调用自己的 _OnPaint，你可以根据想要绘制的样式来确定自定义结构体中包含哪些属性，并基于这些属性值来通过（GUI_DrawXXX）基本绘图函数来设计自己的小工具外观。
拿开始部分的自定义滑块的绘制过程为：先根据表示小工具位置区域属性的 rect 清除该区域；画中间的Slot；根据表示滑块的当前值的变量 v ,即端点值 Min,Max计算滑块的位置，然后在此处画圆，最后将当前值显示在圆心出。

eric2013 · 发表于 2015-9-8 22:48:13

非常感谢楼主分享，置精[s:151]

myxiaonia · 发表于 2015-9-9 08:56:31

基本思路相当清晰，真是太牛了

sss3s · 发表于 2015-9-9 09:55:48

[s:151] 牛人

emwin · 发表于 2015-9-9 10:18:39

扁平风格很简约嘛

haohao801 · 发表于 2015-9-9 11:57:45

确实不错，记得emWin里边有自定义控件功能，不过之前试了一次不成功，后来就.......
楼主方法不错，如果可以直接贴出工程代码就更好了，省得大家很多时间

a19920211a · 发表于 2015-9-10 11:30:31

SLIDER_Obj这个结构体有的，在slider_private.h里

drjloveyou · 发表于 2015-9-11 09:43:31

好方法[s:151]

403337905 · 发表于 2015-9-15 10:42:11

高啊，贴出代码来最好

sealedghost · 发表于 2015-11-6 09:16:22

#include "HSD_SLIDER.h"
//#include "Config.h"
//#include "boat_struct.h"
//extern boat fuckership;
typedef struct ///这个结构体需要自己定义
{
WIDGET Widget; /// WIDGET是emWin自有的类型
GUI_COLOR aBkColor[2]; ///存放背景颜色
GUI_COLOR aColor[4]; ///存放滑块和槽的颜色
int Min,Max,v; ///存放滑块允许的最大值、最小值和滑块当前值
int Flags;
int NumTicks; ///刻度值
I16 Width;
}SLIDER_Obj;
/**********************************************************************
*
* Macros for internal use
*
**********************************************************************/
#define SLIDER_H2P(h) (SLIDER_Obj*) GUI_ALLOC_h2p(h) ///自己对GUI_ALLOC_h2p进行一层“包装”
/**********************************************************************
*
* Static routines
*
**********************************************************************/
/**********************************************************
* _Paint
*
*/
static void _Paint(SLIDER_Obj* pObj, WM_HWIN hObj)
{
GUI_RECT r, rFocus, rSlider, rSlot;
GUI_COLOR SlotColor, SliderColor;
int x0, xSize, Range, NumTicks;
WIDGET__GetClientRect(&pObj->Widget, &rFocus);
GUI__ReduceRect(&r, &rFocus, 1);
NumTicks = pObj->NumTicks;
xSize = r.x1 - r.x0 + 1 - pObj->Width;
x0 = r.x0 + pObj->Width / 2;
Range = pObj->Max - pObj->Min;
if(Range == 0)
{
Range = 1;
}
if(pObj->Widget.State & WIDGET_STATE_FOCUS)
{
LCD_SetColor(pObj->aBkColor[1]);
SlotColor = pObj->aColor[1];
SliderColor = pObj->aColor[3];
}
else
{
LCD_SetColor(pObj->aBkColor[0]);
SlotColor = pObj->aColor[0];
SliderColor = pObj->aColor[2];
}
GUI_Clear();
GUI_FillRectEx(&rFocus); /// 先“清场”
rSlider = r;
rSlider.y0 = 5;
rSlider.x0 = x0 + (U32)xSize * (U32)(pObj->v - pObj->Min) / Range - pObj->Width / 2; ///计算滑块位置
rSlider.x1 = rSlider.x0 + pObj->Width;
/// 绘制槽'Slot'
LCD_SetColor(SlotColor);
rSlot.x0 = x0;
rSlot.x1 = x0 + xSize;
rSlot.y0 = (rSlider.y0 + rSlider.y1) / 2 - 1;
rSlot.y1 = rSlot.y0 + 3;
GUI_FillRectEx(&rSlot);
// if(NumTicks > 0)
// {
// LCD_SetColor(GUI_BLACK);
// GUI_SetFont(GUI_FONT_16_1);
// for(i=0; i< NumTicks; i++)
// {
// int x = x0 + xSize * i / (NumTicks - 1) - 2;
// GUI_SetTextMode(GUI_TM_TRANS);
// GUI_DispDecAt(pObj->Min+i, x, rFocus.y0,1);
// }
// }
/// 绘制滑块，即截图中的圆
LCD_SetColor(SliderColor);
GUI_FillCircle(rSlider.x0+pObj->Width/2,(rSlider.y0+rSlider.y1)/2 , pObj->Width/2);
/// 在滑块上显示当前值
if(NumTicks > 0)
{
LCD_SetColor(GUI_BLACK);
GUI_SetFont(GUI_FONT_16B_1);
GUI_SetTextMode(GUI_TM_TRANS);
GUI_DispDecAt(pObj->v, rSlider.x0+pObj->Width/2-3,(rSlider.y0+rSlider.y1)/2-8, 1);
}
}
/**********************************************************
* _OnKey
*
*/
static void _OnKey(SLIDER_Handle hObj, WM_MESSAGE * pMsg)
{
const WM_KEY_INFO * pKeyInfo;
int Key;
pKeyInfo = (const WM_KEY_INFO*)(pMsg->Data.p);
Key = pKeyInfo->Key;
if(pKeyInfo->PressedCnt > 0)
{
switch(Key)
{
case GUI_KEY_RIGHT:
HSD_SLIDER_Inc(hObj);
break;
case GUI_KEY_LEFT:
HSD_SLIDER_Dec(hObj);
break;
case GUI_KEY_UP:
WM_SetFocusOnPrevChild(WM_GetParent(pMsg->hWin));
break;
case GUI_KEY_DOWN:
WM_SetFocusOnNextChild(WM_GetParent(pMsg->hWin));
break;
case GUI_KEY_MOVE:
default:
SLIDER_Callback(pMsg);
break ;
}
}
}
/**********************************************************
* _SLIDER_Callback
*
*/
void HSD_SLIDER_Callback(WM_MESSAGE * pMsg)
{
SLIDER_Handle hObj;
SLIDER_Obj * pObj;
hObj = pMsg->hWin;
pObj = SLIDER_H2P(hObj);
if(WIDGET_HandleActive(hObj, pMsg) == 0)
{
return ;
}
switch(pMsg->MsgId)
{
case WM_PAINT:
_Paint(pObj, hObj);
return;
case WM_KEY:
_OnKey(hObj, pMsg);
break;
}
WM_DefaultProc(pMsg);
}
/*********************************************************************
*
* SLIDER_Create
*/
SLIDER_Handle HSD_SLIDER_Create(int x0, int y0, int xsize, int ysize, WM_HWIN hParent, int Id, int WinFlags, int SpecialFlags) {
return SLIDER_CreateEx(x0, y0, xsize, ysize, hParent, WinFlags, SpecialFlags, Id);
}
/**********************************************************
* HSD_SLIDER_CreateEx
*
*/
SLIDER_Handle HSD_SLIDER_CreateEx(int x0, int y0, int xSize, int ySize, WM_HWIN hParent,
int WinFlags, int ExFlags, int Id)
{
SLIDER_Handle hObj;
WM_LOCK();
hObj = WM_CreateWindowAsChild(x0, y0, xSize, ySize, hParent, WinFlags, HSD_SLIDER_Callback, sizeof(SLIDER_Obj)-sizeof(WM_Obj));
if(hObj)
{
SLIDER_Obj* pObj = SLIDER_H2P(hObj);
U16 InitState;
InitState = WIDGET_STATE_FOCUSSABLE;
if(ExFlags & SLIDER_CF_VERTICAL)
{
InitState |= WIDGET_CF_VERTICAL;
}
WIDGET__Init(&pObj->Widget, Id, InitState);
pObj->aBkColor[0] = GUI_GRAY;
pObj->aBkColor[1] = GUI_DARKCYAN;
pObj->aColor[0] = GUI_BLACK;
pObj->aColor[1] = GUI_ORANGE;
pObj->Width = 16;
pObj->Max = 6;
pObj->Min = 0;
pObj->NumTicks = -1;
}
else
{
//INFO("Slider create failed!");
}
WM_UNLOCK();
return hObj;
}
/*********************************************************************
*
* SLIDER_CreateIndirect
*/
SLIDER_Handle HSD_SLIDER_CreateIndirect(const GUI_WIDGET_CREATE_INFO* pCreateInfo, WM_HWIN hWinParent, int x0, int y0, WM_CALLBACK* cb) {
SLIDER_Handle hThis;
GUI_USE_PARA(cb);;
hThis = HSD_SLIDER_CreateEx(pCreateInfo->x0 + x0, pCreateInfo->y0 + y0, pCreateInfo->xSize, pCreateInfo->ySize,
hWinParent, 0, pCreateInfo->Flags, pCreateInfo->Id);
return hThis;
}
/*********************************************************************
*
* HSD_SLIDER_Dec
*/
void HSD_SLIDER_Dec(SLIDER_Handle hObj)
{
SLIDER_Obj * pObj;
if(hObj)
{
WM_LOCK();
pObj = SLIDER_H2P(hObj);
if(pObj->v > pObj->Min)
{
pObj->v--;
WM_InvalidateWindow(hObj);
WM_NotifyParent(hObj, WM_NOTIFICATION_VALUE_CHANGED);
}
WM_UNLOCK();
}
}
/*********************************************************************
*
* HSD_SLIDER_Inc
*/
void HSD_SLIDER_Inc(SLIDER_Handle hObj) {
SLIDER_Obj* pObj;
if (hObj) {
WM_LOCK();
pObj = SLIDER_H2P(hObj);
if (pObj->v < pObj->Max) {
pObj->v++;
WM_InvalidateWindow(hObj);
WM_NotifyParent(hObj, WM_NOTIFICATION_VALUE_CHANGED);
}
WM_UNLOCK();
}
}
/*********************************************************************
*
* HSD_SLIDER_Loop
*/
void HSD_SLIDER_Loop(SLIDER_Handle hObj)
{
SLIDER_Obj * pObj;
if(hObj)
{
WM_LOCK();
pObj = SLIDER_H2P(hObj);
pObj->v = (pObj->v + 1 - pObj->Min) % (pObj->Max - pObj->Min + 1) + pObj->Min;
WM_InvalidateWindow(hObj);
WM_NotifyParent(hObj, WM_NOTIFICATION_VALUE_CHANGED);
WM_UNLOCK();
}
}
/*********************************************************************
*
* HSD_SLIDER_SetWidth
*/
void HSD_SLIDER_SetWidth(SLIDER_Handle hObj, int Width) {
SLIDER_Obj* pObj;
if (hObj) {
WM_LOCK();
pObj = SLIDER_H2P(hObj);
if (pObj->Width != Width) {
pObj->Width = Width;
WM_InvalidateWindow(hObj);
}
WM_UNLOCK();
}
}
/*********************************************************************
*
* HSD_SLIDER_SetValue
*/
void HSD_SLIDER_SetValue(SLIDER_Handle hObj, int v) {
SLIDER_Obj* pObj;
if (hObj) {
WM_LOCK();
pObj = SLIDER_H2P(hObj);
/* Put in min/max range */
if (v < pObj->Min) {
v = pObj->Min;
}
else if (v > pObj->Max) {
v = pObj->Max;
}
if (pObj->v != v) {
pObj->v = v;
WM_InvalidateWindow(hObj);
WM_NotifyParent(hObj, WM_NOTIFICATION_VALUE_CHANGED);
}
WM_UNLOCK();
}
}
/*********************************************************************
*
* HSD_SLIDER_SetRange
*/
void HSD_SLIDER_SetRange(SLIDER_Handle hObj, int Min, int Max) {
if (hObj) {
SLIDER_Obj* pObj;
WM_LOCK();
pObj = SLIDER_H2P(hObj);
if (Max < Min) {
Max = Min;
}
pObj->Min = Min;
pObj->Max = Max;
if (pObj->v < Min) {
pObj->v = Min;
}
if (pObj->v > Max) {
pObj->v = Max;
}
WM_InvalidateWindow(hObj);
WM_UNLOCK();
}
}
/*********************************************************************
*
* HSD_SLIDER_SetNumTicks
*/
void HSD_SLIDER_SetNumTicks(SLIDER_Handle hObj, int NumTicks) {
if (hObj && (NumTicks >= 0)) {
SLIDER_Obj* pObj;
WM_LOCK();
pObj = SLIDER_H2P(hObj);
pObj->NumTicks = NumTicks;
WM_InvalidateWindow(hObj);
WM_UNLOCK();
}
}
/*********************************************************************
*
* HSD_SLIDER_SetBkColor
*/
void HSD_SLIDER_SetBkColor(SLIDER_Handle hObj, GUI_COLOR Color) {
if (hObj) {
SLIDER_Obj * pObj;
WM_LOCK();
pObj = SLIDER_H2P(hObj);
pObj->aBkColor[0] = Color;
#if SLIDER_SUPPORT_TRANSPARENCY
if (Color <= 0xFFFFFF) {
WM_ClrHasTrans(hObj);
} else {
WM_SetHasTrans(hObj);
}
#endif
WM_InvalidateWindow(hObj);
WM_UNLOCK();
}
}
/*********************************************************************
*
* HSD_SLIDER_SetFocusBkColor
*/
void HSD_SLIDER_SetFocusBkColor(SLIDER_Handle hObj, GUI_COLOR Color)
{
if(hObj)
{
SLIDER_Obj * pObj;
WM_LOCK();
pObj = SLIDER_H2P(hObj);
pObj->aBkColor[1] = Color;
#if SLIDER_SUPPORT_TRANSPARENCY
if (Color <= 0xFFFFFF) {
WM_ClrHasTrans(hObj);
} else {
WM_SetHasTrans(hObj);
}
#endif
WM_InvalidateWindow(hObj);
WM_UNLOCK();
}
}
/*********************************************************************
*
* HSD_SLIDER_SetSlotColor
*/
void HSD_SLIDER_SetSlotColor(SLIDER_Handle hObj, GUI_COLOR Color)
{
if(hObj)
{
SLIDER_Obj * pObj;
WM_LOCK();
pObj = SLIDER_H2P(hObj);
pObj->aColor[0] = Color;
#if SLIDER_SUPPORT_TRANSPARENCY
if (Color <= 0xFFFFFF) {
WM_ClrHasTrans(hObj);
} else {
WM_SetHasTrans(hObj);
}
#endif
WM_InvalidateWindow(hObj);
WM_UNLOCK();
}
}
/*********************************************************************
*
* HSD_SLIDER_SetFocusSlotColor
*/
void HSD_SLIDER_SetFocusSlotColor(SLIDER_Handle hObj, GUI_COLOR Color)
{
if(hObj)
{
SLIDER_Obj * pObj;
WM_LOCK();
pObj = SLIDER_H2P(hObj);
pObj->aColor[1] = Color;
#if SLIDER_SUPPORT_TRANSPARENCY
if (Color <= 0xFFFFFF) {
WM_ClrHasTrans(hObj);
} else {
WM_SetHasTrans(hObj);
}
#endif
WM_InvalidateWindow(hObj);
WM_UNLOCK();
}
}
/*********************************************************************
*
* HSD_SLIDER_SetSliderColor
*/
void HSD_SLIDER_SetSliderColor(SLIDER_Handle hObj, GUI_COLOR Color)
{
if(hObj)
{
SLIDER_Obj * pObj;
WM_LOCK();
pObj = SLIDER_H2P(hObj);
pObj->aColor[2] = Color;
#if SLIDER_SUPPORT_TRANSPARENCY
if (Color <= 0xFFFFFF) {
WM_ClrHasTrans(hObj);
} else {
WM_SetHasTrans(hObj);
}
#endif
WM_InvalidateWindow(hObj);
WM_UNLOCK();
}
}
/*********************************************************************
*
* HSD_SLIDER_SetFocusSliderColor
*/
void HSD_SLIDER_SetFocusSliderColor(SLIDER_Handle hObj, GUI_COLOR Color)
{
if(hObj)
{
SLIDER_Obj * pObj;
WM_LOCK();
pObj = SLIDER_H2P(hObj);
pObj->aColor[3] = Color;
#if SLIDER_SUPPORT_TRANSPARENCY
if (Color <= 0xFFFFFF) {
WM_ClrHasTrans(hObj);
} else {
WM_SetHasTrans(hObj);
}
#endif
WM_InvalidateWindow(hObj);
WM_UNLOCK();
}
}
/*********************************************************************
*
* Query state
*
**********************************************************************
*/
/*********************************************************************
*
* HSD_SLIDER_GetValue
*/
int HSD_SLIDER_GetValue(SLIDER_Handle hObj) {
int r = 0;
SLIDER_Obj* pObj;
if (hObj)
{
WM_LOCK();
pObj = SLIDER_H2P(hObj);
r = pObj->v;
WM_UNLOCK();
}
return r;
}

复制代码

qq27488 · 发表于 2015-11-10 09:35:55

sealedghost:#include "HSD_SLIDER.h"

//#include "Config.h"
//#include "boat_struct.h"
....... (2015-11-06 09:16) 

非常感谢，最近正想画个圆点的滑条！

maple · 发表于 2015-11-22 20:44:23

很好！
问一下，直接用鼠标滑动的是哪个消息

ssis909 · 发表于 2017-4-27 19:56:42

非常感谢楼主,根据楼主的思路,成功实现自定义slider:

wangyi · 发表于 2017-6-27 14:19:44

大兄弟，我将楼主贴出的程序放到vs2013里头，发现用鼠标点击拖动并没有反应啊。请问你是怎么做的？

caicaptain2 · 发表于 2017-6-28 16:12:20

GUI_ALLOC_h2p(pMsg->hWin)
这个函数是什么意思？作用是什么

wx_qFWC327C · 发表于 2019-3-9 18:35:11

ssis909 发表于 2017-4-27 19:56
非常感谢楼主,根据楼主的思路,成功实现自定义slider:

有代码分享吗

cz123123 · 发表于 2019-3-12 09:50:23

ssis909 发表于 2017-4-27 19:56
非常感谢楼主,根据楼主的思路,成功实现自定义slider:

圆建议用抗锯齿好看点。。

馨馨的老爸^ω^ · 发表于 2019-4-23 18:14:18

ssis909 发表于 2017-4-27 19:56
非常感谢楼主,根据楼主的思路,成功实现自定义slider:

老哥能否分享一下你这个slider的源码，万分感谢！

xiaosir · 发表于 2019-5-21 14:03:39

学习了，感谢分享!

		自动登录	找回密码
密码			立即注册

[emWin] 自己改造SLIDER显示外观的方法分享

回 sealedghost 的帖子