论坛 › 物联网大赛方案集锦 › 【跑步姿势训练鞋】No.008-安卓APP设计

sipower 发表于 2021-6-30 22:59

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

<p style="text-indent:24.0000pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">上一篇介绍了</font></span></span><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">自发电功能研究。这一</font></span></span><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">篇</font></span></span><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">介绍</font></span></span><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">安卓</font>APP设计</span></span><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">。</font></span></span></span></span></p>

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

<p style="text-indent:24.0000pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri"><a href="https://www.wxbit.com/"><u><span class="15" style="font-size:12.0000pt"><span style="font-family:宋体"><span style="color:#0000ff"><span style="text-decoration:underline"><span style="text-underline:single">https://www.wxbit.com/</span></span></span></span></span></u></a></span></span></p>

<p style="text-indent:24.0000pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">我这次</font>APP实现就是基于WxBit汉化增强版进行设计的。</span></span></span></span></p>

<p style="text-indent:24.0000pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">首先，在展厅找了一个</font>BLE设计例程《豌豆派蓝牙测试》，熟悉了一下BLE通讯的几个关键点，通过更改UUID的设置，基本搞清楚了蓝牙通讯的基本设计方法。例程如下图。</span></span></span></span></p>

<p class="imagemiddle" style="text-align: center;"></p>

<p style="text-indent: 24pt; text-align: center;"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">图</font>1，展厅例程</span></span></span></span></p>

<p style="text-indent:24.0000pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">然后是</font>UI设计，这里我参考了咕咚跑步精灵的APP界面，显示内容展现了每次跑步的各种数据。如下图。跑步精灵APP呈现的是跑步后统计数据，而我这个作品更偏向于实时的跑步数据，所以UI呈现项目稍有不同。</span></span></span></span></p>

<p class="imagemiddle" style="text-align: center;"></p>

<p style="text-indent: 24pt; text-align: center;"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">图</font>2，跑步精灵界面</span></span></span></span></p>

<p style="text-indent:24.0000pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">我设计了两屏页面，第一屏采用例程的界面，用来配对蓝牙设备和查看是否接收到数据；第二屏用来显示实时跑步数据。在风格上，结合我这个传感器特点，我重点展示了步频，脚掌落地状态，落地均衡度，以及各个传感器的测试值。通过图片、大数字、文字描述、滑条来展示跑步的各个参数；具体的</font>UI设计见下图。左边是第一屏设置蓝牙和查看连接情况。右边是第二屏展示数据。</span></span></span></span></p>

<p class="imagemiddle" style="text-align: center;"></p>

<p style="text-indent: 24pt; text-align: center;"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">图</font>3，界面</span></span></span></span></p>

<p style="text-indent:24.0000pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体">APP设计第一步是组件设计。这个是相对简单但是又很繁琐的过程。需要把屏幕分割成不同的区块，然后填充素材。为了方便后边逻辑设计，要把每个素材取一个对应好记的名称。有的时候设计界面展示的效果和实际有出入，所以设计的时候建议用调试器实时连着手机，可以在手机上显示最终的效果，比较方便。下图是组件设计界面。</span></span></span></span></p>

<p class="imagemiddle" style="text-align: center;"></p>

<p style="text-indent: 24pt; text-align: center;"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">图</font>4，件设计界面</span></span></span></span></p>

<p style="text-indent:24.0000pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体">APP设计第二步是逻辑设计。这个是整个APP的灵魂，需要使用各种逻辑块将素材连接起来，进行功能配置，控制操作，数据处理。下图是逻辑设计界面。下面我针对逻辑设计过程中遇到的问题进行一下分享。</span></span></span></span></p>

<p class="imagemiddle" style="text-align: center;"></p>

<p style="text-indent: 24pt; text-align: center;"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">图</font>5，逻辑设计界面</span></span></span></span></p>

<p style="text-indent:24.0000pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">第一个遇到的问题就是分屏后，蓝牙连接不能共享问题。两个屏幕是互相独立的，在第一屏连上蓝牙后，切换到第二屏不能操作第一屏的任何变量和设备。我从网上查找解决办法，最后还真找到了。是这样操作的，在第一屏切换为第二屏事件触发时，第一屏里面把蓝牙关掉，并把蓝牙设备信息传数给第二屏。代码块如下。</font></span></span></span></span></p>

<p class="imagemiddle" style="text-align: center;"></p>

<p style="text-indent: 24pt; text-align: center;"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">图</font>6，切换屏幕关蓝牙</span></span></span></span></p>

<p style="text-indent:24.0000pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">第二屏进入后第一件事就是读入传过来的蓝牙设备信息，然后扫描，扫描到后进行连接，这样就不用再次选择蓝牙设备了。第一个问题如此解决。</font></span></span></span></span></p>

