mixio 1.10.0
This commit is contained in:
Eason010212
BIN
ejs/MixIO.apk
Normal file
BIN
ejs/MixIO.apk
Normal file
Binary file not shown.
84
ejs/admin.ejs
Normal file
84
ejs/admin.ejs
Normal file
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>MixIO</title>
|
||||
<link rel="shortcut icon" href="img/shortcut.png"/>
|
||||
<link href="css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="css/nunito.css" rel="stylesheet">
|
||||
<link href="css/sb-admin-2.min.css?v=99" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/muuri.css">
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/lang.js?v=5"></script>
|
||||
<script src="js/lang2.js?v=5"></script>
|
||||
<script src="js/tools.js?v=2"></script>
|
||||
</head>
|
||||
|
||||
<body class="bg-gradient-light" style="height:100vh;display:flex;align-items:center;justify-content:center">
|
||||
<style>
|
||||
.translate{
|
||||
width:50px;
|
||||
padding: 0;
|
||||
margin-left:5px;
|
||||
}
|
||||
</style>
|
||||
<div class="container" style="opacity: 0.9;">
|
||||
|
||||
<div class="card o-hidden border-0 shadow-lg my-5" style="margin-top:0!important">
|
||||
<div class="card-body p-0">
|
||||
<!-- Nested Row within Card Body -->
|
||||
<div class="row">
|
||||
<div class="col-lg-5 d-none d-lg-block bg-register-image"></div>
|
||||
<div class="col-lg-7">
|
||||
<div class="p-5">
|
||||
<div class="text-center">
|
||||
<h1 class="h4 text-gray-900 mb-4">登录管理后台</h1>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<input class="form-control form-control-user" id="userName" name="userName"
|
||||
placeholder="管理员账号">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="password" class="form-control form-control-user" name="password"
|
||||
id="password" placeholder="管理员密码">
|
||||
</div>
|
||||
<button onclick="admin()" class="btn btn-primary btn-user btn-block">
|
||||
登录管理后台
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap core JavaScript-->
|
||||
<script src="js/sb-admin-2.min.js?v=2"></script>
|
||||
<script>
|
||||
var admin = function(){
|
||||
userName = $("#userName").val()
|
||||
password = $("#password").val()
|
||||
$.post('/adminLogin',{
|
||||
"userName":userName,
|
||||
"password":password
|
||||
},function(res){
|
||||
if(res == 1)
|
||||
window.location.href = "./admin"
|
||||
else
|
||||
showtext(JSLang[lang].wrongAcc)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
178
ejs/apps.ejs
Normal file
178
ejs/apps.ejs
Normal file
@@ -0,0 +1,178 @@
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>MixIO</title>
|
||||
<link rel="shortcut icon" href="img/shortcut.png"/>
|
||||
<!-- Custom fonts for this template-->
|
||||
<link rel="stylesheet" href="css/farbtastic.css">
|
||||
<link href="css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="css/nunito.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template-->
|
||||
<link href="css/sb-admin-2.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/muuri.css?v=2">
|
||||
<link rel="stylesheet" href="css/widgets.css?v=1">
|
||||
|
||||
<!-- Bootstrap core JavaScript-->
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/lang.js"></script>
|
||||
<script src="js/lang2.js?v=5"></script>
|
||||
<script src="js/farbtastic.js"></script>
|
||||
<script src="js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- Core plugin JavaScript-->
|
||||
<script src="js/jquery.easing.min.js"></script>
|
||||
|
||||
<!-- Custom scripts for all pages-->
|
||||
<script src="js/echarts.min.js"></script>
|
||||
<script src="js/jquery.easyui.min.js"></script>
|
||||
<script src="js/mqtt.min.js"></script>
|
||||
<script src="js/gauge.min.js"></script>
|
||||
<link rel="stylesheet" href="css/dataTables.bootstrap4.min.css">
|
||||
<script src="js/jquery.dataTables.min.js"></script>
|
||||
<script src="js/dataTables.bootstrap4.min.js"></script>
|
||||
<script src="js/tools.js"></script>
|
||||
<script src="js/apps.js?v=6"></script>
|
||||
</head>
|
||||
<body id="page-top" class="sidebar-toggled">
|
||||
|
||||
<!-- Page Wrapper -->
|
||||
<div id="wrapper">
|
||||
|
||||
<!-- Sidebar -->
|
||||
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
|
||||
|
||||
<!-- Sidebar - Brand -->
|
||||
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="/">
|
||||
<div class="sidebar-brand-icon">
|
||||
<img src="img/logo.png" style="width:35px" alt="">
|
||||
</div>
|
||||
<div class="sidebar-brand-text mx-3" >MixIO</div>
|
||||
</a>
|
||||
|
||||
<!-- Divider -->
|
||||
<hr class="sidebar-divider my-0">
|
||||
|
||||
|
||||
|
||||
<!-- Nav Item - Dashboard -->
|
||||
|
||||
<!-- Divider -->
|
||||
<hr class="sidebar-divider">
|
||||
|
||||
<!-- Heading -->
|
||||
<div class="sidebar-heading lang" key="MANAGE">
|
||||
</div>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="projects" id="manage_prj">
|
||||
<i class="fa fa-fw fa-tachometer"></i>
|
||||
<span class="lang" key="PROJECTSMANAGE"></span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="mqttdata" id="manage_data">
|
||||
<i class="fa fa-fw fa-table"></i>
|
||||
<span class="lang" key="DATAMANAGE"></span></a>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="webapps" id="share_app">
|
||||
<i class="fa fa-fw fa-share"></i>
|
||||
<span class="lang" key="SHAREMANAGE"></span></a>
|
||||
</li>
|
||||
|
||||
<hr class="sidebar-divider">
|
||||
<div class="sidebar-heading lang" key="SETTINGS">
|
||||
</div>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="logout">
|
||||
<i class="fa fa-fw fa-arrow-circle-left"></i>
|
||||
<span class="lang" key="LOGOUT"></span></a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<!-- Divider -->
|
||||
<hr class="sidebar-divider d-none d-md-block">
|
||||
|
||||
<!-- Sidebar Toggler (Sidebar) -->
|
||||
<div class="text-center d-none d-md-inline">
|
||||
<button class="rounded-circle border-0" id="sidebarToggle"></button>
|
||||
</div>
|
||||
|
||||
</ul>
|
||||
<!-- End of Sidebar -->
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" class="d-flex flex-column">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Topbar -->
|
||||
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow" style="display:flex;justify-content:space-between">
|
||||
<div style="display:flex;align-items:center;justify-content:center">
|
||||
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
|
||||
<i class="fa fa-bars"></i>
|
||||
</button>
|
||||
<h1 class="d-sm-inline-block h3 mb-0 text-gray-800 lang" key="SHAREMANAGE" style="margin-left:10px;font-size:1.5rem;display:inline-block;cursor:pointer"></h1>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container-fluid" id="project_list">
|
||||
<div class="card shadow mb-4" >
|
||||
<div class="card-body" style="overflow:auto">
|
||||
<table id="apps_table" class="table table-striped table-bordered" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="lang" key="SRCPRJNAME"></th>
|
||||
<th class="lang" key="SHARETIME"></th>
|
||||
<th class="lang" key="AUCODE"></th>
|
||||
<th class="lang" key="STATUSNOW"></th>
|
||||
<th class="lang" key="USEDTIME"></th>
|
||||
<th class="lang" key="OPTIONS"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% rows.forEach(function(row){ %>
|
||||
<tr>
|
||||
<td style="vertical-align:middle"><%=row['projectName']%></td>
|
||||
<td style="vertical-align:middle"><%=row['timeStamp']%></td>
|
||||
<td style="vertical-align:middle"><b><%=row['shareid']%></b></td>
|
||||
<td class="lang" key="<%=(row['status']==1?"ONSHARE":"OFFSHARE")%>" style="vertical-align:middle;color:<%=(row['status']==1?"#1cc88a":"e74a3b")%>"></td>
|
||||
<td style="vertical-align:middle"><%=row['shareCount']%></td>
|
||||
<td style="vertical-align:middle">
|
||||
<a class="btn btn-sm btn-info btn-circle" onclick="view_share('<%=row['shareid']%>')" style="margin-right:10px"><i class="fa fa-share" style="font-size:1rem"></i></a>
|
||||
<a class="btn btn-sm btn-warning btn-circle" onclick="pause_share('<%=row['shareid']%>')" style="margin-right:10px" <%=(row['status']==1?"":"hidden")%>><i class="fa fa-pause" style="font-size:0.8rem"></i></a>
|
||||
<a class="btn btn-sm btn-success btn-circle" onclick="play_share('<%=row['shareid']%>')" style="margin-right:10px" <%=(row['status']==0?"":"hidden")%>><i class="fa fa-play" style="font-size:0.8rem;margin-left:2px"></i></a>
|
||||
<a class="btn btn-sm btn-danger btn-circle" onclick="delete_share('<%=row['shareid']%>')" style="margin-right:10px"><i class="fa fa-trash" style="font-size:1rem"></i></a></td>
|
||||
</tr>
|
||||
<% }); %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="sticky-footer bg-white">
|
||||
<div class="container my-auto">
|
||||
<div class="copyright text-center my-auto">
|
||||
<span>Copyright © mixio.mixly.org 2021</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- End of Page Wrapper -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Page level custom scripts -->
|
||||
<script src="js/sb-admin-2.min.js?v=2"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
216
ejs/data.ejs
Normal file
216
ejs/data.ejs
Normal file
@@ -0,0 +1,216 @@
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>MixIO</title>
|
||||
<link rel="shortcut icon" href="img/shortcut.png"/>
|
||||
<!-- Custom fonts for this template-->
|
||||
<link rel="stylesheet" href="css/farbtastic.css">
|
||||
<link href="css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="css/nunito.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template-->
|
||||
<link href="css/sb-admin-2.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/muuri.css?v=2">
|
||||
<link rel="stylesheet" href="css/widgets.css?v=1">
|
||||
|
||||
<!-- Bootstrap core JavaScript-->
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/lang.js"></script>
|
||||
<script src="js/lang2.js?v=5"></script>
|
||||
<script src="js/farbtastic.js"></script>
|
||||
<script src="js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- Core plugin JavaScript-->
|
||||
<script src="js/jquery.easing.min.js"></script>
|
||||
|
||||
<!-- Custom scripts for all pages-->
|
||||
<script src="js/echarts.min.js"></script>
|
||||
<script src="js/jquery.easyui.min.js"></script>
|
||||
<script src="js/mqtt.min.js"></script>
|
||||
<script src="js/gauge.min.js"></script>
|
||||
<link rel="stylesheet" href="css/dataTables.bootstrap4.min.css">
|
||||
<link rel="stylesheet" href="css/flatpkr.css">
|
||||
<script src="js/jquery.dataTables.min.js"></script>
|
||||
<script src="js/flatpkr.js"></script>
|
||||
<script src="js/dataTables.bootstrap4.min.js"></script>
|
||||
<script src="js/tools.js"></script>
|
||||
<script src="js/data.js?v=6"></script>
|
||||
</head>
|
||||
<body id="page-top" class="sidebar-toggled">
|
||||
|
||||
<!-- Page Wrapper -->
|
||||
<div id="wrapper">
|
||||
|
||||
<!-- Sidebar -->
|
||||
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
|
||||
|
||||
<!-- Sidebar - Brand -->
|
||||
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="/">
|
||||
<div class="sidebar-brand-icon">
|
||||
<img src="img/logo.png" style="width:35px" alt="">
|
||||
</div>
|
||||
<div class="sidebar-brand-text mx-3" >MixIO</div>
|
||||
</a>
|
||||
|
||||
<!-- Divider -->
|
||||
<hr class="sidebar-divider my-0">
|
||||
|
||||
|
||||
|
||||
<!-- Nav Item - Dashboard -->
|
||||
|
||||
<!-- Divider -->
|
||||
<hr class="sidebar-divider">
|
||||
|
||||
<!-- Heading -->
|
||||
<div class="sidebar-heading lang" key="MANAGE">
|
||||
</div>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="projects" id="manage_prj">
|
||||
<i class="fa fa-fw fa-tachometer"></i>
|
||||
<span class="lang" key="PROJECTSMANAGE"></span></a>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="mqttdata" id="manage_data">
|
||||
<i class="fa fa-fw fa-table"></i>
|
||||
<span class="lang" key="DATAMANAGE"></span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="webapps" id="share_app">
|
||||
<i class="fa fa-fw fa-share"></i>
|
||||
<span class="lang" key="SHAREMANAGE"></span></a>
|
||||
</li>
|
||||
|
||||
<hr class="sidebar-divider">
|
||||
<div class="sidebar-heading lang" key="SETTINGS">
|
||||
</div>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="logout">
|
||||
<i class="fa fa-fw fa-arrow-circle-left"></i>
|
||||
<span class="lang" key="LOGOUT"></span></a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<!-- Divider -->
|
||||
<hr class="sidebar-divider d-none d-md-block">
|
||||
|
||||
<!-- Sidebar Toggler (Sidebar) -->
|
||||
<div class="text-center d-none d-md-inline">
|
||||
<button class="rounded-circle border-0" id="sidebarToggle"></button>
|
||||
</div>
|
||||
|
||||
</ul>
|
||||
<!-- End of Sidebar -->
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" class="d-flex flex-column">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Topbar -->
|
||||
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow" style="display:flex;justify-content:space-between">
|
||||
<div style="display:flex;align-items:center;justify-content:center">
|
||||
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
|
||||
<i class="fa fa-bars"></i>
|
||||
</button>
|
||||
<h1 class="d-sm-inline-block h3 mb-0 text-gray-800 lang" key="DATAMANAGE" style="margin-left:10px;font-size:1.5rem;display:inline-block;cursor:pointer"></h1>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container-fluid" id="project_list">
|
||||
<div class="row" style="display:flex;align-items:center;justify-content:center">
|
||||
<div class="col-xl-4">
|
||||
<div class="card shadow mb-4" style="border-radius:0px 0px 30px 30px;min-height:85px;margin-top:-1.5rem;box-shadow: 0 .75rem 1.75rem 0 rgba(58,59,69,.15)!important;border:0">
|
||||
<div class="card-body" style="padding:0;display:flex;align-items:center;justify-content: center;">
|
||||
<a id="play" class="btn btn-success" style="margin:5px;font-size:0.8rem;cursor:pointer" onclick = "play()">
|
||||
<i class="fa fa-play" style="font-size:1.2rem"></i><br>
|
||||
</a>
|
||||
<a id="stop" class="btn btn-warning" style="margin:5px;font-size:0.8rem;cursor:pointer" onclick = "stop()">
|
||||
<i class="fa fa-pause" style="font-size:1.2rem"></i><br>
|
||||
</a>
|
||||
<a class="btn btn-info" style="margin:5px;font-size:0.8rem;cursor:pointer" onclick = "refresh()">
|
||||
<i class="fa fa-refresh" style="font-size:1.2rem"></i><br>
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body" style="padding-bottom:0;padding-top:0">
|
||||
<div class="">
|
||||
<h4 class="small font-weight-bold"><span class="lang" key="OFFLINECOUNT"></span><span class="float-right" id="prj_num"></span></h4>
|
||||
<div class="progress mb-4" style="margin-bottom:1rem!important">
|
||||
<div class="progress-bar bg-info" role="progressbar" id="prj_num_bar" style="width: 20%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="1000"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row" >
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card shadow mb-4" style="border-radius:10px;min-height:660px">
|
||||
<div style="position: absolute;right:20px;top:20px" class="d-none d-md-block">
|
||||
<span>主题 </span><input id="topicFilter" class="form-control form-control-sm" style="display:inline;width:100px;min-width:100px"></input>
|
||||
<span>时间 </span><input id="timeFilter" class="form-control form-control-sm" style="display:inline;width:200px;min-width:200px"></input>
|
||||
<a class="btn btn-sm btn-primary" onclick="filter()"><i class="fa fa-filter"></i></a>
|
||||
<a class="btn btn-sm btn-primary" onclick="undo()"><i class="fa fa-undo"></i></a>
|
||||
<a class="btn btn-sm btn-primary" onclick="output()"><i class="fa fa-download"></i></a>
|
||||
<a class="btn btn-sm btn-danger" onclick="clearAll()"><i class="fa fa-trash"></i></a>
|
||||
</div>
|
||||
<div class="card-body" style="overflow:auto;">
|
||||
<table id="apps_table" class="table table-striped table-bordered" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="lang" key="TOPIC"></th>
|
||||
<th class="lang" key="MESSAGE"></th>
|
||||
<th class="lang" key="TIME"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="mqttdata">
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6">
|
||||
<div class="card shadow mb-4" style="border-radius:10px">
|
||||
|
||||
<div class="card-body" style="overflow:auto;height:660px">
|
||||
<div id="chart" style="width:100%;height:100%">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="sticky-footer bg-white">
|
||||
<div class="container my-auto">
|
||||
<div class="copyright text-center my-auto">
|
||||
<span>Copyright © mixio.mixly.org 2021</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- End of Page Wrapper -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Page level custom scripts -->
|
||||
<script src="js/sb-admin-2.min.js?v=2"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
910
ejs/dev.html
Normal file
910
ejs/dev.html
Normal file
@@ -0,0 +1,910 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>MixIO逻辑视图API</title>
|
||||
<link rel="shortcut icon" href="img/shortcut.png"/>
|
||||
</head>
|
||||
<body style="display:flex;flex-direction:row;margin:0;padding:0">
|
||||
<div style='min-width:300px;height:100vh;background-color:#4e73df;color:white;display:flex;flex-direction:column;align-items:center'>
|
||||
<img src="img/logo.png" style="width:76px;height:80px;margin:30px" alt="">
|
||||
<style>
|
||||
a{
|
||||
all:unset;
|
||||
margin:5px!important;
|
||||
width:200px;
|
||||
height:30px;
|
||||
cursor:pointer;
|
||||
background-color:rgba(255,255,255,0.4);
|
||||
font-size:1rem;
|
||||
font-weight:bold;
|
||||
margin:0;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
border-radius:20px
|
||||
}
|
||||
a:hover{
|
||||
background-color:rgba(255,255,255,0.6);
|
||||
}
|
||||
</style>
|
||||
<a href="#log">控制台输出</a>
|
||||
<a href="#mqtt">MQTT消息控制</a>
|
||||
<a href="#time">循环与延时</a>
|
||||
<a href="#button">组件：按键/开关</a>
|
||||
<a href="#slider">组件：滑杆</a>
|
||||
<a href="#keyboard">组件：文本输入</a>
|
||||
<a href="#joystick">组件：摇杆手柄</a>
|
||||
<a href="#rgb">组件：RGB色盘</a>
|
||||
<a href="#bulb">组件：指示灯</a>
|
||||
<a href="#text">组件：文本显示屏</a>
|
||||
<a href="#line">组件：折线图表</a>
|
||||
<a href="#bar">组件：柱状图表</a>
|
||||
<a href="#table">组件：数据表格</a>
|
||||
<a href="#dashboard">组件：仪表盘</a>
|
||||
<a href="#datamap">组件：数据地图</a>
|
||||
<a href="#weather">组件：实时气象仪</a>
|
||||
<a href="#var">命名空间</a>
|
||||
</div>
|
||||
<div style='width:100%;height:100vh;overflow:scroll;font-family:monospace;word-break:break-all'>
|
||||
<style>
|
||||
div div p{
|
||||
margin:0;
|
||||
font-size:1rem;
|
||||
padding-left:5px;
|
||||
margin-bottom:5px;
|
||||
|
||||
}
|
||||
div div{
|
||||
margin:5px;
|
||||
margin-bottom:20px;
|
||||
margin-top:10px;
|
||||
}
|
||||
div div h2{
|
||||
background-image: linear-gradient(to right, #4e73df, #b6c5f2);
|
||||
margin:0;
|
||||
padding-top:8px;
|
||||
padding-bottom:8px;
|
||||
margin-bottom:5px;
|
||||
padding-left:5px;
|
||||
color:white
|
||||
}
|
||||
div div div{
|
||||
border:solid #1cc88a 1px;
|
||||
font-size:0.8rem;
|
||||
padding:5px;
|
||||
color:black;
|
||||
margin-bottom:10px
|
||||
}
|
||||
</style>
|
||||
<h1 style='margin:15px;margin-left:10px'>MixIO Logic API (Release Preview)</h1>
|
||||
<p style="margin:10px;margin-bottom:15px">Last Modified: 2021/11/28 00:56</p>
|
||||
<div>
|
||||
<h2>MixIO</h2>
|
||||
<p>逻辑视图所处的安全命名变量。为方便拼写，可使用全小写的“mixio”间接访问这一变量。</p>
|
||||
</div>
|
||||
<div id="log">
|
||||
<h2>MixIO.log(<i>text</i>)</h2>
|
||||
<p><i><b>text</b></i> - 待输出的文本</p>
|
||||
<p>向逻辑视图的“输出”框中输出指定文本。</p>
|
||||
<div>
|
||||
<p><b>示例程序1</b></p>
|
||||
<p>向“输出”框中输出"Hello world"：</p>
|
||||
<p>MixIO.log("Hello world")</p>
|
||||
<img src="img/eg1.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mqtt">
|
||||
<h2>MixIO.onMessage(<i>triggerFunction</i>)</h2>
|
||||
<p><i><b>triggerFunction</b></i> - 希望触发的函数</p>
|
||||
<p>当收到MQTT消息时，执行对应函数。</p>
|
||||
<div>
|
||||
<p><b>示例程序2</b></p>
|
||||
<p>每当收到MQTT消息时，输出其主题和消息体：</p>
|
||||
<p>MixIO.onMessage(function(topic,message){</p>
|
||||
<p> MixIO.log(topic)</p>
|
||||
<p> MixIO.log(message)</p>
|
||||
<p>})</p>
|
||||
<img src="img/eg2.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>MixIO.publish(<i>topic</i>,<i>message</i>)</h2>
|
||||
<p><i><b>topic</b></i> - 发布消息的主题</p>
|
||||
<p><i><b>message</b></i> - 发布消息的内容</p>
|
||||
<p>在当前项目下，发送一则自定义的MQTT消息。</p>
|
||||
<div>
|
||||
<p><b>示例程序3</b></p>
|
||||
<p>发送一则主题为'greeting',内容为'hello'的消息：</p>
|
||||
<p>MixIO.publish('greeting','hello')</p>
|
||||
<img src="img/eg3.png"></img>
|
||||
</div>
|
||||
<div style='border:solid #e74a3b 1px'>
|
||||
<p><b>警告</b></p>
|
||||
<p>为防止异常递归，发送的最大频率被限制为5次/500ms。超出频率限制的消息会被拦截。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="time">
|
||||
<h2>MixIO.setInterval(<i>triggerFunction</i>,<i>time</i>)</h2>
|
||||
<p><i><b>triggerFunction</b></i> - 希望触发的函数</p>
|
||||
<p><i><b>time</b></i> - 触发的循环间隔（单位：ms）</p>
|
||||
<p>间隔指定时间，循环触发指定函数。</p>
|
||||
<div>
|
||||
<p><b>示例程序4</b></p>
|
||||
<p>每隔1s，输出当前时间：</p>
|
||||
<p>MixIO.setInterval(function(){</p>
|
||||
<p> MixIO.log(new Date())</p>
|
||||
<p>},1000)</p>
|
||||
<img src="img/eg4.png"></img>
|
||||
</div>
|
||||
<div style='border:solid #e74a3b 1px'>
|
||||
<p><b>警告</b></p>
|
||||
<p>请勿使用JavaScript原生的setInterval()方法。该方法设置的循环触发事件，在项目停止时无法被正确移除。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>MixIO.setTimeout(<i>triggerFunction</i>,<i>time</i>)</h2>
|
||||
<p><i><b>triggerFunction</b></i> - 希望触发的函数</p>
|
||||
<p><i><b>time</b></i> - 触发的延迟间隔（单位：ms）</p>
|
||||
<p>延迟指定时间，触发指定函数。</p>
|
||||
<div>
|
||||
<p><b>示例程序5</b></p>
|
||||
<p>10s后，输出'Good night'：</p>
|
||||
<p>MixIO.setTimeout(function(){</p>
|
||||
<p> MixIO.log('Good night')</p>
|
||||
<p>},10000)</p>
|
||||
<img src="img/eg5.png"></img>
|
||||
</div>
|
||||
<div style='border:solid #e74a3b 1px'>
|
||||
<p><b>警告</b></p>
|
||||
<p>请勿使用JavaScript原生的setTimeout()方法。该方法设置的延时触发事件，在项目停止时无法被正确移除。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>MixIO.getInstance(<i>name</i>,<i>type</i>)</h2>
|
||||
<p><i><b>name</b></i> - 希望获取的组件名称</p>
|
||||
<p><i><b>type</b></i> - 希望获取的组件类别（必须是MixIO.typeTags中定义的）</p>
|
||||
<p>获取指定的组件实例（在下文中用MixIOUnit表示）。</p>
|
||||
<div style='border:solid #36b9cc 1px'>
|
||||
<p><b>可能出现的异常</b></p>
|
||||
<p>当查询不到项目中存在<i>name</i>,<i>type</i>对应的组件时，<i>throw</i> MixIOLogicError</p>
|
||||
<p>当<i>type</i>不属于MixIO.typeTags中定义的合法值时，<i>throw</i> MixIOLogicError</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>MixIOUnit</h2>
|
||||
<p>组件类。</p>
|
||||
<p>仅可通过MixIO.getInstance(<i>name</i>,<i>type</i>)创建其子类的实例。此类型实例均具有的方法：</p>
|
||||
<p><i><b>bind(eventTag,triggerFunction)</b></i> - 为组件添加事件监听器。</p>
|
||||
<p>其中，<i>eventTag</i>必须为MixIO.eventTags中定义的合法事件类型，且必须与<i>type</i>相对应。</p>
|
||||
<p><i>triggerFunction</i>为期望触发的监听方法。</p>
|
||||
<p><i><b>trigger(actionTag,[actionParams])</b></i> - 触发组件事件。</p>
|
||||
<p>其中，<i>actionTag</i>必须为MixIO.actionTags中定义的合法事件类型，且必须与<i>type</i>相对应。</p>
|
||||
<p><i>[actionParams]</i>为事件参数列表。</p>
|
||||
</div>
|
||||
<div id="button">
|
||||
<h2>Button <i>extends</i> MixIOUnit</h2>
|
||||
<p>按键/开关类（继承自组件类）。</p>
|
||||
<p>仅可通过MixIO.getInstance(<i>name</i>,MixIO.typeTags.BUTTON)创建此类型的实例。此类型实例具有的方法：</p>
|
||||
<p><i><b>bind(eventTag,triggerFunction)</b></i> - 为按键/开关添加事件监听器。</p>
|
||||
<p>其中，<i>eventTag</i>可以为：</p>
|
||||
<p>MixIO.eventTags.BUTTON_LOOSED - 开关/按键被松开</p>
|
||||
<p>MixIO.eventTags.BUTTON_PRESSED - 按键被按下</p>
|
||||
<p>MixIO.eventTags.BUTTON_CHANGED - 开关收到消息</p>
|
||||
<p><i>triggerFunction</i>为期望触发的监听方法。</p>
|
||||
<div>
|
||||
<p><b>示例程序6</b></p>
|
||||
<p>当名为“按钮1”的开关或按键被松开时，输出“被松开”：</p>
|
||||
<p>MixIO.getInstance("按钮1",MixIO.typeTags.BUTTON).bind(MixIO.eventTags.BUTTON_LOOSED,function(){</p>
|
||||
<p> MixIO.log('被松开')</p>
|
||||
<p>})</p>
|
||||
<img src="img/eg6.png"></img>
|
||||
</div>
|
||||
<div>
|
||||
<p><b>示例程序7</b></p>
|
||||
<p>当名为“按钮2”的按键被按下时，输出“被按下”：</p>
|
||||
<p>MixIO.getInstance("按钮2",MixIO.typeTags.BUTTON).bind(MixIO.eventTags.BUTTON_PRESSED,function(){</p>
|
||||
<p> MixIO.log('被按下')</p>
|
||||
<p>})</p>
|
||||
<img src="img/eg7.png"></img>
|
||||
</div>
|
||||
<div>
|
||||
<p><b>示例程序8</b></p>
|
||||
<p>当名为“开关1”的开关收到消息时，输出收到的消息：</p>
|
||||
<p>MixIO.getInstance("开关1",MixIO.typeTags.BUTTON).bind(MixIO.eventTags.BUTTON_CHANGED,function(event,message){</p>
|
||||
<p> MixIO.log(message)</p>
|
||||
<p>})</p>
|
||||
<img src="img/eg8.png"></img>
|
||||
</div>
|
||||
<p><i><b>trigger(actionTag,[actionParams])</b></i> - 触发按键/开关的指定事件。</p>
|
||||
<p>其中，<i>actionTag</i>可以为：</p>
|
||||
<p>MixIO.actionTags.BUTTON_SWITCH - 切换开关状态</p>
|
||||
<p><i>actionParams</i>仅包含1个值，表示期望切换至的状态（false-关，true-开）。</p>
|
||||
<div>
|
||||
<p><b>示例程序9</b></p>
|
||||
<p>每隔1s，切换一次“开关”的状态：</p>
|
||||
<p>var status = true</p>
|
||||
<p>MixIO.setInterval(function(){</p>
|
||||
<p> MixIO.getInstance("开关",MixIO.typeTags.BUTTON).trigger(MixIO.actionTags.BUTTON_SWITCH,[status])</p>
|
||||
<p> status = !status</p>
|
||||
<p>},1000)</p>
|
||||
<img src="img/eg9.png"></img>
|
||||
</div>
|
||||
<p><i><b>isOn()</b></i> - 获取开关的当前状态（返回Boolean）。</p>
|
||||
<div>
|
||||
<p><b>示例程序10</b></p>
|
||||
<p>30s后，如果“开关1”没有关闭，则打开“开关2”：</p>
|
||||
<p>MixIO.setTimeout(function(){</p>
|
||||
<p> if(MixIO.getInstance("开关1",MixIO.typeTags.BUTTON).isOn())</p>
|
||||
<p> MixIO.getInstance("开关2",MixIO.typeTags.BUTTON).trigger(MixIO.actionTags.BUTTON_SWITCH,[true])</p>
|
||||
<p>},30000)</p>
|
||||
<img src="img/eg10.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div id="slider">
|
||||
<h2>Slider <i>extends</i> MixIOUnit</h2>
|
||||
<p>滑杆类（继承自组件类）。</p>
|
||||
<p>仅可通过MixIO.getInstance(<i>name</i>,MixIO.typeTags.SLIDER)创建此类型的实例。此类型实例具有的方法：</p>
|
||||
<p><i><b>bind(eventTag,triggerFunction)</b></i> - 为滑杆添加事件监听器。</p>
|
||||
<p>其中，<i>eventTag</i>可以为：</p>
|
||||
<p>MixIO.eventTags.SLIDER_SLIDED - 滑杆被拖动</p>
|
||||
<p>MixIO.eventTags.SLIDER_CHANGED - 滑杆收到消息</p>
|
||||
<p><i>triggerFunction</i>为期望触发的监听方法。</p>
|
||||
<div>
|
||||
<p><b>示例程序11</b></p>
|
||||
<p>当名为“蓄力”的滑杆被拖动时，打开名为“发射”的开关：</p>
|
||||
<p>MixIO.getInstance("蓄力",MixIO.typeTags.SLIDER).bind(MixIO.eventTags.SLIDER_SLIDED,function(){</p>
|
||||
<p> MixIO.getInstance("发射",MixIO.typeTags.BUTTON).trigger(MixIO.actionTags.BUTTON_SWITCH,[true])</p>
|
||||
<p>})</p>
|
||||
<img src="img/eg11.png"></img>
|
||||
</div>
|
||||
<div>
|
||||
<p><b>示例程序12</b></p>
|
||||
<p>当名为“进度条”、最大值为10的滑杆收到消息时，输出其当前值占最大值的百分比：</p>
|
||||
<p>MixIO.getInstance("进度条",MixIO.typeTags.SLIDER).bind(MixIO.eventTags.SLIDER_CHANGED,function(event,message){</p>
|
||||
<p> MixIO.log(message*10+"%")</p>
|
||||
<p>})</p>
|
||||
<img src="img/eg12.png"></img>
|
||||
</div>
|
||||
<p><i><b>trigger(actionTag,[actionParams])</b></i> - 触发按键/开关的指定事件。</p>
|
||||
<p>其中，<i>actionTag</i>可以为：</p>
|
||||
<p>MixIO.actionTags.SLIDER_SEND - 改变滑杆数值</p>
|
||||
<p><i>actionParams</i>仅包含1个值，表示期望改变至的数值。</p>
|
||||
<div>
|
||||
<p><b>示例程序13</b></p>
|
||||
<p>每隔1s，随机改变名为“进度条”的滑杆的值：</p>
|
||||
<p>MixIO.setInterval(function(){</p>
|
||||
<p> MixIO.getInstance("进度条",MixIO.typeTags.SLIDER).trigger(MixIO.actionTags.SLIDER_SEND,[parseInt(Math.random()*10)])</p>
|
||||
<p>},1000)</p>
|
||||
<img src="img/eg13.png"></img>
|
||||
</div>
|
||||
<p><i><b>getValue()</b></i> - 获取滑杆的当前值</p>
|
||||
<div>
|
||||
<p><b>示例程序14</b></p>
|
||||
<p>每隔1s，输出名为“进度条”的滑杆的值：</p>
|
||||
<p>MixIO.setInterval(function(){</p>
|
||||
<p> MixIO.log(MixIO.getInstance("进度条",MixIO.typeTags.SLIDER).getValue())</p>
|
||||
<p>},1000)</p>
|
||||
<img src="img/eg14.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div id="keyboard">
|
||||
<h2>Keyboard <i>extends</i> MixIOUnit</h2>
|
||||
<p>文本输入类（继承自组件类）。</p>
|
||||
<p>仅可通过MixIO.getInstance(<i>name</i>,MixIO.typeTags.KEYBOARD)创建此类型的实例。此类型实例具有的方法：</p>
|
||||
<p><i><b>bind(eventTag,triggerFunction)</b></i> - 为文本输入添加事件监听器。</p>
|
||||
<p>其中，<i>eventTag</i>可以为：</p>
|
||||
<p>MixIO.eventTags.KEYBOARD_SENT - 文本输入器点击发送消息</p>
|
||||
<p><i>triggerFunction</i>为期望触发的监听方法。</p>
|
||||
<div>
|
||||
<p><b>示例程序15</b></p>
|
||||
<p>当名为“输入”的文本输入器点击发送消息时，向名为“计数”的滑杆发送消息字符串的长度：</p>
|
||||
<p>MixIO.getInstance("输入",MixIO.typeTags.KEYBOARD).bind(MixIO.eventTags.KEYBOARD_SENT,function(event,message){</p>
|
||||
<p> MixIO.getInstance("计数",MixIO.typeTags.SLIDER).trigger(MixIO.actionTags.SLIDER_SEND,[message.length])</p>
|
||||
<p>})</p>
|
||||
<img src="img/eg15.png"></img>
|
||||
</div>
|
||||
<p><i><b>trigger(actionTag,[actionParams])</b></i> - 触发文本输入的指定事件。</p>
|
||||
<p>其中，<i>actionTag</i>可以为：</p>
|
||||
<p>MixIO.actionTags.KEYBOARD_SEND - 发送文本消息</p>
|
||||
<p><i>actionParams</i>仅包含1个值，表示期望发送的消息。</p>
|
||||
<div>
|
||||
<p><b>示例程序16</b></p>
|
||||
<p>当名为“消息”的文本输入器点击发送消息时，令名为“时钟”的文本输入器发送当前时间：</p>
|
||||
<p>MixIO.getInstance("消息",MixIO.typeTags.KEYBOARD).bind(MixIO.eventTags.KEYBOARD_SENT,function(event,message){</p>
|
||||
<p> MixIO.getInstance("时钟",MixIO.typeTags.KEYBOARD).trigger(MixIO.actionTags.KEYBOARD_SEND,[new Date().toString()])</p>
|
||||
<p>})</p>
|
||||
<img src="img/eg16.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div id="joystick">
|
||||
<h2>Joystick <i>extends</i> MixIOUnit</h2>
|
||||
<p>摇杆手柄类（继承自组件类）。</p>
|
||||
<p>仅可通过MixIO.getInstance(<i>name</i>,MixIO.typeTags.JOYSTICK)创建此类型的实例。此类型实例具有的方法：</p>
|
||||
<p><i><b>bind(eventTag,triggerFunction)</b></i> - 为摇杆手柄添加事件监听器。</p>
|
||||
<p>其中，<i>eventTag</i>可以为：</p>
|
||||
<p>MixIO.eventTags.JOYSTICK_CHANGED - 摇杆手柄被拖动</p>
|
||||
<p><i>triggerFunction</i>为期望触发的监听方法。</p>
|
||||
<div>
|
||||
<p><b>示例程序17</b></p>
|
||||
<p>当名为“摇杆”的摇杆手柄被拖动时，向文本输入器“方向”发送当前的手柄方向：</p>
|
||||
<p>MixIO.getInstance("摇杆",MixIO.typeTags.JOYSTICK).bind(MixIO.eventTags.JOYSTICK_CHANGED,function(event,x,y){</p>
|
||||
<p> var direction = (x>0?"右":"左")+(y>0?"上":"下")</p>
|
||||
<p> MixIO.getInstance("方向",MixIO.typeTags.KEYBOARD).trigger(MixIO.actionTags.KEYBOARD_SEND,[direction])</p>
|
||||
<p>})</p>
|
||||
<img src="img/eg17.png"></img>
|
||||
</div>
|
||||
<p><i><b>trigger(actionTag,[actionParams])</b></i> - 触发摇杆手柄的指定事件。</p>
|
||||
<p>其中，<i>actionTag</i>可以为：</p>
|
||||
<p>MixIO.actionTags.JOYSTICK_SEND - 发送位置消息</p>
|
||||
<p><i>actionParams</i>仅包含2个值，表示期望发送的横坐标和纵坐标。</p>
|
||||
<div>
|
||||
<p><b>示例程序18</b></p>
|
||||
<p>每隔1s，通过名为“摇杆”的摇杆手柄随机发送1个位置消息：</p>
|
||||
<p>MixIO.setInterval(function(){</p>
|
||||
<p> var randomX = parseInt(Math.random()*200-100)</p>
|
||||
<p> var randomY = parseInt(Math.random()*200-100)</p>
|
||||
<p> MixIO.getInstance("摇杆",MixIO.typeTags.JOYSTICK).trigger(MixIO.actionTags.JOYSTICK_SEND,[randomX,randomY])</p>
|
||||
<p>},1000)</p>
|
||||
<img src="img/eg18.png"></img>
|
||||
</div>
|
||||
<p><i><b>getX()</b></i> - 获取摇杆的当前横坐标</p>
|
||||
<p><i><b>getY()</b></i> - 获取摇杆的当前纵坐标</p>
|
||||
<div>
|
||||
<p><b>示例程序19</b></p>
|
||||
<p>每隔1s，获取名为“摇杆”的摇杆手柄的当前横、纵坐标，如果二者绝对值之和大于100，则向主题"加速"发送消息'1'，反之发送'0'：</p>
|
||||
<p>var joystickInstance = MixIO.getInstance("摇杆",MixIO.typeTags.JOYSTICK)</p>
|
||||
<p>MixIO.setInterval(function(){</p>
|
||||
<p> if(Math.abs(joystickInstance.getX())+Math.abs(joystickInstance.getY())>100)</p>
|
||||
<p> MixIO.publish("加速",1)</p>
|
||||
<p> else</p>
|
||||
<p> MixIO.publish("加速",0)</p>
|
||||
<p>},1000)</p>
|
||||
<img src="img/eg19.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div id="rgb">
|
||||
<h2>RGB_PICKER <i>extends</i> MixIOUnit</h2>
|
||||
<p>RGB色盘类（继承自组件类）。</p>
|
||||
<p>仅可通过MixIO.getInstance(<i>name</i>,MixIO.typeTags.RGB_PICKER)创建此类型的实例。此类型实例具有的方法：</p>
|
||||
<p><i><b>bind(eventTag,triggerFunction)</b></i> - 为RGB色盘添加事件监听器。</p>
|
||||
<p>其中，<i>eventTag</i>可以为：</p>
|
||||
<p>MixIO.eventTags.RGB_PICKER_PICKED - 色盘被点击选色</p>
|
||||
<p>MixIO.eventTags.RGB_PICKER_CHANGED - 色盘收到消息</p>
|
||||
<p><i>triggerFunction</i>为期望触发的监听方法。</p>
|
||||
<div>
|
||||
<p><b>示例程序20</b></p>
|
||||
<p>当名为“色盘”的RGB色盘被选色时，通过文本输入器“红”发送当前的R通道颜色值：</p>
|
||||
<p>MixIO.getInstance("色盘",MixIO.typeTags.RGB_PICKER).bind(MixIO.eventTags.RGB_PICKER_PICKED,function(event,r,g,b){</p>
|
||||
<p> MixIO.getInstance("红",MixIO.typeTags.KEYBOARD).trigger(MixIO.actionTags.KEYBOARD_SEND,[r])</p>
|
||||
<p>})</p>
|
||||
<img src="img/eg20.png"></img>
|
||||
</div>
|
||||
<div>
|
||||
<p><b>示例程序21</b></p>
|
||||
<p>当名为“色盘”的RGB色盘收到消息时，输出收到消息的通道及其值：</p>
|
||||
<p>MixIO.getInstance("色盘",MixIO.typeTags.RGB_PICKER).bind(MixIO.eventTags.RGB_PICKER_CHANGED,function(event,r,g,b){</p>
|
||||
<p> var channel = r!="-1"?"R":(g!="-1"?"G":"B")</p>
|
||||
<p> var value = r!="-1"?r:(g!="-1"?g:b)</p>
|
||||
<p> MixIO.log(channel+" - "+value)</p>
|
||||
<p>})</p>
|
||||
<img src="img/eg21.png"></img>
|
||||
</div>
|
||||
<p><i><b>trigger(actionTag,[actionParams])</b></i> - 触发RGB色盘的指定事件。</p>
|
||||
<p>其中，<i>actionTag</i>可以为：</p>
|
||||
<p>MixIO.actionTags.RGB_PICKER_SEND - 发送颜色消息</p>
|
||||
<p><i>actionParams</i>包含3个值，表示期望发送颜色的R通道、G通道、B通道值。</p>
|
||||
<div>
|
||||
<p><b>示例程序22</b></p>
|
||||
<p>每隔1s，通过名为“色盘”的RGB色盘随机发送1个颜色值：</p>
|
||||
<p>MixIO.setInterval(function(){</p>
|
||||
<p> var randomR = parseInt(Math.random()*255)</p>
|
||||
<p> var randomG = parseInt(Math.random()*255)</p>
|
||||
<p> var randomB = parseInt(Math.random()*255)</p>
|
||||
<p> MixIO.getInstance("色盘",MixIO.typeTags.RGB_PICKER).trigger(MixIO.actionTags.RGB_PICKER_SEND,[randomR,randomG,randomB])</p>
|
||||
<p>},1000)</p>
|
||||
<img src="img/eg22.png"></img>
|
||||
</div>
|
||||
<p><i><b>getColor()</b></i> - 获取色盘的当前颜色值（返回一个包含三个通道值的列表）</p>
|
||||
<div>
|
||||
<p><b>示例程序23</b></p>
|
||||
<p>每隔1s，获取名为“色盘”的RGB色盘的当前RGB颜色值，将其转化为HEX字符串并通过名为“16进制颜色”的文本输入器发送：</p>
|
||||
<p>MixIO.setInterval(function(){</p>
|
||||
<p> var rgbColor = MixIO.getInstance("色盘",MixIO.typeTags.RGB_PICKER).getColor()</p>
|
||||
<p> var hexColor = RGB2Hex(rgbColor[0],rgbColor[1],rgbColor[2])</p>
|
||||
<p> MixIO.getInstance("16进制颜色",MixIO.typeTags.KEYBOARD).trigger(MixIO.actionTags.KEYBOARD_SEND,[hexColor])</p>
|
||||
<p>},1000)</p>
|
||||
<img src="img/eg23.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bulb">
|
||||
<h2>BULB <i>extends</i> MixIOUnit</h2>
|
||||
<p>指示灯类（继承自组件类）。</p>
|
||||
<p>仅可通过MixIO.getInstance(<i>name</i>,MixIO.typeTags.BULB)创建此类型的实例。此类型实例具有的方法：</p>
|
||||
<p><i><b>bind(eventTag,triggerFunction)</b></i> - 为指示灯添加事件监听器。</p>
|
||||
<p>其中，<i>eventTag</i>可以为：</p>
|
||||
<p>MixIO.eventTags.BULB_CHANGED - 指示灯收到消息</p>
|
||||
<p><i>triggerFunction</i>为期望触发的监听方法。</p>
|
||||
<div>
|
||||
<p><b>示例程序24</b></p>
|
||||
<p>当名为“日光灯”的指示灯被点亮时，打开名为“光敏开关”的开关,反之则关闭：</p>
|
||||
<p>MixIO.getInstance("日光灯",MixIO.typeTags.BULB).bind(MixIO.eventTags.BULB_CHANGED,function(event,message){</p>
|
||||
<p> if(message>0)</p>
|
||||
<p> MixIO.getInstance("光敏开关",MixIO.typeTags.BUTTON).trigger(MixIO.actionTags.BUTTON_SWITCH,true)</p>
|
||||
<p> else</p>
|
||||
<p> MixIO.getInstance("光敏开关",MixIO.typeTags.BUTTON).trigger(MixIO.actionTags.BUTTON_SWITCH,false)</p>
|
||||
<p>})</p>
|
||||
<img src="img/eg24.png"></img>
|
||||
</div>
|
||||
<p><i><b>trigger(actionTag,[actionParams])</b></i> - 触发指示灯的指定事件。</p>
|
||||
<p>其中，<i>actionTag</i>可以为：</p>
|
||||
<p>MixIO.actionTags.BULB_CHANGE - 改变指示灯状态</p>
|
||||
<p><i>actionParams</i>仅包含1个值，表示期望改变至的状态（0-熄灭；1-绿灯；2-黄灯；3-红灯）。</p>
|
||||
<div>
|
||||
<p><b>示例程序25</b></p>
|
||||
<p>设计一个每隔3s切换一次状态的“交通信号灯”：</p>
|
||||
<p>var status = 0</p>
|
||||
<p>MixIO.setInterval(function(){</p>
|
||||
<p> MixIO.getInstance("交通信号灯",MixIO.typeTags.BULB).trigger(MixIO.actionTags.BULB_CHANGE,[status%3+1])</p>
|
||||
<p> status = status + 1</p>
|
||||
<p>},3000)</p>
|
||||
<img src="img/eg25.png"></img>
|
||||
</div>
|
||||
<p><i><b>getStatus()</b></i> - 获取指示灯的当前状态（0-熄灭；1-绿灯；2-黄灯；3-红灯）。</p>
|
||||
<div>
|
||||
<p><b>示例程序26</b></p>
|
||||
<p>每隔1s，获取名为“交通信号灯”的当前状态，如果为“绿灯”，则打开名为“油门”的开关，否则关闭：</p>
|
||||
<p>MixIO.setInterval(function(){</p>
|
||||
<p> var status = MixIO.getInstance("交通信号灯",MixIO.typeTags.BULB).getStatus()</p>
|
||||
<p> MixIO.getInstance("油门",MixIO.typeTags.BUTTON).trigger(MixIO.actionTags.BUTTON_SWITCH,[status=="1"])</p>
|
||||
<p>},1000)</p>
|
||||
<img src="img/eg26.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div id="text">
|
||||
<h2>TEXT_SCREEN <i>extends</i> MixIOUnit</h2>
|
||||
<p>文本显示屏类（继承自组件类）。</p>
|
||||
<p>仅可通过MixIO.getInstance(<i>name</i>,MixIO.typeTags.BULB)创建此类型的实例。此类型实例具有的方法：</p>
|
||||
<p><i><b>bind(eventTag,triggerFunction)</b></i> - 为文本显示屏添加事件监听器。</p>
|
||||
<p>其中，<i>eventTag</i>可以为：</p>
|
||||
<p>MixIO.eventTags.TEXT_SCREEN_CHANGED - 文本显示屏收到消息</p>
|
||||
<p><i>triggerFunction</i>为期望触发的监听方法。</p>
|
||||
<div>
|
||||
<p><b>示例程序27</b></p>
|
||||
<p>当名为“LED”的文本显示屏收到消息时，向名为“文本长度”的滑杆发送消息长度：</p>
|
||||
<p>MixIO.getInstance("LED",MixIO.typeTags.TEXT_SCREEN).bind(MixIO.eventTags.TEXT_SCREEN_CHANGED,function(event,message){</p>
|
||||
<p> MixIO.getInstance("文本长度",MixIO.typeTags.SLIDER).trigger(MixIO.actionTags.SLIDER_SEND,message.length)</p>
|
||||
<p>})</p>
|
||||
<img src="img/eg27.png"></img>
|
||||
</div>
|
||||
<p><i><b>trigger(actionTag,[actionParams])</b></i> - 触发文本显示屏的指定事件。</p>
|
||||
<p>其中，<i>actionTag</i>可以为：</p>
|
||||
<p>MixIO.actionTags.TEXT_SCREEN_CHANGE - 显示文本消息</p>
|
||||
<p><i>actionParams</i>仅包含1个值，表示期望显示的文本。</p>
|
||||
<div>
|
||||
<p><b>示例程序28</b></p>
|
||||
<p>令文本显示屏“LED”循环显示三段不同的文字：</p>
|
||||
<p>var texts = ['空山新雨后，天气晚来秋','小舟从此逝，江海寄余生','夜来南风起，小麦覆垄黄']</p>
|
||||
<p>var index = 0</p>
|
||||
<p>MixIO.setInterval(function(){</p>
|
||||
<p> MixIO.getInstance("LED",MixIO.typeTags.TEXT_SCREEN).trigger(MixIO.actionTags.TEXT_SCREEN_CHANGE,[texts[index%3]])</p>
|
||||
<p> index = index + 1</p>
|
||||
<p>},1000)</p>
|
||||
<img src="img/eg28.png"></img>
|
||||
</div>
|
||||
<p><i><b>getText()</b></i> - 获取文本显示屏的显示文字。</p>
|
||||
<div>
|
||||
<p><b>示例程序29</b></p>
|
||||
<p>每隔10s，将文本显示屏“LED”的显示更新同步到逻辑视图输出中：</p>
|
||||
<p>MixIO.setInterval(function(){</p>
|
||||
<p> MixIO.log(MixIO.getInstance("LED",MixIO.typeTags.TEXT_SCREEN).getText())</p>
|
||||
<p>},10000)</p>
|
||||
<img src="img/eg29.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div id="line">
|
||||
<h2>LINE_CHART <i>extends</i> MixIOUnit</h2>
|
||||
<p>折线图表类（继承自组件类）。</p>
|
||||
<p>仅可通过MixIO.getInstance(<i>name</i>,MixIO.typeTags.LINE_CHART)创建此类型的实例。此类型实例具有的方法：</p>
|
||||
<p><i><b>bind(eventTag,triggerFunction)</b></i> - 为折线图表添加事件监听器。</p>
|
||||
<p>其中，<i>eventTag</i>可以为：</p>
|
||||
<p>MixIO.eventTags.LINE_CHART_CHANGED - 折线图表收到消息</p>
|
||||
<p><i>triggerFunction</i>为期望触发的监听方法。</p>
|
||||
<div>
|
||||
<p><b>示例程序30</b></p>
|
||||
<p>当名为“温度监测”的折线图表收到大于80的消息，令“警报”指示灯亮红灯：</p>
|
||||
<p>MixIO.getInstance("温度监测",MixIO.typeTags.LINE_CHART).bind(MixIO.eventTags.LINE_CHART_CHANGED,function(event,time,value){</p>
|
||||
<p> if(parseInt(value)>80)</p>
|
||||
<p> MixIO.getInstance("警报",MixIO.typeTags.BULB).trigger(MixIO.actionTags.BULB_CHANGE,[3])</p>
|
||||
<p> else</p>
|
||||
<p> MixIO.getInstance("警报",MixIO.typeTags.BULB).trigger(MixIO.actionTags.BULB_CHANGE,[0])</p>
|
||||
<p>})</p>
|
||||
<img src="img/eg30.png"></img>
|
||||
</div>
|
||||
<p><i><b>trigger(actionTag,[actionParams])</b></i> - 触发折线图表的指定事件。</p>
|
||||
<p>其中，<i>actionTag</i>可以为：</p>
|
||||
<p>MixIO.actionTags.LINE_CHART_CHANGE - 向折线图表发送消息</p>
|
||||
<p><i>actionParams</i>仅包含1个值，表示期望发送的消息。</p>
|
||||
<div>
|
||||
<p><b>示例程序31</b></p>
|
||||
<p>每隔2秒，将在“签到”主题下收到消息的累计个数发送到“签到统计”折线图表中：</p>
|
||||
<p>var count = 0</p>
|
||||
<p>MixIO.onMessage(function(topic,message){</p>
|
||||
<p> if(topic=='签到')</p>
|
||||
<p> count = count+1</p>
|
||||
<p>})</p>
|
||||
<p>MixIO.setInterval(function(){</p>
|
||||
<p> MixIO.getInstance("签到统计",MixIO.typeTags.LINE_CHART).trigger(MixIO.actionTags.LINE_CHART_CHANGE,[count])</p>
|
||||
<p>},2000)</p>
|
||||
<img src="img/eg31.png"></img>
|
||||
</div>
|
||||
<p>MixIO.actionTags.LINE_CHART_CLEAR - 令折线图表清空</p>
|
||||
<p><i>actionParams</i>不包含任何值，可以被省略。</p>
|
||||
<div>
|
||||
<p><b>示例程序32</b></p>
|
||||
<p>当“签到”主题收到消息“finish”时，清空“签到统计”折线图表：</p>
|
||||
<p>MixIO.onMessage(function(topic,message){</p>
|
||||
<p> if(topic=='签到'&&message=='finish')</p>
|
||||
<p> MixIO.getInstance("签到统计",MixIO.typeTags.LINE_CHART).trigger(MixIO.actionTags.LINE_CHART_CLEAR)</p>
|
||||
<p>})</p>
|
||||
<img src="img/eg32.png"></img>
|
||||
</div>
|
||||
<p><i><b>getAllMessages()</b></i> - 获取折线图表的全部历史消息。</p>
|
||||
<p><i><b>getLatestMessages(count)</b></i> - 获取折线图表的至多前<i>count</i>条消息。</p>
|
||||
<p><i><b>getLatestMessage</b></i> - 获取折线图表的最新一条消息。</p>
|
||||
<div>
|
||||
<p><b>示例程序33</b></p>
|
||||
<p>每隔5s，输出“签到统计”的至多前3条消息：</p>
|
||||
<p>MixIO.setInterval(function(){</p>
|
||||
<p> MixIO.log(JSON.stringify(MixIO.getInstance("签到统计",MixIO.typeTags.LINE_CHART).getLatestMessages(3)))</p>
|
||||
<p>},5000)</p>
|
||||
<img src="img/eg33.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bar">
|
||||
<h2>BAR_CHART <i>extends</i> MixIOUnit</h2>
|
||||
<p>柱状图表类（继承自组件类）。</p>
|
||||
<p>仅可通过MixIO.getInstance(<i>name</i>,MixIO.typeTags.BAR_CHART)创建此类型的实例。此类型实例具有的方法：</p>
|
||||
<p><i><b>bind(eventTag,triggerFunction)</b></i> - 为柱状图表添加事件监听器。</p>
|
||||
<p>其中，<i>eventTag</i>可以为：</p>
|
||||
<p>MixIO.eventTags.BAR_CHART_CHANGED - 柱状图表收到消息</p>
|
||||
<p><i>triggerFunction</i>为期望触发的监听方法。</p>
|
||||
<div>
|
||||
<p><b>示例程序34</b></p>
|
||||
<p>当名为“选择题”的柱状图表累计收到等同于班级同学数目的消息数时，令“完成”指示灯亮绿灯：</p>
|
||||
<p>var STUDENT_NUM = 30</p>
|
||||
<p>var count = 0</p>
|
||||
<p>MixIO.getInstance("选择题",MixIO.typeTags.BAR_CHART).bind(MixIO.eventTags.BAR_CHART_CHANGED,function(event,message){</p>
|
||||
<p> count = count+1</p>
|
||||
<p> if(count>=STUDENT_NUM)</p>
|
||||
<p> MixIO.getInstance("完成",MixIO.typeTags.BULB).trigger(MixIO.actionTags.BULB_CHANGE,[1])</p>
|
||||
<p>})</p>
|
||||
<img src="img/eg34.png"></img>
|
||||
</div>
|
||||
<p><i><b>trigger(actionTag,[actionParams])</b></i> - 触发柱状图表的指定事件。</p>
|
||||
<p>其中，<i>actionTag</i>可以为：</p>
|
||||
<p>MixIO.actionTags.BAR_CHART_CHANGE - 向柱状图表发送消息</p>
|
||||
<p><i>actionParams</i>仅包含1个值，表示期望发送的消息。</p>
|
||||
<div>
|
||||
<p><b>示例程序35</b></p>
|
||||
<p>随机作答选择题30次，在30秒内将这些消息发送给“选择题”柱状图表：</p>
|
||||
<p>var count = 0</p>
|
||||
<p>MixIO.setInterval(function(){</p>
|
||||
<p> if(count<30){</p>
|
||||
<p> var seed = Math.random()</p>
|
||||
<p> var option = seed<0.25?"A":(seed<0.5?"B":(seed<0.75?"C":"D"))</p>
|
||||
<p> MixIO.getInstance("选择题",MixIO.typeTags.BAR_CHART).trigger(MixIO.actionTags.BAR_CHART_CHANGE,[option])</p>
|
||||
<p> count = count+1</p>
|
||||
<p> }</p>
|
||||
<p>},1000)</p>
|
||||
<img src="img/eg35.png"></img>
|
||||
</div>
|
||||
<p>MixIO.actionTags.BAR_CHART_CLEAR - 令柱状图表清空</p>
|
||||
<p><i>actionParams</i>不包含任何值，可以被省略。</p>
|
||||
<div>
|
||||
<p><b>示例程序36</b></p>
|
||||
<p>当“切换题目”主题收到消息“next”时，清空“选择题”柱状图表：</p>
|
||||
<p>MixIO.onMessage(function(topic,message){</p>
|
||||
<p> if(topic=='切换题目'&&message=='next')</p>
|
||||
<p> MixIO.getInstance("选择题",MixIO.typeTags.BAR_CHART).trigger(MixIO.actionTags.BAR_CHART_CLEAR)</p>
|
||||
<p>})</p>
|
||||
<img src="img/eg36.png"></img>
|
||||
</div>
|
||||
<p><i><b>getData()</b></i> - 获取柱状图表的当前数据。</p>
|
||||
<div>
|
||||
<p><b>示例程序37</b></p>
|
||||
<p>每隔5s，输出“选择题”柱状图表的当前数据：</p>
|
||||
<p>MixIO.setInterval(function(){</p>
|
||||
<p> MixIO.log(JSON.stringify(MixIO.getInstance("选择题",MixIO.typeTags.BAR_CHART).getData()))</p>
|
||||
<p>},5000)</p>
|
||||
<img src="img/eg37.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div id="table">
|
||||
<h2>DATA_TABLE <i>extends</i> MixIOUnit</h2>
|
||||
<p>数据表格类（继承自组件类）。</p>
|
||||
<p>仅可通过MixIO.getInstance(<i>name</i>,MixIO.typeTags.DATA_TABLE)创建此类型的实例。此类型实例具有的方法：</p>
|
||||
<p><i><b>bind(eventTag,triggerFunction)</b></i> - 为数据表格添加事件监听器。</p>
|
||||
<p>其中，<i>eventTag</i>可以为：</p>
|
||||
<p>MixIO.eventTags.DATA_TABLE_CHANGED - 数据表格收到消息</p>
|
||||
<p><i>triggerFunction</i>为期望触发的监听方法。</p>
|
||||
<div>
|
||||
<p><b>示例程序38</b></p>
|
||||
<p>当名为“签到表”的数据表格累计收到等同于班级同学数目的消息数时，令“完成”指示灯亮绿灯：</p>
|
||||
<p>var STUDENT_NUM = 30</p>
|
||||
<p>var count = 0</p>
|
||||
<p>MixIO.getInstance("签到表",MixIO.typeTags.DATA_TABLE).bind(MixIO.eventTags.DATA_TABLE_CHANGED,function(event,message){</p>
|
||||
<p> count = count+1</p>
|
||||
<p> if(count>=STUDENT_NUM)</p>
|
||||
<p> MixIO.getInstance("完成",MixIO.typeTags.BULB).trigger(MixIO.actionTags.BULB_CHANGE,[1])</p>
|
||||
<p>})</p>
|
||||
<img src="img/eg38.png"></img>
|
||||
</div>
|
||||
<p><i><b>trigger(actionTag,[actionParams])</b></i> - 触发数据表格的指定事件。</p>
|
||||
<p>其中，<i>actionTag</i>可以为：</p>
|
||||
<p>MixIO.actionTags.DATA_TABLE_CHANGE - 向数据表格发送消息</p>
|
||||
<p><i>actionParams</i>仅包含1个值，表示期望发送的消息。</p>
|
||||
<div>
|
||||
<p><b>示例程序39</b></p>
|
||||
<p>每隔1秒，随机生成一个签到信息，发送给“签到表”：</p>
|
||||
<p>function listsGetRandomItem(list, remove) {</p>
|
||||
<p> var x = Math.floor(Math.random() * list.length)</p>
|
||||
<p> if (remove)</p>
|
||||
<p> return list.splice(x, 1)[0]</p>
|
||||
<p> else</p>
|
||||
<p> return list[x]</p>
|
||||
<p>}</p>
|
||||
<p>function getRandomName() {</p>
|
||||
<p> lastNames = '赵,钱,孙,李,周,吴,郑,王'.split(',')</p>
|
||||
<p> firstNames = '明,刚,强,美,丽,光,威,红'.split(',')</p>
|
||||
<p> return String(listsGetRandomItem(lastNames, false)) + String(listsGetRandomItem(firstNames, false))</p>
|
||||
<p>}</p>
|
||||
<p>MixIO.setInterval(function(){</p>
|
||||
<p> MixIO.getInstance('签到表',MixIO.typeTags.DATA_TABLE).trigger(MixIO.actionTags.DATA_TABLE_CHANGE,[(getRandomName())])</p>
|
||||
<p>},1000)</p>
|
||||
<img src="img/eg39.png"></img>
|
||||
</div>
|
||||
<p>MixIO.actionTags.DATA_TABLE_CLEAR - 令数据表格清空</p>
|
||||
<p><i>actionParams</i>不包含任何值，可以被省略。</p>
|
||||
<div>
|
||||
<p><b>示例程序40</b></p>
|
||||
<p>当“上课”主题收到消息时，清空“签到表”数据表格：</p>
|
||||
<p>MixIO.onMessage(function(topic,message){</p>
|
||||
<p> if(topic=='上课')</p>
|
||||
<p> MixIO.getInstance("签到表",MixIO.typeTags.DATA_TABLE).trigger(MixIO.actionTags.DATA_TABLE_CLEAR)</p>
|
||||
<p>})</p>
|
||||
<img src="img/eg40.png"></img>
|
||||
</div>
|
||||
<p><i><b>getData()</b></i> - 获取数据表格的全部数据。</p>
|
||||
<div>
|
||||
<p><b>示例程序41</b></p>
|
||||
<p>每隔5s，输出“签到表”数据表格的全部数据：</p>
|
||||
<p>MixIO.setInterval(function(){</p>
|
||||
<p> MixIO.log(JSON.stringify(MixIO.getInstance("签到表",MixIO.typeTags.DATA_TABLE).getData()))</p>
|
||||
<p>},5000)</p>
|
||||
<img src="img/eg41.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashboard">
|
||||
<h2>DASHBOARD <i>extends</i> MixIOUnit</h2>
|
||||
<p>仪表盘类（继承自组件类）。</p>
|
||||
<p>仅可通过MixIO.getInstance(<i>name</i>,MixIO.typeTags.DASHBOARD)创建此类型的实例。此类型实例具有的方法：</p>
|
||||
<p><i><b>bind(eventTag,triggerFunction)</b></i> - 为仪表盘添加事件监听器。</p>
|
||||
<p>其中，<i>eventTag</i>可以为：</p>
|
||||
<p>MixIO.eventTags.DASHBOARD_CHANGED - 仪表盘收到消息</p>
|
||||
<p><i>triggerFunction</i>为期望触发的监听方法。</p>
|
||||
<div>
|
||||
<p><b>示例程序42</b></p>
|
||||
<p>当名为“CPU温度”的仪表盘收到大于80的消息时，令“警报”指示灯亮红灯：</p>
|
||||
<p>MixIO.getInstance("CPU温度",MixIO.typeTags.DASHBOARD).bind(MixIO.eventTags.DASHBOARD_CHANGED,function(event,message){</p>
|
||||
<p> if(message>80)</p>
|
||||
<p> MixIO.getInstance("警报",MixIO.typeTags.BULB).trigger(MixIO.actionTags.BULB_CHANGE,[3])</p>
|
||||
<p>})</p>
|
||||
<img src="img/eg42.png"></img>
|
||||
</div>
|
||||
<p><i><b>trigger(actionTag,[actionParams])</b></i> - 触发仪表盘的指定事件。</p>
|
||||
<p>其中，<i>actionTag</i>可以为：</p>
|
||||
<p>MixIO.actionTags.DASHBOARD_CHANGE - 向仪表盘发送消息</p>
|
||||
<p><i>actionParams</i>仅包含1个值，表示期望发送的消息。</p>
|
||||
<div>
|
||||
<p><b>示例程序43</b></p>
|
||||
<p>令“CPU温度”仪表盘归零：</p>
|
||||
<p>MixIO.getInstance("CPU温度",MixIO.typeTags.DASHBOARD).trigger(MixIO.actionTags.DASHBOARD_CHANGE,[0])</p>
|
||||
<img src="img/eg43.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div id="datamap">
|
||||
<h2>DATA_MAP <i>extends</i> MixIOUnit</h2>
|
||||
<p>数据地图类（继承自组件类）。</p>
|
||||
<p>仅可通过MixIO.getInstance(<i>name</i>,MixIO.typeTags.DATA_MAP)创建此类型的实例。此类型实例具有的方法：</p>
|
||||
<p><i><b>bind(eventTag,triggerFunction)</b></i> - 为数据地图添加事件监听器。</p>
|
||||
<p>其中，<i>eventTag</i>可以为：</p>
|
||||
<p>MixIO.eventTags.DATA_MAP_CHANGED - 数据地图收到消息</p>
|
||||
<p><i>triggerFunction</i>为期望触发的监听方法。</p>
|
||||
<div>
|
||||
<p><b>示例程序44</b></p>
|
||||
<p>当名为“公交车路线”的数据地图收到名为“306路-A”的公交车发来的位置信息时，计算与当前位置的距离，输出在“距离”文本显示器中：</p>
|
||||
<p>var currentPos = [116.397128,39.916527]</p>
|
||||
<p>MixIO.getInstance("公交车路线",MixIO.typeTags.DATA_MAP).bind(MixIO.eventTags.DATA_MAP_CHANGED,function(event,clientid,long,lat,message){</p>
|
||||
<p> if(message[0]['value']>="306路-A"){</p>
|
||||
<p> var busPos = [parseFloat(long),parseFloat(lat)]</p>
|
||||
<p> var x = (busPos[0]-currentPos[0])/0.00001141</p>
|
||||
<p> var y = (busPos[1]-currentPos[1])/0.00000899</p>
|
||||
<p> var distance = Math.sqrt(x*x+y*y)</p>
|
||||
<p> MixIO.getInstance("距离",MixIO.typeTags.TEXT_SCREEN).trigger(MixIO.actionTags.TEXT_SCREEN_CHANGE,["当前306路-A公交车与您的距离是"+Math.round(distance)+"米。"])</p>
|
||||
<p> }</p>
|
||||
<p>})</p>
|
||||
<img src="img/eg44.png"></img>
|
||||
</div>
|
||||
<p><i><b>trigger(actionTag,[actionParams])</b></i> - 触发数据地图的指定事件。</p>
|
||||
<p>其中，<i>actionTag</i>可以为：</p>
|
||||
<p>MixIO.actionTags.DATA_MAP_CHANGE - 向数据地图发送消息</p>
|
||||
<p><i>actionParams</i>仅包含1个值，表示期望发送的消息。</p>
|
||||
<div>
|
||||
<p><b>示例程序45</b></p>
|
||||
<p>向“定位”数据地图报告自己的当前位置：</p>
|
||||
<p>var currentPos = ["116.397128","39.916527"]</p>
|
||||
<p>var myName = "张三"</p>
|
||||
<p>MixIO.getInstance("定位",MixIO.typeTags.DATA_MAP).trigger(MixIO.actionTags.DATA_MAP_CHANGE,{"long":currentPos[0],"lat":currentPos[1],"clientid":myName,"message":[{"label":"name","value":myName}]})</p>
|
||||
<img src="img/eg45.png"></img>
|
||||
</div>
|
||||
<p>MixIO.actionTags.DATA_TABLE_CLEAR - 令数据表格清空</p>
|
||||
<p><i>actionParams</i>不包含任何值，可以被省略。</p>
|
||||
<div>
|
||||
<p><b>示例程序46</b></p>
|
||||
<p>当“下线”主题收到消息时，清空“定位”数据地图：</p>
|
||||
<p>MixIO.onMessage(function(topic,message){</p>
|
||||
<p> if(topic=='下线')</p>
|
||||
<p> MixIO.getInstance("定位",MixIO.typeTags.DATA_MAP).trigger(MixIO.actionTags.DATA_MAP_CLEAR)</p>
|
||||
<p>})</p>
|
||||
<img src="img/eg46.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div id="weather">
|
||||
<h2>WEATHER <i>extends</i> MixIOUnit</h2>
|
||||
<p>实时气象仪类（继承自组件类）。</p>
|
||||
<p>仅可通过MixIO.getInstance(<i>name</i>,MixIO.typeTags.WEATHER)创建此类型的实例。此类型实例具有的方法：</p>
|
||||
<p><i><b>bind(eventTag,triggerFunction)</b></i> - 为实时气象仪添加事件监听器。</p>
|
||||
<p>其中，<i>eventTag</i>可以为：</p>
|
||||
<p>MixIO.eventTags.WEATHER_SYNCED - 气象仪气象信息更新</p>
|
||||
<p>MixIO.eventTags.WEATHER_SENT - 气象仪气象信息下发</p>
|
||||
<p><i>triggerFunction</i>为期望触发的监听方法。</p>
|
||||
<div>
|
||||
<p><b>示例程序47</b></p>
|
||||
<p>当名为“气象站”的气象仪更新气象数据时，向文本显示屏“更新记录”中追加更新时间；当名为“气象站”的气象仪下发气象数据时，向文本显示屏“下发记录”中追加下发时间：</p>
|
||||
<p>var updates = []</p>
|
||||
<p>var sends = []</p>
|
||||
<p>MixIO.getInstance('气象站',MixIO.typeTags.WEATHER).bind(MixIO.eventTags.WEATHER_SYNCED, function(event,district,weather_type,temperature,humidity,wind_dir,wind_class){</p>
|
||||
<p> updates.push(new Date());</p>
|
||||
<p> MixIO.getInstance('更新记录',MixIO.typeTags.TEXT_SCREEN).trigger(MixIO.actionTags.TEXT_SCREEN_CHANGE,(updates.join(',')))</p>
|
||||
<p>})</p>
|
||||
<p>MixIO.getInstance('气象站',MixIO.typeTags.WEATHER).bind(MixIO.eventTags.WEATHER_SENT, function(event,district,weather_type,temperature,humidity,wind_dir,wind_class){</p>
|
||||
<p> sends.push(new Date())</p>
|
||||
<p> MixIO.getInstance('下发记录',MixIO.typeTags.TEXT_SCREEN).trigger(MixIO.actionTags.TEXT_SCREEN_CHANGE,(sends.join(',')))</p>
|
||||
<p>})</p>
|
||||
<img src="img/eg47.png"></img>
|
||||
</div>
|
||||
<p><i><b>trigger(actionTag,[actionParams])</b></i> - 触发实时气象仪的指定事件。</p>
|
||||
<p>其中，<i>actionTag</i>可以为：</p>
|
||||
<p>MixIO.actionTags.WEATHER_SYNC - 更新气象仪信息</p>
|
||||
<p>MixIO.actionTags.WEATHER_SEND - 下发气象仪信息</p>
|
||||
<p><i>actionParams</i>仅包含1个值，表示期望发送的消息。</p>
|
||||
<div>
|
||||
<p><b>示例程序48</b></p>
|
||||
<p>每隔1小时，更新并下发“气象站”的信息：</p>
|
||||
<p>MixIO.setInterval(function(){</p>
|
||||
<p> MixIO.getInstance('气象站',MixIO.typeTags.WEATHER).trigger(MixIO.actionTags.WEATHER_SYNC)</p>
|
||||
<p> MixIO.getInstance('气象站',MixIO.typeTags.WEATHER).trigger(MixIO.actionTags.WEATHER_SEND)</p>
|
||||
<p>},3600000)</p>
|
||||
<img src="img/eg48.png"></img>
|
||||
</div>
|
||||
<p><i><b>getData(datatype)</b></i> - 获取实时气象仪的某一类别数据。</p>
|
||||
<p><i>datatype</i> - 期望获取的数据类别，可以为：</p>
|
||||
<p>weather_type - 天气类别</p>
|
||||
<p>temperature - 温度</p>
|
||||
<p>humidity - 相对湿度</p>
|
||||
<p>wind_dir - 风向</p>
|
||||
<p>wind_class - 风级</p>
|
||||
<p>district - 数据来源区域</p>
|
||||
<div>
|
||||
<p><b>示例程序49</b></p>
|
||||
<p>每隔1小时，获取“气象仪”的“温度”数据，并发送至“温度”折线图表：</p>
|
||||
<p>MixIO.setInterval(function(){</p>
|
||||
<p> MixIO.getInstance('温度',MixIO.typeTags.LINE_CHART).trigger(MixIO.actionTags.LINE_CHART_CHANGE,MixIO.getInstance('气象站',MixIO.typeTags.WEATHER).getData("temperature"))</p>
|
||||
<p>},3600000)</p>
|
||||
<img src="img/eg49.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div id="var">
|
||||
<h2>MixIO.typeTags</h2>
|
||||
<p>全部组件类别标签的集合变量。</p>
|
||||
<p>按键/开关 - MixIO.typeTags.BUTTON</p>
|
||||
<p>滑杆 - MixIO.typeTags.SLIDER</p>
|
||||
<p>文本输入 - MixIO.typeTags.KEYBOARD</p>
|
||||
<p>摇杆手柄 - MixIO.typeTags.JOYSTICK</p>
|
||||
<p>RGB色盘 - MixIO.typeTags.RGB_PICKER</p>
|
||||
<p>指示灯 - MixIO.typeTags.BULB</p>
|
||||
<p>文本显示屏 - MixIO.typeTags.TEXT_SCREEN</p>
|
||||
<p>折线图表 - MixIO.typeTags.LINE_CHART</p>
|
||||
<p>柱状图表 - MixIO.typeTags.BAR_CHART</p>
|
||||
<p>数据表格 - MixIO.typeTags.DATA_TABLE</p>
|
||||
<p>仪表盘 - MixIO.typeTags.DASHBOARD</p>
|
||||
<p>数据地图 - MixIO.typeTags.DATA_MAP</p>
|
||||
<p>实时气象仪 - MixIO.typeTags.WEATHER</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2>MixIO.eventTags</h2>
|
||||
<p>全部组件监听事件标签的集合变量。</p>
|
||||
<p><b>开关</b></p>
|
||||
<p>开关被点按后松开 - MixIO.eventTags.BUTTON_LOOSED</p>
|
||||
<p>开关收到消息 - MixIO.eventTags.BUTTON_CHANGED</p>
|
||||
<p><b>按键</b></p>
|
||||
<p>按键被点按后松开 - MixIO.eventTags.BUTTON_PRESSED</p>
|
||||
<p>按键被点按后松开 - MixIO.eventTags.BUTTON_LOOSED</p>
|
||||
<p>按键收到消息 - MixIO.eventTags.BUTTON_CHANGED</p>
|
||||
<p><b>滑杆</b></p>
|
||||
<p>滑杆被拖动 - MixIO.eventTags.SLIDER_SLIDED</p>
|
||||
<p>滑杆收到消息 - MixIO.eventTags.SLIDER_CHANGED</p>
|
||||
<p><b>文本输入</b></p>
|
||||
<p>文本输入器点击发送消息 - MixIO.eventTags.KEYBOARD_SENT</p>
|
||||
<p><b>摇杆手柄</b></p>
|
||||
<p>摇杆被拖动 - MixIO.eventTags.JOYSTICK_CHANGED</p>
|
||||
<p><b>RGB色盘</b></p>
|
||||
<p>色盘被选色 - MixIO.eventTags.RGB_PICKER_PICKED</p>
|
||||
<p>色盘收到消息 - MixIO.eventTags.RGB_PICKER_CHANGED</p>
|
||||
<p><b>指示灯</b></p>
|
||||
<p>指示灯收到消息 - MixIO.eventTags.BULB_CHANGED</p>
|
||||
<p><b>文本显示屏</b></p>
|
||||
<p>文本显示屏收到消息 - MixIO.eventTags.TEXT_SCREEN_CHANGED</p>
|
||||
<p><b>折线图表</b></p>
|
||||
<p>折线图表收到消息 - MixIO.eventTags.LINE_CHART_CHANGED</p>
|
||||
<p><b>柱状图表</b></p>
|
||||
<p>柱状图表收到消息 - MixIO.eventTags.BAR_CHART_CHANGED</p>
|
||||
<p><b>数据表格</b></p>
|
||||
<p>数据表格收到消息 - MixIO.eventTags.DATA_TABLE_CHANGED</p>
|
||||
<p><b>仪表盘</b></p>
|
||||
<p>仪表盘收到消息 - MixIO.eventTags.DASHBOARD_CHANGED</p>
|
||||
<p><b>数据地图</b></p>
|
||||
<p>数据地图收到消息 - MixIO.eventTags.DATA_MAP_CHANGED</p>
|
||||
<p><b>实时气象仪</b></p>
|
||||
<p>气象仪更新数据 - MixIO.eventTags.WEATHER_SYNCED</p>
|
||||
<p>气象仪发送数据 - MixIO.eventTags.WEATHER_SENT</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2>MixIO.actionTags</h2>
|
||||
<p>全部组件触发事件标签的集合变量。</p>
|
||||
<p><b>开关</b></p>
|
||||
<p>切换开关状态 - MixIO.actionTags.BUTTON_SWITCH</p>
|
||||
<p><b>按键</b></p>
|
||||
<p><i>无</i></p>
|
||||
<p><b>滑杆</b></p>
|
||||
<p>改变滑杆数值 - MixIO.actionTags.SLIDER_SEND</p>
|
||||
<p><b>文本输入</b></p>
|
||||
<p>发送文本消息 - MixIO.actionTags.KEYBOARD_SEND</p>
|
||||
<p><b>摇杆手柄</b></p>
|
||||
<p>发送位置消息 - MixIO.actionTags.JOYSTICK_SEND</p>
|
||||
<p><b>RGB色盘</b></p>
|
||||
<p>发送颜色消息 - MixIO.actionTags.RGB_PICKER_SEND</p>
|
||||
<p><b>指示灯</b></p>
|
||||
<p>切换指示灯状态 - MixIO.actionTags.BULB_CHANGE</p>
|
||||
<p><b>文本显示屏</b></p>
|
||||
<p>显示文本消息 - MixIO.actionTags.TEXT_SCREEN_CHANGE</p>
|
||||
<p><b>折线图表</b></p>
|
||||
<p>发送消息 - MixIO.actionTags.LINE_CHART_CHANGE</p>
|
||||
<p>清空消息 - MixIO.actionTags.LINE_CHART_CLEAR</p>
|
||||
<p><b>柱状图表</b></p>
|
||||
<p>发送消息 - MixIO.actionTags.BAR_CHART_CHANGE</p>
|
||||
<p>清空消息 - MixIO.actionTags.BAR_CHART_CLEAR</p>
|
||||
<p><b>数据表格</b></p>
|
||||
<p>发送消息 - MixIO.actionTags.DATA_TABLE_CHANGE</p>
|
||||
<p>清空消息 - MixIO.actionTags.DATA_TABLE_CLEAR</p>
|
||||
<p><b>仪表盘</b></p>
|
||||
<p>发送数值消息 - MixIO.eventTags.DASHBOARD_CHANGE</p>
|
||||
<p><b>数据地图</b></p>
|
||||
<p>发送消息 - MixIO.actionTags.DATA_MAP_CHANGE</p>
|
||||
<p>清空消息 - MixIO.actionTags.DATA_MAP_CLEAR</p>
|
||||
<p><b>实时气象仪</b></p>
|
||||
<p>更新数据 - MixIO.eventTags.WEATHER_SYNC</p>
|
||||
<p>发送数据 - MixIO.eventTags.WEATHER_SEND</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
116
ejs/forgot-password.html
Normal file
116
ejs/forgot-password.html
Normal file
@@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>MixIO</title>
|
||||
<link rel="shortcut icon" href="img/shortcut.png"/>
|
||||
<link href="css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="css/nunito.css" rel="stylesheet">
|
||||
<link href="css/sb-admin-2.min.css?v=99" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/muuri.css">
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/lang.js?v=4"></script>
|
||||
<script src="js/lang2.js?v=5"></script>
|
||||
<script src="js/tools.js"></script>
|
||||
<script src="js/forgot-password.js?v=6"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body class="bg-gradient-light" style="height:100vh;display:flex;align-items:center;justify-content:center">
|
||||
<style>
|
||||
.translate{
|
||||
width:50px;
|
||||
padding: 0;
|
||||
margin-left:5px;
|
||||
}
|
||||
</style>
|
||||
<div style="position:fixed;right:10px;top:10px;display:flex;align-items:center;justify-content:center">
|
||||
<i class="fa fa-globe" style="color:#4e73df;margin-right:5px;font-size:2rem"></i>
|
||||
<button class="translate btn btn-secondary" id="zh">简</button>
|
||||
<button class="translate btn btn-secondary" id="tw">繁</button>
|
||||
<button class="translate btn btn-secondary" id="en">EN</button>
|
||||
</div>
|
||||
<div class="container" style="opacity: 0.9;">
|
||||
|
||||
<!-- Outer Row -->
|
||||
<div class="row justify-content-center">
|
||||
|
||||
<div class="col-xl-10 col-lg-12 col-md-9">
|
||||
|
||||
<div class="card o-hidden border-0 shadow-lg my-5" style="margin-top:0!important">
|
||||
<div class="card-body p-0">
|
||||
<!-- Nested Row within Card Body -->
|
||||
<div class="row">
|
||||
<div class="col-lg-6 d-none d-lg-block bg-password-image"></div>
|
||||
<div class="col-lg-6">
|
||||
<div class="p-5">
|
||||
<div class="text-center">
|
||||
<h1 class="h4 text-gray-900 mb-2 lang" key="VERIFYQ"></h1>
|
||||
<p class="mb-4 lang" key="VERIFYDES"></p>
|
||||
</div>
|
||||
<form class="user">
|
||||
<div class="form-group">
|
||||
<input type="email" class="form-control form-control-user lang" key="REGEMAIL"
|
||||
id="exampleInputEmail" aria-describedby="emailHelp"
|
||||
placeholder="">
|
||||
</div>
|
||||
<a onclick="send_reset_email()" id="send_button" class="btn btn-primary btn-user btn-block lang" key="ANSWERQ">
|
||||
</a>
|
||||
</form>
|
||||
<hr>
|
||||
<div class="text-center" id="new_label" hidden>
|
||||
<h1 class="h4 text-gray-900 mb-2 lang" key="ANSWERQ"></h1>
|
||||
<p class="mb-4 lang" key="ANSWERVQ"></p>
|
||||
</div>
|
||||
<form class="user" id="new_form" hidden>
|
||||
<b id="question" style="color:#437edf;margin-left:1rem;line-height:2rem"></b>
|
||||
<div class="form-group">
|
||||
<input class="form-control form-control-user lang" key="ANSWERINPUT"
|
||||
aria-describedby="emailHelp" id="verify_code"
|
||||
placeholder="" autocomplete="new-password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input class="form-control form-control-user lang"
|
||||
aria-describedby="emailHelp" key="NEWPASS" id="new_pass" type="password"
|
||||
placeholder="" autocomplete="new-password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input class="form-control form-control-user lang"
|
||||
aria-describedby="emailHelp" key="NEWPASSRPT" id="new_pass_confirm" type="password"
|
||||
placeholder="" autocomplete="new-password">
|
||||
</div>
|
||||
<a onclick="reset_password()" class="btn btn-primary btn-user btn-block lang" key="RESET">
|
||||
|
||||
</a>
|
||||
</form>
|
||||
<hr>
|
||||
<div class="text-center">
|
||||
<a class="small lang" key="SIGNUP" href="register"></a>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<a class="small lang" key="HAVEACC" href="/logout"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="js/sb-admin-2.min.js?v=2"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
64
ejs/host.ejs
Normal file
64
ejs/host.ejs
Normal file
@@ -0,0 +1,64 @@
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>MixIO</title>
|
||||
<link rel="shortcut icon" href="img/shortcut.png"/>
|
||||
<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?v=4">
|
||||
<link rel="stylesheet" href="css/widgets.css">
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/lang.js"></script>
|
||||
<script src="js/lang2.js?v=5"></script>
|
||||
<script src="js/farbtastic.js"></script>
|
||||
<script src="js/bootstrap.bundle.min.js"></script>
|
||||
<script src="js/jquery.easing.min.js"></script>
|
||||
<script src="js/echarts.min.js"></script>
|
||||
<script src="js/jquery.easyui.min.js"></script>
|
||||
<script src="js/mqtt.min.js"></script>
|
||||
<script src="js/gauge.min.js"></script>
|
||||
<% if (configs['OFFLINE_MODE']==false) { %>
|
||||
<script type="text/javascript" src="//api.map.baidu.com/getscript?type=webgl&v=3.0&ak=<%=configs['BAIDU_MAP_AK']%>"></script>
|
||||
<% } %>
|
||||
<script src="js/joy.js"></script>
|
||||
<script src="js/districts.js"></script>
|
||||
<link href="css/jsgrid.min.css" rel="stylesheet">
|
||||
<script src="js/jsgrid.min.js"></script>
|
||||
<script src="js/tools.js"></script>
|
||||
<script src="js/widgets.js"></script>
|
||||
<script>var OFFLINE_MODE = <%=configs['OFFLINE_MODE']%></script>
|
||||
<script>var BAIDU_MAP_AK = '<%=configs['BAIDU_MAP_AK']%>'</script>
|
||||
<script src="js/MixIO.js?v=4"></script>
|
||||
<script src="js/host.js?v=10"></script>
|
||||
</head>
|
||||
<body id="page-top" class="sidebar-toggled" style="position:relative">
|
||||
<div id="wrapper">
|
||||
<div id="content-wrapper" class="d-flex flex-column">
|
||||
<nav class="navbar navbar-expand navbar-light bg-white topbar static-top shadow" style="display:flex;justify-content:space-between" id="project_nav">
|
||||
<div id="top_titles" style="display:flex;flex-direction:column">
|
||||
<h1 id="prjName" class="h3 mb-0 text-gray-800" style="display:inline-block;font-weight:bold;font-size:1.25rem;"></h1>
|
||||
<h3 id="shareMessage" class="h3 mb-0 text-gray-800" style="display:inline-block;margin-top:3px;font-size:0.75rem;"></h3>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container-fluid" id="project_detail">
|
||||
<div class="grid gridbg" id="grid"></div>
|
||||
<div class="grid" id="grid2" hidden></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:center;padding:5px;z-index:999;position:absolute;bottom:0;right:0;background-color:white;box-shadow:0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important;border-radius:40px 0 0 0;padding-left:15px;padding-top:10px" id="bottom_2" hidden>
|
||||
<a class="btn btn-primary btn-block" id="dataMode" style="margin:5px;border:solid #4e73df 1px;font-size:1.2rem;display:flex;align-items:center;justify-content:space-around;width:105px;padding:5px 10px 5px 10px"><i class="fa fa-table" style="font-size:2rem;"></i>数据</a>
|
||||
<a class="btn btn-light btn-block" id="projMode" style="margin:5px;border:solid #4e73df 1px;color:#4e73df;font-size:1.2rem;display:flex;align-items:center;justify-content:space-around;width:105px;padding:5px 10px 5px 10px"><i class="fa fa-cube" style="font-size:2rem"></i>组件</a>
|
||||
</div>
|
||||
<div id="trashbin" style="width:0;height:0;overflow:hidden">
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
147
ejs/index.ejs
Normal file
147
ejs/index.ejs
Normal file
@@ -0,0 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>爱上米思齐（MixIO）</title>
|
||||
<link rel="shortcut icon" href="img/shortcut.png"/>
|
||||
<link href="css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="css/nunito.css" rel="stylesheet">
|
||||
<link href="css/sb-admin-2.min.css?v=2" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/muuri.css?v=2">
|
||||
<link rel="preload" href="fonts/fontawesome-webfont.ttf" as="font" type="font/woff" crossorigin="anonymous">
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/lang.js?v=5"></script>
|
||||
<script src="js/lang2.js?v=5"></script>
|
||||
<script src="js/tools.js?v=10"></script>
|
||||
<script src="js/login.js?v=22"></script>
|
||||
</head>
|
||||
|
||||
<body id="body" class="bg-gradient-light" style="height:100vh">
|
||||
<style>
|
||||
.translate{
|
||||
width:50px;
|
||||
padding: 0;
|
||||
margin-left:5px;
|
||||
}
|
||||
</style>
|
||||
<div style="position:fixed;right:10px;top:10px;display:flex;align-items:center;justify-content:center">
|
||||
<i class="fa fa-globe" style="color:#4e73df;margin-right:5px;font-size:2rem"></i>
|
||||
<button class="translate btn btn-secondary" id="zh">简</button>
|
||||
<button class="translate btn btn-secondary" id="tw">繁</button>
|
||||
<button class="translate btn btn-secondary" id="en">EN</button>
|
||||
</div>
|
||||
<div style="height:calc(100vh - 40px);display:flex;align-items:center;justify-content:center">
|
||||
<div class="container" style="opacity: 0.9;margin-top:20px">
|
||||
<!-- Outer Row -->
|
||||
<div class="row justify-content-center">
|
||||
|
||||
<div class="col-xl-10 col-lg-12 col-md-9">
|
||||
|
||||
<div id="cd" class="card o-hidden border-0 shadow-lg my-5" style="margin-top:0!important">
|
||||
<div class="card-body p-0">
|
||||
<!-- Nested Row within Card Body -->
|
||||
<div class="row">
|
||||
<div class="d-md-none" style="display: flex;width:100%;align-items: center;justify-content: center;margin-top:25px;margin-bottom:-0.5rem">
|
||||
<img src="img/shortcut.png" style="width:40px" alt="">
|
||||
<span style="font-size:30px;font-weight:bold;color:#4e73df;margin-left:10px">MixIO</span>
|
||||
</div>
|
||||
<div id="lg_img" class="col-lg-6 d-none d-lg-block bg-login-image" style="margin-right:-0.375rem"></div>
|
||||
<div class="col-lg-6">
|
||||
<div class="p-5">
|
||||
<div style="margin-left:-1rem;margin-right:-1rem;margin-top:-1.5rem;display:flex;margin-bottom:1.5rem;justify-content:center">
|
||||
<a class="btn btn-lg btn-primary btn-circle" style="border:solid #d1d3e2 1px;margin-right:.5rem" id="switch1" onclick="mixioLogin()">
|
||||
<i class="fa fa-user-o"></i>
|
||||
</a>
|
||||
<a class="btn btn-lg btn-light btn-circle" style="border:solid #d1d3e2 1px;margin-left:.5rem;margin-right:.5rem" id="switch2" onclick="mixlyLogin()">
|
||||
<i class="fa fa-key"></i>
|
||||
</a>
|
||||
<a class="btn btn-lg btn-light btn-circle" style="border:solid #d1d3e2 1px;margin-left:.5rem" id="switch3" onclick="projLogin()">
|
||||
<i class="fa fa-cube"></i>
|
||||
</a>
|
||||
</div>
|
||||
<form class="user" id="form_login" method="post">
|
||||
<div class="form-group">
|
||||
<input type="email" class="form-control form-control-user lang" key="EMAIL"
|
||||
aria-describedby="emailHelp" name="userName" style="min-width:0;text-align:center;"
|
||||
placeholder="请输入电子邮箱地址">
|
||||
</div>
|
||||
<div class="form-group" id="ref1">
|
||||
<input type="password" name="password" class="form-control form-control-user lang" key="PASSWORD" style="min-width:0;text-align:center;"
|
||||
placeholder="请输入密码">
|
||||
</div>
|
||||
<div style="display:flex;align-items: center;justify-content: center;">
|
||||
<button type="submit" class="btn btn-primary btn-icon-split"><span class="icon"><i class="fa fa-arrow-right" style="margin-top:5px;width:1rem;height:1rem"></i></span><span class="text lang" key="LOGIN" style="margin-top:1px">登录MixIO</span></button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<form class="user" id="form_login_2" method="post" hidden>
|
||||
<div class="form-group">
|
||||
<input class="form-control form-control-user lang" key="MIXLYKEY"
|
||||
aria-describedby="emailHelp" name="userName" style="min-width:0;text-align:center;"
|
||||
placeholder="请输入Mixly Key">
|
||||
</div>
|
||||
<div style="display:flex;align-items: center;justify-content: center;">
|
||||
<button type="submit" class="btn btn-primary btn-icon-split"><span class="icon"><i class="fa fa-arrow-right" style="margin-top:5px;width:1rem;height:1rem"></i></span><span class="text lang" style="margin-top:1px" key="LOGIN2">登录MixIO</span></button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<div class="user" id="form_login_3" hidden>
|
||||
<div class="form-group">
|
||||
<input class="form-control form-control-user lang" key="VFCODE"
|
||||
aria-describedby="emailHelp" id="vfCode" name="vfCode" style="min-width:0;text-align:center;font-size: .8rem;border-radius: 10rem;padding: 1.5rem 1rem;"
|
||||
placeholder="请输入项目授权码">
|
||||
</div>
|
||||
<div style="display:flex;align-items: center;justify-content: center;">
|
||||
<button id="submit3" onclick="guestLogin()" class="btn btn-primary btn-icon-split"><span class="icon"><i class="fa fa-arrow-right" style="margin-top:5px;width:1rem;height:1rem"></i></span><span class="text lang" style="margin-top:1px" key="BROWSE">访问MixIO项目</span></button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<hr>
|
||||
<div style="display:flex;flex-wrap:wrap;align-items:center;justify-content:center;margin-bottom:-1.5rem">
|
||||
<div class="text-center" style="margin-bottom:10px;padding-left: 5px;padding-right: 5px;" id="reset_text">
|
||||
<a class="btn btn-light btn-icon-split" href="forgot"><span class="icon"><i class="fa fa-refresh" style="margin-top:5px;width:1rem;height:1rem"></i></span><span class="text lang" style="margin-top:1px" key="RESET">重置密码</span></a>
|
||||
</div>
|
||||
<div class="text-center" style="margin-bottom:10px;padding-left: 5px;padding-right: 5px;" id="register_text">
|
||||
<a class="btn btn-light btn-icon-split" href="register" ><span class="icon"><i class="fa fa-flag" style="margin-top:5px;width:1rem;height:1rem"></i></span><span class="text lang" style="margin-top:1px" key="SIGNUP">注册账号</span></a>
|
||||
</div>
|
||||
<div class="text-center" style="margin-bottom:10px;padding-left: 5px;padding-right: 5px;" id="documentation_text">
|
||||
<a class="btn btn-light btn-icon-split" href="documentation/"><span class="icon"><i class="fa fa-compass" style="margin-top:5px;width:1rem;height:1rem"></i></span><span class="text lang" style="margin-top:1px" key="GUIDE">入门指南</span></a>
|
||||
</div>
|
||||
<div class="text-center" style="margin-bottom:10px;padding-left: 5px;padding-right: 5px;" id="android_text">
|
||||
<a class="btn btn-light btn-icon-split" href="android"><span class="icon"><i class="fa fa-android" style="margin-top:5px;width:1rem;height:1rem"></i></span><span class="text lang" style="margin-top:1px" key="ANDROID">安卓微端</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<footer id="footer" style="height:40px;font-size:0.8rem;text-align:center">
|
||||
<% if (main) { %>
|
||||
<a href="https://beian.miit.gov.cn/">京ICP备13037033号-1</a>
|
||||
<% } %>
|
||||
<% if (mixly) { %>
|
||||
<a href="/mixly">Mixly Lite</a>
|
||||
<% } %>
|
||||
<a href="https://gitee.com/mixly2/mixio" class="lang" key="OPENSRC"></a>
|
||||
<a id="admin" class="lang" key="ADMINDASH"></a>
|
||||
MixIO © Mixly Team
|
||||
</footer>
|
||||
<!-- Bootstrap core JavaScript-->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
143
ejs/index.html
Normal file
143
ejs/index.html
Normal file
@@ -0,0 +1,143 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>爱上米思齐（MixIO）</title>
|
||||
<link rel="shortcut icon" href="img/shortcut.png"/>
|
||||
<link href="css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="css/nunito.css" rel="stylesheet">
|
||||
<link href="css/sb-admin-2.min.css?v=2" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/muuri.css?v=2">
|
||||
<link rel="preload" href="fonts/fontawesome-webfont.ttf" as="font" type="font/woff" crossorigin="anonymous">
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/lang.js?v=5"></script>
|
||||
<script src="js/lang2.js?v=5"></script>
|
||||
<script src="js/tools.js?v=10"></script>
|
||||
<script src="js/login.js?v=22"></script>
|
||||
</head>
|
||||
|
||||
<body id="body" class="bg-gradient-light" style="height:100vh">
|
||||
<style>
|
||||
.translate{
|
||||
width:50px;
|
||||
padding: 0;
|
||||
margin-left:5px;
|
||||
}
|
||||
</style>
|
||||
<div style="position:fixed;right:10px;top:10px;display:flex;align-items:center;justify-content:center">
|
||||
<i class="fa fa-globe" style="color:#4e73df;margin-right:5px;font-size:2rem"></i>
|
||||
<button class="translate btn btn-secondary" id="zh">简</button>
|
||||
<button class="translate btn btn-secondary" id="tw">繁</button>
|
||||
<button class="translate btn btn-secondary" id="en">EN</button>
|
||||
</div>
|
||||
<div style="height:calc(100vh - 40px);display:flex;align-items:center;justify-content:center">
|
||||
<div class="container" style="opacity: 0.9;margin-top:20px">
|
||||
<!-- Outer Row -->
|
||||
<div class="row justify-content-center">
|
||||
|
||||
<div class="col-xl-10 col-lg-12 col-md-9">
|
||||
|
||||
<div id="cd" class="card o-hidden border-0 shadow-lg my-5" style="margin-top:0!important">
|
||||
<div class="card-body p-0">
|
||||
<!-- Nested Row within Card Body -->
|
||||
<div class="row">
|
||||
<div class="d-md-none" style="display: flex;width:100%;align-items: center;justify-content: center;margin-top:25px;margin-bottom:-0.5rem">
|
||||
<img src="img/shortcut.png" style="width:40px" alt="">
|
||||
<span style="font-size:30px;font-weight:bold;color:#4e73df;margin-left:10px">MixIO</span>
|
||||
</div>
|
||||
<div id="lg_img" class="col-lg-6 d-none d-lg-block bg-login-image" style="margin-right:-0.375rem"></div>
|
||||
<div class="col-lg-6">
|
||||
<div class="p-5">
|
||||
<div style="margin-left:-1rem;margin-right:-1rem;margin-top:-1.5rem;display:flex;margin-bottom:1.5rem;justify-content:center">
|
||||
<a class="btn btn-lg btn-primary btn-circle" style="border:solid #d1d3e2 1px;margin-right:.5rem" id="switch1" onclick="mixioLogin()">
|
||||
<i class="fa fa-user-o"></i>
|
||||
</a>
|
||||
<a class="btn btn-lg btn-light btn-circle" style="border:solid #d1d3e2 1px;margin-left:.5rem;margin-right:.5rem" id="switch2" onclick="mixlyLogin()">
|
||||
<i class="fa fa-key"></i>
|
||||
</a>
|
||||
<a class="btn btn-lg btn-light btn-circle" style="border:solid #d1d3e2 1px;margin-left:.5rem" id="switch3" onclick="projLogin()">
|
||||
<i class="fa fa-cube"></i>
|
||||
</a>
|
||||
</div>
|
||||
<form class="user" id="form_login" method="post">
|
||||
<div class="form-group">
|
||||
<input type="email" class="form-control form-control-user lang" key="EMAIL"
|
||||
aria-describedby="emailHelp" name="userName" style="min-width:0;text-align:center;"
|
||||
placeholder="请输入电子邮箱地址">
|
||||
</div>
|
||||
<div class="form-group" id="ref1">
|
||||
<input type="password" name="password" class="form-control form-control-user lang" key="PASSWORD" style="min-width:0;text-align:center;"
|
||||
placeholder="请输入密码">
|
||||
</div>
|
||||
<div style="display:flex;align-items: center;justify-content: center;">
|
||||
<button type="submit" class="btn btn-primary btn-icon-split"><span class="icon"><i class="fa fa-arrow-right" style="margin-top:5px;width:1rem;height:1rem"></i></span><span class="text lang" key="LOGIN" style="margin-top:1px">登录MixIO</span></button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<form class="user" id="form_login_2" method="post" hidden>
|
||||
<div class="form-group">
|
||||
<input class="form-control form-control-user lang" key="MIXLYKEY"
|
||||
aria-describedby="emailHelp" name="userName" style="min-width:0;text-align:center;"
|
||||
placeholder="请输入Mixly Key">
|
||||
</div>
|
||||
<div style="display:flex;align-items: center;justify-content: center;">
|
||||
<button type="submit" class="btn btn-primary btn-icon-split"><span class="icon"><i class="fa fa-arrow-right" style="margin-top:5px;width:1rem;height:1rem"></i></span><span class="text lang" style="margin-top:1px" key="LOGIN2">登录MixIO</span></button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<div class="user" id="form_login_3" hidden>
|
||||
<div class="form-group">
|
||||
<input class="form-control form-control-user lang" key="VFCODE"
|
||||
aria-describedby="emailHelp" id="vfCode" name="vfCode" style="min-width:0;text-align:center;font-size: .8rem;border-radius: 10rem;padding: 1.5rem 1rem;"
|
||||
placeholder="请输入项目授权码">
|
||||
</div>
|
||||
<div style="display:flex;align-items: center;justify-content: center;">
|
||||
<button id="submit3" onclick="guestLogin()" class="btn btn-primary btn-icon-split"><span class="icon"><i class="fa fa-arrow-right" style="margin-top:5px;width:1rem;height:1rem"></i></span><span class="text lang" style="margin-top:1px" key="BROWSE">访问MixIO项目</span></button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<hr>
|
||||
<div style="display:flex;flex-wrap:wrap;align-items:center;justify-content:center;margin-bottom:-1.5rem">
|
||||
<div class="text-center" style="margin-bottom:10px;padding-left: 5px;padding-right: 5px;" id="reset_text">
|
||||
<a class="btn btn-light btn-icon-split" href="forgot"><span class="icon"><i class="fa fa-refresh" style="margin-top:5px;width:1rem;height:1rem"></i></span><span class="text lang" style="margin-top:1px" key="RESET">重置密码</span></a>
|
||||
</div>
|
||||
<div class="text-center" style="margin-bottom:10px;padding-left: 5px;padding-right: 5px;" id="register_text">
|
||||
<a class="btn btn-light btn-icon-split" href="register" ><span class="icon"><i class="fa fa-flag" style="margin-top:5px;width:1rem;height:1rem"></i></span><span class="text lang" style="margin-top:1px" key="SIGNUP">注册账号</span></a>
|
||||
</div>
|
||||
<div class="text-center" style="margin-bottom:10px;padding-left: 5px;padding-right: 5px;" id="documentation_text">
|
||||
<a class="btn btn-light btn-icon-split" href="documentation/"><span class="icon"><i class="fa fa-compass" style="margin-top:5px;width:1rem;height:1rem"></i></span><span class="text lang" style="margin-top:1px" key="GUIDE">入门指南</span></a>
|
||||
</div>
|
||||
<div class="text-center" style="margin-bottom:10px;padding-left: 5px;padding-right: 5px;" id="android_text">
|
||||
<a class="btn btn-light btn-icon-split" href="android"><span class="icon"><i class="fa fa-android" style="margin-top:5px;width:1rem;height:1rem"></i></span><span class="text lang" style="margin-top:1px" key="ANDROID">安卓微端</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<footer id="footer" style="height:40px;font-size:0.8rem;text-align:center">
|
||||
<!-- <a href="https://beian.miit.gov.cn/">京ICP备13037033号-1</a> -->
|
||||
<a href="/mixly">Mixly Lite</a>
|
||||
<a href="https://gitee.com/mixly2/mixio" class="lang" key="OPENSRC"></a>
|
||||
<a id="admin" class="lang" key="ADMINDASH"></a>
|
||||
MixIO © Mixly Team
|
||||
</footer>
|
||||
<!-- Bootstrap core JavaScript-->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
563
ejs/manage.ejs
Normal file
563
ejs/manage.ejs
Normal file
@@ -0,0 +1,563 @@
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>MixIO管理后台</title>
|
||||
<link rel="shortcut icon" href="img/shortcut.png"/>
|
||||
<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?v=21">
|
||||
<script src="js/jquery.min.js"></script>
|
||||
|
||||
<script src="js/lang.js?v=5"></script>
|
||||
<script src="js/lang2.js?v=5"></script>
|
||||
<script src="js/farbtastic.js"></script>
|
||||
<script src="js/bootstrap.bundle.min.js"></script>
|
||||
<script src="js/jquery.easing.min.js"></script>
|
||||
<script src="js/echarts.min.js"></script>
|
||||
<script src="js/mqtt.min.js"></script>
|
||||
<link rel="stylesheet" href="css/dataTables.bootstrap4.min.css">
|
||||
<script src="js/jquery.dataTables.min.js"></script>
|
||||
<script src="js/dataTables.bootstrap4.min.js"></script>
|
||||
<script src="js/tools.js?v=14"></script>
|
||||
<script src="js/manage.js"></script>
|
||||
</head>
|
||||
|
||||
<body id="page-top" class="sidebar-toggled" style="position:relative;overflow-x:hidden;color: black;">
|
||||
<div id="wrapper">
|
||||
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
|
||||
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index">
|
||||
<div class="sidebar-brand-icon">
|
||||
<i class="fa fa-cog"></i>
|
||||
</div>
|
||||
<div class="sidebar-brand-text mx-3" >MixIO Admin</div>
|
||||
</a>
|
||||
<hr class="sidebar-divider my-0">
|
||||
<hr class="sidebar-divider">
|
||||
<div class="sidebar-heading lang" key="MANAGE">
|
||||
</div>
|
||||
<li class="nav-item active" id="view1">
|
||||
<a class="nav-link" onclick="view(1)" style="cursor: pointer;" id="manage_prj">
|
||||
<i class="fa fa-fw fa-tachometer"></i>
|
||||
<span class="lang" key="BASICADMIN"></span></a>
|
||||
</li>
|
||||
<li class="nav-item" id="view2">
|
||||
<a class="nav-link" onclick="view(2)" style="cursor: pointer;" id="manage_data">
|
||||
<i class="fa fa-fw fa-database"></i>
|
||||
<span class="lang" key="DATAADMIN"></span></a>
|
||||
</li>
|
||||
<li class="nav-item" id="view3">
|
||||
<a class="nav-link" onclick="view(3)" style="cursor: pointer;" id="manage_strg">
|
||||
<i class="fa fa-fw fa-user"></i>
|
||||
<span class="lang" key="USERADMIN"></span></a>
|
||||
</li>
|
||||
|
||||
<hr class="sidebar-divider">
|
||||
</ul>
|
||||
<div id="content-wrapper" class="d-flex flex-column">
|
||||
<div id="content">
|
||||
<nav class="navbar navbar-expand navbar-light bg-white topbar static-top shadow" style="display:flex;justify-content:space-between" id="project_nav">
|
||||
<h1 class="d-sm-inline-block h3 mb-0 text-gray-800 lang" key="ADMIN" id="title" style="margin-left:10px;font-size:1.25rem;display:inline-block;"></h1>
|
||||
</nav>
|
||||
<div class="container-fluid" id="detail">
|
||||
<div id="detail1" class="row">
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card shadow" style="margin-top:1.5rem;border-radius:10px">
|
||||
<div class="card-body">
|
||||
<div class="card border-left-primary h-100 py-2" style="margin-bottom:15px">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
|
||||
当前服务器状态</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800"><%=status%></div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-history fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card border-left-primary h-100 py-2" style="margin-bottom:15px">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
|
||||
版本号</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800"><%=version%></div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-code fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card border-left-primary h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
|
||||
服务器时钟</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800" id="time"></div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-hourglass-half fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="display:flex;align-items:center;justify-content:center">
|
||||
<button class="btn btn-lg btn-primary" style="margin-top:20px;margin-right:10px" onclick="fresh()"><i class="fa fa-refresh"></i> 刷新状态</button>
|
||||
<% if (status=="运行中") { %>
|
||||
<button class="btn btn-lg btn-danger" style="margin-top:20px;margin-left:10px" onclick="stopServer()"><i class="fa fa-ban"></i> 暂停服务器</button>
|
||||
<%} else { %>
|
||||
<button class="btn btn-lg btn-success" style="margin-top:20px;margin-left:10px" onclick="startServer()"><i class="fa fa-play"></i> 启动服务器</button>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
|
||||
<div class="card shadow" style="margin-top:1.5rem;border-radius:10px">
|
||||
<div class="card-body" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<span>管理员账号：</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="ADMIN_USERNAME">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span>管理员密码：</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type="password" id="ADMIN_PASSWORD">
|
||||
</td>
|
||||
<tr>
|
||||
<td>
|
||||
<span>离线模式：</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" id="OFFLINE_MODE">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span>允许自助注册：</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" id="ALLOW_REGISTER">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span>允许离线数据：</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" id="ALLOW_HOOK">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span>HTTP 端口：</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type="number" id="MIXIO_HTTP_PORT">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span>HTTPS 端口：</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type="number" id="MIXIO_HTTPS_PORT">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span>SSL证书私钥：</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="HTTPS_PRIVATE_PEM">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span>SSL证书公钥：</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="HTTPS_CRT_FILE">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span>单用户最大项目数：</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="MAX_PROJECT_NUM_PER_USER">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span>单用户最大消息数：</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="MAX_MESSAGE_PER_USER">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span>消息频率限制（次/秒）：</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="MAX_MESSAGE_PER_SECOND">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span>百度地图开发者AK（客户端应用）：</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="BAIDU_MAP_AK">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span>百度地图开发者AK（服务端应用）：</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="BAIDU_MAP_SERVER_AK">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<button class="btn btn-lg btn-success" style="margin-top:20px;" onclick="saveAndRestart()" id="saveAndRestart"><i class="fa fa-check"></i> 保存设置并重新启动</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="detail3" hidden>
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card shadow" style="margin-top:1.5rem;border-radius:10px">
|
||||
<div class="card-body" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
|
||||
<p>格式（每个账号一行）: 账号,密码,密保问题,问题答案</p>
|
||||
<textarea name="" id="acc" rows="10" style="margin-bottom: 20px;width:95%">12345@mixly.com,123456,你就读的班级是？,三年二班</textarea>
|
||||
<div>
|
||||
<button class="btn btn-lg btn-success" onclick="addAcc()"><i class="fa fa-check"></i> 确定添加</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="detail2" hidden>
|
||||
<div class="col-xl-8 col-md-6 mb-4">
|
||||
<div class="card shadow" style="margin-top:1.5rem;border-radius:10px">
|
||||
<div class="card-body" >
|
||||
<table id="table">
|
||||
<thead>
|
||||
<td style="min-width:100px">
|
||||
用户
|
||||
</td>
|
||||
<td style="min-width:100px">
|
||||
项目数
|
||||
</td>
|
||||
<td style="min-width:100px">
|
||||
消息量
|
||||
</td>
|
||||
<td style="min-width:300px">
|
||||
执行操作
|
||||
</td>
|
||||
</thead>
|
||||
<tbody id="tbody">
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
input{
|
||||
min-width:0!important;
|
||||
height:30px
|
||||
}
|
||||
td{
|
||||
min-height: 30px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var clearMessage = function(userName){
|
||||
$.get('clearMessage',{
|
||||
"userName":userName
|
||||
},function(res){
|
||||
if(res == 1)
|
||||
{
|
||||
showtext("操作成功！")
|
||||
setTimeout(function(){
|
||||
window.location.href = window.location.href
|
||||
},1000)
|
||||
}
|
||||
else
|
||||
{
|
||||
showtext("操作失败")
|
||||
}
|
||||
})
|
||||
}
|
||||
var clearProject = function(userName){
|
||||
$.get('clearMessage',{
|
||||
"userName":userName
|
||||
},function(res){
|
||||
if(res == 1)
|
||||
{
|
||||
$.get('clearProject',{
|
||||
"userName":userName
|
||||
},function(res){
|
||||
if(res == 1)
|
||||
{
|
||||
showtext("操作成功！")
|
||||
setTimeout(function(){
|
||||
window.location.href = window.location.href
|
||||
},1000)
|
||||
}
|
||||
else
|
||||
{
|
||||
showtext("操作失败")
|
||||
}
|
||||
})
|
||||
}
|
||||
else
|
||||
{
|
||||
showtext("操作失败")
|
||||
}
|
||||
})
|
||||
}
|
||||
var clearUser = function(userName){
|
||||
$.get('clearMessage',{
|
||||
"userName":userName
|
||||
},function(res){
|
||||
if(res == 1)
|
||||
{
|
||||
$.get('clearProject',{
|
||||
"userName":userName
|
||||
},function(res){
|
||||
if(res == 1)
|
||||
{
|
||||
$.get('clearUser',{
|
||||
"userName":userName
|
||||
},function(res){
|
||||
if(res == 1)
|
||||
{
|
||||
showtext("操作成功！")
|
||||
setTimeout(function(){
|
||||
window.location.href = window.location.href
|
||||
},1000)
|
||||
}
|
||||
else
|
||||
{
|
||||
showtext("操作失败")
|
||||
}
|
||||
})
|
||||
}
|
||||
else
|
||||
{
|
||||
showtext("操作失败")
|
||||
}
|
||||
})
|
||||
}
|
||||
else
|
||||
{
|
||||
showtext("操作失败")
|
||||
}
|
||||
})
|
||||
}
|
||||
$("#time").html(new Date().toLocaleTimeString())
|
||||
setInterval(() => {
|
||||
$("#time").html(new Date().toLocaleTimeString())
|
||||
}, 1000);
|
||||
var MIXIO_HTTP_PORT = "<%=configs["MIXIO_HTTP_PORT"]%>"
|
||||
var MIXIO_HTTPS_PORT = "<%=configs["MIXIO_HTTPS_PORT"]%>"
|
||||
var HTTPS_PRIVATE_PEM = "<%=configs["HTTPS_PRIVATE_PEM"]%>"
|
||||
var HTTPS_CRT_FILE = "<%=configs["HTTPS_CRT_FILE"]%>"
|
||||
var MAX_PROJECT_NUM_PER_USER = "<%=configs["MAX_PROJECT_NUM_PER_USER"]%>"
|
||||
var MAX_MESSAGE_PER_USER = "<%=configs["MAX_MESSAGE_PER_USER"]%>"
|
||||
var MAX_MESSAGE_PER_SECOND= "<%=configs["MAX_MESSAGE_PER_SECOND"]%>"
|
||||
var ALLOW_REGISTER = <%=configs["ALLOW_REGISTER"]%>
|
||||
var ALLOW_HOOK = <%=configs["ALLOW_HOOK"]%>
|
||||
var OFFLINE_MODE = <%=configs["OFFLINE_MODE"]%>
|
||||
var BAIDU_MAP_AK = "<%=configs["BAIDU_MAP_AK"]%>"
|
||||
var BAIDU_MAP_SERVER_AK = "<%=configs["BAIDU_MAP_SERVER_AK"]%>"
|
||||
var ADMIN_USERNAME = "<%=configs["ADMIN_USERNAME"]%>"
|
||||
var ADMIN_PASSWORD = "<%=configs["ADMIN_PASSWORD"]%>"
|
||||
$("#OFFLINE_MODE").bind('change',function(){
|
||||
if($("#OFFLINE_MODE").prop("checked"))
|
||||
{
|
||||
$("#BAIDU_MAP_AK").attr("disabled","true")
|
||||
$("#BAIDU_MAP_SERVER_AK").attr("disabled","true")
|
||||
}
|
||||
else
|
||||
{
|
||||
$("#BAIDU_MAP_AK").removeAttr("disabled")
|
||||
$("#BAIDU_MAP_SERVER_AK").removeAttr("disabled")
|
||||
}
|
||||
})
|
||||
var loadConfig = function(){
|
||||
$("#MIXIO_HTTP_PORT").val(MIXIO_HTTP_PORT)
|
||||
$("#MIXIO_HTTPS_PORT").val(MIXIO_HTTPS_PORT)
|
||||
$("#HTTPS_PRIVATE_PEM").val(HTTPS_PRIVATE_PEM)
|
||||
$("#HTTPS_CRT_FILE").val(HTTPS_CRT_FILE)
|
||||
$("#ALLOW_REGISTER").prop("checked",ALLOW_REGISTER)
|
||||
$("#ALLOW_HOOK").prop("checked",ALLOW_HOOK)
|
||||
$("#OFFLINE_MODE").prop("checked",OFFLINE_MODE)
|
||||
$("#BAIDU_MAP_AK").val(BAIDU_MAP_AK)
|
||||
$("#BAIDU_MAP_SERVER_AK").val(BAIDU_MAP_SERVER_AK)
|
||||
$("#MAX_PROJECT_NUM_PER_USER").val(MAX_PROJECT_NUM_PER_USER)
|
||||
$("#MAX_MESSAGE_PER_USER").val(MAX_MESSAGE_PER_USER)
|
||||
$("#MAX_MESSAGE_PER_SECOND").val(MAX_MESSAGE_PER_SECOND)
|
||||
$("#ADMIN_USERNAME").val(ADMIN_USERNAME)
|
||||
$("#ADMIN_PASSWORD").val(ADMIN_PASSWORD)
|
||||
if($("#OFFLINE_MODE").prop("checked"))
|
||||
{
|
||||
$("#BAIDU_MAP_AK").attr("disabled","true")
|
||||
$("#BAIDU_MAP_SERVER_AK").attr("disabled","true")
|
||||
}
|
||||
else
|
||||
{
|
||||
$("#BAIDU_MAP_AK").removeAttr("disabled")
|
||||
$("#BAIDU_MAP_SERVER_AK").removeAttr("disabled")
|
||||
}
|
||||
}
|
||||
loadConfig()
|
||||
|
||||
|
||||
var saveAndRestart = function(){
|
||||
var modald = showmodaltext("<div style='text-align:center'><i class='fa fa-spin fa-cog' style='font-size:2rem;color:#4e73df'></i><p style='margin-top:6px;margin-bottom:0;color:#4e73df;font-size:1rem;font-weight:bold'>"+JSLang[lang].loading2+"</p></div>")
|
||||
configs = {}
|
||||
configs["MIXIO_HTTP_PORT"] = parseInt($("#MIXIO_HTTP_PORT").val())
|
||||
configs["MIXIO_HTTPS_PORT"] = parseInt($("#MIXIO_HTTPS_PORT").val())
|
||||
configs["HTTPS_PRIVATE_PEM"] = $("#HTTPS_PRIVATE_PEM").val()
|
||||
configs["HTTPS_CRT_FILE"] = $("#HTTPS_CRT_FILE").val()
|
||||
configs["MAX_PROJECT_NUM_PER_USER"] = parseInt($("#MAX_PROJECT_NUM_PER_USER").val())
|
||||
configs["MAX_MESSAGE_PER_USER"] = parseInt($("#MAX_MESSAGE_PER_USER").val())
|
||||
configs["MAX_MESSAGE_PER_SECOND"] = parseInt($("#MAX_MESSAGE_PER_SECOND").val())
|
||||
configs["ALLOW_REGISTER"] = $("#ALLOW_REGISTER").prop("checked")
|
||||
configs["ALLOW_HOOK"] = $("#ALLOW_HOOK").prop("checked")
|
||||
configs["OFFLINE_MODE"] = $("#OFFLINE_MODE").prop("checked")
|
||||
configs["BAIDU_MAP_AK"] = $("#BAIDU_MAP_AK").val()
|
||||
configs["BAIDU_MAP_SERVER_AK"] = $("#BAIDU_MAP_SERVER_AK").val()
|
||||
configs["ADMIN_USERNAME"] = $("#ADMIN_USERNAME").val()
|
||||
configs["ADMIN_PASSWORD"] = $("#ADMIN_PASSWORD").val()
|
||||
$.get('/saveAndRestart',{'configs':JSON.stringify(configs,null,2)},function(res){
|
||||
if(res=="1")
|
||||
{
|
||||
showtext('保存成功, 正在重新启动服务器。')
|
||||
}
|
||||
else
|
||||
showtext('保存失败')
|
||||
modald.close()
|
||||
})
|
||||
}
|
||||
var stopServer = function(){
|
||||
var modald = showmodaltext("<div style='text-align:center'><i class='fa fa-spin fa-cog' style='font-size:2rem;color:#4e73df'></i><p style='margin-top:6px;margin-bottom:0;color:#4e73df;font-size:1rem;font-weight:bold'>"+JSLang[lang].loading2+"</p></div>")
|
||||
$.get('/stop',function(res){
|
||||
modald.close()
|
||||
if(res=="1")
|
||||
{
|
||||
window.location.href = window.location.href
|
||||
}
|
||||
else
|
||||
showtext('状态异常')
|
||||
})
|
||||
}
|
||||
var startServer = function(){
|
||||
var modald = showmodaltext("<div style='text-align:center'><i class='fa fa-spin fa-cog' style='font-size:2rem;color:#4e73df'></i><p style='margin-top:6px;margin-bottom:0;color:#4e73df;font-size:1rem;font-weight:bold'>"+JSLang[lang].loading2+"</p></div>")
|
||||
$.get('/start',function(res){
|
||||
modald.close()
|
||||
if(res=="1")
|
||||
{
|
||||
window.location.href = window.location.href
|
||||
}
|
||||
})
|
||||
}
|
||||
var fresh = function(){
|
||||
window.location.href = window.location.href
|
||||
}
|
||||
var view = function(index){
|
||||
a = [1,2,3]
|
||||
for (i in a){
|
||||
v = a[i]
|
||||
if (index==v){
|
||||
$("#detail"+v).removeAttr("hidden")
|
||||
$("#view"+v).addClass("active")
|
||||
}
|
||||
else
|
||||
{
|
||||
$("#detail"+v).attr("hidden","hidden")
|
||||
$("#view"+v).removeClass("active")
|
||||
}
|
||||
}
|
||||
}
|
||||
var addAcc = function(){
|
||||
var modald = showmodaltext("<div style='text-align:center'><i class='fa fa-spin fa-cog' style='font-size:2rem;color:#4e73df'></i><p style='margin-top:6px;margin-bottom:0;color:#4e73df;font-size:1rem;font-weight:bold'>"+JSLang[lang].loading2+"</p></div>")
|
||||
var acc = $("#acc").val()
|
||||
accs = acc.split('\n')
|
||||
acct = []
|
||||
for(acc in accs){
|
||||
if(accs[acc]!="")
|
||||
acct.push(accs[acc])
|
||||
}
|
||||
var successCount = 0
|
||||
var failCount = 0
|
||||
var failInfo = []
|
||||
for(i in acct){
|
||||
info = acct[i].split(',')
|
||||
if(info.length!=4)
|
||||
{
|
||||
failCount+=1
|
||||
failInfo.push({
|
||||
'account':info[0],
|
||||
'reason':'格式不正确'
|
||||
})
|
||||
}
|
||||
else
|
||||
{
|
||||
$.get('addAccount',{'userName':info[0],'password':info[1],'question':info[2],'answer':info[3]},function(res){
|
||||
modald.close()
|
||||
if(res=='1')
|
||||
successCount+=1
|
||||
else if(res=='2')
|
||||
{
|
||||
failCount+=1
|
||||
failInfo.push({
|
||||
'account':info[0],
|
||||
'reason':'用户已存在'
|
||||
})
|
||||
}
|
||||
else if(res=='3')
|
||||
{
|
||||
failCount+=1
|
||||
failInfo.push({
|
||||
'account':info[0],
|
||||
'reason':'连接失败'
|
||||
})
|
||||
}
|
||||
var s = "成功个数："+successCount+"; 失败个数："+failCount+"; 失败原因："+JSON.stringify(failInfo)
|
||||
showtext(s)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
64
ejs/observe.ejs
Normal file
64
ejs/observe.ejs
Normal file
@@ -0,0 +1,64 @@
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>MixIO</title>
|
||||
<link rel="shortcut icon" href="img/shortcut.png"/>
|
||||
<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?v=4">
|
||||
<link rel="stylesheet" href="css/widgets.css">
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/lang.js"></script>
|
||||
<script src="js/lang2.js?v=5"></script>
|
||||
<script src="js/farbtastic.js"></script>
|
||||
<script src="js/bootstrap.bundle.min.js"></script>
|
||||
<script src="js/jquery.easing.min.js"></script>
|
||||
<script src="js/echarts.min.js"></script>
|
||||
<script src="js/jquery.easyui.min.js"></script>
|
||||
<script src="js/mqtt.min.js"></script>
|
||||
<script src="js/gauge.min.js"></script>
|
||||
<% if (configs['OFFLINE_MODE']==false) { %>
|
||||
<script type="text/javascript" src="//api.map.baidu.com/getscript?type=webgl&v=3.0&ak=<%=configs['BAIDU_MAP_AK']%>"></script>
|
||||
<% } %>
|
||||
<script src="js/joy.js"></script>
|
||||
<script src="js/districts.js"></script>
|
||||
<link href="css/jsgrid.min.css" rel="stylesheet">
|
||||
<script src="js/jsgrid.min.js"></script>
|
||||
<script src="js/tools.js"></script>
|
||||
<script src="js/widgets.js"></script>
|
||||
<script>var OFFLINE_MODE = <%=configs['OFFLINE_MODE']%></script>
|
||||
<script>var BAIDU_MAP_AK = '<%=configs['BAIDU_MAP_AK']%>'</script>
|
||||
<script src="js/MixIO.js?v=4"></script>
|
||||
<script src="js/observe.js?v=10"></script>
|
||||
</head>
|
||||
<body id="page-top" class="sidebar-toggled" style="position:relative">
|
||||
<div id="wrapper">
|
||||
<div id="content-wrapper" class="d-flex flex-column">
|
||||
<nav class="navbar navbar-expand navbar-light bg-white topbar static-top shadow" style="display:flex;justify-content:space-between" id="project_nav">
|
||||
<div id="top_titles" style="display:flex;flex-direction:column">
|
||||
<h1 id="prjName" class="h3 mb-0 text-gray-800" style="display:inline-block;font-weight:bold;font-size:1.25rem;"></h1>
|
||||
<h3 id="shareMessage" class="h3 mb-0 text-gray-800" style="display:inline-block;margin-top:3px;font-size:0.75rem;"></h3>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container-fluid" id="project_detail">
|
||||
<div class="grid gridbg" id="grid"></div>
|
||||
<div class="grid" id="grid2" hidden></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:center;padding:5px;z-index:999;position:absolute;bottom:0;right:0;background-color:white;box-shadow:0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important;border-radius:40px 0 0 0;padding-left:15px;padding-top:10px" id="bottom_2" hidden>
|
||||
<a class="btn btn-primary btn-block" id="dataMode" style="margin:5px;border:solid #4e73df 1px;font-size:1.2rem;display:flex;align-items:center;justify-content:space-around;width:105px;padding:5px 10px 5px 10px"><i class="fa fa-table" style="font-size:2rem;"></i>数据</a>
|
||||
<a class="btn btn-light btn-block" id="projMode" style="margin:5px;border:solid #4e73df 1px;color:#4e73df;font-size:1.2rem;display:flex;align-items:center;justify-content:space-around;width:105px;padding:5px 10px 5px 10px"><i class="fa fa-cube" style="font-size:2rem"></i>组件</a>
|
||||
</div>
|
||||
<div id="trashbin" style="width:0;height:0;overflow:hidden">
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
883
ejs/projects.ejs
Normal file
883
ejs/projects.ejs
Normal file
@@ -0,0 +1,883 @@
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>MixIO</title>
|
||||
<link rel="shortcut icon" href="img/shortcut.png"/>
|
||||
<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?v=21">
|
||||
<link rel="stylesheet" href="css/widgets.css">
|
||||
<link rel="stylesheet" href="css/codemirror.css?v=2"/>
|
||||
<script src="js/codemirror.min.js"></script>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/lang.js?v=5"></script>
|
||||
<script src="js/lang2.js?v=5"></script>
|
||||
<script src="js/farbtastic.js"></script>
|
||||
<script src="js/bootstrap.bundle.min.js"></script>
|
||||
<script src="js/jquery.easing.min.js"></script>
|
||||
<script src="js/echarts.min.js"></script>
|
||||
<script src="js/jquery.easyui.min.js"></script>
|
||||
<script src="js/mqtt.min.js"></script>
|
||||
<script src="js/gauge.min.js"></script>
|
||||
<script>var isMixly = <%=isMixly==1%></script>
|
||||
<% if (configs['OFFLINE_MODE']==false) { %>
|
||||
<script type="text/javascript" src="//api.map.baidu.com/getscript?type=webgl&v=3.0&ak=<%=configs['BAIDU_MAP_AK']%>"></script>
|
||||
<% } %>
|
||||
<script src="js/joy.js"></script>
|
||||
<script src="js/districts.js"></script>
|
||||
<link href="css/jsgrid.min.css" rel="stylesheet">
|
||||
<script src="js/jsgrid.min.js"></script>
|
||||
<script src="js/tools.js?v=14"></script>
|
||||
<script src="js/widgets.js?v=73"></script>
|
||||
<script src="blockly/blockly_compressed.js"></script>
|
||||
<script src="blockly/blocks_compressed.js"></script>
|
||||
<script src="blockly/javascript_compressed.js"></script>
|
||||
<script src="blockly/iot/IOT_Blocks.js?v=13"></script>
|
||||
<script src="blockly/iot/IOT_Generate.js?v=13"></script>
|
||||
<script src="blockly/msg/js/zh-hans.js?v=9"></script>
|
||||
|
||||
<script>var OFFLINE_MODE = <%=configs['OFFLINE_MODE']%></script>
|
||||
<script>var MAX_PROJECT_NUM_PER_USER = <%=configs['MAX_PROJECT_NUM_PER_USER']%></script>
|
||||
<script>var BAIDU_MAP_AK = '<%=configs['BAIDU_MAP_AK']%>'</script>
|
||||
<script src="js/projects.js?v=273"></script>
|
||||
<script src="js/MixIO.js?v=30"></script>
|
||||
</head>
|
||||
|
||||
<body id="page-top" class="sidebar-toggled" style="position:relative;overflow-x:hidden">
|
||||
<div id="wrapper">
|
||||
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
|
||||
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index">
|
||||
<div class="sidebar-brand-icon">
|
||||
<img src="img/logo.png" style="width:35px" alt="">
|
||||
</div>
|
||||
<div class="sidebar-brand-text mx-3" >MixIO</div>
|
||||
</a>
|
||||
<hr class="sidebar-divider my-0">
|
||||
<hr class="sidebar-divider">
|
||||
<div class="sidebar-heading lang" key="MANAGE">
|
||||
</div>
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="projects" id="manage_prj">
|
||||
<i class="fa fa-fw fa-tachometer"></i>
|
||||
<span class="lang" key="PROJECTSMANAGE"></span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="mqttdata" id="manage_data">
|
||||
<i class="fa fa-fw fa-table"></i>
|
||||
<span class="lang" key="DATAMANAGE"></span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="webapps" id="share_app">
|
||||
<i class="fa fa-fw fa-share"></i>
|
||||
<span class="lang" key="SHAREMANAGE"></span></a>
|
||||
</li>
|
||||
|
||||
<hr class="sidebar-divider">
|
||||
<div class="sidebar-heading lang" key="SETTINGS">
|
||||
</div>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" onclick="uploadProjects()" style="cursor:pointer">
|
||||
<i class="fa fa-fw fa-upload"></i>
|
||||
<span class="lang" key="IMPORT"></span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" onclick="exportProjects()" style="cursor:pointer">
|
||||
<i class="fa fa-fw fa-download"></i>
|
||||
<span class="lang" key="EXPORT"></span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="logout">
|
||||
<i class="fa fa-fw fa-arrow-circle-left"></i>
|
||||
<span class="lang" key="LOGOUT"></span></a>
|
||||
</li>
|
||||
<hr class="sidebar-divider d-none d-md-block">
|
||||
<div class="sidebar-card d-lg-flex" <%=isMixly?'style="display:none!important"':''%>>
|
||||
<i class="fa fa-user" style="margin-bottom:2px;font-size:1rem"></i>
|
||||
<span class="text-center mb-2" style="word-break:break-all;font-size:12px"><%=userName%></span>
|
||||
<i class="fa fa-lock" style="margin-bottom:2px;font-size:1rem"></i>
|
||||
<span id="prjpass" class="text-center mb-2" style="word-break:break-all;font-size:12px;margin-bottom:0!important" id="card_pass" hidden><%=projectPass%><i onclick="hidePass()" class="fa fa-eye-slash" style="margin-left:3px;cursor:pointer"></i></span>
|
||||
<span id="prjpass_hidden" class="text-center mb-2" style="word-break:break-all;font-size:12px;margin-bottom:0!important;display:flex;flex-direction:row;align-items:center;justify-content:center">********<i onclick="showPass()" class="fa fa-eye" style="margin-left:3px;cursor:pointer;margin-bottom:5px"></i></span>
|
||||
</div>
|
||||
<div class="text-center d-none d-md-inline">
|
||||
<button class="rounded-circle border-0" id="sidebarToggle"></button>
|
||||
</div>
|
||||
</ul>
|
||||
<div id="content-wrapper" class="d-flex flex-column">
|
||||
<div id="content">
|
||||
<nav class="navbar navbar-expand navbar-light bg-white topbar static-top shadow" style="z-index:999;display:flex;justify-content:space-between" id="project_nav">
|
||||
<div id="top_titles" style="display:flex">
|
||||
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
|
||||
<i class="fa fa-bars"></i>
|
||||
</button>
|
||||
<button onclick="exit()" id="top_exit_button" class="btn btn-link rounded-circle mr-3" style="margin-right:5px!important;" hidden>
|
||||
<i class="fa fa-chevron-left" style="width:16px;height:16px"></i>
|
||||
</button>
|
||||
<button onclick="back_to_list()" id="top_back_button" class="btn btn-link rounded-circle mr-3" style="margin-right:5px!important;" hidden>
|
||||
<i class="fa fa-chevron-left" style="width:16px;height:16px"></i>
|
||||
</button>
|
||||
<div style="display:flex;flex-direction:column">
|
||||
<div>
|
||||
<div style='height:40px;display:flex;align-items:center;justify-content:center'>
|
||||
<h1 class="d-sm-inline-block h3 mb-0 text-gray-800 lang" key="PROJECTSMANAGE" id="title_phase1" style="margin-left:10px;font-size:1.5rem;display:inline-block;"></h1>
|
||||
</div>
|
||||
|
||||
<h1 id="title_phase2" class="h3 mb-0 text-gray-800" style="display:inline-block;font-weight:bold;font-size:1.25rem;"></h1>
|
||||
</div>
|
||||
<span style="font-size:0.8rem;color:#858796;cursor:pointer" class="lang" key="CONNECTINGSERVER" id="connect_span" onclick="check_link()" hidden><i class="fa fa-spinner fa-spin" style="margin-right:3px"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="//mixly.org" target="_blank" class="d-none d-md-block" style="margin-right:30px;color:gray;font-size:0.7rem;user-select:none">
|
||||
Copyright© Mixly Team @ BNU, CHINA
|
||||
</a>
|
||||
<div style="white-space:nowrap;min-width:130px;text-align: right;" id="top_func_grp">
|
||||
|
||||
<a onclick="view_code()" id="top_right_button_1_3" class="btn btn-primary btn-circle" hidden><i class="fa fa-code"></i></a>
|
||||
<a onclick="add_project()" id="top_right_button_0" class="btn btn-primary btn-circle"><i class="fa fa-plus"></i></a>
|
||||
<a onclick="import_project()" id="top_right_button_-1" class="btn btn-primary btn-circle" style="margin-right:10px"><i class="fa fa-download"></i></a>
|
||||
<a onclick="add_widget()" id="top_right_button_1" class="btn btn-primary btn-circle" hidden><i class="fa fa-plus"></i></a>
|
||||
<a onclick="save_layout()" id="top_right_button_3" class="btn btn-info btn-circle" hidden><i class="fa fa-save" id="top_right_icon_3"></i></a>
|
||||
<a onclick="run_project()" id="top_right_button_2_1" class="btn btn-success btn-circle" hidden><i class="fa fa-play" style="margin-left:2px"></i></a>
|
||||
<a onclick="stop_project()" id="top_right_button_2_2" class="btn btn-danger btn-circle" hidden><i class="fa fa-stop"></i></a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container-fluid" id="project_list">
|
||||
|
||||
<div class="card shadow mb-4" style="margin-top:1.5rem;border-radius:10px 10px 30px 30px">
|
||||
<div class="card-body row" style="padding-bottom:0;">
|
||||
<div class="col-xl-12 col-md-12">
|
||||
<h4 class="small font-weight-bold"><span class="lang" key="MANAGECOUNT"></span><span class="float-right" id="prj_num"></span></h4>
|
||||
<div class="progress mb-4">
|
||||
<div class="progress-bar bg-info" role="progressbar" id="prj_num_bar" style="width: 20%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card shadow mb-4" style="border-radius:10px 10px 30px 30px">
|
||||
<div class="card-body" style="padding-bottom:1rem">
|
||||
<div id="prjmr" class="row" style="padding:0;"></div>
|
||||
<div style="display:flex;align-items:center;justify-content:center">
|
||||
<a id="prev_page" onclick="prev_page()" class="btn btn-primary lang" key="PREV" style="margin:0 10px"></a>
|
||||
<b id="page_count">1 / 4</b>
|
||||
<a id="next_page" onclick="next_page()" class="btn btn-primary lang" key="NEXT" style="margin:0 10px"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="container-fluid" id="project_detail">
|
||||
<div class="grid gridbg" id="grid" hidden></div>
|
||||
<div class="grid" id="grid2" hidden></div>
|
||||
<div class="grid" id="grid3" hidden></div>
|
||||
</div>
|
||||
<div style="transition: all 0.6s;display:flex;align-items:center;justify-content:center;padding:5px;z-index:999;position:fixed;bottom:0;right:0;background-color:white;box-shadow:0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important;border-radius:40px 0 0 40px;padding-left:0" id="bottom_2" hidden>
|
||||
<a class="btn btn-primary btn-circle btn-sm" id="hideOrShowSwitchBar" style='transition: all 0.6s;margin-left:-0.9rem;margin-right:5px;box-shadow:1px 1px 5px #4e73df'><i class="fa fa-chevron-right" id="switchChevron"></i></a>
|
||||
<a class="btn btn-primary btn-block" id="dataMode" style="transition: all 0.3s;margin:5px;border:solid #4e73df 1px;font-size:1rem;display:flex;flex-direction:column;align-items:center;justify-content:space-around;width:4rem;padding:5px 10px 5px 10px"><i class="fa fa-table" id="data_icon" style="font-size:1.5rem;"></i><span class="lang" key="DATA"></span></a>
|
||||
<a class="btn btn-light btn-block" id="projMode" style="transition: all 0.3s;margin:5px;border:solid #4e73df 1px;color:#4e73df;font-size:1rem;display:flex;flex-direction:column;align-items:center;justify-content:space-around;width:4rem;padding:5px 10px 5px 10px"><i class="fa fa-cube" style="font-size:1.5rem"></i><span class="lang" key="PROJ"></a>
|
||||
<a class="btn btn-light btn-block" id="logicMode" style="transition: all 0.3s;margin:5px;border:solid #4e73df 1px;color:#4e73df;font-size:1rem;display:flex;flex-direction:column;align-items:center;justify-content:space-around;width:4rem;padding:5px 10px 5px 10px"><i class="fa fa-code" style="font-size:1.5rem"></i><span class="lang" key="LOGIC"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="trashbin" style="width:0;height:0;overflow:hidden">
|
||||
|
||||
</div>
|
||||
|
||||
<script src="js/sb-admin-2.min.js?v=2"></script>
|
||||
<script>var prjid = '<%=prjid%>'</script>
|
||||
<script>
|
||||
if(prjid!="no")
|
||||
{
|
||||
view_project(prjid,0)
|
||||
}
|
||||
</script>
|
||||
<xml id="toolbox" style="display:none">
|
||||
|
||||
<category name="控制" colour="120" toolboxitemid="catControl" css-icon="blocklyTreeIcon">
|
||||
<block type="controls_if"></block>
|
||||
<block type="controls_ifelse"></block>
|
||||
<block type="controls_repeat_ext"></block>
|
||||
<block type="controls_whileUntil"></block>
|
||||
<block type="controls_for"></block>
|
||||
<block type="controls_forEach"></block>
|
||||
<block type="controls_flow_statements"></block>
|
||||
<block type="log_message">
|
||||
<value name="message">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">message</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
|
||||
<block type="setInterval">
|
||||
<value name="time">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">0</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
|
||||
<block type="setTimeout">
|
||||
<value name="time">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">0</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
</category>
|
||||
|
||||
<category name="数学" colour="230" toolboxitemid="catMath" css-icon="blocklyTreeIcon">
|
||||
<block type="math_number"></block>
|
||||
<block type="math_arithmetic"></block>
|
||||
<block type="math_single"></block>
|
||||
<block type="math_trig"></block>
|
||||
<block type="math_constant"></block>
|
||||
<block type="math_number_property"></block>
|
||||
<block type="math_round"></block>
|
||||
<block type="math_on_list"></block>
|
||||
<block type="math_modulo"></block>
|
||||
<block type="math_random_int"></block>
|
||||
<block type="math_random_float"></block>
|
||||
<block type="math_parse_int">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">string</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="math_parse_float">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">string</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
</category>
|
||||
|
||||
<category name="逻辑" colour="210" toolboxitemid="catLogic" css-icon="blocklyTreeIcon">
|
||||
|
||||
<block type="logic_compare"></block>
|
||||
<block type="logic_operation"></block>
|
||||
<block type="logic_negate"></block>
|
||||
<block type="logic_boolean"></block>
|
||||
<block type="logic_null"></block>
|
||||
<block type="logic_ternary"></block>
|
||||
</category>
|
||||
|
||||
<category name="文本" colour="160" toolboxitemid="catText" css-icon="blocklyTreeIcon">
|
||||
<block type="text"></block>
|
||||
<block type="current_time"></block>
|
||||
<block type="text_join"></block>
|
||||
<block type="text_append"></block>
|
||||
<block type="text_length"></block>
|
||||
<block type="text_isEmpty"></block>
|
||||
<block type="text_indexOf"></block>
|
||||
<block type="text_charAt"></block>
|
||||
<block type="text_getSubstring"></block>
|
||||
<block type="text_changeCase"></block>
|
||||
<block type="text_trim"></block>
|
||||
<block type="text_print"></block>
|
||||
<block type="text_prompt_ext"></block>
|
||||
<block type="text_count"></block>
|
||||
<block type="text_replace"></block>
|
||||
<block type="text_reverse"></block>
|
||||
<block type="json2text"></block>
|
||||
<block type="text2json"></block>
|
||||
</category>
|
||||
|
||||
<category name="列表" colour="260" toolboxitemid="catLists" css-icon="blocklyTreeIcon">
|
||||
<block type="lists_create_empty"></block>
|
||||
<block type="lists_create_with"></block>
|
||||
<block type="lists_repeat"></block>
|
||||
<block type="lists_length"></block>
|
||||
<block type="lists_isEmpty"></block>
|
||||
<block type="lists_indexOf"></block>
|
||||
<block type="lists_getIndex"></block>
|
||||
<block type="lists_setIndex"></block>
|
||||
<block type="lists_getSublist"></block>
|
||||
<block type="lists_sort"></block>
|
||||
<block type="lists_split"></block>
|
||||
<block type="lists_reverse"></block>
|
||||
</category>
|
||||
|
||||
<category name="字典" colour="345" toolboxitemid="catDicts" css-icon="blocklyTreeIcon">
|
||||
<block type="dicts_create_with"></block>
|
||||
<block type="dicts_keys">
|
||||
|
||||
</block>
|
||||
<block type="dicts_get">
|
||||
|
||||
</block>
|
||||
|
||||
<block type="dicts_add_or_change">
|
||||
|
||||
</block>
|
||||
<block type="dicts_delete">
|
||||
|
||||
</block>
|
||||
<block type="dicts_clear">
|
||||
|
||||
</block>
|
||||
<block type="dicts_values">
|
||||
|
||||
</block>
|
||||
<block type="dicts_length">
|
||||
|
||||
</block>
|
||||
<block type="dicts_deldict">
|
||||
|
||||
</block>
|
||||
</category>
|
||||
|
||||
|
||||
<category name="变量" colour="330" custom="VARIABLE" toolboxitemid="catVar" css-icon="blocklyTreeIcon">
|
||||
|
||||
</category>
|
||||
|
||||
<category name="函数" colour="290" custom="PROCEDURE" toolboxitemid="catFun" css-icon="blocklyTreeIcon">
|
||||
|
||||
</category>
|
||||
|
||||
|
||||
|
||||
|
||||
<category name="消息" colour="350" css-icon="customIcon fa fa-envelope">
|
||||
<block type="recieve_any_message"></block>
|
||||
<block type="recieve_topic_message">
|
||||
<value name="topic">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">topic</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
|
||||
<block type="publish_message">
|
||||
<value name="topic">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">topic</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="message">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">message</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="alert">
|
||||
<value name="message">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">message</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
</category>
|
||||
|
||||
|
||||
<category name="网络" colour="250" css-icon="customIcon fa fa-globe">
|
||||
<block type="GET">
|
||||
<value name="url">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">URL</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="GETJSON">
|
||||
<value name="url">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">URL</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
</category>
|
||||
|
||||
|
||||
<category name="按键/开关" colour="#CFA45A" css-icon="customIcon fa fa-toggle-on">
|
||||
<block type="button_down">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="button_up">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="button_recieve_message">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="button_switch">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="get_button_state">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
</category>
|
||||
|
||||
<category name="滑杆" colour="#C43C4C" css-icon="customIcon fa fa-sliders">
|
||||
<block type="drag_slider">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="slider_recieve_message">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="change_slider">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="value">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">value</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="get_slider_num">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
</category>
|
||||
|
||||
<category name="文本输入" colour="#E89F24" css-icon="customIcon fa fa-i-cursor">
|
||||
<block type="when_textinput_send">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="through_textinput_send">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="message">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">message</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="get_keyboard_input">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
</category>
|
||||
|
||||
<category name="摇杆手柄" colour="#7D9AC3" css-icon="customIcon fa fa-gamepad">
|
||||
<block type="when_joystick_dragged">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="through_joystick_send">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="x">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">x</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="y">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">y</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="get_joystick_x">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="get_joystick_y">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
</category>
|
||||
|
||||
<category name="RGB色盘" colour="#A3C16B" css-icon="customIcon fa fa-paint-brush">
|
||||
<block type="RGB_selected">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="RGB_recieved">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="through_RGB_send">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="R">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">0</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="G">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">0</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="B">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">0</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="get_RGB_color">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
</category>
|
||||
|
||||
<category name="指示灯" colour="#506AD4" css-icon="customIcon fa fa-lightbulb-o">
|
||||
<block type="bulb_recieved">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="bulb_send">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="get_bulb_state">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
</category>
|
||||
|
||||
<category name="文本显示屏" colour="#479DA8" css-icon="customIcon fa fa-tv">
|
||||
<block type="textLED_recieved">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="textLED_send">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="message">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">message</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="get_textLED">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
</category>
|
||||
|
||||
<category name="折线图表" colour="#1D33A8" css-icon="customIcon fa fa-area-chart">
|
||||
<block type="lineChart_recieved">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="lineChart_send">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="message">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">message</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="clear_lineChart">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="get_all_messages">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="get_N_messages">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="num">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">0</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="get_latest_message">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
</category>
|
||||
|
||||
<category name="柱状图表" colour="#50A876" css-icon="customIcon fa fa-bar-chart">
|
||||
<block type="barChart_recieved">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="barChart_send">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="message">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">message</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="clear_barChart">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="get_now_messages">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
</category>
|
||||
|
||||
<category name="数据表格" colour="#541DA8" css-icon="customIcon fa fa-table">
|
||||
<block type="datasheet_recieved">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="datasheet_send">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="message">
|
||||
<field name="CONTENT">message</field>
|
||||
</value>
|
||||
</block>
|
||||
<block type="clear_datasheet">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="get_datasheet_all_messages">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
</category>
|
||||
|
||||
<category name="仪表盘" colour="#CC4375" css-icon="customIcon fa fa-dashboard">
|
||||
<block type="dashboard_recieved">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="dashboard_send">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="message">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">message</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="get_dashboard_now_messages">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
</category>
|
||||
|
||||
<category name="数据地图" colour="#DE4E49" css-icon="customIcon fa fa-map">
|
||||
<block type="get_long">
|
||||
|
||||
</block>
|
||||
<block type="get_lati">
|
||||
|
||||
</block>
|
||||
<block type="datamap_recieved">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="datamap_send">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="long">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">0</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="lat">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">0</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="message">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">[{"label":"","value":""},{"label":"","value":""}]</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="clear_datamap">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
</category>
|
||||
|
||||
<category name="实时气象仪" colour="#E06D39" css-icon="customIcon fa fa-sun-o">
|
||||
<block type="ws_updated">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="ws_send">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="let_ws_update">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="let_ws_send">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="get_ws_para">
|
||||
<value name="name">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">name</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
</category>
|
||||
|
||||
</xml>
|
||||
</body>
|
||||
91
ejs/register.html
Normal file
91
ejs/register.html
Normal file
@@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>MixIO</title>
|
||||
<link rel="shortcut icon" href="img/shortcut.png"/>
|
||||
<link href="css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="css/nunito.css" rel="stylesheet">
|
||||
<link href="css/sb-admin-2.min.css?v=99" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/muuri.css">
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/lang.js?v=5"></script>
|
||||
<script src="js/lang2.js?v=5"></script>
|
||||
<script src="js/tools.js?v=2"></script>
|
||||
</head>
|
||||
|
||||
<body class="bg-gradient-light" style="height:100vh;display:flex;align-items:center;justify-content:center">
|
||||
<style>
|
||||
.translate{
|
||||
width:50px;
|
||||
padding: 0;
|
||||
margin-left:5px;
|
||||
}
|
||||
</style>
|
||||
<div style="position:fixed;right:10px;top:10px;display:flex;align-items:center;justify-content:center">
|
||||
<i class="fa fa-globe" style="color:#4e73df;margin-right:5px;font-size:2rem"></i>
|
||||
<button class="translate btn btn-secondary" id="zh">简</button>
|
||||
<button class="translate btn btn-secondary" id="tw">繁</button>
|
||||
<button class="translate btn btn-secondary" id="en">EN</button>
|
||||
</div>
|
||||
<div class="container" style="opacity: 0.9;">
|
||||
|
||||
<div class="card o-hidden border-0 shadow-lg my-5" style="margin-top:0!important">
|
||||
<div class="card-body p-0">
|
||||
<!-- Nested Row within Card Body -->
|
||||
<div class="row">
|
||||
<div class="col-lg-5 d-none d-lg-block bg-register-image"></div>
|
||||
<div class="col-lg-7">
|
||||
<div class="p-5">
|
||||
<div class="text-center">
|
||||
<h1 class="h4 text-gray-900 mb-4 lang" key="REGACC"></h1>
|
||||
</div>
|
||||
<form class="user" id="form_register">
|
||||
|
||||
<div class="form-group">
|
||||
<input type="email" class="form-control form-control-user lang" key="EMAIL" id="exampleInputEmail" name="userName"
|
||||
placeholder="电子邮箱地址">
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-6 mb-3 mb-sm-0">
|
||||
<input type="password" class="form-control form-control-user lang" key="PASSWORD" name="password"
|
||||
id="exampleInputPassword" placeholder="密码">
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<input type="password" class="form-control form-control-user lang" key="RPTPASS" name="password_confirm"
|
||||
id="exampleRepeatPassword" placeholder="确认密码">
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-user btn-block lang" key="REGACC">
|
||||
|
||||
</button>
|
||||
|
||||
</form>
|
||||
<hr>
|
||||
<div class="text-center">
|
||||
<a class="small lang" key="RSTPASS" href="forgot">重置密码</a>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<a class="small lang" key="HAVEACC" href="/logout">已有账号？点击此处登录</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap core JavaScript-->
|
||||
<script src="js/sb-admin-2.min.js?v=2"></script>
|
||||
<script src="js/register.js?v=3"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
90
ejs/verify.ejs
Normal file
90
ejs/verify.ejs
Normal file
@@ -0,0 +1,90 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<title>MixIO</title>
|
||||
<link rel="shortcut icon" href="img/shortcut.png"/>
|
||||
<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">
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/lang.js?v=6"></script>
|
||||
<script src="js/lang2.js?v=5"></script>
|
||||
<script src="js/tools.js?v=6"></script>
|
||||
<script src="js/verify.js?v=2"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body class="bg-gradient-light" style="height:100vh;display:flex;align-items:center;justify-content:center">
|
||||
<style>
|
||||
.translate{
|
||||
width:50px;
|
||||
padding: 0;
|
||||
margin-left:5px;
|
||||
}
|
||||
</style>
|
||||
<div style="position:fixed;right:10px;top:10px;display:flex;align-items:center;justify-content:center">
|
||||
<i class="fa fa-globe" style="color:#4e73df;margin-right:5px;font-size:2rem"></i>
|
||||
<button class="translate btn btn-secondary" id="zh">简</button>
|
||||
<button class="translate btn btn-secondary" id="tw">繁</button>
|
||||
<button class="translate btn btn-secondary" id="en">EN</button>
|
||||
</div>
|
||||
<div class="container">
|
||||
|
||||
<!-- Outer Row -->
|
||||
<div class="row justify-content-center">
|
||||
|
||||
<div class="col-xl-10 col-lg-12 col-md-9">
|
||||
|
||||
<div class="card o-hidden border-0 shadow-lg my-5" style="margin-top:0!important">
|
||||
<div class="card-body p-0">
|
||||
<!-- Nested Row within Card Body -->
|
||||
<div class="row">
|
||||
<div class="col-lg-6 d-none d-lg-block bg-password-image"></div>
|
||||
<div class="col-lg-6">
|
||||
<div class="p-5">
|
||||
<div class="text-center">
|
||||
<h1 class="h4 text-gray-900 mb-2 lang" key="SETQ"></h1>
|
||||
<p class="mb-4 lang" key="SETQDES"></p>
|
||||
</div>
|
||||
<form class="user">
|
||||
<div class="form-group">
|
||||
<h6 style="text-align: center;color:#437edf"><span class="lang" key="UPEMAIL"></span><%=userName%></h6>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin-top:10px;margin-bottom:5px">
|
||||
<b style="color:#437edf;margin-left:1rem;font-size:.8rem" id="question"></b>
|
||||
<a onclick="changeQuestion()" class="btn btn-sm btn-primary shadow-sm lang" key="CHANGEQ" style="margin-right:1rem;font-size:.8rem"></a>
|
||||
</div>
|
||||
<input type="text" placeholder="" id="answer" class="form-control form-control-user lang" key="SETANS" style="margin-bottom:10px">
|
||||
<a onclick="confirmSet()" class="btn btn-primary btn-user btn-block lang" key="CFMSET" id="send_button">
|
||||
|
||||
</a>
|
||||
</form>
|
||||
<hr>
|
||||
|
||||
<div class="text-center">
|
||||
<a class="small lang" href="/logout" key="HAVEACC"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Custom scripts for all pages-->
|
||||
<script src="js/sb-admin-2.min.js?v=2"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user