Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
218 lines (213 sloc) 9.84 KB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>ROS WEB Teleoperater</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/all.min.css">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- <link rel="stylesheet" href="css/cover.css" crossorigin="anonymous"> -->
<link rel="stylesheet" href="css/sticky-footer-navbar.css">
<script src="js/eventemitter2.min.js"></script>
<script src="js/roslib.min.js"></script>
<script type="text/javascript">
console.log('Teleop is starting!')
</script>
</head>
<body class="text-center">
<script type="text/javascript">
if (!Talker) {
console.log('Making ROS taker');
var Talker = {
ros: null,
name: "",
init: function() {
this.ros = new ROSLIB.Ros();
this.ros.on('error', function(error) {
document.getElementById('state').innerHTML = "Error";
});
this.ros.on('connection', function(error) {
document.getElementById('state').innerHTML = "Connect";
});
this.ros.on('close', function(error) {
document.getElementById('state').innerHTML = "Close";
});
this.ros.connect('ws://' + location.hostname + ':9090');
},
send: function(vx,gz) {
// if (document.getElementById("comment").value.length == 0) return;
// var comment = document.getElementById("comment").value;
var pub = new ROSLIB.Topic({
ros: this.ros,
name: 'tamiya1/cmd_vel',
messageType: 'geometry_msgs/Twist'
});
// var vx = document.getElementById('vx').innerHTML
// var gz = document.getElementById('gz').innerHTML
var vel = new ROSLIB.Message({
linear:{
x:vx,
y:0,
z:0
},
angular:{
x:0,
y:0,
z:gz
}
});
pub.publish(vel);
// document.getElementById('cmd').innerHTML = comment;
// console.log(comment + 'is published. ');
// console.log('is publisded. ')
}
}
Talker.init();
window.onload = function() {
document.getElementById('camera_image').src = 'http://' + location.hostname + ':8080/stream?topic=/image_raw&type=ros_compressed'
console.log();
};
window.onunload = function() {
Talker.ros.close();
};
}
</script>
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Tamiya Cam Robot Controller</a>
<!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div> -->
</nav>
</header>
<main role="main" class="container">
<div class="row">
<div class="col-md-6 text-center text-light">
<img id="camera_image" class="img-fluid" src='' alt = 'web camera streamed image'></img>
</div>
<div class="col-md-6">
<!-- JOY -->
<!-- M0: left motor, M1: right motor -->
<table class="table table-borderless ">
<tbody>
<tr>
<!-- Left Up -->
<td>
<form action="javascript:Talker.send(0.5,0.5);" id="ui">
<button type="submit" class="btn btn-outline-light btn-lg btn-block">
<i class="fas fa-reply fa-lg"></i>
</button>
</form>
</td>
<!-- Up -->
<td>
<form action="javascript:Talker.send(1,0);" id="ui">
<button type="submit" class="btn btn-outline-light btn-lg btn-block">
<i class="fas fa-angle-up fa-lg"></i>
</button>
</form>
</td>
<!-- Right Up -->
<td>
<form action="javascript:Talker.send(0.5,-0.5);" id="ui">
<button type="submit" class="btn btn-outline-light btn-lg btn-block">
<i class="fas fa-reply fa-flip-horizontal fa-lg"></i>
</button>
</form>
</td>
</tr>
<tr>
<td>
<!-- Left Turn -->
<form action="javascript:Talker.send(0,1);" id="ui">
<button type="submit" class="btn btn-outline-light btn-lg btn-block">
<i class="fas fa-angle-left fa-lg"></i>
</button>
</form>
</td>
<td>
<!-- Pose -->
<form action="javascript:Talker.send(0,0);" id="ui">
<button type="submit" class="btn btn-outline-light btn-lg btn-block">
<i class="fas fa-circle fa-lg"></i>
</button>
</form>
</td>
<td>
<!-- Right Turn -->
<form action="javascript:Talker.send(0,-1);" id="ui">
<button type="submit" class="btn btn-outline-light btn-lg btn-block">
<i class="fas fa-angle-right fa-lg"></i>
</button>
</form>
</td>
</tr>
<tr>
<td>
<!-- Left Down -->
<form action="javascript:Talker.send(-0.5,0.5);" id="ui">
<button type="submit" class="btn btn-outline-light btn-lg btn-block">
<i class="fas fa-reply fa-flip-vertical fa-lg"></i>
</button>
</form>
</td>
<td>
<!-- Down -->
<form action="javascript:Talker.send(-1,0);" id="ui">
<button type="submit" class="btn btn-outline-light btn-lg btn-block">
<i class="fas fa-angle-down fa-lg"></i>
</button>
</form>
</td>
<td>
<!-- Right Down -->
<form action="javascript:Talker.send(-0.5,-0.5);" id="ui">
<button type="submit" class="btn btn-outline-light btn-lg btn-block">
<i class="fas fa-reply fa-flip-horizontal fa-flip-vertical fa-lg"></i>
</button>
</form>
</td>
</tr>
</tbody>
</table>
<!-- End of JOY -->
</div>
</div>
</main>
<footer class="footer navbar-dark bg-dark">
<div class="container">
<!-- <span class="text-muted">Place sticky footer content here.</span> -->
<p class="text-light ">Status: <label id="state">Disconnect</label></p>
</div>
</footer>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You can’t perform that action at this time.