【2024.2.27获奖项目】隔空手势识别测试系统

dwinForumAdmin

【开源】隔空手势识别测试系统

1.介绍
现在很多产品都带有屏幕，而有些屏幕不一定带触摸功能。不带触摸的屏幕，要控制屏幕一般都是用按键控制，而今天给大家带来的是不一样的无触摸屏幕的交互体验，通过隔空手势检测，来控制屏幕。

2.硬件准备

7英寸迪文科技COF超薄智能串口屏 DMG80480F070_01W【https://www.dwin.com.cn/product_detail_4840429.html】：

图1

迪文COF系列评估板【https://item.taobao.com/item.htm?id=658756536493】

图2

PAJ7620U2 9种手势识别传感器模块

图3

3.设计
首先是界面的设计，设计时要区分背景和控件素材，这样在更新素材的时候会便捷。

图6

然后是首页的设计，通过手势识别进入测试系统，不需要任何按键，将手贴近传感器即可进入菜单系统。每个界面的右上角都会有一个手势识别状态，不同的数字代表识别到的手势。

图7

进入菜单系统，共有四个选项，分别是翻页、识别、特殊和退出。可以通过上下左右手势进行选择，然后贴近传感器进行确认。

图8

进入翻页界面，会有两张图片，通过上下左右对两张图片进行滑动切换。接近传感器3秒会退出到菜单页面。

图9

进入识别界面，会显示识别到的手势，可以自由测试9种手势。接近传感器3秒会退出到菜单页面。

图10

进入特殊界面，这个界面是一个滑动条，可以通过手势，左旋转和右旋转调节滑动条的值。接近传感器3秒会退出到菜单页面。

图11

最后是程序设计，首先定义了一些变量和宏。

1. <font face="宋体">#define SELECT_RECTANGLE    0x1000  //选择框变量地址
   
2. #define SELECT_DESCRIBE_RECTANGLE    0x1100  //选择框描述地址
   
3. #define TURNING_IMAGE1    0x2100  //图片1描述地址
   
4. #define TURNING_IMAGE2    0x2200  //图片2描述地址
   
5. #define RECOGNITION_VAR_ICON    0x3000  //识别图标变量地址
   
6. #define SPECIAL_SLIDE    0x4000  //滑动条变量地址
   
7. uint8_t screen_page = 0;        //0主页，1选择页，2翻页页，3识别页，4特殊页
   
8. uint16_t forward_cnt = 0;       //向前计数器
   
9. uint8_t forward_flag = 0;       //向前标志位
   
10. uint8_t select_value = 0;       //选择页，0翻页，1识别，2特殊，3退出
    
11. uint16_t select_pos[4][2] =  {{133,124},{441,124},{133,296},{441,296}}; //选择页位置
    
12. uint8_t turning_current_image = 0;  //当前显示图片，0无图片，1图片1，2图片2
    
13. uint8_t turning_last_image = 0;  //上一张显示图片，0无图片，1图片1，2图片2</font>

复制代码

接下来是翻页界面的程序设计，通过识别到的动作，切换选择框图片的位置。

1. <font face="宋体">void select_operate(uint16_t gesrure_value)
   
2. {
   
3.     if(gesrure_value == GES_UP) //上
   
4.     {
   
5.         if(select_value >= 2)
   
6.         {
   
7.             select_value -= 2;
   
8.         }
   
9.         dgus_show_variate_icon_location_set(SELECT_DESCRIBE_RECTANGLE, select_pos[select_value][0], select_pos[select_value][1]);
   
10.     }
    
11.     else if(gesrure_value == GES_DOWN) //下
    
12.     {
    
13.         if(select_value <= 1)
    
14.         {
    
15.             select_value += 2;
    
16.         }
    
17.         dgus_show_variate_icon_location_set(SELECT_DESCRIBE_RECTANGLE, select_pos[select_value][0], select_pos[select_value][1]);
    
18.     }
    
19.     else if(gesrure_value == GES_LEFT) //左
    
20.     {
    
21.         if(select_value % 2 == 1)
    
22.         {
    
23.             select_value -= 1;
    
24.         }
    
25.         dgus_show_variate_icon_location_set(SELECT_DESCRIBE_RECTANGLE, select_pos[select_value][0], select_pos[select_value][1]);
    
26.     }
    
27.     else if(gesrure_value == GES_RIGHT) //右
    
28.     {
    
29.         if(select_value % 2 == 0)
    
30.         {
    
31.             select_value += 1;
    
32.         }
    
33.         dgus_show_variate_icon_location_set(SELECT_DESCRIBE_RECTANGLE, select_pos[select_value][0], select_pos[select_value][1]);
    
34.     }
    
35. }</font>

复制代码

比较复杂的是翻页界面，检测到上下左右手势后，需要判断一下当前显示的图片，然后将当前显示的图片划出界面，同时将下一次要显示的图片，以同等方向划入界面。

