272 lines
8.5 KiB
HTML
272 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
|
/>
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
|
|
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
|
|
crossorigin="anonymous"
|
|
/>
|
|
|
|
<link
|
|
rel="stylesheet"
|
|
href="node_modules/bootstrap-slider/dist/css/bootstrap-slider.min.css"
|
|
/>
|
|
|
|
<style>
|
|
.label {
|
|
font-size: 22pt;
|
|
}
|
|
|
|
#demo-start {
|
|
font-size: 230pt;
|
|
}
|
|
</style>
|
|
|
|
<title>遥控器</title>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- <button id="demo-start" type=" button" class="btn btn-success mt-5 mb-5">START</button> -->
|
|
<div class="label mt-5">
|
|
旋转木马：
|
|
<button id="carousel-clockwise" type="button" class="btn btn-primary">
|
|
顺时针旋转90度
|
|
</button>
|
|
<button
|
|
id="carousel-counter-clockwise"
|
|
type="button"
|
|
class="btn btn-primary"
|
|
>
|
|
逆时针旋转90度
|
|
</button>
|
|
</div>
|
|
<div class="label">
|
|
观光电梯：
|
|
<button id="elevator-up" type=" button" class="btn btn-primary">
|
|
上升2.7CM
|
|
</button>
|
|
<button id="elevator-down" type="button" class="btn btn-primary">
|
|
下降2.7CM
|
|
</button>
|
|
</div>
|
|
<div class="label">
|
|
滑梯：
|
|
<button id="slide-degree-rise" type=" button" class="btn btn-primary">
|
|
角度上升
|
|
</button>
|
|
<button id="slide-degree-fall" type="button" class="btn btn-primary">
|
|
角度下降
|
|
</button>
|
|
<button id="slide-width-increase" type=" button" class="btn btn-primary">
|
|
宽度增加
|
|
</button>
|
|
<button id="slide-width-decrease" type="button" class="btn btn-primary">
|
|
宽度减少
|
|
</button>
|
|
</div>
|
|
<div class="label">
|
|
回收装置：
|
|
<button id="recycleh-in" type=" button" class="btn btn-primary">
|
|
移入药箱
|
|
</button>
|
|
<button id="recycleh-out" type="button" class="btn btn-primary">
|
|
移出药箱
|
|
</button>
|
|
<button id="recyclev-up" type=" button" class="btn btn-primary">
|
|
竖直上升
|
|
</button>
|
|
<button id="recyclev-down" type="button" class="btn btn-primary">
|
|
竖直下降
|
|
</button>
|
|
</div>
|
|
<div class="label">
|
|
震动马达：
|
|
<button id="vibrator-enable" type="button" class="btn btn-primary">
|
|
开始震动
|
|
</button>
|
|
<button id="vibrator-disable" type="button" class="btn btn-primary">
|
|
停止震动
|
|
</button>
|
|
</div>
|
|
<div class="label">
|
|
机械爪 <input id="servo"></input>
|
|
<button id="set-servo"" type="button" class="btn btn-primary">
|
|
设置
|
|
</button>
|
|
</div>
|
|
<div class="label">
|
|
继电器
|
|
<button id="relay-enable" type="button" class="btn btn-primary">
|
|
开
|
|
</button>
|
|
<button id="relay-disable" type="button" class="btn btn-primary">
|
|
关
|
|
</button>
|
|
</div>
|
|
<div class="label">
|
|
端口测试
|
|
<input id="test-port"></input>
|
|
<button id="test-port-high" type="button" class="btn btn-primary">
|
|
高
|
|
</button>
|
|
<button id="test-port-low" type="button" class="btn btn-primary">
|
|
低
|
|
</button>
|
|
</div>
|
|
<div class="label">
|
|
爪子
|
|
<button id="paw-close" type="button" class="btn btn-primary">
|
|
靠近
|
|
</button>
|
|
<button id="paw-far" type="button" class="btn btn-primary">
|
|
远离
|
|
</button>
|
|
</div>
|
|
<div class="label">
|
|
药袋
|
|
<button id="bag-close" type="button" class="btn btn-primary">
|
|
靠近
|
|
</button>
|
|
<button id="bag-far" type="button" class="btn btn-primary">
|
|
远离
|
|
</button>
|
|
</div>
|
|
<div class="label">
|
|
上面的传感器
|
|
<span id="sensor-up-data">未知</span>
|
|
<button id="sensor-up" type="button" class="btn btn-primary">
|
|
获取
|
|
</button>
|
|
</div>
|
|
<div class="label">
|
|
其它：
|
|
<button id="init" type="button" class="btn btn-success">初始化</button>
|
|
<button id="cleanup" type="button" class="btn btn-danger">停止</button>
|
|
</div>
|
|
|
|
<!-- Optional JavaScript -->
|
|
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
|
<!-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
|
|
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
|
|
crossorigin="anonymous"></script> -->
|
|
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
|
|
<script
|
|
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
|
|
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script
|
|
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
|
|
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script src="node_modules/bootstrap-slider/dist/bootstrap-slider.min.js"></script>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
$.ajax({ url: "api/init" });
|
|
$("#carousel-clockwise").click(function () {
|
|
$.ajax({ url: "api/carousel/clockwise" });
|
|
});
|
|
$("#carousel-counter-clockwise").click(function () {
|
|
$.ajax({ url: "api/carousel/counter-clockwise" });
|
|
});
|
|
$("#elevator-up").click(function () {
|
|
$.ajax({ url: "api/elevator/up" });
|
|
});
|
|
$("#elevator-down").click(function () {
|
|
$.ajax({ url: "api/elevator/down" });
|
|
});
|
|
$("#slide-degree-rise").click(function () {
|
|
$.ajax({ url: "api/slide/degree/rise" });
|
|
});
|
|
$("#slide-degree-fall").click(function () {
|
|
$.ajax({ url: "api/slide/degree/fall" });
|
|
});
|
|
$("#slide-width-increase").click(function () {
|
|
$.ajax({ url: "api/slide/width/increase" });
|
|
});
|
|
$("#slide-width-decrease").click(function () {
|
|
$.ajax({ url: "api/slide/width/decrease" });
|
|
});
|
|
$("#recycleh-in").click(function () {
|
|
$.ajax({ url: "api/recycle/horizonal/in" });
|
|
});
|
|
$("#recycleh-out").click(function () {
|
|
$.ajax({ url: "api/recycle/horizonal/out" });
|
|
});
|
|
$("#recyclev-up").click(function () {
|
|
$.ajax({ url: "api/recycle/vertical/up" });
|
|
});
|
|
$("#recyclev-down").click(function () {
|
|
$.ajax({ url: "api/recycle/vertical/down" });
|
|
});
|
|
$("#vibrator-enable").click(function () {
|
|
$.ajax({ url: "api/vibrator/enable" });
|
|
});
|
|
$("#vibrator-disable").click(function () {
|
|
$.ajax({ url: "api/vibrator/disable" });
|
|
});
|
|
$("#relay-enable").click(function () {
|
|
$.ajax({ url: "api/relay/enable" });
|
|
});
|
|
$("#relay-disable").click(function () {
|
|
$.ajax({ url: "api/relay/disable" });
|
|
});
|
|
$("#set-servo").click(function () {
|
|
$.ajax({
|
|
url:
|
|
"api/servo/" + document.getElementById("servo").value,
|
|
});
|
|
});
|
|
$("#paw-close").click(function () {
|
|
$.ajax({ url: "api/paw/close" });
|
|
});
|
|
$("#paw-far").click(function () {
|
|
$.ajax({ url: "api/paw/far" });
|
|
});
|
|
$("#bag-close").click(function () {
|
|
$.ajax({ url: "api/bag/close" });
|
|
});
|
|
$("#bag-far").click(function () {
|
|
$.ajax({ url: "api/bag/far" });
|
|
});
|
|
$("#sensor-up").click(function(){
|
|
$.ajax({ url: "api/sensor/up",success: function(result) {
|
|
document.getElementById("sensor-up-data").innerText = result;
|
|
} });
|
|
});
|
|
$("#init").click(function () {
|
|
$.ajax({ url: "api/init" });
|
|
});
|
|
$("#cleanup").click(function () {
|
|
$.ajax({ url: "api/cleanup" });
|
|
});
|
|
$("#demo-start").click(function () {
|
|
$.ajax({ url: "api/demo" });
|
|
});
|
|
$("#test-port-high").click(function () {
|
|
$.ajax({
|
|
url:
|
|
"api/sethigh/" + document.getElementById("test-port").value,
|
|
});
|
|
});
|
|
$("#test-port-low").click(function () {
|
|
$.ajax({
|
|
url:
|
|
"api/setlow/" + document.getElementById("test-port").value,
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|