2024-9-30 14:37
60 次阅读|
0 个评论
01 概述 导航和可查找性是用户体验设计的核心方面。如果用户无法到达他们想去的地方或找到他们需要的东西,他们会感到沮丧,并可能决定去别处寻找。在具有特别复杂的信息架构的网站上, 多级菜单是改善导航和可查找性的有效方法,从而提供高效的Web体验,从而促进产品信任度和转化率。 由于产品及其使用设备的差异很大,因此没有一种万能的解决方案可以产生完美的多级菜单。但是,有一些经验法则可以帮助您构建多级菜单,以增强任何屏幕尺寸的导航和可查找性。 02 多级菜单的程序设计 1 循环方式 循环方式的设计思路:预先定义一个包含6个结构元素的结构体、5个字符型和1个指针型。第1个字符变量存放当前界面的索引号;第2个字符变量存放按下“down(向下)”键时需要跳转到的索引号;第3个字符变量存放按下“up(向上)”键时需要跳转到的索引号;第4个字符变量存放按下“enter(进入)”键时需要跳转的索引号;第5个字符变量存放按下“esc(退出)”键时需要跳转的索引号;第6个变量为函数指针变量,存放当前索引号下需要执行的函数的入口地址。 将所有需要显示的界面其所对应的执行函数和按键索引号以结构体的形式列表存储。具体实现如下: typedef struct{ uchar down_index; uchar up_index; uchar enter_index; uchar esc_index; void (*operate)(); }Key_index_struct; 假设菜单分3级,共10个界面,则有: Key_index_struct const Key_tab ={ {0, 0, 0, 1, 0,(*main_menu)}, {1, 2, 3, 4, 0,(*sub_menu1)}, {2, 3, 1, 5, 0,(*sub_menu2)}, {3, 1, 2, 7, 0,(*sub_menu3)}, {4, 4, 4, 4, 1,(*sub_menu1_1)}, {5, 6, 6, 5, 2,(*sub_menu2_1)}, {6, 5, 5, 5, 2,(*sub_menu2_2)}, {7, 8, 9, 7, 3,(*sub_menu3_1)}, {8, 9, 7, 8, 3,(*sub_menu3_2)}, {9, 7, 8, 9, 3,(*sub_menu3_3)}, }; void Lcd_display(void){ switch(Key_status){ case enter: Key_fun=Key_tab .enter_index; break; case down: Key_fun=Key_tab .down_index; break; case up: Key_fun=Key_tab .up_index; break; case esc: Key_fun=Key_tab .esc_index; break; default: return; break; } Key_fun_Pt=Key_tab .operate; (*Key_fun_Pt)();//执行当前按键的操作 } 当微处理器扫描键盘检测到有按键按下时,根据按键按下的类型,返回在当前界面下其所对应的跳转索引号,并执行相应的函数。 由于每个界面的绘制都是由一个独立函数实现的,从循环方式的实现过程中发现,每发生一次按键按下操作都需要重新绘制整个屏幕。如果核心处理器是低速主频的处理器,在界面切换的时候会闪烁。而且,每一个界面都有固定不变的索引号,在增加或删除界面的时候需要重新修改整个列表,降低了程序的可移植性。 2 查询方式 查询方式是通过结构体对自身的递归调用实现菜单的多级嵌套。 结构体通过对自身的两次调用构建双向列表。一个菜单界面即为一个节点,节点的前驱和后继分别存放其父节点和子节点的入口地址。 3 状态机方式 状态机是由事件驱动,在各个状态之间跳转。采用状态机方式时,只需要提供驱动事件(在此设计中驱动事件为有效的按键按下),然后根据按键扫描返回的键值,决定所要跳转的下一状态。 如图3所示,系统启动初始化是显示Main_menu界面,当按键检测有返回值(即有按键按下)时,根据按下的按键所代表的操作跳转到指定的状态。例如:按下Up或者是down键时,只是在Main_menu界面内高亮显示不同区域;按下Enter时,则要根据原来按下的Up和down键来选择需要跳转的方向,假设在按下Enter之前仅按下一次down键,则key_v的值为2(key_v的值默认为1,即默认选中子菜单的第一项),就跳转为Sub_menu2界面;按下Esc键时,为从子菜单返回到上一级菜单,如果已经是主菜单了则返回的还是主菜单。 由于使用的是状态机的方式,只有发生一次有效的按键,状态才会发生一次跳转。而且,仅当Enter和Esc键按下时,才会切换界面。所以即便是在高速CPU应用中,也不会出现屏幕闪烁的效果。 从图3中可以看出,当要发生状态跳转时,目的状态只能是当前状态几个分支预测中的一个,从而不需要遍历整个列表,能够适应高速数据处理的场合。 多级菜单的程序流程如图4所示。系统上电初始化后显示主菜单,键盘扫描可以通过主程序中循环查询或者中断扫描来实现,最终根据键盘返回的键值选择下一状态。 03 组件的使用 1 Gitee链接地址 Demo位于amaziot_bloom_os_sdk\sample\3rd\3.2_MUL_MENU-SSD1315 Gitee源码地址:https://gitee.com/ning./hongdou Github源码地址:https://github.com/ayumid/hongdou 编译指令:.\build.bat -l .\amaziot_bloom_os_sdk\sample\3rd\3.2_MUL_MENU-SSD1315 2 组件功能介绍 驱动OLED显示多级菜单,所有的OLED都可以使用这个组件,都可以使用本驱动。驱动使用模拟spi实现。 menu相关代码可以移植到其它任意尺寸屏幕上,修改menu.c相关显示尺寸即可。 3 代码讲解 1 menu_command_callback 功能:该函数用于,菜单指令回调函数。 参数: 参数 释义 command 起点坐标 ... 可变参数 返回值:无 示例: C menu_command_callback(GET_EVENT_ENTER) 2 menu_run_menu 功能:该函数用于,菜单运行函数。 参数: 参数 释义 hMENU 菜单句柄 返回值:无 示例: C menu_run_main_menu(); 3 menu_handle_init 功能:该函数用于,菜单初始化。 参数: 参数 释义 hMENU 菜单句柄 返回值:无 示例: C menu_handle_init(hMENU); // 初始化 4 menu_event_and_action 功能:该函数用于,处理相应按键事件。 参数: 参数 释义 hMENU 菜单句柄 返回值:无 示例: C menu_event_and_action(hMENU); // 检查事件及作相应操作 5 menu_updata_idx 功能:该函数用于,更新菜单选中下标。 参数: 参数 释义 hMENU 菜单句柄 返回值:无 示例: C menu_updata_idx(hMENU); 6 menu_show_option_list 功能:该函数用于,菜单显示列表。 参数: 参数 释义 hMENU 菜单句柄 返回值:无 示例: C menu_show_option_list(hMENU); /* 显示选项列表 */ 7 menu_show_option 功能:该函数用于,根据数据类型显示。 参数: 参数 释义 x,y 起始坐标 hMENU 菜单句柄 返回值:无 示例: C /* 显示选项, 并记录长度 */ Show_i + i]); 8 menu_show_cursor 功能:该函数用于,显示光标。 参数: 参数 释义 hMENU 菜单句柄 返回值:无 示例: C menu_show_cursor(hMENU); /* 显示光标 */ 9 menu_show_border 功能:该函数用于,显示边框。 参数: 参数 释义 hMENU 菜单句柄 返回值:无 示例: C menu_show_border(hMENU); // 显示边框 10 menu_oled_set_cursor 功能:该函数用于,画OLED设置显示光标位置。 参数: 参数 释义 Page 指定光标所在的页,范围:0~7 X 指定光标所在的X轴坐标,范围:0~127 返回值:无 示例: C /*设置光标位置为每一页的第一列*/ menu_oled_set_cursor(j, 0); 11 menu_oled_write_data 功能:该函数用于,OLED写数据。 参数: 参数 释义 Data 要写入数据的起始地址 Count 要写入数据的数量 返回值:无 示例: C /*连续写入128个数据,将显存数组的数据写入到OLED硬件*/ menu_oled_write_data(menu_display_buf , 128); 12 menu_oled_clear 功能:该函数用于,将OLED显存数组全部清零。 参数:无 返回值:无 示例: C drv_ssd1315_refresh(); 13 menu_oled_clear_area 功能:该函数用于,将OLED显存数组部分清零。 参数: 参数 释义 X 指定区域左上角的横坐标,范围:0~127 Y 指定区域左上角的纵坐标,范围:0~63 Width 指定区域的宽度,范围:0~128 Height 指定区域的高度,范围:0~64 返回值:无 示例: C /*将图像所在区域清空*/ menu_oled_clear_area(X, Y, Width, Height); 14 menu_oled_show_image 功能:该函数用于,OLED显示图像。 参数: 参数 释义 X 指定区域左上角的横坐标,范围:0~127 Y 指定区域左上角的纵坐标,范围:0~63 Width 指定区域的宽度,范围:0~128 Height 指定区域的高度,范围:0~64 Image 指定要显示的图像 返回值:无 示例: C /*将ASCII字模库OLED_F6x8的指定数据以6*8的图像格式显示*/ menu_oled_show_image(X, Y, 6, 8, OLED_F6x8 ); 15 menu_oled_show_char 功能:该函数用于,屏幕旋转180度。 参数: 参数 释义 X 指定区域左上角的横坐标,范围:0~127 Y 指定区域左上角的纵坐标,范围:0~63 Char 指定要显示的字符,范围:ASCII码可见字符 FontSize 指定字体大小 范围:OLED_8X16 宽8像素,高16像素 OLED_6X8 宽6像素,高8像素 返回值:无 示例: C menu_oled_show_char(X + len * FontSize, Y, String , FontSize); 16 menu_oled_show_chn 功能:该函数用于,反显函数。 参数: 参数 释义 X 指定区域左上角的横坐标,范围:0~127 Y 指定区域左上角的纵坐标,范围:0~63 Char 指定要显示的字符,范围:ASCII码可见字符 FontSize 指定字体大小 范围:OLED_8X16 宽8像素,高16像素 OLED_6X8 宽6像素,高8像素 返回值:无 示例: C menu_oled_show_chn(X + len * FontSize, Y, SingleChinese, FontSize); 17 menu_oled_show_str 功能:该函数用于,OLED显示字符串。 参数: 参数 释义 X 指定区域左上角的横坐标,范围:0~127 Y 指定区域左上角的纵坐标,范围:0~63 Hanzi 指定要显示的字符,范围:字库字符 FontSize 指定字体大小 范围:OLED_8X16 宽8像素,高16像素 OLED_6X8 宽6像素,高8像素 返回值:无 示例: C menu_oled_show_str(X, Y, String, FontSize);//OLED显示字符数组(字符串) 18 menu_oled_printf 功能:该函数用于,OLED使用printf函数打印格式化字符串。 参数: 参数 释义 X 指定区域左上角的横坐标,范围:0~127 Y 指定区域左上角的纵坐标,范围:0~63 FontSize 指定字体大小 范围:OLED_8X16 宽8像素,高16像素 OLED_6X8 宽6像素,高8像素 format 指定要显示的格式化字符串,范围:ASCII码可见字符组成的字符串 ... 格式化字符串参数列表 返回值:无 示例: C /* 按需使用参数 */ menu_oled_printf(show_x, show_y, MENU_FONT_W, show_string); // 显示字符串 19 menu_oled_reverse_area 功能:该函数用于,将OLED显存数组部分取反。 参数: 参数 释义 X 指定区域左上角的横坐标,范围:0~127 Y 指定区域左上角的纵坐标,范围:0~63 Width 指定区域的宽度,范围:0~128 Height 指定区域的高度,范围:0~64 返回值:无 示例: C menu_oled_show_chn(X + len * FontSize, Y, SingleChinese, FontSize); 20 menu_oled_draw_point 功能:该函数用于,OLED在指定位置画一个点。 参数: 参数 释义 X 指定区域左上角的横坐标,范围:0~127 Y 指定区域左上角的纵坐标,范围:0~63 返回值:无 示例: C menu_oled_show_chn(X + len * FontSize, Y, SingleChinese, FontSize); 21 menu_keyX_irq_hadler 功能:该函数用于,中断回调函数。 参数:无 返回值:无 示例: C config.isr = menu_key0_irq_hadler; 22 menu_keyX_hadler 功能:该函数用于,回调函数。 参数:无 返回值:无 示例: C Os_Create_HISR(&menu_key0_hisr, "Gpio_Hisr", menu_key0_hadler, 2); 23 menu_keyX_callback 功能:该函数用于,去抖定时器回调函数。 参数:无 返回值:无 示例: C OSATimerStart(menu_key0_timer_ref, 2, 0, menu_key0_callback, 0); 24 menu_key_init 功能:该函数用于,初始化菜单按键使用的gpio。 参数:无 返回值:无 示例: C //初始化按键 menu_key_init(); 返回值:无 4 Demo实战 4.1 创建一个Demo 复制3.1_SSD1315示例工程,到同一个文件夹下,修改文件名为3.2_MUL_MENU-SSD1315,如图: 4.2 修改makefile 增加文件组件所在目录头文件路径,和源文件路径,如图: 4.3 增加头文件 使用代码编辑器,将新建的工程文件加入代码编辑器中,打开main.c,修改main.c,加入am.h等头文件,如图: 4.4 修改代码 在Phase2Inits_exit 创建一个任务,如图: 4.5 宏定义介绍 sample_ssd1315_uart_printf 输出日志到DEBUG 串口,日志比较少,可以输出到这个串口,如果日志比较多,需要输出到usb口,以免不必要的问题出现 sample_ssd1315_catstudio_printf 输出日志到USB 串口,使用catstudio查看,catstudio查看日志需要更新对应版本mdb.txt文件,软件打开filtter过滤日志,只查看用户输出的日志 SAMPLE_SSD1315_STACK_SIZE 栈空间宏定义 4.6 全局变量介绍 sample_ssd1315_stack_ptr 任务栈空间,本例使用数组实现,用户在做项目时,可以预先估算下当先任务需要的大致栈空间,OS没有提供可以查看栈空间使用情况的API sample_ssd1315_task_ref 任务指针 4.7 函数介绍 Phase1Inits_enter 底层初始化,本例空 Phase1Inits_exit 底层初始化,本例空 Phase2Inits_enter 底层初始化,本例空 Phase2Inits_exit 创建主任务,初始化消息队列,定时器,任务等。 代码片段: C int ret = 0; GPIOConfiguration config = {0}; //创建定时�? OSATimerCreate(&sample_xl9535_int_detect_timer_ref); //创建中断处理任务 OSATaskCreate(&sample_ssd1315_task_ref, sample_ssd1315_stack_ptr, SAMPLE_SSD1315_STACK_SIZE, 100, "ssd1315_task", sample_ssd1315_task, NULL); menu_run_main_menu 显示主界面,用户任务中调用这个函数。 代码片段: C static MENU_OPTION_TYPE_T MENU_OptionList = { {"TOOLS1", NULL}, {"TOOLS2", NULL}, {"TOOLS3", NULL}, {"TOOLS4", NULL}, {"TOOLS5", NULL}, {".."}}; static MENU_HANDLE_TYPE_T MENU = {.OptionList = MENU_OptionList}; menu_run_menu(&MENU); menu_run_tools_menu 根据按键选择运行工具界面。 代码片段: C static MENU_OPTION_TYPE_T MENU_OptionList SDK_CUST_SKU : SDK_PS_MODE : SDK_CHIP_VER : SDK_OS_TYPE : Platform Convertion Tools v4.01 with PS option extension Convertion done! |INPUT |out\bin\cp_1606L.bin |MARK |NAME |EXEADDR .LOADADDR.LENGTH .CPZLADDR|COMPRESS STASTIC | |--------|--------|--------.--------.--------.--------|------------------------------| |This Is LteOnly 4M| 00003000 |This Is LteOnly 4M| 00001000 |This Is LteOnly 4M| 0000a000 |This Is LteOnly 4M| 0001e000 |This Is LteOnly 4M| 0001b000 |This Is LteOnly 4M| 0001b000 |This Is LteOnly 4M| 0001a000 |This Is LteOnly 4M| 0001a000 |This Is LteOnly 4M| 00011000 |This Is LteOnly 4M| 0001e000 |This Is LteOnly 4M| 00021000 |This Is LteOnly 4M| 00012000 |--------|--------|--------.--------.--------.--------|------------------------------| 0x0014a000| 1.289(MB)| |------------------------------------------------------------------------------------| cp_1606L.axf cp_1606L.bin cp_1606L.map gnumake: Leaving directory `F:/3.asr-b/cat.1-asr1606/1.software/BlOOM_OS_1606_OPENCPU_1191_A09_WIHT_NEWRF/amaziot_bloom_os_sdk/sample/3rd/3.2_MUL_MENU-SSD1315' "copy NEZHAC_CP_CNR_MIFI_TX.bin to ./ " 已复制 1 个文件。 4.9 生成固件 参考入门中开发工具,生成工具。 4.10 测试 测试步骤: 参考编译教程,和文档开头的编译指令,进行编译 按照编译教程选择对应的选项 烧录 4.11 固件 上电后,屏幕会显示主菜单,通过4个按键:选择,返回,上,下。可以选择不同的菜单; 点击下载 OLED 多级菜单 Demo固件 5 生态组件链接 OLED屏 注:本文部分内容来源于网络,如有侵权,请及时联系我们。 本文章源自奇迹物联开源的物联网应用知识库Cellular IoT Wiki,更多技术干货欢迎关注收藏Wiki: Cellular IoT Wiki 知识库(https://rckrv97mzx.feishu.cn/wiki/wikcnBvAC9WOkEYG5CLqGwm6PHf)