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