• W801学习笔记十四：掌机系统——菜单——尝试打造自己的UI

    未来将会有诸多应用，这些应用将通过菜单进行有序组织和管理。因此，我们需要率先打造好菜单。

    LCD 驱动通常是直接写屏的，虽然速度较快，但用于界面制作则不太适宜。所以，最好能拥有一套 UI 框架。如前所述，我们的目标是学习，故而不采用如 LVGL 之类的框架，一切都需亲力亲为。

    构建一个简易的 UI 框架：

    每个页面，我们称之为场景（scean），其中包含众多控件。所有页面存放在链表中，每次仅执行最后一个页面的操作。若删除页面，则会退回到前一个页面。

    每个页面可以拥有多个控件。这些控件放置在一个链表中。每次仅执行最后一个控件的操作。当前掌机没有触摸功能，故暂不考虑多个控件同时接收事件。若仅有一个控件，也可不使用链表。

    之前已设计好，大循环放置在主 main 函数内。每次通过 tick 方法将运行间隔传递给下面的场景（scean），再传递给下面的用户控件（usercontrol）。

    好了，开始我们的实操：

    菜单分为多个级别，每级都有自己的页面，同时每个应用也有自己的页面。我们将每个页面用场景（SCEAN）来表示。所有实例化的场景都存放在场景列表（sceanList）中进行管理，以便于页面的前进和后退。

    一：写个scean基类，或者说是接口也行。

    个人比较习惯JAVA的面向对象技术，所以编码风格带有JAVA的色彩。

    IScean.h

    1. #ifdef __cplusplus
    2.  
    3. enum SceanResult{
    4. 	SceanResult_EXIT = 1, 
    5. 	SceanResult_Done = 2	
    6. };
    7.  
    8. class IScean {
    9. 	public:
    10. 		IScean();
    11. 		virtual ~IScean();
    12. 		// 纯虚函数
    13. 		virtual SceanResult tick(u32 ticks) = 0;
    14. 		virtual int scean_init(cJSON* param) {return 0;};
    15. 		virtual int scean_resume(void){return 0;};
    16. 		virtual int scean_pause(void){return 0;};
    17. 	protected:
    18. 		map_t iconMap = NULL;
    19. 		unsigned char* getImageResource(char* fn);
    20. };
    21.  
    22. #endif

    scean中有几个重要的方法：初始化，暂停，恢复，执行（tick）

    原则上没有使用系统中断、钩子之类的东西。而是在main函数中进行循环，处理系统级任务，每每次循环的时间消耗通过tick函数传递给当前scean。

    main.cpp

    1. void UserMain(void)
    2. {
    3. 。。。
    4. 	
    5. 	while(1){
    6. 		handleMainScreanTask();
    7. 		IScean* cur= ((IScean*)sceanList->prev->data);
    8.  
    9. 		_tmp_Run_Ticks = tls_os_get_time();
    10. 		keyAdepterProc(_tmp_Run_Ticks - _last_Run_Ticks);
    11. 		res = cur->tick(_tmp_Run_Ticks - _last_Run_Ticks);
    12. 		_last_Run_Ticks = _tmp_Run_Ticks;
    13. 		
    14. 		
    15. 		switch (res) {
    16. 			case SceanResult_EXIT:
    17. 				delete cur;
    18. 				ListPopBack(sceanList);
    19. 				((IScean*)sceanList->prev->data)->scean_resume();
    20. 				break;
    21. 			case SceanResult_Done:
    22. 				break;
    23.  
    24. 		}
    25.         。。。
    26. 	}
    27. }

    scean实现中，加入了scean图标的读取。

    IScean.cpp

    1. #include "IScean.h"
    2. #include "../driver/psram.h"
    3.  
    4.  
    5. int iterate(any_t item, any_t data){
    6. 	psram_heap_free((unsigned char *)data);
    7.     return MAP_OK;
    8. }
    9.  
    10.  
    11. IScean::IScean(){
    12. 	iconMap = hashmap_new();
    13. }
    14.  
    15. IScean::~IScean(){
    16. 	any_t val;
    17. 	hashmap_iterate(iconMap, iterate, val);
    18. 	hashmap_free(iconMap);
    19. }
    20.  
    21. unsigned char* IScean::getImageResource(char* fn){
    22. 	
    23. 	int error;
    24. 	unsigned int w,h;
    25. 	unsigned char *val;
    26. 	error= hashmap_get(iconMap, fn, (void**)(&val));
    27. 	
    28. 	if(error == MAP_MISSING){
    29. 		lodepng_decode32_file(&val, &w, &h, fn);
    30. 		hashmap_put(iconMap, fn, val);
    31. 	}
    32. 	return val;
    33. }

    二：写个用户控件的基类，或者说是接口也行。

    随着东西的增多，我们不能每次都直接写屏，所以需要适当抽一些用户控件以方便页面交互。比如说菜单就需要一个List控件。

    IUserControl.h

    1. class IUserControl
    2. {
    3. 	public:
    4. 		IUserControl();
    5. 		virtual ~IUserControl();
    6. 		 
    7. 		void setPosi(u16 _x, u16 _y, u16 _width, u16 _height){
    8. 			x=_x;
    9. 			y=_y;
    10. 			width = _width;
    11. 			height= _height;
    12. 		};
    13. 		
    14. 		virtual void update(void) = 0;
    15. 		virtual int tick(u32 ticks) = 0;
    16. 		u8 src;
    17. 		const char *statusInfo;
    18. 		
    19. 		
    20. 	protected:
    21. 		u16 x,y, width, height;
    22. };

    三：写个List用户控件类。这应该是比较常用的一种用户控件类了。

    里面用一个链表保存所有的选项，然后处理各种按键事件，实现显示效果。

    CtlList.h

    1. typedef struct ListItem
    2. {
    3. 	const char *text;
    4. 	unsigned char *image;
    5. 	void* tag;
    6. }ListItem;
    7.  
    8.  
    9. class CtlList : public IUserControl
    10. {
    11.    public:
    12. 		CtlList(void);   
    13. 		~CtlList(void);  
    14. 		int tick(u32 ticks);
    15. 		void addItem(ListItem *item);
    16. 		void clear(void);
    17. 		void update(void);
    18. 		void up(void);
    19. 		void down(void);
    20. 		u16 value(void){
    21. 			return cntIdx;
    22. 		};
    23. 		
    24. 		ListItem* selectItem(void){
    25. 			return (ListItem*)(ListGetNodeAt(items, cntIdx)->data);
    26. 		};
    27. 		
    28. 	private:
    29. 	   u16 cntIdx=0;
    30. 	   ListNode *items;
    31. 	   u8 zk_num;
    32.  
    33. 	   DisplayOption optionC = {FONT_SIZE_1516, WHITE, BLUE,0,1};
    34. 	   DisplayOption optionD = {FONT_SIZE_1516, WHITE, BLACK,0,1};
    35.       
    36. };

    CtlList.cpp

    1. #include "CtlList.h"
    2.  
    3. CtlList::CtlList(void)
    4. {
    5. 	items =ListCreate();
    6. }
    7.  
    8. CtlList::~CtlList(void)
    9. {
    10. 	printf("Destory CtlList items.\n");
    11. 	clear();
    12. 	items = NULL;
    13. }
    14.  
    15.  #define ItemHeifht 34
    16.  
    17. void CtlList::update(void){
    18.  	ListNode *node;
    19. 	u16 showc = height / ItemHeifht;
    20. 	u16 ty = 0;
    21. 	u16 count = ListCount(items);
    22. 	if(count==0) return;
    23.  
    24. 	u16 itemH = height / count;
    25. 	Display_Fill_Rectangle(x + width-10, y, x + width-1, y + height, GRAY);
    26. 	for(int i= cntIdx - showc /2 ;i<= cntIdx + showc /2;i++){
    27. 		Display_Fill_Rectangle(x, y + ty * ItemHeifht, x + width-11, y + (ty+1) * ItemHeifht - 2, BLACK);
    28. 		if(i>=0 && i< count){
    29. 			node = ListGetNodeAt(items,i);
    30. 			if(i == cntIdx){
    31. 				Display_Fill_Rectangle(x+32, y + ty * ItemHeifht, x + width-11, y + (ty+1) * ItemHeifht - 2, BLUE);
    32. 				Display_String(x+38, y + ty * ItemHeifht + 6, &optionC, (const char*) ((ListItem *)node->data)->text);		
    33. 			}else{
    34. 				Display_String(x+38, y + ty * ItemHeifht + 6, &optionD, (const char*) ((ListItem *)node->data)->text);
    35. 			}
    36. 			if(((ListItem *)node->data)->image !=NULL){
    37. 				Display_Show_Picture_RGBA(x, y + ty * ItemHeifht, 32, 32, (const unsigned char*) ((ListItem *)node->data)->image);
    38. 			}
    39. 			Display_Fill_Rectangle(x + width-9, y + i*itemH, x + width-2, y + + (i+1)*itemH, GREEN);
    40. 		}
    41. 		ty++;
    42. 	}
    43. }
    44.  
    45. void CtlList::addItem(ListItem *item){
    46. 	ListPushBack(items, (LTDataType)item);
    47. }
    48.  
    49. void CtlList::up(void){
    50. 	if(cntIdx > 0 ) cntIdx--; else cntIdx = ListCount(items) -1;
    51. 	update();
    52. 	
    53. }
    54.  
    55. void CtlList::down(void){
    56. 	if(cntIdx < ListCount(items) -1  ) cntIdx++; else cntIdx = 0;
    57. 	update();
    58. }
    59.  
    60. void CtlList::clear(void){
    61. 	Display_Fill_Rectangle(x, y, x + width-1, y + height, BLACK);
    62. 	if(items !=NULL){
    63. 		for(ListNode *cur = items->next; cur != items; cur=cur->next){
    64. 			delete (ListItem*)cur->data;
    65. 		}	
    66. 	}
    67. 	ListDestory(items);
    68. 	items=ListCreate();
    69. 	cntIdx = 0;
    70. }
    71.  
    72. int CtlList::tick(u32 ticks){
    73. 	if(KEY_UP) {up();}
    74. 	if(KEY_DOWN) {down();}
    75. 	return 0;
    76. }

    四：写Menu类。

    menu要实现ISCEAN，里面有个CtlList。

    menu.h

    1. class Menu : public IScean
    2. {
    3. 	public:
    4.       Menu(void);
    5.       ~Menu(void);  
    6.       SceanResult tick(u32 ticks);
    7. 	  int scean_init(u32 param);
    8. 	  int scean_resume(void);
    9. 	  int scean_pause(void){return 0;};
    10. 	  int  id = 100;
    11. 	private:
    12. 		void showMenu();
    13. 		IScean* createScean(u32 idx);
    14. 		unsigned char* getMenuImage(char* fn);
    15. 		ListNode *menuList;
    16. 		CtlList *ctlList;
    17. 		u8 gameMode=0;
    18. 		cJSON *menuRoot;
    19. 		
    20. };
    21.

    menu.cpp

    1. #include "menu.h"
    2. #include "wm_osal.h"
    3. #include "../driver/KeyAdepter.h"
    4. #include "NetConfig.h"
    5. #include "About.h"
    6. #include "Tetris.h"
    7. #include "yingyu.h"
    8. #include "YuWenTs.h"
    9.  
    10. extern ListNode *sceanList;
    11.  
    12. #define SceanId_About 102
    13. #define SceanId_NetConfig 103
    14.  
    15. #define SceanId_YingYu 301
    16. #define SceanId_YuWen 302
    17.  
    18. #define SceanId_Nes 400
    19.  
    20. #define SceanId_Tetris 501
    21. #define SceanId_Plane 502
    22.  
    23.  
    24. Menu::Menu(void)
    25. {
    26. 	menuList = ListCreate(); 
    27. 	ctlList = new CtlList();
    28. 	ctlList->setPosi(100, 70, 280, 170);
    29. 	
    30. 	unsigned char *readBuffer;
    31. 	size_t readsize = fatfs_readFile("menu/menu.txt", &readBuffer);
    32. 	printf("load menu finished! %d\n", readsize );
    33. 	menuRoot = cJSON_Parse((char *)readBuffer);
    34. }
    35.  
    36.  
    37. Menu::~Menu(void)
    38. {
    39. 	ListDestory(menuList);
    40. 	delete menuList;
    41. 	delete ctlList;
    42. 	cJSON_Delete((cJSON*)menuRoot);
    43.  
    44. }
    45. //×○△□
    46. const char *topMenuInfo="              SEL:选择";
    47. const char *subMenuInfo="EXIT:返回     SEL:选择";
    48.  
    49. int Menu::scean_init(u32 param){
    50. 	scean_resume();					
    51. 	return 0;
    52. }
    53.  
    54. int Menu::scean_resume(void){
    55. 	clear_screen();
    56. 	ListDestory(menuList);
    57. 	menuList = ListCreate(); 
    58. 	ListPushBack(menuList, menuRoot);
    59. 	showMenu();
    60. 	setKeyAdepterIntervalAll(200);
    61. 	setKeyAdepterInterval(KEY_GPIO_SEL, 65535);
    62. 	setKeyAdepterInterval(KEY_GPIO_EXIT, 65535);
    63. 	return 0;
    64. }
    65.  
    66. unsigned char* Menu::getMenuImage(char* fn){
    67.  
    68. 	if(fn[0] == 45){
    69. 		return NULL;
    70. 	}
    71. 		
    72. 	int error;
    73. 	unsigned int w,h;
    74. 	unsigned char *val;
    75. 	error= hashmap_get(iconMap, fn, (void**)(&val));
    76. 	
    77. 	if(error == MAP_MISSING){
    78. 		lodepng_decode32_file(&val, &w, &h, fn);
    79. 		hashmap_put(iconMap, fn, val);
    80. 	}
    81. 	return val;
    82. }
    83.  
    84. void Menu::showMenu(){
    85. 	ctlList->clear();
    86. 	
    87. 	cJSON*  currentMenu =  (cJSON *)menuList->prev->data;
    88. 	int count =	cJSON_GetArraySize(currentMenu);
    89. 	printf("menu count=%d\n", count);
    90. 	for(u8 i=0;i< count;i++){
    91. 	  cJSON* cj = 	cJSON_GetArrayItem(currentMenu, i);
    92. 		ListItem *_item = new ListItem();
    93. 		_item->text = cJSON_GetObjectItem(cj,"t")->valuestring;
    94. 		if(cJSON_GetObjectItem(cj,"i")->valuestring[0] != '-')
    95. 			_item->image = getImageResource(cJSON_GetObjectItem(cj,"i")->valuestring);
    96. 		_item->tag= (void *) cj;
    97. 		ctlList->addItem(_item);
    98. 	}
    99. 	ctlList->update();
    100. 	
    101. 	if(currentMenu == menuRoot)
    102. 		show_status_info(topMenuInfo);
    103. 	else
    104. 		show_status_info(subMenuInfo);
    105. }
    106.  
    107. SceanResult Menu::tick(u32 ticks){
    108. 	if(KEY_EXIT){ // 返回
    109. 		cJSON*  currentMenu =  (cJSON *)menuList->prev->data;
    110. 		if(	currentMenu == menuRoot) return SceanResult_Done;
    111. 		ListPopBack(menuList);
    112. 		showMenu ();
    113. 		return SceanResult_Done;
    114. 	}
    115. 	
    116. 	if(KEY_SEL){ //进入
    117. 		cJSON* item =  (cJSON*) ctlList->selectItem()->tag;
    118. 		int sceanId = cJSON_GetObjectItem(item,"d")->valueint;
    119. 		if(sceanId!= 0){
    120. 			IScean *scean =createScean(sceanId);
    121. 			if(scean !=NULL){
    122. 				scean->scean_init(cJSON_GetObjectItem(item,"g"));
    123. 				ListPushBack(sceanList, scean);
    124. 			}
    125. 			return SceanResult_Done;
    126. 		}
    127. 		cJSON* sitem =  cJSON_GetObjectItem(item,"s");
    128. 		
    129. 		if(cJSON_GetArraySize(sitem) > 0){
    130. 			ListPushBack(menuList, sitem);			
    131. 			showMenu();
    132. 			return SceanResult_Done;
    133. 		}
    134. 		return SceanResult_Done;
    135. 	}
    136. 	ctlList->tick(ticks);
    137. 	ran_max(10);
    138. 	return SceanResult_Done;
    139. }
    140.  
    141. IScean* Menu::createScean(u32 idx){
    142. 	switch (idx) {
    143. 		case SceanId_About:
    144. 			return new About();
    145. 		case SceanId_Tetris:
    146. 			return new Tetris();
    147. 		case SceanId_NetConfig:
    148. 			return new NetConfig();
    149. 		case SceanId_YingYu:
    150. 			return new YingYu();
    151. 		case SceanId_YuWen:
    152. 			return new YuWenTS();
    153.  
    154. 	}
    155. 	return NULL;
    156. }
    157.

    在其实例化的过程中完成菜单JSON的读取。JSON文件放在SD卡中：menu/menu.txt

    五：定义菜单项的JSON结构

    1. {
    2. 		"t": "三分钟限时挑战",
    3. 		"i": "menu/yuwen.png",
    4. 		"d": 0,
    5. 		"g": {},
    6. 		"s": [
    7. 			{
    8. 				"t": "语文",
    9. 				"i": "menu/yuwen.png",
    10. 				"g": {},
    11. 				"s": [
    12. 					{
    13. 						"t": "唐诗三百首",
    14. 						"i": "-",
    15.                 		"d": 301,
    16. 						"g": {"w":1, "m":1},
    17. 						"s": []
    18. 					},
    19. 					{
    20. 						"t": "宋词三百首",
    21. 						"i": "-",
    22.                 		"d": 301,
    23. 						"g": {"w":1, "m":2},
    24. 						"s": []
    25. 					}
    26. 				]
    27. 			}
    28.          ]
    29. }
    30.

    其中：

    t为菜单项标题

    i为菜单项的图标

    d为需要启动的应用编号，根据此编号启动对应的应用

    g为将传递给应用的各种参数

    s为下一级菜单

    六：在main函数中，实例化menu的scean，并把它加入sceanList中。

    1. void UserMain(void)
    2. {
    3. 。。。
    4. 	
    5. 	sceanList = ListCreate();
    6. 	Menu *menu =  new Menu();
    7. 	menu->scean_init(0);
    8. 	ListPushBack(sceanList, menu); 
    9. 	SceanResult res;
    10. 	u32 _last_Run_Ticks = tls_os_get_time();
    11. 	u32 _tmp_Run_Ticks = tls_os_get_time();
    12. 	
    13. 	while(1){
    14. 		handleMainScreanTask();
    15. 		IScean* cur= ((IScean*)sceanList->prev->data);
    16.  
    17. 		_tmp_Run_Ticks = tls_os_get_time();
    18. 		keyAdepterProc(_tmp_Run_Ticks - _last_Run_Ticks);
    19. 		res = cur->tick(_tmp_Run_Ticks - _last_Run_Ticks);
    20. 		_last_Run_Ticks = _tmp_Run_Ticks;
    21. 		
    22. 		
    23. 		switch (res) {
    24. 			case SceanResult_EXIT:
    25. 				delete cur;
    26. 				ListPopBack(sceanList);
    27. 				((IScean*)sceanList->prev->data)->scean_resume();
    28. 				break;
    29. 			case SceanResult_Done:
    30. 				break;
    31.  
    32. 		}
    33. 		FrameCount++;
    34. 	}
    35. }

    我们看看效果：

    W801学习笔记十四：掌机系统——菜单——尝试打造自己的UI

  • 相关阅读:
    bat一键给windows server 2012 打补丁
    HCIP-AI神经网络基础
    JAVASE 第二十三天
    ZLToolKit网络库的自问自答
    基于SSM的住院病人监测预警信息管理系统毕业设计源码021054
    非零基础自学Java (老师：韩顺平) 第8章 面向对象编程(中级部分) 8.11 面向对象编程 - 多态
    搭建自己的脚手架
    【多线程】Thread类的基本用法
    IPWorks EDI Translator Delphi Edition
    yum小bug
  • 原文地址：https://blog.csdn.net/vvind/article/details/138135010