一个简单交互界面的实现

这个界面本来是今年做NXP智能车的时候为了更改参数方便设计的,这其实又是一套用状态机的思想来实现的一个显示框架。

交互界面的JAVA程序 编写界面交互代码_二级


这个显示界面只是一个操作逻辑,所以它的的移植性还是挺高的,虽然本来设计的时候只是在OLED上拿来调参。

之前做的一个数硬币的机子,用的显示是LCD的12864,上面的界面也是这套程序做了一些简单的修改就能用了。

交互界面的JAVA程序 编写界面交互代码_二级菜单_02


交互界面的JAVA程序 编写界面交互代码_二级菜单_03

后来给做电磁的学弟,他自己移植也一直在用。最近另一个学弟又移植到LCD的彩屏上来用。我最近在做着玩的KEA直立车上调参也是这个程序。

上面说了这么多废话,下面开始说这个界面是怎么实现的:

要实现这么一个交互界面首先要有按键输入,去控制光标的移动和界面的切换。其次就是输出,在显示设备上把界面信息打印出来。这其中的核心就是光标的移动和状态的切换。

这个界面设计的基本操作逻辑是分为一级界面和二级界面,一级界面显示一个总的标题,在二级界面中去修改参数值。。这就涉及到了一个状态切换的状态机,它的状态图如下:

交互界面的JAVA程序 编写界面交互代码_交互界面的JAVA程序_04

1、一级界面中通过5向按键的上、下键移动光标切换选择的项目,

交互界面的JAVA程序 编写界面交互代码_二级_05


2、如果处于1级界面下按确认键(中心键)->进入二级菜单,在二级界面中还是通过上、下键切换光标选择的参数,

交互界面的JAVA程序 编写界面交互代码_二级菜单_06


3、选择好之后按下确认键->进入修改参数的状态,在这个状态下上、下键控制参数值的加、减,

交互界面的JAVA程序 编写界面交互代码_二级菜单_07


4、参数修改好之后再次按下确认键退出修改参数状态,最后在二级菜单的最后一个位置固定为返回标识”Back”光标移动到”Back”上按下确认键返回一级菜单。

要实现这个界面需要解决几个问题:
1、获取按键的输入
2、知道光标处于什么位置
3、切换状态机的状态
4、修改参数
5、显示设备的输出

其中问题1和问题5与操作逻辑无关,可以参考我以前的博客
[基于状态机的按键检测]

[单片机的printf重定向到OLED/UART/SEGGER_RTT]

问题2 的解决方法可以用一个变量来记录光标在一级界面的位置,另一个变量来记录二级界面的位置。不在修改参数状态的时候,按键输入为上的时候变量+1,输入为下的时候变量值-1,通过查询变量的值就可以轻松的知道光标的位置

问题3 的解决方法也是使用变量来记住当前的状态,一共就3个状态,分别为处于一级菜单 二级菜单 和二级菜单调整参数,分别可以用0,1,2来表征。满足之前所希望的状态切换的条件的时候将这个变量的值进行相应的修改就可以了。

问题4 找到对应的想要修改的变量直接修改值就可以了。

最后这个实现的源码有点多,我直接放到码云这了
https://gitee.com/mengxiaofan/OLED_Parameter.git
///

注意:我使用的编译环境是IAR V7.7 例程使用的单片机是KEAZ128
界面和按键输入实现的源码位于Sources文件夹下的KeyBoard.c 和 KeyBoard.h
OLED显示相关的代码实现位于Sources文件夹下的 OLED.c 和 OLED.h
OLED显示相关的使用了printf的重定向,请记得在IAR的设置里面General->Library Configuration选项卡->Library选择为FULL,
且要打印浮点数的话在General->Library Option选项卡->Printf formatter 选择Large或Full