【跑步姿势训练鞋】No.008-安卓APP设计

sipower

【跑步姿势训练鞋】No.008-安卓APP设计 [复制链接]

 

上一篇介绍了自发电功能研究。这一篇介绍安卓APP设计。

由于本人一直从事硬件相关的工作，对PC、手机软件开发不是很擅长。但是现在做东西，经常用到上位机进行调试或结果展示，遇到这种情况，往往是找人帮忙。直到有一次带孩子参加少儿编程课，发现了一款不需要了解太多专业编程知识，只需要有逻辑思维就能设计安卓手机APP的工具，这就是App Inventor，由Google设计的在线开发工具，虽然不能设计处很华丽的界面，但是实现常用的各种功能没有问题。目前常用的是第二版即App Inventor2，国内建议使用WxBit 汉化增强版，扩展了好多功能，提供实例展厅，用起来更方便。链接如下：

https://www.wxbit.com/

我这次APP实现就是基于WxBit汉化增强版进行设计的。

首先，在展厅找了一个BLE设计例程《豌豆派蓝牙测试》，熟悉了一下BLE通讯的几个关键点，通过更改UUID的设置，基本搞清楚了蓝牙通讯的基本设计方法。例程如下图。

图1，展厅例程

然后是UI设计，这里我参考了咕咚跑步精灵的APP界面，显示内容展现了每次跑步的各种数据。如下图。跑步精灵APP呈现的是跑步后统计数据，而我这个作品更偏向于实时的跑步数据，所以UI呈现项目稍有不同。

图2，跑步精灵界面

我设计了两屏页面，第一屏采用例程的界面，用来配对蓝牙设备和查看是否接收到数据；第二屏用来显示实时跑步数据。在风格上，结合我这个传感器特点，我重点展示了步频，脚掌落地状态，落地均衡度，以及各个传感器的测试值。通过图片、大数字、文字描述、滑条来展示跑步的各个参数；具体的UI设计见下图。左边是第一屏设置蓝牙和查看连接情况。右边是第二屏展示数据。

图3，界面

APP设计第一步是组件设计。这个是相对简单但是又很繁琐的过程。需要把屏幕分割成不同的区块，然后填充素材。为了方便后边逻辑设计，要把每个素材取一个对应好记的名称。有的时候设计界面展示的效果和实际有出入，所以设计的时候建议用调试器实时连着手机，可以在手机上显示最终的效果，比较方便。下图是组件设计界面。

图4，件设计界面

APP设计第二步是逻辑设计。这个是整个APP的灵魂，需要使用各种逻辑块将素材连接起来，进行功能配置，控制操作，数据处理。下图是逻辑设计界面。下面我针对逻辑设计过程中遇到的问题进行一下分享。

图5，逻辑设计界面

第一个遇到的问题就是分屏后，蓝牙连接不能共享问题。两个屏幕是互相独立的，在第一屏连上蓝牙后，切换到第二屏不能操作第一屏的任何变量和设备。我从网上查找解决办法，最后还真找到了。是这样操作的，在第一屏切换为第二屏事件触发时，第一屏里面把蓝牙关掉，并把蓝牙设备信息传数给第二屏。代码块如下。

图6，切换屏幕关蓝牙

第二屏进入后第一件事就是读入传过来的蓝牙设备信息，然后扫描，扫描到后进行连接，这样就不用再次选择蓝牙设备了。第一个问题如此解决。

图7，第二屏连蓝牙

第二个问题是第二屏连上蓝牙后数据接收不到。收数逻辑设计是完全照搬第一屏的，第一屏接收没问题，到第二屏就没反应了。经过反复对比，最终发现问题，原来第一屏的时候用的字符串格式接收数据，第二屏我设计的是用数组格式接收数据，但是有两处需要更改，我只改了一处，导致接收到的数据类型不符，全部丢掉了，表现为收不到数。为了避免再次出现类似问题，也方便调试，我在界面上加了一行文本框，用来显示每次收到的数据。如下图。

图8，接收数据显示框

第三个问题是数据处理问题。最初计划是单片机采集基础数据，由上位机进行分析计算，这样阈值的配置灵活度更高，但是实际用App Inventor2这种代码块形式编程，C语言简单几句话就能实现的算法，要用很多代码块才能拼出来，后来索性我把数据处理部分都挪到单片机进行处理，上位机只接受结果就行了。通讯协议也进行了修改，每个参数用一个字节表达，如下。

图9，通讯协议

落地状态检测的数据在第5篇帖子介绍过，是排序状态的4个数拼成的一个16进制变量，再将变量归类，通过查表法得到一个字节，传输给上位机，上位机再转化成文本显示，如下图。

图10，落地状态的数据处理

步频数据是单字节的，直接打包里面发上去。

均衡度数据是对内外侧受力情况进行评估，将两侧传感器数据取平均值后，较小值对较大值进行百分比运算，如果两边力度相当，数值越大，则均衡度越好。

协议后面4个字节为各个传感器采集的力度值与最大值的百分比，可以直观的看到每个点的受力情况，方便训练时调整姿态。具体代码见下图。

图11，计算代码

APP端一直监视蓝牙收数，收到数据时，执行下图代码块，实现数据接收和状态刷新，达到实时显示的目的。

图12，收数代码块

这些代码全部编好后，运行APP，就能实现数据接收显示功能了，最终的运行结果如下图。

图13，APP运行成功界面

 

这次作品到本篇文章就全部完成了。基本上做到预期的功能全实现了，设计过程中也遇到不少困难，都想办法解决了，感谢期间帮助过我的各位大神。后续就是整理文档，提交作品相应的文件，不再赘述。

soso

辛苦了，真正体现了和娃一起成长啊，从培训班都能收获灵感。

yilonglucky

这个牛啊，从上到下全有了，一等奖稳了

dql2016

厉害，编程要从娃娃抓起

lightxixi

看完的第一感受就是：太牛了！！

justd0

厉害了，scratch都渗透到Android app开发了,,,

抓功夫学下，不能输在孩子的起跑线啊

okhxyyo

cool~~~~这个太强啦~~