171 lines
9.9 KiB
HTML
171 lines
9.9 KiB
HTML
<!--
|
||
API Documentation HTML Template - 1.0.1
|
||
Copyright © 2016 Florian Nicolas
|
||
Licensed under the MIT license.
|
||
https://github.com/ticlekiwi/API-Documentation-HTML-Template
|
||
!-->
|
||
<!DOCTYPE html>
|
||
<html class="no-js">
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>MixIO入门指南</title>
|
||
<link rel="shortcut icon" href="../img/shortcut.png"/>
|
||
<meta name="description" content="">
|
||
<meta name="author" content="ticlekiwi">
|
||
|
||
<meta http-equiv="cleartype" content="on">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
<link rel="stylesheet" href="css/hightlightjs-dark.css">
|
||
<link rel="stylesheet" href="../css/nunito.css">
|
||
<link rel="stylesheet" href="../css/muuri.css">
|
||
<script src="../js/jquery.min.js"></script>
|
||
<script src="../js/highlight.min.js"></script>
|
||
<link rel="stylesheet" href="css/style.css" media="all">
|
||
<link rel="stylesheet" href="../css/farbtastic.css">
|
||
<link href="../css/font-awesome.min.css" rel="stylesheet">
|
||
<link href="../css/nunito.css" rel="stylesheet">
|
||
<link href="../css/sb-admin-2.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="../css/muuri.css">
|
||
<link rel="stylesheet" href="../css/widgets.css">
|
||
<script>
|
||
hljs.initHighlightingOnLoad();
|
||
</script>
|
||
</head>
|
||
|
||
<body class="one-content-column-version">
|
||
<div class="left-menu">
|
||
<div class="content-logo" style="display: flex;flex-direction: row;align-items: center;">
|
||
<img src="../img/logo.png" style="height:40px;width:38px" />
|
||
<span style="font-weight:bold;color:white;margin-left:15px;font-size: 25px;">MixIO</span>
|
||
</div>
|
||
<div class="content-menu">
|
||
<ul>
|
||
<li class="scroll-to-link active" data-target="get-started">
|
||
<a>快速上手指南</a>
|
||
</li>
|
||
<li class="scroll-to-link" data-target="widgets">
|
||
<a>组件说明</a>
|
||
</li>
|
||
<li class="scroll-to-link" data-target="share">
|
||
<a>项目共享</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="content-page">
|
||
<div class="content">
|
||
|
||
<div class="overflow-hidden content-section" id="content-get-started">
|
||
|
||
<h1 id="get-started">快速上手指南</h1>
|
||
<p>注意：如要访问MixIO开发者文档，请移步 <a href="../devAPI">dev-api</a></p>
|
||
<p>
|
||
MixIO是一个组件化的物联网应用构建平台。在MixIO平台中，你可以便捷地连接、控制、监控各类可编程设备，快速打造易用的物联网应用，并将创意共享给他人。
|
||
</p>
|
||
<p>
|
||
MixIO平台的全部通信均基于开源的MQTT协议。这意味着，凡是支持MQTT协议的硬件设备都能够使用MixIO的开放能力。在本指南描述的应用场景中，MixIO平台是与Mixly图形化编程软件结合使用的。
|
||
</p>
|
||
<h3>创建 / 导入项目</h3>
|
||
<p>
|
||
假定您已经完成了账号注册并成功登录到了MixIO平台。在打开的“项目管理”页面中，点击右上角的<a class="btn btn-primary btn-circle" style="color:white;transform:scale(0.6)"><i class="fa fa-plus"></i></a>按钮，即可开始创建一个MixIO项目。<br>
|
||
在弹出的对话框中，您需要为项目指定一个名称。点击<a class="btn btn-primary btn-circle" style="color:white;transform:scale(0.6)"><i class="fa fa-check"></i></a>按钮，即可完成项目创建。<br>
|
||
如果您想基于其他用户的现有项目创建项目，您也可以通过点击右上角的<a class="btn btn-primary btn-circle" style="color:white;transform:scale(0.6)"><i class="fa fa-cloud-download"></i></a>按钮以导入项目（需要该用户为您提供一个授权码）。
|
||
</p>
|
||
<h3>连接设备</h3>
|
||
<p>
|
||
成功创建或导入项目后，“项目管理”页面中将出现对应的项目。点击项目缩略图下方的<a class="btn btn-success btn-circle" style="color:white;transform:scale(0.6)"><i class="fa fa-arrow-right"></i></a>按钮，即可进入该项目。<br>
|
||
进入项目页面后，您可以首先点击右上角的<a class="btn btn-success btn-circle" style="color:white;transform:scale(0.6)"><i class="fa fa-play"></i></a>按钮以运行项目。<br>
|
||
在项目运行状态下，点击右上角的<a class="btn btn-primary btn-circle" style="color:white;transform:scale(0.6);position:relative;"><i class="fa fa-link"></i></a>按钮，可以查看硬件连接所需的用户名/密码。<b>注意：此密码与您MixIO账号的登录密码不同。</b><br>
|
||
在Mixly图形化编程软件中，选择物联网→MixIO分区，使用“创建MQTT客户端并连接”程序块，依次键入用户名、硬件连接密码、项目名称，即可完成设备的连接。设备的连接信息将被实时显示在<a class="btn btn-primary btn-circle" style="color:white;transform:scale(0.6);position:relative;"><i class="fa fa-link"></i></a>按钮呼起的对话框中，设备名称为硬件的MAC地址。
|
||
</p>
|
||
<h3>添加组件</h3>
|
||
<p>
|
||
一个空的MixIO项目仅起到了汇聚设备、共享MQTT连接的作用；要实现控制、监控等特定功能，需要您为项目添加恰当的组件。在运行模式下，项目是不可编辑的；您需要点击右上角的<a class="btn btn-danger btn-circle" style="color:white;transform:scale(0.6)"><i class="fa fa-stop"></i></a>按钮停止项目，以重新进入编辑模式。<br>
|
||
在编辑模式下，点击右上角的<a class="btn btn-primary btn-circle" style="color:white;transform:scale(0.6)"><i class="fa fa-plus"></i></a>按钮，可以呼起“添加组件”对话框。MixIO平台提供了15种不同的组件，组件的具体功能与见下一章节“组件说明”。<br>
|
||
添加组件时，您需要为组件指定一个“组件名称”（用以在项目中特异标记该组件），并设定“消息主题”（用以与该组件进行输入/输出交互）。在Mixly图形化编程软件中，使用“发布”与“订阅”程序块，并遵循下一章节“组件说明”中的输入/输出规范，即可充分调用组件功能。<br>
|
||
在编辑模式下，项目组件的位置是可以自由移动的，组件的各项属性是可以自由更改的。在完成更改后，请您点击右上角的<a class="btn btn-info btn-circle" style="color:white;transform:scale(0.6)"><i class="fa fa-save"></i></a>按钮以保存项目布局。
|
||
|
||
</p>
|
||
</div>
|
||
<div class="overflow-hidden content-section" id="content-widgets">
|
||
<h1 id="widgets">组件说明</h1>
|
||
<p>
|
||
MixIO平台提供了13种预设组件，以下为每种组件的功能与输入/输出规范进行详细介绍。
|
||
</p>
|
||
<h3>组件总览</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>组件名称</th>
|
||
<th>功能简介</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>按键 / 开关</td>
|
||
<td>以按键和开关两种模式响应用户输入，向设定主题发送0/1信号。</td>
|
||
</tr>
|
||
<tr>
|
||
<td>滑杆</td>
|
||
<td>以滑动形式响应用户输入，向设定主题发送数值信息；监听设定主题的数值信息，并进行实时呈现。</td>
|
||
</tr>
|
||
<tr>
|
||
<td>文本输入</td>
|
||
<td>将用户输入的文本信息发送到设定主题。</td>
|
||
</tr>
|
||
<tr>
|
||
<td>摇杆手柄</td>
|
||
<td>以摇杆形式响应用户输入，向设定主题发送输入位置坐标字符串。</td>
|
||
</tr>
|
||
<tr>
|
||
<td>RGB色盘</td>
|
||
<td>支持用户自由选色，将色彩对应的R/G/B通道数值发送到设定主题；监听设定主题的数值信息，并将其实时合成为对应的颜色。</td>
|
||
</tr>
|
||
<tr>
|
||
<td>指示灯</td>
|
||
<td>监听设定主题的数值信号，呈现对应的熄灭/点亮色彩。</td>
|
||
</tr>
|
||
<tr>
|
||
<td>文本显示屏</td>
|
||
<td>监听设定主题的文本信息，将信息进行原样呈现。</td>
|
||
</tr>
|
||
<tr>
|
||
<td>折线图表</td>
|
||
<td>监听设定主题的数值信息，以折线图形式进行呈现，支持多数据源与图表转换。</td>
|
||
</tr>
|
||
<tr>
|
||
<td>直方图表</td>
|
||
<td>监听设定主题的文本信息，以直方图形式进行筛选呈现，支持图表转换。</td>
|
||
</tr>
|
||
<tr>
|
||
<td>数据表格</td>
|
||
<td>监听设定主题的文本信息，以表格形式进行筛选呈现。</td>
|
||
</tr>
|
||
<tr>
|
||
<td>仪表盘</td>
|
||
<td>监听设定主题的数值信息，进行动态呈现。</td>
|
||
</tr>
|
||
<tr>
|
||
<td>数据地图</td>
|
||
<td>监听设定主题下特定格式的消息，在地图上进行包含时空两维信息的可视化呈现。</td>
|
||
</tr>
|
||
<tr>
|
||
<td>实时气象仪</td>
|
||
<td>获取设定地区的实时天气，并向设定主题发送。</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<script src="js/script.js"></script>
|
||
</body>
|
||
|
||
</html> |