一种基于LVGL的用户界面切换方法及装置制造方法及图纸

本申请公开了一种基于LVGL的界面切换方法。步骤S21：设置多张画布之间的上下位置关系，在每张画布上建立多个界面，每个界面的大小都等于屏幕的大小。步骤S22：当有触控主体接触到电子设备的触控屏时，记录下接触位置的X轴和Y轴坐标作为初始位置。步骤S23：当触控主体始终接触触控屏且滑动时，实时记录触控主体与触控屏的接触位置的X轴和Y轴坐标，并判断触控主体是向左、向右、向上、还是向下滑动；画布的X轴坐标跟随触控主体的左右滑动方向而同方向移动；画布之间的切换跟随触控主体的上下滑动方向而同方向移动。步骤S24：当触控主体离开触控屏时，决定屏幕上最终显示的界面。本申请在LVGL系统框架中实现了左右滑动以及上下滑动切换用户界面。

【技术实现步骤摘要】
一种基于LVGL的用户界面切换方法及装置
本申请涉及一种电子设备上切换用户界面的方法。
技术介绍
目前采用嵌入式系统（embeddedsystem）的电子设备使用的GUI（graphicaluserinterface，图形用户界面）方案主要有两种，高端的电子设备使用安卓（Android）GUI系统框架，低端的电子设备则使用miniGUI系统框架。安卓GUI系统框架的代码量大，无法在存储空间有限的电子设备中保存。miniGUI系统框架的功能老旧，画面效果不够丰富，而且代码体积还是不够小。LVGL（LightandVersatileGraphicsLibrary，轻量通用图形库）是一种新的GUI系统框架，具有代码量小、易于开发UI（userinterface，用户界面）的优点，仅用16MB的闪存（flash）空间就能加载电子设备的固件（firmware）。但是LVGL系统框架目前只提供了左右滑动切换用户界面的方法。请参阅图1，LVGL系统框架中现有的界面切换方法包括如下步骤。步骤S11：在唯一的画布上建立多个界面，每个界面的大小（宽度、高度）都等于屏幕的大小（宽度、高度）。画布的高度等于屏幕的高度；画布的宽度是多个界面的宽度之和。屏幕是画布上的一个窗口，用户只能通过屏幕看到画布上的部分内容。步骤S12：当有触控主体接触到电子设备的触控屏时，记录下接触位置的X轴和Y轴坐标作为初始位置。所述触控主体包括用户手指、触控笔等。步骤S13：当触控主体始终接触触控屏且滑动时，实时记录触控主体与触控屏的接触位置的X轴和Y轴坐标，并判断触控主体是向左还是向右滑动。所述实时记录的采样周期例如是30ms。每次采样时计算触控主体与触控屏的当前接触位置的X轴坐标与初始位置的X轴坐标的差值作为X轴偏移量。当X轴偏移量大于0，判定触控主体向右滑动。当X轴偏移量小于0，判定触控主体向左滑动。屏幕的坐标固定不动，屏幕上显示的内容是画布当前移动到屏幕范围内的内容。画布的坐标跟随触控主体的滑动方向而同方向移动。当触控主体向右滑动，画布也向右移动。当触控主体向左滑动，画布也向左移动。画布的移动距离等于触控主体的X轴偏移量的绝对值。例如，屏幕的大小是240像素×240像素，画布的大小是960像素（宽度）×240像素（高度），画布上有4个界面，从左到右分别是界面1到界面4。一开始，屏幕上显示界面2。当用户手指在屏幕上滑动的某一时刻，X轴偏移量是－100像素，表明用户手指向左滑动100像素，则画布也向左滑动100像素，此时屏幕上显示的内容是两个界面的拼接——界面2的宽度为140像素的靠右侧部分与界面3的宽度为100像素的靠左侧部分。步骤S14：当触控主体离开触控屏时，决定屏幕上最终显示的界面。此时屏幕上显示的内容如果恰好为一个界面，则不做变动。此时屏幕上显示的内容如果是两个界面的拼接，则哪个界面出现在屏幕中的宽度更大，就将该界面完整地展现在屏幕中，例如移动画布以使该界面从部分在屏幕上显示变为完整在屏幕上显示。LVGL系统框架目前不提供也不支持上下滑动切换用户界面。
技术实现思路
本申请所要解决的技术问题是提供一种LVGL系统框架中可以通过左右滑动和上下滑动切换用户界面的方法。为解决上述技术问题，本申请提出了一种基于LVGL的界面切换方法，包括如下步骤。步骤S21：设置多张画布之间的上下位置关系，在每张画布上建立多个界面，每个界面的大小都等于屏幕的大小。步骤S22：当有触控主体接触到电子设备的触控屏时，记录下接触位置的X轴和Y轴坐标作为初始位置。步骤S23：当触控主体始终接触触控屏且滑动时，实时记录触控主体与触控屏的接触位置的X轴和Y轴坐标，并判断触控主体是向左、向右、向上、还是向下滑动；画布的X轴坐标跟随触控主体的左右滑动方向而同方向移动；画布之间的切换跟随触控主体的上下滑动方向而同方向移动。步骤S24：当触控主体离开触控屏时，决定屏幕上最终显示的界面。进一步地，所述步骤S21中，所述画布的数量至少为两张。优选地，所述步骤S23中，所述实时记录的采样周期是30ms。进一步地，所述步骤S23中，每次采样时计算触控主体与触控屏的当前接触位置的X轴坐标与初始位置的X轴坐标的差值作为X轴偏移量，还计算触控主体与触控屏的当前接触位置的Y轴坐标与初始位置的Y轴坐标的差值作为Y轴偏移量；根据X轴偏移量的绝对值与Y轴偏移量的绝对值中较大的值决定检测方向。当X轴偏移量的绝对值＞Y轴偏移量的绝对值，则检测方向为水平方向；此时当X轴偏移量大于0，则判定触控主体向右滑动；当X轴偏移量小于0，则判定触控主体向左滑动。当Y轴偏移量的绝对值＞X轴偏移量的绝对值，则检测方向为垂直方向；此时当Y轴偏移量大于0，则判定触控主体向上滑动；当Y轴偏移量小于0，则判定触控主体向下滑动。进一步地，所述步骤S23中，当X轴偏移量的绝对值＞Y轴偏移量的绝对值、且X轴偏移量的绝对值＞X轴阈值时，才决定检测方向为水平方向。当Y轴偏移量的绝对值＞X轴偏移量的绝对值、且Y轴偏移量的绝对值＞Y轴阈值时，才决定检测方向为垂直方向。进一步地，所述步骤S23中，当X轴阈值＜Y轴阈值时，表明电子设备优先检测水平方向上的左右滑动；当Y轴阈值＜X轴阈值时，表明电子设备优先检测垂直方向上的上下滑动。进一步地，所述步骤S23中，第一次采样时决定的检测方向在触控主体未离开触控屏之前始终保持不变。进一步地，所述步骤S23中，屏幕的坐标固定不动，屏幕上显示的内容是画布当前移动到屏幕范围内的内容。当触控主体向右滑动，画布也向右移动；当触控主体向左滑动，画布也向左移动；画布在X轴的移动距离等于触控主体的X轴偏移量的绝对值。当触控主体向上滑动，当前画布具有切换到其下方画布的趋势；当触控主体向下滑动，当前画布具有切换到其上方画布的趋势；画布切换时在Y轴的移动距离等于触控主体的Y轴偏移量的绝对值。进一步地，所述步骤S24中，当触控主体离开触控屏时，如果此时屏幕上显示的内容恰好为一个界面，则不做变动。如果此时屏幕上显示的内容是两个界面的拼接，则哪个界面出现在屏幕中的宽度更大，就将该界面完整地展现在屏幕中。如果此时屏幕上显示的内容是两个画布的拼接，则哪个画布出现在屏幕中的高度更大，就将该画布中已部分显示的界面完整地展现在屏幕中。本申请还提出了一种基于LVGL的界面切换装置，包括画布建立单元、初始记录单元、判断切换单元、决定单元。所述画布建立单元用来设置多张画布之间的上下位置关系，在每张画布上建立多个界面，每个界面的大小都等于屏幕的大小。所述初始记录单元用来当有触控主体接触到电子设备的触控屏时，记录下接触位置的X轴和Y轴坐标作为初始位置。所述判断切换单元用来当触控主体始终接触触控屏且滑动时，实时记录触控主体与触控屏的接触位置的X轴和Y轴坐标，并判断触控主体是向左、向右、向上、还是向下滑动；画布的X轴坐标跟随触控主体的左右滑动方向而同方向移动；画布之间的切换跟随触控主体的上下滑动方向而同方向移动。所述决定单元用来当触控主体本文档来自技高网...

