MixIO详细教程Mixly图形化编程齐护机器人Arduino与Micropython 物联网平台_mixio怎么连接手机

前言

MixIO是米思齐（Mixly）官方推出的一个类似于Blynk和MQTT结合的开源平台，旨在为自主可控信息科技教育提供物联网服务器端应用。通过这个平台，用户可以轻松实现在线数据的上传和下发，并利用平台中的组件控制开发板。此外，用户还可以在线对组件逻辑功能进行图形化编程，底层显示代码为Micropython。作为物联网应用编程的优秀开源平台，MixIO适用于中小学生教育及编程爱好者的学习与研究。

总之，MixIO是一个功能强大、易于使用的开源平台，为物联网应用开发提供了极大的便利。

齐护机器人团队为对接MixIO物联网平台在多个软件上进行了图形化编程的适配，你可以用【齐护编程Scratch3.0】软件上采用Arduino或Micropython语言编程应用，也可以在齐护教育版Mixly或Mixly2.0上对其进行编程应用。

本教程以齐护教育版Mixly的ESP32_Arduino板卡下为例，分析各组件功能及举例说明应用。在其它软件或平台上方法一样，只是编程块可能有小区别，同时平台也会一直升级新功能，如教程与实际有区别，请您于学习当前系统为准！

一、注册

平台可以采用MixIO官方的或齐护机器人的，也可以自行搭建服务器，运行在本地局域网或公网（开发者得具备高级的计算机应用能力及在线服务器设备，本教程中不提供此项知识点，只讲应用层技术）。

注：MixIO官方推送数据时不能大于1秒3次（发送的最大频率被限制为5次/500ms），否则可能会强制对应帐号下线，齐护机器人服务器可以更快，但也会限制恶意的高速推送或编程的错误周期！建议编程时大于2秒/次推送数据。

1、在MixIO的官方网站注册帐号：https://mixio.mixly.cn

2、齐护机器人服务器注册帐号应用：http://mixio.qdprobot.com

二、登录

MixIO共有三种登录方式，分别是：帐号登录、Mixly Key、授权码。

1.帐号登录

使用注册的帐号登录，可以管理和编辑自己的工程。
注：齐护服务器不支持自主注册，只开放给齐护用户或合作商，请联系客服人员提供资料可批量在后台开通帐号！

提供资料的格式：格式（每个账号一行，多个时分行）: 账号,密码,密保问题,问题答案，中间用英文逗号分开，例如下：

12345@163. com,123456,你就读的班级是？,三年二班

12346@163. com,123459,你就读的班级是？,三年三班

2.MixlyKey

创建公用的临时工程，只需要在登录的时候随意取一个工程名（Mxily key）,点登录时，如果访mixly key，未被使用这个名字时（英文），系统会新建一个项目。任何人都可以通过该工程名（Mixly key）访问该项目，并可以发布和订阅工程内主题。

3.授权码

别人分享给你的项目，或你分享给别人的项目码。

授权码获取方法：登录个人账户，点击项目铅笔图标共享项目。

如上图，得到项目授权码。

下方也提供了直接访问项目的网址，可以通过网址直接访问项目。

可以通过授权码、网页或者APP直接登录到项目。共享的项目只可以使用，不能对项目进行编辑和修改。

此功能可以应用于做好的项目给多人应用或学习。

三、关于MQTT

MIXIO是基于MQTT协议开发的的物联网平台。

MQTT协议中有三种身份：发布者（Publish）、服务器（Broker）、订阅者（Subscribe）。

如下图，每个设备之间都已经建立了MQTT连接，某手机和某电脑订阅了“温度”主题，充当订阅者，温度计充当发布者。当温度计向“温度”主题发布一条消息时，那么订阅了“温度”主题的订阅者都会收到这条消息，而服务器只是充当转发的角色 。

图中的手机电脑等客户端相当于我们的开发板。而MQTT云相当于MIXIO服务器，他可以使用官方的服务，也可以使用部署在本地的私有服务器。

四、组件应用示例

