家庭安全相册（四）- 手机端（监护人）

完整项目

家庭安全相册（一）- 行空板

家庭安全相册（二）- 手机端（被监护人）

家庭安全相册（三）- Tinkernode

家庭安全相册（四）- 手机端（监护人）


程序功能：
点击家庭成员（本项目以大宝、小宝为例）图片可以实时查看成员最后一次定位信息、最后一次定位时间、围栏状态（在围栏内或在围栏外）。如果家庭成员在围栏范围内，图片是绿色外框，否则图片是红色外框。
家庭成员的位置变化发生改变时，监护人手机会实时显示当前位置（经纬度）、地址、时间以及是否在安全围栏范围内。

视频演示：


步骤1组件设计

首次运行程序模拟器显示如下图：

组件说明：


黑色文字，组件类型左对齐的为一级组件。
黄色文字，组件类型居中对齐的为二级组件。
蓝色文字，组件类型居右对齐的为三级组件。

垂直布局下放置了6个图片组件，用于显示家庭成员图片。首次启动时图片没有外框。当有成员位置接收到，如果位置在该成员围栏内，图片加绿色外框，如果在围栏外，图片加红色外框。
这里没有在属性里设置“图片”属性，在逻辑设计里使用循环统一设置，很高效。这也是在App Inventor中批量上传或删除文件这篇文章里我们批量上传以序号结尾命名的文件的意义，可以使用循环来自动处理。

垂直布局下放置了Map组件，相当于画布。在Map组件下放置了Circle, Polygon和Marker1。
垂直布局下还放置了若干个标签，用于显示成员的位置坐标、地址、离围栏最近点的距离、最后定位时间等信息。

下表是不可视组件。

计时器_MQTT：通过触发计时器持续发起MQTT连接直至成功；
Web客户端：用于对坐标（经纬度）进行逆地理编码，得到坐标的标准地址；
CloudDB：与TinyWebDB基本用法一样，只是安全性更高，有用户自己的Token。TinyWebDB是在MIT公共服务器上，如果标签有重复，很容易被覆盖或者删除。使用云存储的好处是数据可以共享。
对话框：用于对当前状态进行提示，提高用户体验性；
计时器_数据库：屏幕初始化时需要从CloudDB中读取保存在云上的位置数据，这需要一定的时间。读取结束后将数据保存在位置详情列表中。该计时器用于等待数据库读取数据结束。

步骤2导入素材文件


本项目需要18个图片文件，每个家庭成员3个：原图，外框绿色，外框红色。为了方便自动化操作，文件名分别为image1~6, imageG1~6, imageR1~6。
参见此文批量导入素材文件。

步骤3逻辑设计


1.  变量初始化

变量说明：
IoT_id：EasyIoT用户ID
IoT_pwd：EasyIoT密码
AlbumTopic, pub_Topic：订阅的EasyIoT主题
经度，纬度：用于保存位置的经度和纬度
前经度，前纬度：从数据库读取的最后一条定位信息，如果该信息与当前MQTT返回的数据一样，则当前位置不更新到数据库中（数据是重复的），只有不一样才需要更新数据库和位置详情列表
location：提供给高德地图进行逆地理编码的位置信息，格式是“经度,纬度”
id：家庭成员的id，1~6，家庭成员的顺序是爸爸，妈妈，爷爷，奶奶，大宝，小宝
tag：家庭成员标签，依次为爸爸，妈妈，爷爷，奶奶，大宝，小宝
read:  计数，计算读取数据库的次数，如果等于6次，说明CloudDB读取完毕
flag:  当read等于6时，将flag赋值为True。当MQTT有消息接收到时，只有当数据库全部读取完毕才会进行围栏判断并更新数据库。否则数据库和位置列表的值会不同步。
time：保存最后获取定位的时间
status：围栏状态，in/out，围栏内状态为in，围栏外状态为out，初始设置为out
address：保存通过对经纬度逆地理编码后返回的标准地址
mattmessage：接收到的mqtt消息
amap_key：高德地图api  key
imageList：存放家庭成员图像组件
locationDetailList：存放6个家庭成员位置详情：经纬度、时间戳、围栏状态。这是一个嵌套的列表
tagList：存放家庭成员身份

