回到顶部 回到顶部
best-icon

家庭安全相册(二)- 手机端 简单

头像 szjuliet 2022.07.23 393 3

材料清单

  • 手机或平板 X1

完整项目

家庭安全相册(一)- 行空板

家庭安全相册(二)- 手机端(被监护人)

家庭安全相册(三)- 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 被监护人手机端-用户界面

project-image

下图是模拟器显示的界面,和手机显示效果类似。

project-image

可视组件

列表选择框:

有6个元素,爸爸、妈妈、爷爷、奶奶、大宝、小宝。身份选择后,会以不同的ID将当前位置发送出去。

两个标签:

分别用于显示当前状态,如物联网连接状态,经纬度坐标,地图缩放等级等

地图

用于获取地图信息

不可视组件

计时器

用于发起MQTT连接直到成功

位置传感器

用于获取实时位置信息

web客户端

用于查询高德地图的地理编码、逆地理编码等信息

MqttTcp

用于MQTT的订阅和发布消息

project-image

地图组件的属性几点要注意的:

地图显示的中心点:可以在高德地图上查找一个指定点的经纬度坐标,注意此处填写是纬度在前经度在后

LocationSensor:选择添加的位置传感器组件

地图类型:选择道路

 

project-image

高德地图坐标拾取器:

https://lbs.amap.com/tools/picker

点击“通过搜索关键字”,输入地址,获得的经纬度坐标,复制下来填写到上个图中的相应位置,注意经纬度的顺序。

project-image

需要说明的是在App Inventor的地图组件不是高德地图,其经纬度坐标和高德地图是有出入的。因此电子围栏的坐标需要在App Inventor里进行拾取设置,避免运行时产生偏差。

project-image

上图的第3~6行是通过高德地图进行坐标拾取获得的数据。

下图的第3~6行是通过App Inventor中的地图组件进行坐标拾取获得的数据。

可以看到两者差别还是有些大的。

如果想根据坐标 通过逆地理编码获取地址,可以对App Inventor中的坐标进行适当平移来接近高德地图的坐标再进行逆地理编码的查询。

project-image

初始化变量,保存EasyIoT的用户id,密码及topic,高德地图的apiKey

project-image

初始化变量经度、纬度,不要设置为空,可以给定一个家庭成员常在的位置。

变量家庭成员列表,保存了6个家庭成员,在列表选择框中选择。

变量address用于保存地址。

project-image

屏幕初始化时,设置计时器为真,将家庭成员列表赋值给列表选择框,开始发起MQTT连接

计时器用于判断MQTT是否连接成功,连接成功禁用计时器,未连接成功继续发起连接

project-image

无论单击地图、双击地图还是长按地图,都会获取地图当前点的坐标并显示在屏幕上或发送信息。

正常情况下应该是当位置发生改变时才发送位置信息,但是本项目需要在模拟器的情况下测试,在室内是检测不到位置发生改变,因为通过在地图上点击的方式来发送实时位置信息。

project-image

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。即将数据解析出来。

project-image

经纬度编码过程:

project-image

选择成员后获取该成员id,将此id连同该成员经过编码后的经纬度一起发送给服务器。

project-image

 

APP效果演示

app运行后会显示“正在连接MQTT”,连接成功后显示“MQTT已连接”

在地图上任何位置点击,会获取点击点的经纬度

点击“选择家庭成员”可以选择家庭成员,并以当前选定的身份向服务器发送位置信息

project-image

评论

user-avatar
  • 7kPHye6j

    7kPHye6j2022.09.11

    Memu那个是什么模拟器呀?

    0
    • 7kPHye6j

      7kPHye6j2022.09.11

      请问你用的是什么模拟器

      1
      • szjuliet

        szjuliet2022.10.13

        逍遥模拟器