69 lines
2.9 KiB
HTML
69 lines
2.9 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<title>ROS + Bootstrap 4 demo</title>
|
||
|
|
<!-- 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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<body class="bg-light">
|
||
|
|
|
||
|
|
<!-- SPEED -->
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-4"></div>
|
||
|
|
<div class=" col-md-4">
|
||
|
|
<label for="robot-speed">
|
||
|
|
<strong>Robot speed</strong>
|
||
|
|
</label>
|
||
|
|
<input type="range" min="15" max="80" class="custom-range" id="robot-speed">
|
||
|
|
</div>
|
||
|
|
<div class="col-md-4"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- VIDEO -->
|
||
|
|
<div class="row my-4">
|
||
|
|
<div class="col d-flex justify-content-center">
|
||
|
|
<img src="" class="p-1 bg-dark" alt="" id="video" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- JOYSTICK -->
|
||
|
|
<div class="row my-4">
|
||
|
|
<div class="col">
|
||
|
|
<div class="d-flex justify-content-center" style="width: 210px; height: 210px;">
|
||
|
|
<div id="joystick"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- INFO -->
|
||
|
|
<div class="row my-4">
|
||
|
|
<div class="col-md-2"></div>
|
||
|
|
<div class="col-md-8">
|
||
|
|
<div class="alert alert-success">
|
||
|
|
<h4 class="alert-heading">ROS + Bootstrap interface demo</h4>
|
||
|
|
<ul>
|
||
|
|
<li>set speed using a slider</li>
|
||
|
|
<li>use joystick or WASD keys on keyboard to move </li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-2"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Optional JavaScript -->
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/roslibjs/1.1.0/roslib.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/eventemitter3/5.0.1/index.min.js"></script>
|
||
|
|
<script src="https://github.com/GT-RAIL/keyboardteleopjs/raw/develop/build/keyboardteleop.min.js"></script>
|
||
|
|
<script src="//yoannmoinet.github.io/nipplejs/javascripts/nipplejs.js"></script>
|
||
|
|
<script src="webui.js"></script>
|
||
|
|
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||
|
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
|
||
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|