RoboGame2020/controller.html

521 lines
17 KiB
HTML
Raw Permalink Normal View History

2021-10-30 23:20:58 +08:00
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
<!-- FontAwesone Icons -->
<link
href="node_modules/@fortawesome/fontawesome-free/css/all.min.css"
rel="stylesheet"
/>
<title>Controller</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="col">名称</th>
<th scope="col">手动控制</th>
<th scope="col">预设</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="align-middle">旋转木马</th>
<td>
<button
id="carousel-clockwise"
type="button"
class="btn btn-outline-primary"
>
<i class="fas fa-redo"></i> 顺时针旋转
</button>
<button
id="carousel-counter-clockwise"
type="button"
class="btn btn-outline-primary"
>
<i class="fas fa-undo"></i> 逆时针旋转
</button>
<button
id="carousel-stop"
type="button"
class="btn btn-outline-danger"
>
<i class="fas fa-stop-circle"></i> 停止旋转
</button>
</td>
<td>
<button
id="carousel-preset-clockwise-90"
type="button"
class="btn btn-outline-success"
>
<i class="fas fa-redo"></i> 顺时针旋转90°
</button>
<button
id="carousel-preset-counter-clockwise-90"
type="button"
class="btn btn-outline-success"
>
<i class="fas fa-undo"></i> 逆时针旋转90°
</button>
</td>
</tr>
<tr>
<th scope="row" class="align-middle">观光电梯</th>
<td>
<button
id="elevator-down"
type="button"
class="btn btn-outline-primary"
>
<i class="fas fa-arrow-down"></i> 下降
</button>
<button
id="elevator-up"
type="button"
class="btn btn-outline-primary"
>
<i class="fas fa-arrow-up"></i> 上升
</button>
<button
id="elevator-stop"
type="button"
class="btn btn-outline-danger"
>
<i class="fas fa-stop-circle"></i> 停止
</button>
</td>
<td>
<button
id="elevator-preset-down-2-7"
type="button"
class="btn btn-outline-success"
>
<i class="fas fa-arrow-down"></i> 下降2.7CM
</button>
<button
id="elevator-preset-up-2-7"
type="button"
class="btn btn-outline-success"
>
<i class="fas fa-arrow-up"></i> 上升2.7CM
</button>
</td>
</tr>
<tr>
<th scope="row" class="align-middle">传送履带</th>
<td>
<button
id="conveyor-output"
type="button"
class="btn btn-outline-primary"
>
<i class="fas fa-sign-out-alt"></i> 出药
</button>
<button
id="conveyor-recycle"
type="button"
class="btn btn-outline-primary"
>
<i class="fas fa-recycle"></i> 回收
</button>
<button
id="conveyor-stop"
type="button"
class="btn btn-outline-danger"
>
<i class="fas fa-stop-circle"></i> 停止
</button>
</td>
<td>
<button
id="conveyor-preset-output"
type="button"
class="btn btn-outline-success"
>
<i class="fas fa-sign-out-alt"></i> 出药
</button>
<button
id="conveyor-preset-recycle"
type="button"
class="btn btn-outline-success"
>
<i class="fas fa-recycle"></i> 回收
</button>
</td>
</tr>
<tr>
<th scope="row" class="align-middle">看门狗</th>
<td>
<button
id="watchdog-open"
type="button"
class="btn btn-outline-primary"
>
<i class="fas fa-expand-arrows-alt"></i> 打开
</button>
<button
id="watchdog-close"
type="button"
class="btn btn-outline-primary"
>
<i class="fas fa-compress-arrows-alt"></i> 关闭
</button>
<button
id="watchdog-stop"
type="button"
class="btn btn-outline-danger"
>
<i class="fas fa-stop-circle"></i> 停止
</button>
</td>
<td>
<button
id="watchdog-preset-open"
type="button"
class="btn btn-outline-success"
>
<i class="fas fa-expand-arrows-alt"></i> 打开
</button>
<button
id="watchdog-preset-close"
type="button"
class="btn btn-outline-success"
>
<i class="fas fa-compress-arrows-alt"></i> 关闭
</button>
</td>
</tr>
<tr>
<th scope="row" class="align-middle">水平回收</th>
<td>
<button
id="recycleh-moveout"
type="button"
class="btn btn-outline-primary"
>
<i class="fas fa-sign-out-alt"></i> 移出
</button>
<button
id="recycleh-movein"
type="button"
class="btn btn-outline-primary"
>
<i class="fas fa-sign-in-alt"></i> 移入
</button>
<button
id="recycleh-stop"
type="button"
class="btn btn-outline-danger"
>
<i class="fas fa-stop-circle"></i> 停止
</button>
</td>
<td>
<button
id="recycleh-preset-moveout"
type="button"
class="btn btn-outline-success"
>
<i class="fas fa-sign-out-alt"></i> 移出
</button>
<button
id="recycleh-preset-movein"
type="button"
class="btn btn-outline-success"
>
<i class="fas fa-sign-in-alt"></i> 移入
</button>
</td>
</tr>
<tr>
<th scope="row" class="align-middle">垂直回收</th>
<td>
<button
id="recyclev-rise"
type="button"
class="btn btn-outline-primary"
>
<i class="fas fa-upload"></i> 上升
</button>
<button
id="recyclev-fall"
type="button"
class="btn btn-outline-primary"
>
<i class="fas fa-download"></i> 下降
</button>
<button
id="recyclev-stop"
type="button"
class="btn btn-outline-danger"
>
<i class="fas fa-stop-circle"></i> 停止
</button>
</td>
<td>
<button
id="recyclev-preset-rise"
type="button"
class="btn btn-outline-success"
>
<i class="fas fa-upload"></i> 上升
</button>
<button
id="recyclev-preset-fall"
type="button"
class="btn btn-outline-success"
>
<i class="fas fa-download"></i> 下降
</button>
</td>
</tr>
<tr>
<th scope="row" class="align-middle">推药袋</th>
<td>
<button
id="bag-pusher-push"
type="button"
class="btn btn-outline-primary"
>
<i class="fas fa-compress-alt"></i> 推药袋
</button>
<button
id="bag-pusher-loose"
type="button"
class="btn btn-outline-primary"
>
<i class="fas fa-expand-alt"></i> 松开
</button>
<button
id="bag-pusher-stop"
type="button"
class="btn btn-outline-danger"
>
<i class="fas fa-stop-circle"></i> 停止
</button>
</td>
<td>
<button
id="bag-pusher-preset-push"
type="button"
class="btn btn-outline-success"
>
<i class="fas fa-compress-alt"></i> 推药袋
</button>
<button
id="bag-pusher-preset-loose"
type="button"
class="btn btn-outline-success"
>
<i class="fas fa-expand-alt"></i> 松开
</button>
</td>
</tr>
<tr>
<th scope="row" class="align-middle">剪刀移动</th>
<td>
<button
id="scissors-pusher-close"
type="button"
class="btn btn-outline-primary"
>
<i class="fas fa-compress-alt"></i> 靠近
</button>
<button
id="scissors-pusher-far"
type="button"
class="btn btn-outline-primary"
>
<i class="fas fa-expand-alt"></i> 远离
</button>
<button
id="scissors-pusher-stop"
type="button"
class="btn btn-outline-danger"
>
<i class="fas fa-stop-circle"></i> 停止
</button>
</td>
<td>
<button
id="scissors-pusher-preset-close"
type="button"
class="btn btn-outline-success"
>
<i class="fas fa-compress-alt"></i> 靠近
</button>
<button
id="scissors-pusher-preset-far"
type="button"
class="btn btn-outline-success"
>
<i class="fas fa-expand-alt"></i> 远离
</button>
</td>
</tr>
<tr>
<th scope="row" class="align-middle">剪切药袋</th>
<td>
<button
id="scissors-cut"
type="button"
class="btn btn-outline-primary"
>
<i class="fas fa-cut"></i> 剪切
</button>
<button
id="scissors-loose"
type="button"
class="btn btn-outline-danger"
>
<i class="fas fa-stop-circle"></i> 松开
</button>
</td>
<td></td>
</tr>
<tr>
<th scope="row" class="align-middle">水箱</th>
<td>
<button
id="spigot-open"
type="button"
class="btn btn-outline-primary"
>
<i class="fas fa-faucet"></i> 打开阀门
</button>
<button
id="spigot-close"
type="button"
class="btn btn-outline-danger"
>
<i class="fas fa-stop-circle"></i> 关闭阀门
</button>
</td>
<td></td>
</tr>
</tbody>
</table>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"
></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
<!-- jQuery -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#carousel-clockwise").click(() => $.get("/api/carousel/clockwise"));
$("#carousel-counter-clockwise").click(() =>
$.get("/api/carousel/counter-clockwise")
);
$("#carousel-stop").click(() => $.get("/api/carousel/stop"));
$("#carousel-preset-clockwise-90").click(() =>
$.get("/api/carousel/presets/clockwise-90")
);
$("#carousel-preset-counter-clockwise-90").click(() =>
$.get("/api/carousel/presets/counter-clockwise-90")
);
$("#elevator-down").click(() => $.get("/api/elevator/down"));
$("#elevator-up").click(() => $.get("/api/elevator/up"));
$("#elevator-stop").click(() => $.get("/api/elevator/stop"));
$("#elevator-preset-down-2-7").click(() =>
$.get("/api/elevator/presets/down-2-7")
);
$("#elevator-preset-up-2-7").click(() =>
$.get("/api/elevator/presets/up-2-7")
);
$("#conveyor-output").click(() => $.get("/api/conveyor/output"));
$("#conveyor-recycle").click(() => $.get("/api/conveyor/recycle"));
$("#conveyor-stop").click(() => $.get("/api/conveyor/stop"));
$("#conveyor-preset-output").click(() =>
$.get("/api/conveyor/presets/output")
);
$("#conveyor-preset-recycle").click(() =>
$.get("/api/conveyor/presets/recycle")
);
$("#watchdog-open").click(() => $.get("/api/watchdog/open"));
$("#watchdog-close").click(() => $.get("/api/watchdog/close"));
$("#watchdog-stop").click(() => $.get("/api/watchdog/stop"));
$("#watchdog-preset-open").click(() =>
$.get("/api/watchdog/presets/open")
);
$("#watchdog-preset-close").click(() =>
$.get("/api/watchdog/presets/close")
);
$("#recycleh-moveout").click(() => $.get("/api/recycleh/moveout"));
$("#recycleh-movein").click(() => $.get("/api/recycleh/movein"));
$("#recycleh-stop").click(() => $.get("/api/recycleh/stop"));
$("#recycleh-preset-moveout").click(() =>
$.get("/api/recycleh/presets/moveout")
);
$("#recycleh-preset-movein").click(() =>
$.get("/api/recycleh/presets/movein")
);
$("#recyclev-rise").click(() => $.get("/api/recyclev/rise"));
$("#recyclev-fall").click(() => $.get("/api/recyclev/fall"));
$("#recyclev-stop").click(() => $.get("/api/recyclev/stop"));
$("#recyclev-preset-rise").click(() =>
$.get("/api/recyclev/presets/rise")
);
$("#recyclev-preset-fall").click(() =>
$.get("/api/recyclev/presets/fall")
);
$("#bag-pusher-push").click(() => $.get("/api/bag-pusher/push"));
$("#bag-pusher-loose").click(() => $.get("/api/bag-pusher/loose"));
$("#bag-pusher-stop").click(() => $.get("/api/bag-pusher/stop"));
$("#bag-pusher-preset-push").click(() =>
$.get("/api/bag-pusher/presets/push")
);
$("#bag-pusher-preset-loose").click(() =>
$.get("/api/bag-pusher/presets/loose")
);
$("#scissors-pusher-close").click(() =>
$.get("/api/scissors-pusher/close")
);
$("#scissors-pusher-far").click(() =>
$.get("/api/scissors-pusher/far")
);
$("#scissors-pusher-stop").click(() =>
$.get("/api/scissors-pusher/stop")
);
$("#scissors-pusher-preset-close").click(() =>
$.get("/api/scissors-pusher/presets/close")
);
$("#scissors-pusher-preset-far").click(() =>
$.get("/api/scissors-pusher/presets/far")
);
$("#scissors-cut").click(() => $.get("/api/scissors/cut"));
$("#scissors-loose").click(() => $.get("/api/scissors/loose"));
$("#spigot-open").click(() => $.get("/api/spigot/open"));
$("#spigot-close").click(() => $.get("/api/spigot/close"));
});
</script>
</body>
</html>