Skip to content
Snippets Groups Projects
Commit 417dba7b authored by Linux Build Service Account's avatar Linux Build Service Account
Browse files

Merge 0308eff3 on remote branch 

Change-Id: Icc7d000274cb696f1c4a5a422d7a27a34d0d1302
parents 036a01db 0308eff3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
inventory_scan/inventory_scan/web/inventory_scan.html 0 → 100644
+ 297
− 0
View file @ 417dba7b
<!--Copyright (c) 2024 Qualcomm Innovation Center, Inc. All rights reserved.
SPDX-License-Identifier: BSD-3-Clause-Clear -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>ROS Web Interaction</title>
<style>
body {
margin: 20px;
}
#container {
display: flex;
justify-content: space-between;
}
#image-container {
display: flex;
width: 50%;
align-items: center;
}
.input-group {
flex-wrap: nowrap;
margin-bottom: 20px;
}
input[type="number"] {
width: 120px;
}
button {
width: 100px;
}
.text-box {
border: 1px solid #ccc;
padding: 20px;
background-color: #f9f9f9;
width: 500px;
height: 100px;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Inventory Scan</h1>
<div id="container">
<div id="control-container">
<div class="input-group">
<button id="addStationButton">Add Station</button>
<input type="number" id="station_x" placeholder="x" step="0.01">
<input type="number" id="station_y" placeholder="y" step="0.01">
<input type="number" id="station_angle" placeholder="angle" step="0.01">
<button id="getStationButton">Get Pose</button>
</div>
<div class="input-group">
<button id="delateStationButton">Delete Station</button>
<input type="text" id="station_del" placeholder="station1,station2..." min="0">
</div>
<div class="input-group">
<button id="addPath">Add Path</button>
<input type="number" id="path_a" placeholder="station number" min="0">
<span class="arrow">→</span>
<input type="number" id="path_b" placeholder="station number" min="0">
</div>
<div class="input-group">
<button id="deletePath">Delete Path</button>
<input type="number" id="path_del_a" placeholder="station number" min="0">
<span class="arrow">→</span>
<input type="number" id="path_del_b" placeholder="station number" min="0">
</div>
<div class="input-group">
<button id="planPath">Planning Path</button>
<input type="text" id="plan_path_a" placeholder="station1,station2..." min="0">
</div>
<div class="input-group">
<button id="startScan">Start Scan</button>
<button id="stopScan">Stop Scan</button>
</div>
<h2>Scan Goods information</h2>
<textarea id="goodsText" class="text-box" readonly></textarea>
<h2>Error Goods information</h2>
<textarea id="errorsText" class="text-box" readonly></textarea>
</div>
<div id="image-container">
<img id="mapImage" src="">
</div>
</div>
<script src="roslib.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var host = window.location.hostname;
var ros = new ROSLIB.Ros({
url : 'ws://' + host + ':9090'
});
ros.on('connection', function() {
console.log('Connected to websocket server.');
});
ros.on('error', function(error) {
alert('Error connecting to ros bridge server\n' +
'Please check whether the rosbridge_server is launched\n' +
'After launched the rosbridge_server, please refresh the website\n');
console.log('Error connecting to rosbridge_server', error);
});
ros.on('close', function() {
alert('ros bridge server has been closed');
console.log('Connection to websocket server closed.');
});
var mapListener = new ROSLIB.Topic({
ros : ros,
name : '/scan_map',
messageType : 'sensor_msgs/CompressedImage'
});
mapListener.subscribe(function(message) {
document.getElementById('mapImage').src =
"data:image/jpeg;base64," + message.data;
});
var resultListener = new ROSLIB.Topic({
ros : ros,
name : '/scan_result',
messageType : 'inventory_scan_msgs/msg/ScanResult'
});
resultListener.subscribe(function(message) {
document.getElementById('goodsText').value = '';
document.getElementById('errorsText').value = '';
message.goods_info.forEach(function(item) {
document.getElementById('goodsText').value += item + '\n';
});
message.warnings.forEach(function(item) {
document.getElementById('errorsText').value += item + '\n';
});
});
var clientPath = new ROSLIB.Service({
ros : ros,
name : '/scan_path',
serviceType : 'inventory_scan_msgs/srv/ScanPath'
});
const pathCmds = {
ADD_STATION: 0,
DELETE_STATION: 1,
ADD_PATH: 2,
DELETE_PATH: 3,
QUERY_POSE: 4,
ADD_FULL_PATH: 5
};
function callRequest(cmdId) {
switch (cmdId) {
case pathCmds.ADD_STATION:
var x = parseFloat(document.getElementById("station_x").value);
var y = parseFloat(document.getElementById("station_y").value);
var angle = parseFloat(document.getElementById("station_angle").value);
var alertMessage = 'Add station failed, please correct the coordinate'
break;
case pathCmds.DELETE_STATION:
var stations =
document.getElementById("station_del").value.split(',').map(Number);
var alertMessage = 'Delete station failed, please correct the station number'
break;
case pathCmds.ADD_PATH:
var station1 = parseFloat(document.getElementById("path_a").value);
var station2 = parseFloat(document.getElementById("path_b").value);
var stations = [station1, station2];
var alertMessage = 'Add path failed, please correct the station number'
break;
case pathCmds.DELETE_PATH:
var station1 = parseFloat(document.getElementById("path_del_a").value);
var station2 = parseFloat(document.getElementById("path_del_b").value);
var stations = [station1, station2];
var alertMessage = 'Delete path failed, please correct the station number'
break;
case pathCmds.ADD_FULL_PATH:
var stations =
document.getElementById("plan_path_a").value.split(',').map(Number);
var alertMessage = 'Pathing path failed, please correct the pathing path'
break;
case pathCmds.QUERY_POSE:
var alertMessage = 'Get Station failed, please try again'
break;
}
var request = new ROSLIB.ServiceRequest({
cmd_id: cmdId,
x: x,
y: y,
angle: angle,
stations: stations
});
clientPath.callService(request, function(result) {
console.log('Service response:', result);
if (result.result) {
if (cmdId == pathCmds.QUERY_POSE) {
document.getElementById("station_x").value = result.x;
document.getElementById("station_y").value = result.y;
document.getElementById("station_angle").value = result.angle;
}
} else {
alert(alertMessage);
}
});
}
document.getElementById('addStationButton').addEventListener('click', function() {
callRequest(pathCmds.ADD_STATION);
});
document.getElementById('getStationButton').addEventListener('click', function() {
callRequest(pathCmds.QUERY_POSE);
});
document.getElementById('delateStationButton').addEventListener('click', function() {
callRequest(pathCmds.DELETE_STATION);
});
document.getElementById('addPath').addEventListener('click', function() {
callRequest(pathCmds.ADD_PATH);
});
document.getElementById('deletePath').addEventListener('click', function() {
callRequest(pathCmds.DELETE_PATH);
});
document.getElementById('planPath').addEventListener('click', function() {
callRequest(pathCmds.ADD_FULL_PATH);
});
var clientScan = new ROSLIB.Service({
ros : ros,
name : '/scan_control',
serviceType : 'inventory_scan_msgs/srv/ScanControl'
});
const scanResults = {
NAVIGATING: 0,
NAVI_NOT_READY: 1,
NAVI_ERROR: 2,
NAVI_STOPPED: 3,
};
document.getElementById('startScan').addEventListener('click', function() {
const buttons = document.querySelectorAll('button');
var request = new ROSLIB.ServiceRequest({
cmd_id: 0,
});
clientScan.callService(request, function(result) {
console.log('start scan control, response:', result);
if (result.result) {
alert("inventory scan fail to start");
} else {
buttons.forEach(btn => {
if (btn.id !== 'stopScan') {
btn.disabled = true;
}
});
}
});
});
document.getElementById('stopScan').addEventListener('click', function() {
const buttons = document.querySelectorAll('button');
var request = new ROSLIB.ServiceRequest({
cmd_id: 1,
});
clientScan.callService(request, function(result) {
console.log('stop scan control, response:', result);
});
buttons.forEach(btn => {
btn.disabled = false;
btn.style.backgroundColor = '';
});
});
});
</script>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment