我的串口屏如何响应UI中的按钮，求个思路？

xf331785508

如图，做的串口屏，做了UI按钮，却一直没有想到好的响应方式，代码很傻瓜的去读坐标，比坐标，再判断按键，再更新显示框，不知道有没有好的按钮响应处理思想，没太接触过操作系统，看了看WINDOWS 的消息机制，但好像套用起来一是思维还不太习惯，二是代码量好像很大，还要很好的结构体封装，好的架构才能实现。   
－－－－－－－－－－－－－－－－－－－－－－－－－分割线－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
图片手机拍的，不太好看。
有好的思想的，交流下。

xf331785508

沉得好快。呵呵，一看大部分资讯信息啊。自己再顶一下吧。

Gorgon_Meducer

简单来说这么处理的

屏幕上的按钮和文本框都是一个矩形区域，你可以定义一个数据结构

1. 
   
2. typedef struct {
   
3.     int nTop;
   
4.     int nLeft;
   
5.     int nWidth;
   
6.     int nHeigh;
   
7. }rect_t;
   

复制代码

然后为屏幕上所有的对象串起来：

1. 
   
2. typedef struct control_t control_t
   
3. 
   
4. struct control_t {
   
5.     rect_t tWindow;
   
6.     control_t *ptNext;
   
7. };
   
8. 
   
9. static control_t *s_ptControls = NULL;
   
10. 
    
11. control_t *get_controls(void)
    
12. {
    
13.     return s_ptControls;
    
14. }
    

复制代码

每次获得触摸信息以后，通过这个链表来依次扫描看看落在哪个区域里面了，如果落入了，你懂得。
另外，实际上这个链表还可以作为刷新的顺序，GUI术语上叫做Z-Order。你可以把它做成双链表，
这样还可以实现windows上窗体覆盖，激活的效果。

希望对你有所帮助。这里提到的只是最小实现，复杂一点的窗体结构还可以在control_t里面加入
更多的元素，比如如何绘制这个窗体啊之类的信息，窗体是否被按下了啊，是否处于激活状态啊，
文本信息是什么啊……，另外如果把窗体做成一个容器……你懂的。

事件处理其实并不复杂，下面以简单的Click事件为例子：
首先，你要定义一个事件处理程序的函数原型

1. 
   
2. typedef struct {
   
3.     int x,
   
4.     int y
   
5.     //其它你想附加的信息
   
6. }key_event_t;
   
7. 
   
8. typedef bool click_event_t(key_event_t *ptEvent);
   

复制代码

然后更新control_t类：

1. 
   
2. struct control_t {
   
3.     rect_t tWindow;
   
4.     control_t *ptNext;
   
5. 
   
6.     click_event_t *fnClickEvent;
   
7. };
   

复制代码

增加一个事件处理程序的注册函数

1. 
   
2. 
   
3. //! 小把戏，你懂的
   
4. #define this    (*ptThis)
   
5. 
   
6. bool control_register_click_event_handler(control_t *ptThis, click_event_t *fnHandler)
   
7. {
   
8.     if (NULL == ptThis || NULL == fnHandler) {
   
9.         return false;
   
10.     }
    
11.    
    
12.     this.fnClickEvent = fnHandler;
    
13. 
    
14.     return true;
    
15. }
    

复制代码

最后我们就可以编写一个程序，根据输入的x,y来触发对应的按键的程序了：

1. 
   
2. bool controls_check_click_event(control_t *ptThis, int x, int y)
   
3. {
   
4.     if (NULL == ptThis) {
   
5.         return false;
   
6.     }
   
7. 
   
8.     //! 搜索链表
   
9.     do {
   
10.         if (check_is_point_in_rect(&this.tWindow, x, y)) {
    
11.              //! 点落在矩形里面了
    
12.              if (NULL != this.fnClickEvent) {
    
13.                   //! 调用相应的消息处理程序
    
14.                   key_event_t tEvent = {x, y};
    
15.                   this.fnClickEvent(&tEvent);
    
16.                   return true;
    
17.              }
    
18.         }
    
19.         
    
20.         //! 继续搜索
    
21.         ptThis = this.ptNext;
    
22.     } while(NULL != ptChain);
    
23. 
    
24.     //! 如果运行到这里，说明什么都没有搜索到
    
25.     return false;
    
26. }
    

复制代码

zhexuejia

楼上高端大气上档次啊

MINI2440

Gorgon_Meducer 发表于 2013-12-5 17:52
简单来说这么处理的

屏幕上的按钮和文本框都是一个矩形区域，你可以定义一个数据结构

够详细。。新书出了没

syauxwm

霸气，好好看看，

justdomyself

霸气~~~~~~~~~~~~~~

binaimei2007

学习大神的方法！！！

Gorgon_Meducer

MINI2440 发表于 2013-12-5 18:36
够详细。。新书出了没

还没…以我这种王婆卖瓜的个性，出了还不满世界的吹～

leicai05

我是来听课的。

Excellence

kalo425

Gorgon_Meducer 发表于 2013-12-5 17:52
简单来说这么处理的

屏幕上的按钮和文本框都是一个矩形区域，你可以定义一个数据结构

meirenai

看一下            

bbglx

默默收藏

znsword

强悍，收藏一下。

xf331785508

根据傻孩子的砖，我斗胆晒一下我的糟玉。以飨坛友。

1. 
   
2. 
   
3. #include <string.h>
   
4. #include "TSP.h"
   
5. #ifndef     COUNTOF
   
6. #define     COUNTOF(__a)  ((sizeof((__a)))/(sizeof(*(__a))))
   
7. #endif
   
8. 
   
9. /*
   
10. gTouchXYUpdateFlag was changed in interrupt function
    
11. */
    
12. volatile bool gTouchXYUpdateFlag = FALSE;
    
13. // Temporary save datas from touch screen to buffer
    
14. u8   gReceiveBuffer[MAX_RECEIVE_BUFFER] = {0};
    
15. u32  gRxCounter = 0;
    
16. 
    
17. 
    
18. /* Retangle assign */
    
19. static Rectangle_Typedef  *Rectangle_TypedefAssign(Rectangle_Typedef *pRect, u16 left, u16 top, u16 width, u16 height)
    
20. {
    
21.         if( NULL == pRect )
    
22.         {
    
23.                 return NULL;
    
24.         }
    
25.         pRect->nLeft   = left;
    
26.         pRect->nTop    = top;
    
27.         pRect->nWidth  = width;
    
28.         pRect->nHeight = height;
    
29.         return pRect;
    
30. }
    
31. 
    
32. /* Control block assign for each element */
    
33. static Control_Typedef *Control_TypedefAssign
    
34. (Control_Typedef     *pCtrl,
    
35. Rectangle_Typedef   *pWindow,
    
36. Control_Typedef     *pNext,
    
37. ClickEvent          *pfn,
    
38. u32                 indexOf,
    
39. u8                  captionNums,
    
40. char                *str,
    
41. u32                 reserve)
    
42. {
    
43.         if( NULL == pCtrl )
    
44.         {
    
45.                 return NULL;
    
46.         }
    
47.         pCtrl->tWindow      = pWindow;
    
48.         pCtrl->ptNext       = pNext;
    
49.         pCtrl->fnClickEvent = pfn;
    
50.         pCtrl->index        = indexOf;
    
51.         pCtrl->charNums     = captionNums;
    
52.         pCtrl->btnCaption   = str;
    
53.         pCtrl->timeOfCycle  = reserve;
    
54.         return pCtrl;
    
55. }
    
56. 
    
57. /* Translate the location of the button which was pressed
    
58. * from USART interface buffer. */
    
59. TOUCH_XY AnalysisTouchXY(void)
    
60. {
    
61.         u8 i = 0;
    
62.         TOUCH_XY touchXY = {0, 0};
    
63.         if( gTouchXYUpdateFlag )
    
64.         {
    
65.                 for(i = 0; i < COUNTOF(gReceiveBuffer); i++)
    
66.                 {
    
67.                         if((gReceiveBuffer[i] == CMD_HEAD) && (gReceiveBuffer[i + 1] == RETURN_TOUCHSCREEN_XY))
    
68.                         {
    
69.                                 touchXY.x = (u16)((gReceiveBuffer[i + 2] << 8) | gReceiveBuffer[i + 3]);
    
70.                                 touchXY.y = (u16)((gReceiveBuffer[i + 4] << 8) | gReceiveBuffer[i + 5]);
    
71.                                 gTouchXYUpdateFlag = FALSE;
    
72.                                 memset(gReceiveBuffer, 0, sizeof(gReceiveBuffer));
    
73.                                 gRxCounter = 0;
    
74.                                 break;
    
75.                         }
    
76.                 }
    
77.         }
    
78.         return touchXY;
    
79. }
    
80. 
    
81. /* According the location to return the index of button retangle which was pressed. */
    
82. u8 RtnTouchScreenRst(TOUCH_XY tp, const RETANGLE_AREA *pArea)
    
83. {
    
84.         u8 equivalentKey = KEY_NONE;
    
85.        
    
86.         if( NULL == pArea )
    
87.         {
    
88.                 return equivalentKey;
    
89.         }
    
90.         if((tp.x >= (pArea->sx)) && (tp.x <= (pArea->ex)) &&
    
91.            (tp.y >= (pArea->sy)) && (tp.y <= (pArea->ey)))
    
92.         {
    
93.                 equivalentKey = pArea->areaNo;
    
94.         }
    
95.         return equivalentKey;
    
96. }
    
97. 
    
98. /* To check the range of location */
    
99. bool CheckPointinRectangle(Rectangle_Typedef *ptRect, u16 x, u16 y)
    
100. {
     
101.         if( NULL == ptRect )
     
102.         {
     
103.                 return FALSE;
     
104.         }
     
105.         if((x >= ptRect->nLeft) && (x <= (ptRect->nLeft + ptRect->nWidth)))
     
106.         {// x is in the range
     
107.                 if((y >= ptRect->nTop) && (y <= (ptRect->nTop + ptRect->nHeight)))
     
108.                 {// y is in the range
     
109.                         return TRUE;
     
110.                 }
     
111.                 else{
     
112.                         return FALSE;
     
113.                 }
     
114.         }
     
115.         else{
     
116.                 return FALSE;
     
117.         }
     
118. }
     
119. 
     
120. /* To find the correct button and call back the right handler which was defined. */
     
121. s32 ControlsCheckClickEvent(Control_Typedef *ptThis, KEY_EVENT_Typedef *ptKeyValue)
     
122. {
     
123.     if ((NULL == ptThis) || (NULL == ptKeyValue))
     
124.         {
     
125.         return FAULT;
     
126.     }
     
127.     do {
     
128.                 if (CheckPointinRectangle((ptThis->tWindow), ptKeyValue->x, ptKeyValue->y))
     
129.                 {
     
130.                         if ( NULL != ptThis->fnClickEvent )
     
131.                         {
     
132.                                 return (ptThis->fnClickEvent(ptKeyValue, &(ptThis->index)));
     
133.                         }
     
134.                         else{
     
135.                                 return FAULT;
     
136.                         }
     
137.                 }
     
138.         ptThis = ptThis->ptNext;
     
139.     } while(NULL != ptThis);
     
140.     return FAULT;
     
141. }
     
142. 
     
143. 
     
144. /* Button's retangle drawing */
     
145. static void  AppLCM_Buttons(u8 btnNums, bool isBtnDraw, Rectangle_Typedef *ptRect, Control_Typedef *ptCtrl)
     
146. {
     
147.         register u8 i = 0;
     
148.        
     
149.         if( NULL == ptRect  ||  NULL == ptCtrl )
     
150.         {
     
151.                 return NULL;
     
152.         }
     
153.         if( isBtnDraw )
     
154.         {
     
155.                 for(i = 0; i < btnNums; i++)
     
156.                 {
     
157.                         LCM_ButtonDraw((ptRect + i)->nLeft,  (ptRect + i)->nTop,
     
158.                                        (ptRect + i)->nWidth, (ptRect + i)->nHeight,
     
159.                                                    BUTTON_COLOR,
     
160.                                                    (ReturnCharacterNumber((ptCtrl + i)->btnCaption) >> 1),
     
161.                                                    (ptCtrl + i)->btnCaption);
     
162.                 }
     
163.         }
     
164. }
     
165. 
     
166. /* According the index of key in keyboard to return the correct retangle's location. */
     
167. static TOUCH_XY Convert2XY(u16 keyValue, Control_Typedef  *ptThis)
     
168. {
     
169.         TOUCH_XY  rtnXY = {0, 0};
     
170.        
     
171.         if( NULL == ptThis )
     
172.         {
     
173.                 return rtnXY;
     
174.         }
     
175.     do {   
     
176.         if ( KEY == ptThis->index )
     
177.                 {
     
178.                         rtnXY.x = ptThis->tWindow->nLeft + 1;
     
179.                         rtnXY.y = ptThis->tWindow->nTop  + 1;
     
180.                         KEY = KEY_NONE;
     
181.                         return rtnXY;               
     
182.         }
     
183.             ptThis = ptThis->ptNext;
     
184.     } while(NULL != ptThis);
     
185.     return rtnXY;
     
186. }
     
187. 
     
188. 
     
189. 
     
190. 
     
191. void AppLCM_UserInterfaceProcess(u8 btnNums, bool isBtnDraw, Rectangle_Typedef *ptRect, Control_Typedef *ptCtrl)
     
192. {
     
193. 
     
194.         bool  isReturn = TRUE;
     
195.         u32   counter = 0;
     
196.         KEY_EVENT_Typedef keyEvent = {0,0};
     
197.        
     
198.         if( NULL == ptCtrl  ||  NULL == ptRect )
     
199.         {
     
200.                 return;
     
201.         }
     
202.         KEY = KEY_NONE;
     
203.         AppLCM_Buttons(btnNums, isBtnDraw, ptRect, ptCtrl);       
     
204.         if( ((ptCtrl->timeOfCycle) == 0) || ((ptCtrl->timeOfCycle & 0xFFFF0000) != 0) ){
     
205.                 ptCtrl->timeOfCycle = 0xFFFF;
     
206.         }
     
207.         do
     
208.         {
     
209.                 if(KEY != KEY_NONE){
     
210.                         gTchLoc = Convert2XY(KEY, ptCtrl);
     
211.                         KEY = KEY_NONE;          
     
212.                 }
     
213.                 else{
     
214.                         gTchLoc = AnalysisTouchXY();
     
215.                 }
     
216.                 keyEvent.x = gTchLoc.x;
     
217.                 keyEvent.y = gTchLoc.y;
     
218.                 delay_ms(50);
     
219.                 switch(ControlsCheckClickEvent(ptCtrl, &keyEvent))
     
220.                 {
     
221.                         case QUIT:       
     
222.                                         isReturn = FALSE;
     
223.                                         ptCtrl->timeOfCycle &= 0x0000FFFF;             
     
224.                                         ptCtrl->timeOfCycle |= (keyEvent.x << 16);
     
225.                         break;
     
226.                         case CYCLE:       
     
227.                         break;
     
228.                         case REDRAW:
     
229.                                         counter = 0;
     
230.                                         AppLCM_Buttons(btnNums, isBtnDraw, ptRect, ptCtrl);
     
231.                         break;
     
232.                         case FAULT:       
     
233.                         break;
     
234.                         default:
     
235.                         break;
     
236.                 }
     
237.                 counter++;
     
238.         }while( (isReturn) && (counter < (ptCtrl->timeOfCycle))  );
     
239. }
     
240. 
     
241. 
     
242. 
     
243. static s32 AppLCM_ComSetHandler(KEY_EVENT_Typedef *ptEvent, u32 *btnNo)
     
244. {
     
245.         ptEvent = ptEvent;
     
246.         switch(*btnNo)
     
247.         {
     
248.                 case NO:
     
249.                         return QUIT;
     
250.                 case 1:
     
251.                         Process1();
     
252.                         return CYCLE;
     
253.                 case 2:
     
254.                         Process2();
     
255.                         return REDRAW;
     
256.                 case 3:
     
257.                         Process3();
     
258.                         return CYCLE;
     
259.                 default:
     
260.                 return CYCLE;
     
261.         }
     
262. }
     
263. 
     
264. 
     
265. void  AppLCM_ComSetSubMenu(void)
     
266. {
     
267.         Rectangle_Typedef rect[4] = {0};
     
268.         Control_Typedef ctrl[COUNTOF(rect)] = {0};
     
269.         Rectangle_TypedefAssign(&rect[0], SUBMENU_TITLE_X, SUBMENU_TITLE_Y, CHAR_WIDTH(FONT_WIDTH_32, 4), BUTTON_HEIGHT);
     
270.         Rectangle_TypedefAssign(&rect[1], SM_COLUM2_BUTTON_X, SM_ROW1_BUTTON_Y, CHAR_WIDTH(FONT_WIDTH_32, 5), BUTTON_HEIGHT);
     
271.         Rectangle_TypedefAssign(&rect[2], SM_COLUM2_BUTTON_X, SM_ROW2_BUTTON_Y, CHAR_WIDTH(FONT_WIDTH_32, 5), BUTTON_HEIGHT);
     
272.         Rectangle_TypedefAssign(&rect[3], SM_COLUM2_BUTTON_X, SM_ROW3_BUTTON_Y, CHAR_WIDTH(FONT_WIDTH_32, 6), BUTTON_HEIGHT);
     
273.         Control_TypedefAssign(&ctrl[0], &rect[0],  &ctrl[1],  AppLCM_ComSetHandler,  NO, 4, "Com Setting", 0);
     
274.         Control_TypedefAssign(&ctrl[1], &rect[1],  &ctrl[2],  AppLCM_ComSetHandler,  1, 5, "1.Process1", 0);
     
275.         Control_TypedefAssign(&ctrl[2], &rect[2],  &ctrl[3],  AppLCM_ComSetHandler,  2, 5, "2.Process2", 0);
     
276.         Control_TypedefAssign(&ctrl[3], &rect[3],  NULL,      AppLCM_ComSetHandler,  3, 6, "3.Process3", 0);
     
277. 
     
278.         AppLCM_UserInterfaceProcess(COUNTOF(rect), TRUE, rect, ctrl);
     
279. }
     

复制代码

头文件如下：

1. 
   
2. 
   
3. #ifndef  __TSP_H__
   
4. #define  __TSP_H__
   
5. 
   
6. #include "stm32f10x.h"
   
7. /* MAX RECEIVE BUFFER */
   
8. #define MAX_RECEIVE_BUFFER    50u
   
9. 
   
10. typedef enum {Vertical = 0, Horizontal}DisplayDirection;
    
11. 
    
12. /* Define some states of button pressed */
    
13. typedef enum
    
14. {
    
15.         FAULT      = -1,
    
16.         QUIT       = 0x0011,
    
17.         FUNCTION   = 0X0022,
    
18.         CYCLE      = 0X0033,
    
19.         REDRAW     = 0X0044
    
20. }ClickEventState_Typedef;
    
21.                                                  
    
22. typedef struct  tagTOUCHXY
    
23. {
    
24.         u16 x;
    
25.         u16 y;
    
26. }TOUCH_XY;
    
27. 
    
28. typedef struct tagRETANGLE_AREA
    
29. {
    
30.         u8  areaNo;
    
31.         u16 sx;
    
32.         u16 sy;
    
33.         u16 ex;
    
34.         u16 ey;
    
35. }RETANGLE_AREA;
    
36. 
    
37. /* the button's retangle */
    
38. typedef struct {
    
39.     u16 nLeft;
    
40.     u16 nTop;
    
41.     u16 nWidth;
    
42.     u16 nHeight;
    
43. }Rectangle_Typedef;
    
44. 
    
45. /* The location of button which happened event. */
    
46. typedef struct {
    
47.     u16  x;
    
48.     u16  y;
    
49. }KEY_EVENT_Typedef;       
    