注：以下所有操作以本地MIXIO服务器为参考！如果是用在线服务器，直接输入服务器链接即可！

1. 本地服务登录

1.1 网页端

https: 打开网址https://本地IP:8443 (对接内容时有https的url可以正常工作，但http的url可能无法工作，如图床链接)

http: 打开网址http://本地IP:9090 （对接内容http或https的url，兼容性更好，但可能浏览器会服安全性问题）

本地IP:MIXIO搭建时生成的IP地址，8443：WEB端端口号，用什么端口取决于服务器搭建时的设置，并不是固定的。

在此页面可以注册新的帐号，注册完成后以你注册的帐号密码登录。

1.2使用APP登录

也可以使用APP登录，这里下载手机端APP。

打开APP后选择私有服务，将localhost替换成你的MIXIO服务器的IP。端口地址使用和web端一样的8443。如果报错可将hppt改成https。确定后就可以进入登录页面，后续其它操作和网页端相同。

APP与WEB是互通的，操作界面和方法都相同。

注：APP端后期可能不再更新，可能存在bug的可能性，建议直接用网页端！

2.新建工程

点击加号可以新建工程，新建完成的工程在图中4标记处出现。

用户名：用于开发板连接凭据，需要记录下来，在程序中会使用到。

密码：（不是登录密码）用于开发板连接凭据，需要记录下来，在程序中会使用到。点击眼睛图标会显示出来。

工程名：用于开发板连接凭据，需要记录下来，在程序中会使用到。

3.快速上手_数据的发布

从客户端将数据发送到服务器的主题中，需要执行以下步骤。

首先我们在服务器项目上建立组件：

按住可以拖动组件摆放不同的位置，点击组件或右击可以编辑、删除、复制、调色、查看教程等操作

在如上ABC的项目中加入 两个【文本显示屏】组件，【组件名】分别为“温度”和“温度”，【主题】“tmp"和"hum” 。

增加【文本显示屏】控件来显示主题的数据。如下图所示

然后我们的在Mixly软件上进行编程如下：

首先需要连接你当前环境的WI_FI（需要WI_FI的用户名和密码，ESP系列主板只能用2.4G的wifi，不支持5G或其它）。

配置MQTT

服务器址：你的本地服务器地址或公网服务器链接(不用https或http)

用户名：你注册在服务器上的用户名（通常是邮箱号）

密码：你的项目密码（第2项【新建工程】中得到的项目密码，不是登录密码）

项目名称：工程名

发送数据到指定主题。（每个组件可以用不同的主题，在组件属性中设置）

Mixly软件Arduino_ESP32端编程程序示例：

使用编程主板器材：齐护C02 （开发板A）+温湿度模块（了解更多主控信息）

程序如下图所示：
注：使用齐护服务器的服务器地址是：mixio.qdprobot.com 代理网口号是：1884

在这里要注意的，创建MixIO的客户端不能放在初始化内，那样会造成程序工作不正常。

定时（每两秒）将P3接口的温度和湿度值 分别发送到【主题】“tmp"和"hum”。

C02上传程序后，登录web端或APP端查看和编辑"ABC"项目。

点击右上角的三角形【运行】按钮，主题的数据将会显示在控件上。运行后项目组件不可以编辑，必须停止后才可以。

在数据页，我们分别监视对应主题（tmp和hum）的数据发送情况，并且右侧还有历史数据折线图显示。

注：左上角的连接设备数量可能不准确，只是一个参考数量，不是实际在线的设备数量！（后期可能升级修复）

组件中还有其它的控件，可以实现对主题数据的修改和显示等，具体使用方法后面说明。

4.快速上手_数据的订阅

当数据发送到服务器更新时时，如果有客户端（这里主要指我们的开发板）订阅了该主题，比如我们另一块C02主板B，接收刚才主板A的数据，服务器则会将数据转发给订阅主题的所有客户端。

我们使用另一块开发板订阅"tmp"和"hum"主题，那么在前一块开发板对主题更新数据时，服务器会将更新的数据转发给开发板。