【技术保护点】
1.一种基于LVGL的界面切换方法，其特征是，包括如下步骤；/n步骤S21：设置多张画布之间的上下位置关系，在每张画布上建立多个界面，每个界面的大小都等于屏幕的大小；/n步骤S22：当有触控主体接触到电子设备的触控屏时，记录下接触位置的X轴和Y轴坐标作为初始位置；/n步骤S23：当触控主体始终接触触控屏且滑动时，实时记录触控主体与触控屏的接触位置的X轴和Y轴坐标，并判断触控主体是向左、向右、向上、还是向下滑动；画布的X轴坐标跟随触控主体的左右滑动方向而同方向移动；画布之间的切换跟随触控主体的上下滑动方向而同方向移动；/n步骤S24：当触控主体离开触控屏时，决定屏幕上最终显示的界面。/n

【技术特征摘要】
1.一种基于LVGL的界面切换方法，其特征是，包括如下步骤；
步骤S21：设置多张画布之间的上下位置关系，在每张画布上建立多个界面，每个界面的大小都等于屏幕的大小；
步骤S22：当有触控主体接触到电子设备的触控屏时，记录下接触位置的X轴和Y轴坐标作为初始位置；
步骤S23：当触控主体始终接触触控屏且滑动时，实时记录触控主体与触控屏的接触位置的X轴和Y轴坐标，并判断触控主体是向左、向右、向上、还是向下滑动；画布的X轴坐标跟随触控主体的左右滑动方向而同方向移动；画布之间的切换跟随触控主体的上下滑动方向而同方向移动；
步骤S24：当触控主体离开触控屏时，决定屏幕上最终显示的界面。