50. /* Function point of event */
    
51. typedef s32  ClickEvent(KEY_EVENT_Typedef *ptEvent, u32 *btnNo);
    
52. /* Control block */
    
53. typedef struct tagControl Control_Typedef;
    
54. struct tagControl
    
55. {
    
56.         Rectangle_Typedef    *tWindow;         //Button Retangle
    
57.         Control_Typedef        *ptNext;            //point to next struct class
    
58.         ClickEvent                 *fnClickEvent;     //process this button which was being pressed
    
59.         u32                          index;                       //the only index for the button on a UI picture
    
60.         u8                           charNums;          //numbers of characters of the button's caption
    
61.         char                         *btnCaption;      //string of button caption
    
62.         u32                          timeOfCycle;      //reserved datas
    
63. };
    
64. 
    
65. 
    
66. 
    
67. #endif        //end of __TSP_H__
    
68. 
    
69. 
    
70. 
    

复制代码

xf331785508

Gorgon_Meducer 发表于 2013-12-5 17:52
简单来说这么处理的

屏幕上的按钮和文本框都是一个矩形区域，你可以定义一个数据结构

才补上代码，傻孩子大师看看代码冗余度如何？

Gorgon_Meducer

xf331785508 发表于 2016-6-7 17:18
才补上代码，傻孩子大师看看代码冗余度如何？

能实现功能就是第一步，自己用着用着就能感觉出哪里是多余的。
这个代码至少我看起来还是很不错的！

ponder2077

好好消化..

KongQuan

学习了。

kinsno

我是来打酱油的吗？
路过。。

bigwei

顶一下，研究研究。

stevenh

谢谢分享！

STT

好好消化..

chen849928055

xf331785508 发表于 2016-6-7 16:50
根据傻孩子的砖，我斗胆晒一下我的糟玉。以飨坛友。

楼主你换页后,如果还有按键,且位置也不一样,你是怎么处理的?

chen849928055

Gorgon_Meducer 发表于 2013-12-5 17:52
简单来说这么处理的

屏幕上的按钮和文本框都是一个矩形区域，你可以定义一个数据结构

老师换页了(按键区域不一样了),怎么处理,结构体里面还要加什么元素?

xf331785508

chen849928055 发表于 2017-3-31 11:19
老师换页了(按键区域不一样了),怎么处理,结构体里面还要加什么元素?

在这个函数 AppLCM_ComSetSubMenu里面进行按钮坐标初始化。

chen849928055

楼主的ASCII码的字符感觉挺圆滑的,你是怎么做到的,普通的字摸软件生成的ASCII码字符好多锯齿

xf331785508

chen849928055 发表于 2017-4-24 16:59
楼主的ASCII码的字符感觉挺圆滑的,你是怎么做到的,普通的字摸软件生成的ASCII码字符好多锯齿 ...

字符看起来圆滑不圆滑，根字模软件无关，是单个象素点的尺寸大小决定的。楼主位的图片中LCM自带字模，可有多种大小的字体提供。  单象素点越小，同样字号的字体圆滑度越好，但也不是绝对的，假如象素点的尺寸足够小，同样字号的字体，肉眼可能就看不清了。  现在大家对surface的显示效果的批判就是这个原因，虽然细腻，但字太小，看着也不舒服。
如下图，同样的字号，借助放大镜，就展示了不同尺寸象素大小的显示效果。

chen849928055

xf331785508 发表于 2017-4-25 09:05
字符看起来圆滑不圆滑，根字模软件无关，是单个象素点的尺寸大小决定的。楼主位的图片中LCM自带字模，可 ...

是的,看emwin里有程序对字符显示做了抗锯齿化的处理,你可知道哪有类似emwin源码供参考吗?

chen849928055

楼主的菜单结构是裸机的,还是上了系统

xf331785508

chen849928055 发表于 2017-4-27 11:24
楼主的菜单结构是裸机的,还是上了系统

裸机的，没上系统。响应要求不高，另外，那时候能力有限，对伪并行状态机或RTOS不是很在行，所以直接上裸机，队列化运行。