1. <font face="宋体">void turning_operate(uint16_t gesrure_value)
   
2. {
   
3.     uint16_t i = 0;
   
4.     uint8_t turning_mode = 0;       //翻页模式，0上，1下，2左，3右
   
5.     uint16_t turning_count = 0;     //翻页最终次数
   
6.     if(gesrure_value == GES_UP || gesrure_value == GES_DOWN || gesrure_value == GES_LEFT || gesrure_value == GES_RIGHT)
   
7.     {
   
8.         if(gesrure_value == GES_UP) //上
   
9.         {
   
10.             turning_mode = 0;
    
11.             turning_count = 48;
    
12.         }
    
13.         else if(gesrure_value == GES_DOWN) //下
    
14.         {
    
15.             turning_mode = 1;
    
16.             turning_count = 48;
    
17.         }
    
18.         else if(gesrure_value == GES_LEFT) //左
    
19.         {
    
20.             turning_mode = 2;
    
21.             turning_count = 80;
    
22.         }
    
23.         else if(gesrure_value == GES_RIGHT) //右
    
24.         {
    
25.             turning_mode = 3;
    
26.             turning_count = 80;
    
27.         }
    
28.         if(turning_current_image == 0 || turning_current_image == 2)
    
29.         {
    
30.             turning_current_image = 1;
    
31.         }
    
32.         else
    
33.         {
    
34.             turning_current_image = 2;
    
35.         }
    
36.         for(i = 0;i <= turning_count;i++)
    
37.         {
    
38.             switch(turning_mode)
    
39.             {
    
40.                 case 0:
    
41.                     dgus_show_variate_icon_location_set(turning_current_image * 0x100 + 0x2000, 0, 480 - i * 10);
    
42.                     t5l0_sys_delay_ms(20);
    
43.                     if(turning_last_image != 0)
    
44.                     {
    
45.                         dgus_show_variate_icon_location_set(turning_last_image * 0x100 + 0x2000, 0, 0 - i * 10);
    
46.                     }
    
47.                     break;
    
48.                 case 1:
    
49.                     dgus_show_variate_icon_location_set(turning_current_image * 0x100 + 0x2000, 0, -480 + i * 10);
    
50.                     t5l0_sys_delay_ms(20);
    
51.                     if(turning_last_image != 0)
    
52.                     {
    
53.                         dgus_show_variate_icon_location_set(turning_last_image * 0x100 + 0x2000, 0, 0 + i * 10);
    
54.                     }
    
55.                     break;
    
56.                 case 2:
    
57.                     dgus_show_variate_icon_location_set(turning_current_image * 0x100 + 0x2000, 800 - i * 10, 0);
    
58.                     t5l0_sys_delay_ms(20);
    
59.                     if(turning_last_image != 0)
    
60.                     {
    
61.                         dgus_show_variate_icon_location_set(turning_last_image * 0x100 + 0x2000, 0 - i * 10, 0);
    
62.                     }
    
63.                     break;
    
64.                 case 3:
    
65.                     dgus_show_variate_icon_location_set(turning_current_image * 0x100 + 0x2000, -800 + i * 10, 0);
    
66.                     t5l0_sys_delay_ms(20);
    
67.                     if(turning_last_image != 0)
    
68.                     {
    
69.                         dgus_show_variate_icon_location_set(turning_last_image * 0x100 + 0x2000, 0 + i * 10, 0);
    
70.                     }
    
71.                     break;
    
72.             }
    
73.             t5l0_sys_delay_ms(20);
    
74.         }
    
75.         turning_last_image = turning_current_image;
    
76.     }
    
77. }</font>

复制代码

4.总结

对于无触摸的屏幕，交互的方式也不少，不过手势识别是一个比较前沿的技术，可以让用户有更多的体验。还有一些隔空的控制，比如手指、手臂状态检测等，就像目前的手势感应遥控车一样，也是可以设计到无触摸屏幕中的，大家有什么好的想法也可以说出来，UP主去帮忙实现！

备注说明：如需源码，请参考此链接：http://inforum.dwin.com.cn:20080/forum.php?mod=viewthread&tid=9911&_dsign=130727f8

LounIN

翻页的动画是怎么做到的呢，图片缓缓从一侧滑出

二哲科技

LounIN 发表于 2024-3-5 10:12
翻页的动画是怎么做到的呢，图片缓缓从一侧滑出

使用图片进行翻页，同时移动两张图片的位置即可。

LounIN

二哲科技 发表于 2024-3-5 18:47
使用图片进行翻页，同时移动两张图片的位置即可。

也就是翻页的时候触发图片的位移功能是吗，达到一个图片从左往右/从右往左的切换效果

二哲科技

LounIN 发表于 2024-3-7 13:46
也就是翻页的时候触发图片的位移功能是吗，达到一个图片从左往右/从右往左的切换效果 ...

是的，这种方式只适用于一些场景