使用另一块C02（开发板B）编写如下程序:

开发板B的串口监视器，可以看到来自开发板A的温湿度信息。

开发板A给主题推送消息后，开发板B分别订阅了对应主题，当主题收到推送后会把内容推送给订阅者。

订阅者可以为多个，发布者也可以是多个，这样就可以实现多个硬件之间的数据共享。

5.按键控制LED

MixIO的按键和开关组件。

以“关/开”两种状态响应用户输入，向消息主题发送0/1信号；同时接收消息主题的0/1信号，实现对应的关/开状态呈现。

按键：按1松0

开关：按一下开再按一下关。

在组件中增加开关组件（按钮组件也一样，把反馈模式切换到开关就是开关组件），名称可随意 ，消息主题为btn。

程序如下图所示，只需要接收主题的消息，并对其进行判断即可。

注：与MiIO推送的数据或平台返回的数据类型都是字符串，这点要记住！

6.滑杆控制LED亮度

滑杆：

“滑动”模式响应用户输入，向消息主题发送数字；同时接收消息主题的数字，实现对应的滑动位置呈现。

需要注意是的，在使用的时候不能按住拖动，这样会连续发送数据，导致发送频率过高服务器限制发送。以点击的方式操作滑杆，而且不能太操作不能太频繁。

主题与组件对应即可 ，在这里需要将消息由字符串格式转为整数形式再传递给LED调整亮度。

7.摇杆组件

摇杆：

以“摇杆”模式响应用户输入，向消息主题发送"X,Y"格式的字符串, 其中X和Y分别为摇杆的X轴和Y轴的值（范围均为-100~100），每500ms采样一次。

摇杆发送的数值格式为“X，Y”的字符串，所以我们需要XY坐标数据从中分离出来。这里使用scanf函数，要了解详情可以自行百度scaff函数。

8.控制RGB

RGB色盘：

以“拖动”或“点击”模式响应用户输入，向三个消息主题分别发送R、G、B通道的颜色值（范围均为0~255）。

由于这个组件是分了三个通道，这里无需要做特殊处理，只需要接收每个通道的信息并接其转化为整数即可。

注：编程时可以选P4_R17 为板载RGB灯，或外接RGB灯模块如编程P3也可以。

9.指示灯

指示灯：

接收消息主题的0/1/2/3信号，实现对应的状态呈现（0=关闭，1=绿灯，2=黄灯，3=红灯）。

向指示灯关联的主题周期发送0~3变化的数据，可以看到指示灯的状态切换。

10.在线同步编程

上面我们了解到了各种组件是可以跟我们的主控进行数据的交互，在MixIO平台上我们还可以对不同的组件进行逻辑编程，让它不只限于发送0-1或数据，组件与组件之间，组年与主板之间，都可以通过平台右下角的【逻辑】中编程。

我们以【按键】【指示灯】【主控LED】为例 ，三者互动，在MiIO面板上，当我们按下面板上的【按键】时【指示灯】亮起，同时【主控LED】也亮起，这样的好处时当我们在远程控制主控时，相当于我们很容易的看到我们主控上LED灯当前的状态，更形象。

首先我们把在项目中增加3个组件，分别为两个【按键】一个【指示灯】，并将属性设置如下：

并设置外观颜色，让其更容易判断：

转到逻辑编程，给对应的【组件】进行编程：

对于逻辑编程的方法跟在Mixly软件上一样，这里是Micropython语言的，这里不做说明，可以自行摸索测试。

程序说明：挡按下名为【红灯】的按键组件时向【red】主题发布字符串【R】,同时控制【LED组件】发送显示为【红色】的指令，挡按下名为【绿灯】的按键组件时向【green】主题发布字符串【G】,同时控制【LED组件】发送显示为【绿色】的指令。

在Mixly软件上编程：