2.  当屏幕初始化

启用计时器，调用三个过程。

2.1 过程 initializeImageList


初始化图像组件的图片属性

2.2 过程 ConnectIoT持续进行MQTT连接，直到连接成功

2.3 过程 readCloudDB


从CloudDB中读取数据，在数据还没有保存到云存储前，返回的是空列表。

3. 当计时器_MQTT计时


启动计时器，发起MQTT连接，如果连接不成功，每隔1秒继续连接；如果连接成功，禁用计时器，并订阅MQTT主题。

4. 当MqttTCP1收到消息

收到的是家庭成员经过编码（手机被监控人端/Tinkernode）传回来的位置信息。提取时间用于记录获取定位的时间，将计时器_数据库启用计时设置为真，等待数据库读取全部数据。此处计时器触发的判断在第6步。

5. 当CloudDB获得数值


每次位置详情是以嵌套的列表保存到数据库中的，云数据库包括6个标签的数据，需要等待所有标签数据读取完毕才能进行下一步操作。当计数达到6后，将flag设置为true。

列表的结构为双层列表，外层为标签，内层为每个家庭成员的位置详情，包括经度、纬度、定位时间和围栏状态。

6. 当计时器_数据库计时


判断数据库的数据是否已经读取完毕（flag为真），读取完毕则进行后续的操作：判断是否在围栏内，更新数据库，进行逆地理编码，同时禁用计时器。

6.1  过程 经纬度解码


解码后得到三组数据：家庭成员id、经度、纬度。

上面的程序运行后，由于App Inventor对于数值精度的限制，最多只能保留小数点后面5位，这样程序在后续判断是否MQTT返回的值与列表末尾数据重复时会产生错误。
如下图，正确的坐标应该为114.219608，22.708621。但App Inventor解码后的值为114.21961，22.70862，第6位四舍五入了。

程序需要将数值作为字符串来处理，拆解经纬度的位数，再将整数部分、小数点和小数部分进行拼接。修改后的程序如下：

解码后将所有的数值完整的保留下来，如下图。

经纬度编码请参见：家庭安全相册（二）- 手机端


下图是经纬度编码截图。

6.2 过程 电子围栏判断


本项目仅示范对大宝和小宝的电子围栏进行示范。其余家庭成员方法完全一样。
当id为5时显示大宝电子围栏，隐藏小宝电子围栏，判断大宝电子围栏状态（圆形电子围栏）。
当id为6时显示小宝电子围栏，隐藏大宝电子围栏，判断小宝电子围栏状态（多边形电子围栏）。
电子围栏的定义及设计参见：用App Inventor实现电子围栏功能

6.2.1 过程 大宝电子围栏判断


计算给定坐标到圆的距离，如果在圆内，则显示“在电子围栏内”并显示绿色外框的家庭成员图片。
如果在圆外，则显示“在电子围栏外”并显示红色外框的家庭成员图片。

Circle组件的DistanceToPoint详解：


计算指定的点（纬度、经度）到圆的距离。
如果 centroids 为真，计算的是该点到圆心的距离。
如果 centroids 为假，计算的是该点离该圆最近的点的距离。如果点在圆内，该方法返回值为0。如果出现错误提示，返回的值为-1。

6.2.2 过程 小宝电子围栏判断


计算给定坐标到圆的距离，如果在多边形内，则显示“在电子围栏内”并显示绿色外框的家庭成员图片。
如果在多边形外，则显示“在电子围栏外”并显示红色外框的家庭成员图片。

Polygon组件的DistanceToPoint详解：


计算指定的点（纬度、经度）到多边形的距离。
如果 centroids 为真，计算的是给定的点到多边形中心的距离。
如果 centroids 为假，计算的是给定的点离该多边形最近的点的距离。如果指定的点在多边形内，该方法返回值为0。如果出现错误提示，返回的值为-1。

6.2.3  过程in和过程out