<p class="imagemiddle" style="text-align: center;"></p>

<p style="text-indent: 24pt; text-align: center;"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">图</font>7，第二屏连蓝牙</span></span></span></span></p>

<p style="text-indent:24.0000pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">第二个问题是第二屏连上蓝牙后数据接收不到。收数逻辑设计是完全照搬第一屏的，第一屏接收没问题，到第二屏就没反应了。经过反复对比，最终发现问题，原来第一屏的时候用的字符串格式接收数据，第二屏我设计的是用数组格式接收数据，但是有两处需要更改，我只改了一处，导致接收到的数据类型不符，全部丢掉了，表现为收不到数。为了避免再次出现类似问题，也方便调试，我在界面上加了一行文本框，用来显示每次收到的数据。如下图。</font></span></span></span></span></p>

<p class="imagemiddle" style="text-align: center;"></p>

<p style="text-indent: 24pt; text-align: center;"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">图</font>8，接收数据显示框</span></span></span></span></p>

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

<p class="imagemiddle" style="text-align: center;"></p>

<p style="text-indent: 24pt; text-align: center;"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">图</font>9，通讯协议</span></span></span></span></p>

<p style="text-indent:24.0000pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">落地状态检测的数据在第</font>5篇帖子介绍过，是排序状态的4个数拼成的一个16进制变量，再将变量归类，通过查表法得到一个字节，传输给上位机，上位机再转化成文本显示，如下图。</span></span></span></span></p>

<p class="imagemiddle" style="text-align: center;"></p>

<p style="text-indent: 24pt; text-align: center;"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">图</font>10，落地状态的数据处理</span></span></span></span></p>

<p style="text-indent:24.0000pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">步频数据是单字节的，直接打包里面发上去。</font></span></span></span></span></p>

<p style="text-indent:24.0000pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">均衡度数据是对内外侧受力情况进行评估，将两侧传感器数据取平均值后，较小值对较大值进行百分比运算，如果两边力度相当，数值越大，则均衡度越好。</font></span></span></span></span></p>

<p style="text-indent:24.0000pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">协议后面</font>4个字节为各个传感器采集的力度值与最大值的百分比，可以直观的看到每个点的受力情况，方便训练时调整姿态。具体代码见下图。</span></span></span></span></p>

<p class="imagemiddle" style="text-align: center;"></p>

<p style="text-indent: 24pt; text-align: center;"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">图</font>11，计算代码</span></span></span></span></p>

<p style="text-indent:24.0000pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体">APP端一直监视蓝牙收数，收到数据时，执行下图代码块，实现数据接收和状态刷新，达到实时显示的目的。</span></span></span></span></p>

<p class="imagemiddle" style="text-align: center;"></p>

<p style="text-indent: 24pt; text-align: center;"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">图</font>12，收数代码块</span></span></span></span></p>

<p style="text-indent:24.0000pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">这些代码全部编好后，运行</font>APP，就能实现数据接收显示功能了，最终的运行结果如下图。</span></span></span></span></p>

<p class="imagemiddle" style="text-align: center;"></p>

<p style="text-indent: 24pt; text-align: center;"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">图</font>13，APP运行成功界面</span></span></span></span></p>

<p align="justify" style="text-indent:24.0000pt; text-align:justify">&nbsp;</p>

<p align="justify" style="text-indent:24.0000pt; text-align:justify"><span style="font-size:10.5pt"><span style="text-justify:inter-ideograph"><span style="font-family:Calibri"><span style="font-size:12.0000pt"><span style="font-family:宋体"><font face="宋体">这次作品到本篇文章就全部完成了。基本上做到预期的功能全实现了，设计过程中也遇到不少困难，都想办法解决了，感谢期间帮助过我的各位大神。后续就是整理文档，提交作品相应的文件，不再赘述。</font></span></span></span></span></span></p>

soso 发表于 2021-7-1 09:04

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

yilonglucky 发表于 2021-7-1 09:22

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

dql2016 发表于 2021-7-1 12:22

<p>厉害，编程要从娃娃抓起<img height="63" src="https://bbs.eeworld.com.cn/static/editor/plugins/hkemoji/sticker/facebook/victory.gif" width="61" /></p>

lightxixi 发表于 2021-7-1 15:37

<p>看完的第一感受就是：太牛了！！</p>

justd0 发表于 2021-7-1 16:18

<p>厉害了，scratch都渗透到Android app开发了,,,</p>

<p>抓功夫学下，不能输在孩子的起跑线啊<img height="53" src="https://bbs.eeworld.com.cn/static/editor/plugins/hkemoji/sticker/facebook/sad.gif" width="54" /></p>

okhxyyo 发表于 2021-7-1 17:10

<p>cool~~~~这个太强啦~~</p>

查看完整版本: 【跑步姿势训练鞋】No.008-安卓APP设计