程序说明：连接wifi—对应的项目服务器信息----当【green】主题收到信息等于【G】字符串时，主板上的RGB灯亮【绿色】，同时串口打印收到的信息到串口------当【red】主题收到信息等于【R】字符串时，主板上的RGB灯亮【红色】，同时串口打印收到的信息到串口

运行结果：

11.条件触发

条件触发：

接收条件主题的消息，当来自条件主题的消息满足触发条件的关系组合时，在动作主题发送动作消息。

组件名称 - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。 条件主题 - 组件接收消息的主题。 触发条件1 - 组件触发动作的条件1。 触发条件2 - 组件触发动作的条件2。 条件关系 - 组件触发动作需要满足的条件关系（“AND”关系下需要同时满足两项条件方能执行动作，“OR”关系下需要满足至少一项条件方能执行动作，“XOR”关系下需要满足且仅满足一项条件方能执行动作）。 动作主题 - 组件下发动作消息的消息主题。 动作消息内容 - 组件下发动作消息的消息内容。

简单的来说：条件触发就是判断某个主题值（数值），是否达某个条件（两个或者一个条件），如果达到则发送消息到另一个主题。

示例，我们使用前面的指示灯示例，分别增加两个条件判断组件

分别判断在bulb为"0"时和"3"发送消息到主题mes(文本显示组件)显示"红灯了"和"灯灭了"。

增加文本显示组件用于显示消息。

运行组件，我们可以看到信息显示会在指示灯红灯和灭时候收到信息。

12.折线图和仪表显示

折线图

接收单一数值数据或JSON格式的多个数值数据，显示为折线统计图。

主要用于数据的记录和显示。当增加折线图组件并运行后，组件会记录关联主题的每次数据，并以折线图显示。

将前面使用到的温度推送程序下载到开发板中，在组件窗口中为主题tmp和hum增加折线组件。

运行组件后，我们可以观察其数据变化 。

在图表中单击可弹出菜单

清除数据：清除该主题的历史数据

切换显示：可以在折线图和表格间切换。

下载数据 ，将历史数据以csv表格下载到本地。

拖动下方条两端还可以更改查看起始时间（折线图状态下）。

13.投票器

接收文本数据，增加对应选项的计数。

选项列表：决定投票的个数，以及名称

接收模式：单选，多选，消息格式

例，如现在需要五个选项，分别ABCDE，那么选项列表里应该填写 A，B，C，D，E　使用逗号分隔开。

模式在为单选时，只能发送单个项目的名称投票才认为你是有效消息，比如“A”或“E”。

模式为多选的时，支持发送多选项目，比如“A，E”，“A，B，C”。

定时向投票器的主题随机发送A~E的值，可以看到投票器的值在变化。

单击组件，也可以投票器的数据 结果也可以清除和下载到本地（csv）。

14.表格

表格

接收单一数值数据或英文逗号分隔的多个数值数据，呈现为一个数据行。 “时间”列自动生成，显示数据接收的时间。

例：如一次要记录两个值，一个是温度一个是湿度，刚列名则可以写成：时间，温度，湿度。

那么开发板发送消息的格式应该为，“温度”，“湿度”。

定时向table组件推送温湿度消息，两个数据中间加“，”（必须为英文符号）。

时间为自动生成，同样这个数据也可以对其单个删除，清除，下载csv到本地。

15.显示与输入

15.1 仪表

图形化指针显示数据，设置显示范围，为非数值内容时不会动作。

15.2文本输入

对主题发送消息。

15.3文本显示

显示主题内容。

15.4 标签

仅显示文本功能。

16. 图片组件

图片组件输入图片链接可以显示图片，图片链接地址可以通过主题消息来传送,可以直接显示url或base64，推送更新时组件会更新图片。

注：服务器的https与http对于图片的url图床支持不一样，当你的图片url是http时，只能在http的服务上才能显示！如下说明：

https: https://服务器:8443 (对接内容时有https的url可以正常工作，但http的url可能无法工作，如图床链接)

http: http://服务器:9090 （对接内容http或https的url，兼容性更好，但可能浏览器会报安全性问题）