过程in：如果在电子围栏内，用绿色显示文字“在电子围栏内”，用绿色外框显示该成员图片，变量status设置为“in”；
过程out：如果在电子围栏外，用红色显示文字“在电子围栏外”，用红色外框显示该成员图片，变量status设置为“out”。

下图是大宝和小宝当前位置的状态。大宝在自己的围栏（圆形）内，图片外框为绿色，小宝在围栏外，图片外框为红色。
需要注意的是，在App InventorK 大宝实际的位置在第三高级中学内，而通过高德地图逆地理编码得到的地址是位于学校西北面的龙岗中医院。这是因为App Inventor的地图与国内地图存在偏差。

6.2.4 过程 统一操作


将地图中心位置移动到当前定位的坐标。在手机屏幕上显示家庭成员的身份，最后定位的坐标，并将标记移动到当前定位（上图中在圆形电子围栏中的洋红色的标记），以方便观察。

6.3 过程 更新数据库及位置详情列表


将位置详情（经度，纬度，时间戳，围栏状态）追加到成员标签下的CloudDB和列表locationDetailList中。
如果是空列表，直接更新；
如果不是空列表，判断当前经纬度是否为当前家庭成员位置详情列表最后一项的经纬度相同，如果相同说明位置没有变化，无需更新列表和数据库，如果不同则更新数据。

6.3.1 过程 更新数据


将位置详情追加到列表locationDetailList相应的位置后，更新该家庭成员标签数据库（追加）。

6.4 过程 逆地理编码


调用高德地图逆地理编码api，获得当前坐标的标准地址。

5. 当CloudDB获得数值


此事件对应步骤2.3 readCloudDB。
对获得数值进行计数，当获得了6组数据，将flag设置为true，此时位置列表和数据库的值才是一致的。

列表的结构为：

6. 过程 逆地理编码结果


关于逆地理编程可参见：家庭安全相册（一）- 行空板

根据上图的代码，格式化地址是在regeocode→formatted address→中，即下图中的青色文字最下方对应的部分。

7. 当点击任意图像时


如果当前家庭成员位置详情列表不为空，取该列表的最后一项（即最后一次发送的定位消息），提取经度、纬度、时间戳，判断是否在电子围栏内，并求该经纬度的逆地理编码，得到详细地址。

步骤4测试


首次运行程序，在物联网平台发送位置信息，程序运行结果如下：大宝在电子围栏内。
需要注意的是，坐标经纬度通过高德地图逆地理编码得到地址，这个地址不是深圳市第三高级中学。这是因为App Inventor的地图与国内地图存在一定的偏差。

点击小宝图片，从MQTT获取消息为6214219608122708621：

程序运行结果如下：Marker是小宝当前位置，离如意小学距离334米。

步骤5编写测试程序


为了验证程序的实时效果，编写一个可以发送定位的app，同时启动两个app的模拟器，观察程序的运行效果。
下图是测试app的截图。

特别提示：这里的idDevice一定要和前面的idDevice有所区别。因为这是同一个物联网账号。在程序的测试过程中，一直不能实现appA位置改变让appB也同步改变，appB必须刷新或者在服务器上发送地址才会改变，后来才发现是两个app的idDevice设置的是一样的。

步骤6用测试app进行测试


左图是监护人手机app，右图是测试app。在右边点击某个家庭成员的围栏，在地图上任意点击，会得到家庭成员的定位，并通过物联网发送位置信息。监护人实时获得位置并判断是否在围栏内。左右两个app的位置都是一致的。

碎碎念：


终于将这个系列完成，感觉大大的松了口气。关于行空板还有几个好玩的想法，等有空再慢慢实现。
暑假结束了，但整个暑假几乎没有休息一天。带学生外出调研，回学校给学生辅导，写教材，录课，还有永远开不完的腾讯会议。
寒假放了80天，上了2个月的网课。今天是9月8号，开学已经整整一个星期，因为疫情学生仍然没能返校，真的太难了。回想2020年初在澳洲做的DF冬季挑战赛，转眼已经将近3年，疫情却还没有结束。
怀念不戴口罩的日子，怀念不需要核酸不需要绿码的日子，怀念说走就走的日子。希望这样的日子在不久的将来就会回来！