425 lines
19 KiB
HTML
425 lines
19 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: 23px;">MixIO | 组件</span>
|
||
</div>
|
||
<div class="content-menu">
|
||
<ul>
|
||
<li class="scroll-to-link active" data-target="switch">
|
||
<a>开关</a>
|
||
</li>
|
||
<li class="scroll-to-link" data-target="button">
|
||
<a>按键</a>
|
||
</li>
|
||
<li class="scroll-to-link" data-target="slider">
|
||
<a>滑杆</a>
|
||
</li>
|
||
<li class="scroll-to-link" data-target="joystick">
|
||
<a>摇杆手柄</a>
|
||
</li>
|
||
<li class="scroll-to-link" data-target="rgb">
|
||
<a>RGB色盘</a>
|
||
</li>
|
||
<li class="scroll-to-link" data-target="bulb">
|
||
<a>指示灯</a>
|
||
</li>
|
||
<li class="scroll-to-link" data-target="timer">
|
||
<a>定时触发器</a>
|
||
</li>
|
||
<li class="scroll-to-link" data-target="trigger">
|
||
<a>条件触发器</a>
|
||
</li>
|
||
<li class="scroll-to-link" data-target="ble">
|
||
<a>蓝牙转发器</a>
|
||
</li>
|
||
<li class="scroll-to-link" data-target="chart">
|
||
<a>折线图表</a>
|
||
</li>
|
||
<li class="scroll-to-link" data-target="bar">
|
||
<a>投票器</a>
|
||
</li>
|
||
<li class="scroll-to-link" data-target="table">
|
||
<a>数据表格</a>
|
||
</li>
|
||
<li class="scroll-to-link" data-target="map">
|
||
<a>数据地图</a>
|
||
</li>
|
||
<li class="scroll-to-link" data-target="dashboard">
|
||
<a>仪表盘</a>
|
||
</li>
|
||
<li class="scroll-to-link" data-target="weather">
|
||
<a>实时气象仪</a>
|
||
</li>
|
||
<li class="scroll-to-link" data-target="input">
|
||
<a>文本输入</a>
|
||
</li>
|
||
<li class="scroll-to-link" data-target="output_text">
|
||
<a>文本显示屏</a>
|
||
</li>
|
||
<li class="scroll-to-link" data-target="pixel">
|
||
<a>点阵屏</a>
|
||
</li>
|
||
<li class="scroll-to-link" data-target="label">
|
||
<a>标签</a>、
|
||
</li>
|
||
<li class="scroll-to-link" data-target="image">
|
||
<a>图片</a>
|
||
</li>
|
||
<li class="scroll-to-link" data-target="video">
|
||
<a>视频</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="content-page">
|
||
<div class="content">
|
||
<div class="overflow-hidden content-section" id="content-switch">
|
||
<h1 id="switch">开关</h1>
|
||
<h3>组件总览</h3>
|
||
<p>
|
||
以“关/开”两种状态响应用户输入，向消息主题发送0/1信号；同时接收消息主题的0/1信号，实现对应的关/开状态呈现。
|
||
</p>
|
||
<h3>可配置项</h3>
|
||
<p>
|
||
<span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">反馈模式</span> - 组件的反馈模式，可在此处将“开关”组件转换为“按键”组件。
|
||
</p>
|
||
</div>
|
||
<div class="overflow-hidden content-section" id="content-button">
|
||
<h1 id="button">按键</h1>
|
||
<h3>组件总览</h3>
|
||
<p>
|
||
以“按下/松开”模式响应用户输入，向消息主题发送0/1信号（按下=1，松开=0）。
|
||
</p>
|
||
<h3>可配置项</h3>
|
||
<p>
|
||
<span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">反馈模式</span> - 组件的反馈模式，可在此处将“按键”组件转换为“开关”组件。
|
||
</p>
|
||
</div>
|
||
<div class="overflow-hidden content-section" id="content-slider">
|
||
<h1 id="slider">滑杆</h1>
|
||
<h3>组件总览</h3>
|
||
<p>
|
||
以“滑动”模式响应用户输入，向消息主题发送数字；同时接收消息主题的数字，实现对应的滑动位置呈现。
|
||
</p>
|
||
<h3>可配置项</h3>
|
||
<p>
|
||
<span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">滑动范围</span> - 滑杆的最小值、最大值和步长值。
|
||
</p>
|
||
</div>
|
||
<div class="overflow-hidden content-section" id="content-joystick">
|
||
<h1 id="joystick">摇杆手柄</h1>
|
||
<h3>组件总览</h3>
|
||
<p>
|
||
以“摇杆”模式响应用户输入，向消息主题发送"X,Y"格式的字符串, 其中X和Y分别为摇杆的X轴和Y轴的值（范围均为-100~100），每500ms采样一次。
|
||
</p>
|
||
<h3>可配置项</h3>
|
||
<p>
|
||
<span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
|
||
</p>
|
||
</div>
|
||
<div class="overflow-hidden content-section" id="content-rgb">
|
||
<h1 id="rgb">RGB色盘</h1>
|
||
<h3>组件总览</h3>
|
||
<p>
|
||
以“拖动”或“点击”模式响应用户输入，向三个消息主题分别发送R、G、B通道的颜色值（范围均为0~255）。
|
||
</p>
|
||
<h3>可配置项</h3>
|
||
<p>
|
||
<span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">消息主题（R）</span> - 组件的消息主题（R通道）。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">消息主题（G）</span> - 组件的消息主题（G通道）。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">消息主题（B）</span> - 组件的消息主题（B通道）。
|
||
</p>
|
||
</div>
|
||
<div class="overflow-hidden content-section" id="content-bulb">
|
||
<h1 id="bulb">指示灯</h1>
|
||
<h3>组件总览</h3>
|
||
<p>
|
||
接收消息主题的0/1/2/3信号，实现对应的状态呈现（0=关闭，1=<b style="color: #1cc88a;">绿灯</b>，2=<b style="color:#f6c23e">黄灯</b>，3=<b style="color:#e74a3b">红灯</b>）。
|
||
</p>
|
||
<p>
|
||
也接收中/英文颜色字符串，包括：
|
||
"红", "橙", "黄", "绿", "青", "蓝", "紫", "白", "黑", "灰", "棕",
|
||
"red", "orange", "yellow", "green", "cyan", "blue", "purple", "white", "black", "grey", "brown"
|
||
</p>
|
||
<p>
|
||
也支持RGB通道格式和16进制颜色，例如：
|
||
"255,0,0", "#ff0000"
|
||
</p>
|
||
<h3>可配置项</h3>
|
||
<p>
|
||
<span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
|
||
</p>
|
||
</div>
|
||
<div class="overflow-hidden content-section" id="content-timer">
|
||
<h1 id="timer">定时触发器</h1>
|
||
<h3>组件总览</h3>
|
||
<p>
|
||
以设定的“触发间隔”为周期，向“触发消息主题”发送“触发消息内容”，直至触发次数达到“次数上限”（0=无限制）。
|
||
</p>
|
||
<h3>可配置项</h3>
|
||
<p>
|
||
<span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">触发消息主题</span> - 组件下发触发消息的消息主题。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">触发消息内容</span> - 组件下发触发消息的消息内容。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">触发间隔</span> - 组件下发触发消息的间隔时间（单位：毫秒）。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">次数上限</span> - 组件下发触发消息的次数上限（0=无限制）。
|
||
</p>
|
||
</div>
|
||
<div class="overflow-hidden content-section" id="content-trigger">
|
||
<h1 id="trigger">条件触发器</h1>
|
||
<h3>组件总览</h3>
|
||
<p>
|
||
接收条件主题的消息，当来自条件主题的消息满足触发条件的关系组合时，在动作主题发送动作消息。
|
||
</p>
|
||
<h3>可配置项</h3>
|
||
<p>
|
||
<span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">条件主题</span> - 组件接收消息的主题。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">触发条件1</span> - 组件触发动作的条件1。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">触发条件2</span> - 组件触发动作的条件2。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">条件关系</span> - 组件触发动作需要满足的条件关系（“AND”关系下需要同时满足两项条件方能执行动作，“OR”关系下需要满足至少一项条件方能执行动作，“XOR”关系下需要满足且仅满足一项条件方能执行动作）。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">动作主题</span> - 组件下发动作消息的消息主题。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">动作消息内容</span> - 组件下发动作消息的消息内容。
|
||
</p>
|
||
</div>
|
||
<div class="overflow-hidden content-section" id="content-ble">
|
||
<h1 id="ble">蓝牙转发器</h1>
|
||
<h3>组件总览</h3>
|
||
<p>
|
||
连接蓝牙设备，将蓝牙设备的读取与写入对接到消息主题，实现蓝牙设备与MixIO的通信。<br>
|
||
</p>
|
||
<p>
|
||
<b>以下是蓝牙转发器的状态指示灯含义：</b>
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">深蓝色闪烁标志</span> - 正在尝试连接蓝牙设备。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">深蓝色常亮标志</span> - 已连接蓝牙设备。
|
||
</p>
|
||
<p>
|
||
<span style="color: #1cc88a">绿色闪烁标志</span> - 正在从设备接收数据。
|
||
</p>
|
||
<p>
|
||
<span style="color: #36B9CC;">浅蓝色闪烁标志</span> - 正在向设备发送数据。
|
||
</p>
|
||
<p>
|
||
<span style="color: #e74a3b">红色常亮标志</span> - 蓝牙设备已断开。
|
||
</p>
|
||
<p>
|
||
<span style="color: #858796">灰色标志</span> - 未选择蓝牙设备。
|
||
</p>
|
||
<h3>可配置项</h3>
|
||
<p>
|
||
<span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">读取消息主题</span> - 组件读取蓝牙设备消息，进行转发的消息主题。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">蓝牙设备</span> - 组件连接的蓝牙设备。
|
||
</p>
|
||
</div>
|
||
<div class="overflow-hidden content-section" id="content-chart">
|
||
<h1 id="chart">折线图表</h1>
|
||
<h3>组件总览</h3>
|
||
<p>
|
||
接收单一数值数据或JSON格式的多个数值数据，显示为折线统计图。
|
||
</p>
|
||
<h3>可配置项</h3>
|
||
<p>
|
||
<span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
|
||
</p>
|
||
</div>
|
||
<div class="overflow-hidden content-section" id="content-bar">
|
||
<h1 id="bar">投票器</h1>
|
||
<h3>组件总览</h3>
|
||
<p>
|
||
接收文本数据，增加对应选项的计数。
|
||
</p>
|
||
<h3>可配置项</h3>
|
||
<p>
|
||
<span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">选项列表</span> - 用英文逗号分隔的选项列表。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">接收模式</span> - 单选（严格匹配，每次仅接收一个选项）或多选（模糊匹配，每次可接收多个选项）。
|
||
</p>
|
||
</div>
|
||
<div class="overflow-hidden content-section" id="content-table">
|
||
<h1 id="table">数据表格</h1>
|
||
<h3>组件总览</h3>
|
||
<p>
|
||
接收单一数值数据或英文逗号分隔的多个数值数据，呈现为一个数据行。<br>
|
||
“时间”列自动生成，显示数据接收的时间。
|
||
</p>
|
||
<h3>可配置项</h3>
|
||
<p>
|
||
<span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">列名</span> - 用英文逗号分隔的表格列名列表。
|
||
</p>
|
||
</div>
|
||
<div class="overflow-hidden content-section" id="content-map">
|
||
<h1 id="map">数据地图</h1>
|
||
<h3>组件总览</h3>
|
||
<p>
|
||
接收JSON格式的地图标记数据，并进行显示。<br>
|
||
消息示例：
|
||
{
|
||
"clientid": "#bus1",
|
||
"long": "116.404",
|
||
"lat": "39.915",
|
||
"message":[
|
||
{"label":"位置","value":"北京"},
|
||
{"label":"天气","value":"晴"}
|
||
]
|
||
}<br>
|
||
其中，clientid为地图标记的唯一id，long和lat为地图标记的经纬度，message为地图标记的信息，须由包含label和value两个键的元素列表构成。<br>
|
||
同一clientid的新消息将覆盖旧消息，更新显示。
|
||
</p>
|
||
<h3>可配置项</h3>
|
||
<p>
|
||
<span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
|
||
</p>
|
||
</div>
|
||
<div class="overflow-hidden content-section" id="content-pixel">
|
||
<h1 id="pixel">点阵屏</h1>
|
||
<h3>组件总览</h3>
|
||
<p>
|
||
接收像素数据，实现点阵图像显示<br>
|
||
</p>
|
||
<p>
|
||
<b>以下是数据格式：</b>
|
||
</p>
|
||
<p>
|
||
行索引（0起始）-列索引（0起始）-颜色（0=灰，1=深蓝，任意个数的不同像素间用英文逗号连接）<br>
|
||
例如：0-1-1,1-0-0,1-1-1
|
||
</p>
|
||
<h3>可配置项</h3>
|
||
<p>
|
||
<span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">消息主题</span> - 组件接收消息的主题。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">水平像素</span> - 点阵屏水平像素的个数。
|
||
</p>
|
||
<p>
|
||
<span style="color:#4e73df;">垂直像素</span> - 点阵屏垂直像素的个数。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="js/script.js"></script>
|
||
</body>
|
||
|
||
</html> |