update: javscript not loading
This commit is contained in:
parent
e1de2cbf77
commit
829d01bf06
69
config/caddy/content/bootstrap/index.html
Normal file
69
config/caddy/content/bootstrap/index.html
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
<!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>
|
||||||
103
config/caddy/content/bootstrap/index_new.html
Normal file
103
config/caddy/content/bootstrap/index_new.html
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>ROS + Bootstrap 5 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 v5.2.1 -->
|
||||||
|
<link
|
||||||
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<body class="bg-light"></body>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<!-- place navbar here -->
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<!-- 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>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<!-- place footer here -->
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
<!-- Bootstrap JavaScript Libraries -->
|
||||||
|
<script
|
||||||
|
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
|
||||||
|
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
></script>
|
||||||
|
|
||||||
|
<script
|
||||||
|
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
|
||||||
|
integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
139
config/caddy/content/bootstrap/webui.js
Normal file
139
config/caddy/content/bootstrap/webui.js
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
// Begin by creating some global variables:
|
||||||
|
|
||||||
|
var twist;
|
||||||
|
var cmdVel;
|
||||||
|
var publishImmidiately = true;
|
||||||
|
var robot_IP;
|
||||||
|
var manager;
|
||||||
|
var teleop;
|
||||||
|
var ros;
|
||||||
|
|
||||||
|
// Write a function to send ROS messages with velocity for robot:
|
||||||
|
|
||||||
|
function moveAction(linear, angular) {
|
||||||
|
if (linear !== undefined && angular !== undefined) {
|
||||||
|
twist.linear.x = linear;
|
||||||
|
twist.angular.z = angular;
|
||||||
|
} else {
|
||||||
|
twist.linear.x = 0;
|
||||||
|
twist.angular.z = 0;
|
||||||
|
}
|
||||||
|
cmdVel.publish(twist);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Write a function to create velocity message publisher:
|
||||||
|
|
||||||
|
function initVelocityPublisher() {
|
||||||
|
// Init message with zero values.
|
||||||
|
twist = new ROSLIB.Message({
|
||||||
|
linear: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
z: 0
|
||||||
|
},
|
||||||
|
angular: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
z: 0
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// Init topic object
|
||||||
|
cmdVel = new ROSLIB.Topic({
|
||||||
|
ros: ros,
|
||||||
|
name: '/cmd_vel',
|
||||||
|
messageType: 'geometry_msgs/Twist'
|
||||||
|
});
|
||||||
|
// Register publisher within ROS system
|
||||||
|
cmdVel.advertise();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Write a function to create keyboard controller object:
|
||||||
|
function initTeleopKeyboard() {
|
||||||
|
// Use w, s, a, d keys to drive your robot
|
||||||
|
|
||||||
|
// Check if keyboard controller was aready created
|
||||||
|
if (teleop == null) {
|
||||||
|
// Initialize the teleop.
|
||||||
|
teleop = new KEYBOARDTELEOP.Teleop({
|
||||||
|
ros: ros,
|
||||||
|
topic: '/cmd_vel'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add event listener for slider moves
|
||||||
|
robotSpeedRange = document.getElementById("robot-speed");
|
||||||
|
robotSpeedRange.oninput = function () {
|
||||||
|
teleop.scale = robotSpeedRange.value / 100
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Write a function to create joystick object:
|
||||||
|
function createJoystick() {
|
||||||
|
// Check if joystick was aready created
|
||||||
|
if (manager == null) {
|
||||||
|
joystickContainer = document.getElementById('joystick');
|
||||||
|
// joystck configuration, if you want to adjust joystick, refer to:
|
||||||
|
// https://yoannmoinet.github.io/nipplejs/
|
||||||
|
var options = {
|
||||||
|
zone: joystickContainer,
|
||||||
|
position: { left: 50 + '%', top: 105 + 'px' },
|
||||||
|
mode: 'static',
|
||||||
|
size: 200,
|
||||||
|
color: '#0066ff',
|
||||||
|
restJoystick: true
|
||||||
|
};
|
||||||
|
manager = nipplejs.create(options);
|
||||||
|
// event listener for joystick move
|
||||||
|
manager.on('move', function (evt, nipple) {
|
||||||
|
// nipplejs returns direction is screen coordiantes
|
||||||
|
// we need to rotate it, that dragging towards screen top will move robot forward
|
||||||
|
var direction = nipple.angle.degree - 90;
|
||||||
|
if (direction > 180) {
|
||||||
|
direction = -(450 - nipple.angle.degree);
|
||||||
|
}
|
||||||
|
// convert angles to radians and scale linear and angular speed
|
||||||
|
// adjust if youwant robot to drvie faster or slower
|
||||||
|
var lin = Math.cos(direction / 57.29) * nipple.distance * 0.005;
|
||||||
|
var ang = Math.sin(direction / 57.29) * nipple.distance * 0.05;
|
||||||
|
// nipplejs is triggering events when joystic moves each pixel
|
||||||
|
// we need delay between consecutive messege publications to
|
||||||
|
// prevent system from being flooded by messages
|
||||||
|
// events triggered earlier than 50ms after last publication will be dropped
|
||||||
|
if (publishImmidiately) {
|
||||||
|
publishImmidiately = false;
|
||||||
|
moveAction(lin, ang);
|
||||||
|
setTimeout(function () {
|
||||||
|
publishImmidiately = true;
|
||||||
|
}, 50);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// event litener for joystick release, always send stop message
|
||||||
|
manager.on('end', function () {
|
||||||
|
moveAction(0, 0);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// …and finally main app initialization:
|
||||||
|
window.onload = function () {
|
||||||
|
// determine robot address automatically
|
||||||
|
// robot_IP = location.hostname;
|
||||||
|
// set robot address statically
|
||||||
|
robot_IP = "100.105.121.16";
|
||||||
|
|
||||||
|
// // Init handle for rosbridge_websocket
|
||||||
|
ros = new ROSLIB.Ros({
|
||||||
|
url: "ws://" + robot_IP + ":9090"
|
||||||
|
});
|
||||||
|
|
||||||
|
initVelocityPublisher();
|
||||||
|
// get handle for video placeholder
|
||||||
|
video = document.getElementById('video');
|
||||||
|
// Populate video source
|
||||||
|
video.src = "http://" + robot_IP + ":8080/stream?topic=/camera/rgb/image_raw&type=mjpeg&quality=80";
|
||||||
|
video.onload = function () {
|
||||||
|
// joystick and keyboard controls will be available only when video is correctly loaded
|
||||||
|
createJoystick();
|
||||||
|
initTeleopKeyboard();
|
||||||
|
};
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user