注：带图片显示功能的项目，如果共享链接给别人时，是看不到图片的（MixIO团队开发时为了保护用户隐私特意关闭了这个功能，只有自己帐号下才可以查看图片的显示）。

17.摄像头组件

调用当前摄像头图像。

一定要确认可使用系统摄像头的权限。

18.装饰框组件

无特殊功能，装饰项目UI用，可改变其背景颜色，可以通过背景色来区分一些项目状态。

19.点阵屏

行索引（0起始）-列索引（0起始）-颜色（0=灰，1=深蓝，任意个数的不同像素间用英文逗号连接） 例如：0-1-1,1-0-0,1-1-1

可以自定义长宽，并以点阵的方式显示主题的内容。格式如：0-1-1,1-1-1 代表的是：X0Y1点亮，X1Y1点亮，前两位是XY坐标，最后一位是0-1开关的意思，多点用逗号分开。

如图编程：

运行结果：

20.麦克风

调用当前设备的麦克风，一定要确认可使用系统麦克风权限，Windows电脑上用Edge浏览器测试是可以用，其它系统自行测试。

相当于语音转文字功能，按下时录音，再按下停止并转成文字在上面。

21.实时气象仪

参考【综合项目应用示例】_2.MixIO天气

22.数据地图

地图应用，当你向地图的主题发送坐标（经纬度时），地图会标注经纬度所在地图的位置，及气泡信息（message)。

该组件只可接收信息，不可发出信息。信息格式如下。

{“clientid” : “TEST2”,“lat” :" 50",“long” : “100”}

clientid：用户端名，每个用户端名会在地图上做一个这样标记

lat：纬度(范围-90~90)整数

long：经度(范围-180~180)整数

在组件上单击可以弹出设置菜单 ，点击刷子可对地图标记数据进行清除。

例如发送指定的经纬度给组件更新编程，为了更方便的查看数据有更新我们加入了一个点阵的显示：

注：发送的字符串中有引号时，要加\符号，不然会报错。

运行结果：

五、综合应用项目示例

1.Mixio显示远程拍照图片

程序实现：

按下按钮，将图片上传至云端，然后将图片的云端地址发送给MixIO的图片显示组件，用于在MixIO上显示。

使用器材：齐护机器人AIcamV2或AIcam_pro主控（ESP32带摄像头/显示屏）

注：带图片显示功能的项目，如果共享链接给别人时，是看不到图片的（MixIO团队开发时为了保护用户隐私特意关闭了这个功能，只有自己帐号下才可以查看图片的显示）。

程序如下图所示:

程序解释:

连接Wi_Fi

连接MixIO服务器

用于启动拍照和拍照计数的变量初始化

TFT初始化

相机初始化

画面水平镜像设置

test主题关联了组件的按钮组件，当按钮按下时设置拍照 状态变量为真。在另一个任务触发拍照程序。

在单独的进程中显示画面和拍照处理。

运行结果：

当按下button1 （test主题）时会显示AIcam远程的实时更新相片，同时相片会保存在本地TF卡内，并在串口打印出相应的图片链接。

注：图片是保存到齐护AI服务器图床的，这里要用http的服务器端口，https不能显示图片！

更多关于显示远程图片的应用：案例教程

2.MixIO天气

使用器材：齐护机器人AIcam_Pro

天气组件:

获取天气状态，下发的消息为Json格式。

选择地区信息可以设置自动更新和下发消息频率。

设置的更新频率和自动发送频率测试没有效果。

所以在MixIO的逻辑中编程设置定时更新天气数据 和下发数据 。

程序目的：获取网络天气信息并显示在TFT上。

这里重点就是Json信息的解析。关于如何解析Json可以参考这里。

MixIO发送到开发板的天气信息格式如下所示。

{“district”:“宝安”,“weather_type”:“多云”,“temperature”:20,“humidity”:84,“wind_dir”:“东风”,“wind_class”:“1级”}

全部程序：

运行结果：

六、Mixly软件例程下载

教程样例程序下载（gx.qdprobot.com)