1.介绍
现在很多产品都带有屏幕，而有些屏幕不一定带触摸功能。不带触摸的屏幕，要控制屏幕一般都是用按键控制，而今天给大家带来的是不一样的无触摸屏幕的交互体验，通过隔空手势检测，来控制屏幕。
2.硬件准备
7英寸迪文科技COF超薄智能串口屏 DMG80480F070_01W,迪文COF系列评估板,PAJ7620U2 9种手势识别传感器模块
3.设计
首先是界面的设计，设计时要区分背景和控件素材，这样在更新素材的时候会便捷。
![]()
然后是首页的设计，通过手势识别进入测试系统，不需要任何按键，将手贴近传感器即可进入菜单系统。每个界面的右上角都会有一个手势识别状态，不同的数字代表识别到的手势。
![]()
进入菜单系统，共有四个选项，分别是翻页、识别、特殊和退出。可以通过上下左右手势进行选择，然后贴近传感器进行确认。
![]()
进入翻页界面，会有两张图片，通过上下左右对两张图片进行滑动切换。接近传感器3秒会退出到菜单页面。
![]()
进入识别界面，会显示识别到的手势，可以自由测试9种手势。接近传感器3秒会退出到菜单页面。
![]()
进入特殊界面，这个界面是一个滑动条，可以通过手势，左旋转和右旋转调节滑动条的值。接近传感器3秒会退出到菜单页面。
![]()
最后是程序设计，首先定义了一些变量和宏。
<font face="宋体">#define SELECT_RECTANGLE 0x1000 //选择框变量地址
#define SELECT_DESCRIBE_RECTANGLE 0x1100 //选择框描述地址
#define TURNING_IMAGE1 0x2100 //图片1描述地址
#define TURNING_IMAGE2 0x2200 //图片2描述地址
#define RECOGNITION_VAR_ICON 0x3000 //识别图标变量地址
#define SPECIAL_SLIDE 0x4000 //滑动条变量地址
uint8_t screen_page = 0; //0主页，1选择页，2翻页页，3识别页，4特殊页
uint16_t forward_cnt = 0; //向前计数器
uint8_t forward_flag = 0; //向前标志位
uint8_t select_value = 0; //选择页，0翻页，1识别，2特殊，3退出
uint16_t select_pos[4][2] = {{133,124},{441,124},{133,296},{441,296}}; //选择页位置
uint8_t turning_current_image = 0; //当前显示图片，0无图片，1图片1，2图片2
uint8_t turning_last_image = 0; //上一张显示图片，0无图片，1图片1，2图片2</font>
复制代码
接下来是翻页界面的程序设计，通过识别到的动作，切换选择框图片的位置。
<font face="宋体">void select_operate(uint16_t gesrure_value)
{
if(gesrure_value == GES_UP) //上
{
if(select_value >= 2)
{
select_value -= 2;
}
dgus_show_variate_icon_location_set(SELECT_DESCRIBE_RECTANGLE, select_pos[select_value][0], select_pos[select_value][1]);
}
else if(gesrure_value == GES_DOWN) //下
{
if(select_value <= 1)
{
select_value += 2;
}
dgus_show_variate_icon_location_set(SELECT_DESCRIBE_RECTANGLE, select_pos[select_value][0], select_pos[select_value][1]);
}
else if(gesrure_value == GES_LEFT) //左
{
if(select_value % 2 == 1)
{
select_value -= 1;
}
dgus_show_variate_icon_location_set(SELECT_DESCRIBE_RECTANGLE, select_pos[select_value][0], select_pos[select_value][1]);
}
else if(gesrure_value == GES_RIGHT) //右
{
if(select_value % 2 == 0)
{
select_value += 1;
}
dgus_show_variate_icon_location_set(SELECT_DESCRIBE_RECTANGLE, select_pos[select_value][0], select_pos[select_value][1]);
}
}</font>
复制代码
比较复杂的是翻页界面，检测到上下左右手势后，需要判断一下当前显示的图片，然后将当前显示的图片划出界面，同时将下一次要显示的图片，以同等方向划入界面。
<font face="宋体">void turning_operate(uint16_t gesrure_value)
{
uint16_t i = 0;
uint8_t turning_mode = 0; //翻页模式，0上，1下，2左，3右
uint16_t turning_count = 0; //翻页最终次数
if(gesrure_value == GES_UP || gesrure_value == GES_DOWN || gesrure_value == GES_LEFT || gesrure_value == GES_RIGHT)
{
if(gesrure_value == GES_UP) //上
{
turning_mode = 0;
turning_count = 48;
}
else if(gesrure_value == GES_DOWN) //下
{
turning_mode = 1;
turning_count = 48;
}
else if(gesrure_value == GES_LEFT) //左
{
turning_mode = 2;
turning_count = 80;
}
else if(gesrure_value == GES_RIGHT) //右
{
turning_mode = 3;
turning_count = 80;
}
if(turning_current_image == 0 || turning_current_image == 2)
{
turning_current_image = 1;
}
else
{
turning_current_image = 2;
}
for(i = 0;i <= turning_count;i++)
{
switch(turning_mode)
{
case 0:
dgus_show_variate_icon_location_set(turning_current_image * 0x100 + 0x2000, 0, 480 - i * 10);
t5l0_sys_delay_ms(20);
if(turning_last_image != 0)
{
dgus_show_variate_icon_location_set(turning_last_image * 0x100 + 0x2000, 0, 0 - i * 10);
}
break;
case 1:
dgus_show_variate_icon_location_set(turning_current_image * 0x100 + 0x2000, 0, -480 + i * 10);
t5l0_sys_delay_ms(20);
if(turning_last_image != 0)
{
dgus_show_variate_icon_location_set(turning_last_image * 0x100 + 0x2000, 0, 0 + i * 10);
}
break;
case 2:
dgus_show_variate_icon_location_set(turning_current_image * 0x100 + 0x2000, 800 - i * 10, 0);
t5l0_sys_delay_ms(20);
if(turning_last_image != 0)
{
dgus_show_variate_icon_location_set(turning_last_image * 0x100 + 0x2000, 0 - i * 10, 0);
}
break;
case 3:
dgus_show_variate_icon_location_set(turning_current_image * 0x100 + 0x2000, -800 + i * 10, 0);
t5l0_sys_delay_ms(20);
if(turning_last_image != 0)
{
dgus_show_variate_icon_location_set(turning_last_image * 0x100 + 0x2000, 0 + i * 10, 0);
}
break;
}
t5l0_sys_delay_ms(20);
}
turning_last_image = turning_current_image;
}
}</font>
复制代码
4.总结
对于无触摸的屏幕，交互的方式也不少，不过手势识别是一个比较前沿的技术，可以让用户有更多的体验。还有一些隔空的控制，比如手指、手臂状态检测等，就像目前的手势感应遥控车一样，也是可以设计到无触摸屏幕中的 |
楼主
标题置顶
标题高亮
