家庭安全相册（二）- 手机端
本帖最后由 szjuliet 于 2022-9-8 23:03 编辑家庭安全相册（二）- 手机端
完整项目
家庭安全相册（一）- 行空板
家庭安全相册（二）- 手机端（被监护人）
家庭安全相册（三）- Tinkernode
家庭安全相册（四）- 手机端（监护人）
编程软件 MIT App Inventor
国内可稳定访问的官方平台：http://code.appinventor.mit.edu/。
平台基本使用方法介绍：https://mc.dfrobot.com.cn/thread-309711-1-1.html。
操作过程
编写App Inventor程序（监护人、被监护人）
编写行空板程序
编写Tinkernode程序
被监护人端手机APP
步骤1
申请高德地图apiKey（略）
步骤2
被监护人手机端-用户界面
https://makelogimg.dfrobot.com.cn/makelog/5b404f0cd1a37b6c0f5ec314/aa7d4c50722f0cb473e396776a495396.png?imageView2/2/w/1600
下图是模拟器显示的界面，和手机显示效果类似。
https://makelogimg.dfrobot.com.cn/makelog/5b404f0cd1a37b6c0f5ec314/49df5c7f40b98383a10fb56929b2d3dc.png?imageView2/2/w/1600
可视组件列表选择框：
有6个元素，爸爸、妈妈、爷爷、奶奶、大宝、小宝。身份选择后，会以不同的ID将当前位置发送出去。
两个标签：
分别用于显示当前状态，如物联网连接状态，经纬度坐标，地图缩放等级等
地图：
用于获取地图信息
不可视组件计时器：
用于发起MQTT连接直到成功
位置传感器：
用于获取实时位置信息
web客户端：
用于查询高德地图的地理编码、逆地理编码等信息
MqttTcp：
用于MQTT的订阅和发布消息
https://makelogimg.dfrobot.com.cn/makelog/5b404f0cd1a37b6c0f5ec314/ebf29ca5cda9b96571a4e09774cbf2de.png?imageView2/2/w/1600
地图组件的属性几点要注意的：
地图显示的中心点：
可以在高德地图上查找一个指定点的经纬度坐标，注意此处填写是纬度在前经度在后
LocationSensor：
选择添加的位置传感器组件
地图类型：
选择道路
https://makelogimg.dfrobot.com.cn/makelog/5b404f0cd1a37b6c0f5ec314/42cb937705d36aa60da2cf34ccfdda2b.png?imageView2/2/w/1600
高德地图坐标拾取器：
https://lbs.amap.com/tools/picker
点击“通过搜索关键字”，输入地址，获得的经纬度坐标，复制下来填写到上个图中的相应位置，注意经纬度的顺序。
https://makelogimg.dfrobot.com.cn/makelog/5b404f0cd1a37b6c0f5ec314/5b8567f00dafcb8be7c4406bc0136232.png?imageView2/2/w/1600
需要说明的是在App Inventor的地图组件不是高德地图，其经纬度坐标和高德地图是有出入的。因此电子围栏的坐标需要在App Inventor里进行拾取设置，避免运行时产生偏差。
https://makelogimg.dfrobot.com.cn/makelog/5b404f0cd1a37b6c0f5ec314/b0337e66200e9c047c089754530aa282.png?imageView2/2/w/1600
上图的第3~6行是通过高德地图进行坐标拾取获得的数据。
下图的第3~6行是通过App Inventor中的地图组件进行坐标拾取获得的数据。
可以看到两者差别还是有些大的。
如果想根据坐标 通过逆地理编码获取地址，可以对App Inventor中的坐标进行适当平移来接近高德地图的坐标再进行逆地理编码的查询。
https://makelogimg.dfrobot.com.cn/makelog/5b404f0cd1a37b6c0f5ec314/93bd8f06cb85061eaef2f51bff68d9a5.png?imageView2/2/w/1600
初始化变量，保存EasyIoT的用户id，密码及topic，高德地图的apiKey
https://makelogimg.dfrobot.com.cn/makelog/5b404f0cd1a37b6c0f5ec314/592bb19825411bcfaff9cad1460bc2dd.png?imageView2/2/w/1600
初始化变量经度、纬度，不要设置为空，可以给定一个家庭成员常在的位置。
变量家庭成员列表，保存了6个家庭成员，在列表选择框中选择。
变量address用于保存地址。
https://makelogimg.dfrobot.com.cn/makelog/5b404f0cd1a37b6c0f5ec314/b08de8fbbfa43a34f194af26887d8c1e.png?imageView2/2/w/1600
屏幕初始化时，设置计时器为真，将家庭成员列表赋值给列表选择框，开始发起MQTT连接
计时器用于判断MQTT是否连接成功，连接成功禁用计时器，未连接成功继续发起连接
https://makelogimg.dfrobot.com.cn/makelog/5b404f0cd1a37b6c0f5ec314/e3fa76f154379be4dcd6232e9cbeae9e.png?imageView2/2/w/1600
无论单击地图、双击地图还是长按地图，都会获取地图当前点的坐标并显示在屏幕上或发送信息。
正常情况下应该是当位置发生改变时才发送位置信息，但是本项目需要在模拟器的情况下测试，在室内是检测不到位置发生改变，因为通过在地图上点击的方式来发送实时位置信息。
https://makelogimg.dfrobot.com.cn/makelog/5b404f0cd1a37b6c0f5ec314/d1985da083ef0d5ed87b9b4a8105e50e.png?imageView2/2/w/1600
EasyIoT发送消息长度不能超过20个字符。经度最长10位，纬度最长9位，加上id位1位，由于经度纬度的数值不是每次位数都是最大，因此经度和纬度之间需要分隔符，这样总长度为1+10+9+1=21位，超出的最大长度。
在不减少精度的前提下，我们可以对处理进行转换处理。将经度和纬度各自先加上100，保证整数部分在什么情况下都是3位，再将经度和纬度分别乘以10的6次方，使之转换为整数。这样省掉了两个小数点，经度和纬度还是固定的长度，也就不需要分隔符。这样一共需要1+9+8=19位，满足了发送字符的长度限制。
接收端接收到数据后先除以10的6次方再减去100即可还原为原始数据。
例如：经纬度为114.101752,22.551976，原本需要5114.101752,22.551976发送21位字符，我们经过处理后发送的字符为：5214101752122551976，只需要19位字符。接收端接收到数据后，将数据分离为5，214101752，122551976。然后214101752除以10的6次方，变为214.101752再减去100变为114.101752，122551976除以10的6次方，变为122.551976再减去100变为22.551976。即将数据解析出来。
https://makelogimg.dfrobot.com.cn/makelog/5b404f0cd1a37b6c0f5ec314/7aed2f11fca8c8e42e16945c8a30aa98.png?imageView2/2/w/1600
经纬度编码过程：
https://makelogimg.dfrobot.com.cn/makelog/5b404f0cd1a37b6c0f5ec314/1d346c9ea0d357947cb9db6165351497.png?imageView2/2/w/1600
选择成员后获取该成员id，将此id连同该成员经过编码后的经纬度一起发送给服务器。
https://makelogimg.dfrobot.com.cn/makelog/5b404f0cd1a37b6c0f5ec314/d9fc267014d8f2fe4bcd6797b8b3487b.png?imageView2/2/w/1600
APP效果演示
app运行后会显示“正在连接MQTT”，连接成功后显示“MQTT已连接”
在地图上任何位置点击，会获取点击点的经纬度
点击“选择家庭成员”可以选择家庭成员，并以当前选定的身份向服务器发送位置信息
https://makelogimg.dfrobot.com.cn/makelog/5b404f0cd1a37b6c0f5ec314/8475b968ace21f3aeccd7b1241c3f5e4.gif
666
页:
[1]