当前位置:   article > 正文

ESP32或K210如何上传图片到Mixio物联网平台显示

ESP32或K210如何上传图片到Mixio物联网平台显示

ESP32或K210如何上传图片到Mixio显示

注:以下教程均建议在网络连接正常的基础上!

使用前须知

Mixio是北师大傅骞博士带领的Mixly团队所开发的一个基于MQTT的国产开源物联网平台,与别的MQTT平台相比其具备图形界面与简单逻辑控制同时支持Mixly图形化编程,简单注册与使用详情见Mixio教程,本教程主要介绍Mixio平台的图片组件的简单使用与如何通过齐护AIcam与AIstart Pro主板拍照并上传到Mixio进行显示。

一、使用前准备

  • 齐护教育版Mixly
  • Mixio账号注册

二、Mixio图片组件

1、组件介绍

Mixio图片组件(见图1)是Mixio平台提供的一个UI设计组件,其可以显示网络视频或者图片对UI进行美化,其支持的参数有两种,第一种是图片或者视频的URL地址,第二种是图片的base64编码图片(见图2),这两种方式都可以将图片显示到Mixio当中,两种方式的区别如下:

  1. URL方式

    URL方式相当于浏览器主动获取指定地址的图片或者视频进行下载,需要保证浏览器能够正常访问图片或者视频,该URL需要公网链接才可以外网访问,否则仅能局域网使用。

  2. base64字符串方式

    base64字符串方式仅图片有效,将图片进行base64编码转换后直接发送到Mixio,传输的是图片本身,这种方式则不要求图片具备公网访问能力,因为图片已经以字符串的方式保存到了Mixio服务器。


    图1 Mixio图片组件

图2 Mixio图片显示

2、组件添加

Mixio组件添加(见图3、图4、图5)此处的项目名称为data,先添加一个图片显示组件消息主题默认然后拖动组件画布并缩放到合适的位置。


图3 Mixio添加组件1

图4 Mixio添加组件2

图5 Mixio添加组件3

三、Mixio图片组件配置工具及其使用

Mixio图片组件配置工具是齐护机器人提供的一个Mixio图片转发工具,它可以在线配置Mixio服务器与账号等信息从而构造得到一个图片上传链接,将图片以二进制文件形式发送该地址那么便能将上传的图片以base64编码的形式发送到Mixio显示。该工具使用(见图6)


图6 Mixio图片组件配置工具

按照上面的1-7序号所示步骤填写相关服务器与账号信息点击提交参数,在序号8所示的文本显示框将显示属于自己的Mixio上传图片链接,然后点击序号9按钮一键复制URL,我们将图片上传到该URL便可以将图片发送到Mixio显示,这里以API Tester为例调试方式(见图7)


图7 API调试

将API Tester改为POST上传方式BODY方式为File,将上面得到的URL填写到地址栏然后可以看到1-5序号所示的信息,然后鼠标单击序号6所示的位置选择图片(此处已经选择好了0000.jpg这个图片,注意仅支持jpg与png格式的图片),最后点击Send然后我们便可以在Mixio看到推送的图片了(见图8),这里返回success表示发送成功。


图8 API Tester调试效果

四、AIcam拍照上传到Mixio

AIcam系列摄像头模块(见图9、图10)是齐护机器人基于ESP32所开发的一款人工智能摄像头,其具备板载按钮与TFT等资源于一身,可以很方便的进行各种ESP32的学习与验证,同时它支持齐护教育版Mixly,是Mixly目前所支持的唯一一款图形化编程ESP32摄像头与高速TFT刷新板卡。


图9 AIcam_AIcamV2

图10 AIcam pro

使用齐护教育版Mixly对其编程相当简单,以上传图片到Mixio为例程序(见图11)这里我们只需使用软件自带案例打开将自定义网址修改为上面我们获取到的URL就可以了。


图11 AIcam拍照上传到Mixio程序

其拍照上传显示效果(见图12),值得注意的是图片分辨率选择为QVGA,否则可能因为图片过大图片上传时间长或者上传超时等原因导致上传失败。


图12 AIcam拍照上传到Mixio效果

五、AIstart Pro拍照上传到Mixio

AIstart Pro摄像头模块(见图13、图14)是齐护机器人基于K210与ESP32所开发的一款人工智能摄像头,其同时具备了K210与ESP32的双重优势,可以将K210的离线AI与物联网结合,让AI与物联网的学习变得更加轻松有趣,可以很方便的验证各种K210离线AI与物联网相结合的创意


图13 AIstart Pro外观

图14 AIstart Pro引脚图

由于AIstart Pro中K210负责拍照,ESP32负责网络相关服务,它们通过串口进行连接,因此我们的程序分为两部,第一部分K210拍照并通过串口将图片发送到ESP32,第二部分ESP32接收来自K210的图片并且POST请求将图片发送到上面获取的URL。

K210拍照发送到串口程序(见图15、图16)


图15 AIstart Pro串口发送图像

图16 AIstart Pro反馈程序

ESP32串口接收图像到并POST请求程序(见图17、图18)这里值得注意的是我们定义的数组与串口接收的任意数据之间并非是等同关系,所发送的串口数据长度不能超过数组的总长度,且POST发送的请求数据长度并非定义的数组长度70000而是串口数据的实际长度。


图17 ESP32软串口任意数据接收

图18 ESP32软串口接收数据POST到API接口

其拍照上传显示效果(见图19),值得注意的是K210帧大小设置为320x240,否则可能因为图片过大而图片传输时间长ESP32上传超时等原因导致上传失败。


图19 AIstart Pro上传图片到Mixio

六、常见问题与解决

1,联网出错或者长时间无法连接网络

ESP32只能连接2.4g网络不能连接5g频道网络

2,K210主板卡死

ESP32发送的无效数据或者其他原因导致程序假死,请检查程序,或者重启K210主板

七、文章例程下载

下载

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/401222
推荐阅读
相关标签
  

闽ICP备14008679号