2.根据权利要求1所述的基于LVGL的界面切换方法，其特征是，所述步骤S21中，所述画布的数量至少为两张。


3.根据权利要求1所述的基于LVGL的界面切换方法，其特征是，所述步骤S23中，所述实时记录的采样周期是30ms。


4.根据权利要求3所述的基于LVGL的界面切换方法，其特征是，所述步骤S23中，每次采样时计算触控主体与触控屏的当前接触位置的X轴坐标与初始位置的X轴坐标的差值作为X轴偏移量，还计算触控主体与触控屏的当前接触位置的Y轴坐标与初始位置的Y轴坐标的差值作为Y轴偏移量；根据X轴偏移量的绝对值与Y轴偏移量的绝对值中较大的值决定检测方向；
当X轴偏移量的绝对值＞Y轴偏移量的绝对值，则检测方向为水平方向；此时当X轴偏移量大于0，则判定触控主体向右滑动；当X轴偏移量小于0，则判定触控主体向左滑动；
当Y轴偏移量的绝对值＞X轴偏移量的绝对值，则检测方向为垂直方向；此时当Y轴偏移量大于0，则判定触控主体向上滑动；当Y轴偏移量小于0，则判定触控主体向下滑动。


5.根据权利要求4所述的基于LVGL的界面切换方法，其特征是，所述步骤S23中，当X轴偏移量的绝对值＞Y轴偏移量的绝对值、且X轴偏移量的绝对值＞X轴阈值时，才决定检测方向为水平方向；
当Y轴偏移量的绝对值＞X轴偏移量的绝对值、且Y轴偏移量的绝对值＞Y轴阈值时，才决定检测方向为垂直方向。


6.根据权利要求5所述的基于LVGL的界面切换方法...

【专利技术属性】
技术研发人员：胡文，黄金华，于嘉，
申请(专利权)人：翱捷科技股份有限公司，
类型：发明
国别省市：上海;31