rosweb使用,roslibs使用,ros2djs,ros3djs具体使用
1.与ros建立链接
var ros = new ROSLIB.Ros({//这行代码创建了一个名为ros的ROS对象。它是与ROS通信的核心对象,用于与ROS服务器建立连接以及发送和接收ROS消息。
url : 'ws://localhost:9090'
});
ros.on('error', function(error) { // 这是一个错误事件处理程序,当在后端发生错误时触发。它将执行一些操作来处理错误,例如在页面上显示适当的错误消息,并在控制台打印错误信息。
// 处理连接错误
});
ros.on('connection', function() {//这是一个连接成功事件处理程序,在成功建立与rosbridge WebSocket服务器的连接时触发。它将执行一些操作来指示连接成功,例如在页面上显示连接成功的消息。
// 处理连接建立
});
ros.on('close', function() {//这是一个连接关闭事件处理程序,在与rosbridge WebSocket服务器的连接关闭时触发。它将执行一些操作来指示连接已关闭,例如在页面上显示连接已关闭的消息。
处理连接关闭
});
2.二维地图可视化
// Create the main viewer.
var viewer = new ROS2D.Viewer({
divID : 'nav',
width : 350,
height : 400
});
// Setup the nav client.
var nav = NAV2D.OccupancyGridClientNav({
ros : ros,
rootObject : viewer.scene,
viewer : viewer,
withOrientation : 'true',//可以在地图上触发点操作
serverName : '/move_base'
});
}
3.三维地图可视化
var viewer3d= new ROS3D.Viewer({
// background: '#cccccc',
divID : 'nav3d',
width : 1200,
height : 1200,
antialias : true
// near : 0.01,//0.01
//far: 1000,//1000
});
// 监听相机变化事件
viewer3d.cameraControls.addEventListener('change', function() {
// 监听 position.x 值的变化
console.log("previousPositionX: ",viewer3d.camera.position.x);
console.log("previousPositionY: ",viewer3d.camera.position.y);
console.log("previousPositionZ: ",viewer3d.camera.position.z);
var cameraRotationX = viewer3d.camera.rotation.x;
var cameraRotationY = viewer3d.camera.rotation.y;
var cameraRotationZ = viewer3d.camera.rotation.z;
console.log("cameraRotationX: ",cameraRotationX);
console.log("cameraRotationY: ",cameraRotationY);
console.log("cameraRotationZ: ",cameraRotationZ);
console.log("phiDelta: ",viewer3d.cameraControls.camera.phiDelta);
console.log("thetaDelta: ",viewer3d.cameraControls.camera.thetaDelta);
// 监听 zoom 值的变化
console.log("previousZoom: ",viewer3d.camera.zoom);
});
var grid = new ROS3D.Grid({
// ros : ros,
cellSize: 0.5, 每个网格单元的尺寸
color: '#cccccc',// '#cccccc' window.createjs.Graphics.getRGB(255, 0, 0,1), // 网格的颜色,使用十六进制表示 x000000
lineWidth: 2,//this.lineWidth
num_cells: 20, 网格单元的数量
});
// 调整位置
grid.position.x = 1; // 在 x 轴上移动网格
grid.position.y = 2; // 在 y 轴上移动网格
grid.position.z = -3; // 在 z 轴上移动网格
// 使用欧拉角旋转网格
grid.rotation.x = Math.PI / 2; // 绕 x 轴旋转 90 度
grid.rotation.y = Math.PI; // 绕 y 轴旋转 180 度
grid.rotation.z = Math.PI / 4; // 绕 z 轴旋转 45 度
// 或者使用四元数旋转网格
// grid.quaternion.setFromAxisAngle(axis, angle);
// 调整缩放
grid.scale.x = 0.5; // 在 x 轴上放大网格的大小
grid.scale.y = 0.5; // 在 y 轴上缩小网格的大小
grid.scale.z = 0.5; // 在 z 轴上保持网格的大小不变
viewer3d.addObject(grid);
// Setup the marker client.
var gridClient = new ROS3D.OccupancyGridClient({
ros : ros,
topic :'/map',
rootObject : viewer3d.scene,
continuous: true
});
3维坐标显示
//------------------ 页面上坐标显示-------------------------------
var tf2_topic = new ROSLIB.Topic({
ros: this.ros,
name: '/tf',
messageType: 'tf2_msgs/TFMessage',
});
var tfClient = new ROSLIB.TFClient({
ros: this.ros,
angularThres: 0.01,
fixedFrame: '/map',//this.config.globalOptions.fixedFrame /base_link
transThres: 0.01,
rate: 10.0
});
var tfNode;
function tf_callback(frame,tf){
var tfObj = new ROS3D.Axes({
shaftRadius: 0.05,
headLength: 0.001,
headRadius: 0.001
});
tfObj.scale.set(0.1, 0.1, 0.1);
if (tfNode) {
viewer3d.scene.remove(tfNode);
}
tfNode = new ROS3D.SceneNode({
frameID: '/map',//this.config.globalOptions.fixedFrame /base_link
tfClient: tfClient,
object: tfObj,
pose: {
position: tf.translation,
orientation: tf.rotation
}
});
viewer3d.addObject(tfNode);
}
function addFrame(frame) {
tfClient.subscribe(frame, function(tf) {
tf_callback( frame, tf);
});
}
tf2_topic.subscribe(function(msg) {
for (var t of msg.transforms) {
console.log("t.child_frame_id: ",t.child_frame_id);
addFrame(t.child_frame_id)
tf2_topic.unsubscribe();
}
});
4.三维 全局路径
显示全局路径
// Setup the tf client.
var tfClient = new ROSLIB.TFClient({
ros : ros,
angularThres : 0.01,
transThres : 0.01,
rate : 10.0
fixedFrame : '/map'
});
var pathDisplay = new ROS3D.Path({
ros: ros,
tfClient: tfClient,
rootObject: viewer.scene,
topic: '/move_base/NavfnROS/plan',//全局路路径
color: 0xcc00,
})
viewer.addObject(pathDisplay);
三维显示车体
// Setup the tf client.
var tfClient = new ROSLIB.TFClient({
ros : ros,
angularThres : 0.01,
transThres : 0.01,
rate : 10.0,
fixedFrame : '/map'
});
// Setup the Polygon client.
var gridClient = new ROS3D.Polygon({
ros: ros,
tfClient: tfClient,
rootObject: viewer.scene,
topic: '/move_base/global_costmap/footprint',//显示车体
});
viewer.addObject(gridClient);
显示雷达
// Setup the scan client.
var gridClient = new ROS3D.LaserScan({
ros: ros,
tfClient: tfClient,
rootObject: viewer.scene,
topic: '/scan',
max_pts: 1000,
pointRatio: 3,
messageRatio: 4,
material: { color: 0xcc0000,size: 4, sizeAttenuation: false ,alphaTest: 0.5},
});
点云
var cloudClient = new ROS3D.PointCloud2({
ros: ros,
tfClient: tfClient,
rootObject: viewer.scene,
topic: '/royale_camera_driver/point_cloud',
max_pts: "10000000",
material: { size: 0.01, color: 0xffeeff }
});
}
车体方向
// Setup the PoseWithCovariance client.
var gridClient = new ROS3D.PoseWithCovariance({
ros: ros,
tfClient: tfClient,
rootObject: viewer.scene,
topic: '/amcl_pose',//这个是车体方向
color: 0xcc00
});
2.发布topic
// Publishing a Topic 发布topic
// ------------------
// First, we create a Topic object with details of the topic's name and message type.
var cmdVel = new ROSLIB.Topic({
ros : ros,
name : '/cmd_vel',
messageType : 'geometry_msgs/Twist'
});
// Then we create the payload to be published. The object we pass in to ros.Message matches the
// fields defined in the geometry_msgs/Twist.msg definition.
var twist = new ROSLIB.Message({
linear : {
x : 0.1,
y : 0.2,
z : 0.3
},
angular : {
x : -0.1,
y : -0.2,
z : -0.3
}
});
// And finally, publish.
cmdVel.publish(twist);
订阅topic
//Subscribing to a Topic 订阅topic
//----------------------
// Like when publishing a topic, we first create a Topic object with details of the topic's name
// and message type. Note that we can call publish or subscribe on the same topic object.
var listener = new ROSLIB.Topic({
ros : ros,
name : '/listener',
messageType : 'std_msgs/String'
});
// Then we add a callback to be called every time a message is published on this topic.
listener.subscribe(function(message) {
console.log('Received message on ' + listener.name + ': ' + message.data);
// If desired, we can unsubscribe from the topic as well.
listener.unsubscribe();
});
创建service 客户端
// Calling a service 创建service 客户端
// -----------------
// First, we create a Service client with details of the service's name and service type.
var addTwoIntsClient = new ROSLIB.Service({
ros : ros,
name : '/add_two_ints',
serviceType : 'rospy_tutorials/AddTwoInts'
});
// Then we create a Service Request. The object we pass in to ROSLIB.ServiceRequest matches the
// fields defined in the rospy_tutorials AddTwoInts.srv file.
var request = new ROSLIB.ServiceRequest({
a : 1,
b : 2
});
// Finally, we call the /add_two_ints service and get back the results in the callback. The result
// is a ROSLIB.ServiceResponse object.
addTwoIntsClient.callService(request, function(result) {
console.log('Result for service call on ' + addTwoIntsClient.name + ': ' + result.sum);
});
创建service服务端
// Advertising a Service 创建service服务端
// ---------------------
// The Service object does double duty for both calling and advertising services
var setBoolServer = new ROSLIB.Service({
ros : ros,
name : '/set_bool',
serviceType : 'std_srvs/SetBool'
});
// Use the advertise() method to indicate that we want to provide this service
setBoolServer.advertise(function(request, response) {
console.log('Received service request on ' + setBoolServer.name + ': ' + request.data);
response['success'] = true;
response['message'] = 'Set successfully';
return true;
});
发送action客户端
ar movebaseClient = new ROSLIB.ActionClient({//Action服务
ros: ros,
serverName: "/move_base",
actionName: "move_base_msgs/MoveBaseAction",
});
sendGoal(6.2, 3.97, 0.00, 1.00);
function sendGoal(posX, posY, rZ, rW) {
if (
posX !== undefined &&
posY !== undefined &&
oriZ !== undefined &&
oriW !== undefined
) {
goalMsg = new ROSLIB.Message({
target_pose: {
header: {
frame_id: "map",
// stamp: Date.now()
},
pose: {
position: {
x: posX,
y: posY,
z: 0,
},
orientation: {
x: 0,
y: 0,
z: rZ,
w: rW,
},
},
},
});
}
goal = new ROSLIB.Goal({
actionClient: movebaseClient,
goalMessage: goalMsg,
});
// Print out their output into the terminal.
goal.on('feedback', function(feedback) {
console.log('Feedback: ' + feedback.sequence);
});
goal.on('result', function(result) {
console.log('Final Result: ' + result.sequence);
});
goal.send();
}
action客户端2
// The ActionClient
// ----------------
var fibonacciClient = new ROSLIB.ActionClient({
ros : ros,
serverName : '/fibonacci',
actionName : 'actionlib_tutorials/FibonacciAction'
});
// Create a goal.
var goal = new ROSLIB.Goal({
actionClient : fibonacciClient,
goalMessage : {
order : 7
}
});
// Print out their output into the terminal.
goal.on('feedback', function(feedback) {
console.log('Feedback: ' + feedback.sequence);
});
goal.on('result', function(result) {
console.log('Final Result: ' + result.sequence);
});
// Send the goal to the action server.
goal.send();
ActionServer 服务端
//创建一个Fibonacci Action Server对象fibonacciServer,使用ros作为ROS连接对象,/fibonacci作为服务器名称,actionlib_tutorials/FibonacciAction作为Action的消息类型。
this.fibonacciServer = new ROSLIB.SimpleActionServer({
ros : ros,
serverName : '/fibonacci',
actionName : 'actionlib_tutorials/FibonacciAction'
});
this.canceled = false;//定义一个canceled变量,用于标记是否已取消操作。
var that=this;
//handle fibonacci action request.
//创建一个goal事件的监听器,处理Fibonacci Action请求。
/**
在goal事件的处理函数中,接收到goalMessage表示Action请求的目标消息。
初始化一个空数组fibonacciSequence,并将0和1添加到数组中作为初始序列。
使用for循环生成Fibonacci序列,将每个数字添加到fibonacciSequence数组中。
在每次迭代时,检查that.canceled变量的值,如果已被设置为true,则表示操作已被取消,设置Action服务器为预取消状态(setPreempted())。
将生成的Fibonacci序列作为反馈(feedback)发送给客户端,使用sendFeedback()方法。
循环结束后,将最终的Fibonacci序列作为结果(result)发送给客户端,使用setSucceeded()方法。
*/
this.fibonacciServer.on('goal', function(goalMessage) {
console.log(goalMessage);
fibonacciSequence = [];
fibonacciSequence.push(0);
fibonacciSequence.push(1);
for (var i = 1; i < goalMessage.order; i++ ) {
fibonacciSequence.push( fibonacciSequence[i] + fibonacciSequence[i-1] );
if (that.canceled === true ) {
console.log("Action server preempted");
that.fibonacciServer.setPreempted();
}
console.log(fibonacciSequence);
//send feedback
var feedback = { sequence: fibonacciSequence };
that.fibonacciServer.sendFeedback(fibonacciSequence);
}
//send result
var result = { sequence: fibonacciSequence};
that.fibonacciServer.setSucceeded(result);
});
//创建一个cancel事件的监听器,处理Action取消请求。在cancel事件的处理函数中,将that.canceled变量设置为true,表示操作已被取消。
this.fibonacciServer.on('cancel', function(goalMessage){
that.canceled = true;
});
设置参数
// Setting a param value 设置参数
// ---------------------
ros.getParams(function(params) {
console.log(params);
});
// First, we create a Param object with the name of the param.
var maxVelX = new ROSLIB.Param({
ros : ros,
name : 'max_vel_y'
});
//Then we set the value of the param, which is sent to the ROS Parameter Server.
maxVelX.set(0.8);
maxVelX.get(function(value) {
console.log('MAX VAL: ' + value);
});
获取参数
// Getting a param value 获取参数
// ---------------------
var favoriteColor = new ROSLIB.Param({
ros : ros,
name : 'favorite_color'
});
favoriteColor.set('red');
favoriteColor.get(function(value) {
console.log('My robot\'s favorite color is ' + value);
});
获取urdf
获取urdf
// Get the URDF value from ROS.
var param = new ROSLIB.Param({
ros : ros,
name : 'robot_description'
});
param.get(function(param) {
// Setup the loader for the URDF.
var urdfModel = new ROSLIB.UrdfModel({
string : param
});
console.log(urdfModel);
});
创建tf
创建tf
// TF Client
// ---------
var tfClient = new ROSLIB.TFClient({
ros : ros,
fixedFrame : 'world',
angularThres : 0.01,
transThres : 0.01
});
// Subscribe to a turtle.
tfClient.subscribe('turtle1', function(tf) {
console.log(tf);
});
一个简单的数学示例,演示了在ROS JavaScript库(roslib.js)中使用ROS消息类型进行向量、四元数、姿态和变换的操作。
// Let's start by adding some vectors.
var v1 = new ROSLIB.Vector3({//创建一个Vector3类型的对象v1,并设置其x、y、z分量为1、2和3。
x : 1,
y : 2,
z : 3
});
var v2 = v1.clone();//使用clone方法创建v2,它是v1的副本
v1.add(v2);//使用add方法将v2添加到v1,修改了v1对象。
console.log(v1);//使用console.log打印输出v1对象。
// Now let's play with some quaternions.
var q1 = new ROSLIB.Quaternion({//创建一个Quaternion类型的对象q1,并设置其x、y、z和w分量为0.1、0.2、0.3和0.4。
x : 0.1,
y : 0.2,
z : 0.3,
w : 0.4
});
var q2 = q1.clone();//使用clone方法创建q2,它是q1的副本。
q1.multiply(q2);//使用multiply方法将q2乘以q1,修改了q1对象。
q1.invert();//使用invert方法将q1取反,修改了q1对象。
console.log(q1);//使用console.log打印输出q1对象。
// Let's copy the results into a pose.
var p = new ROSLIB.Pose({//代码创建了一个Pose对象p,其中包含了上述计算得到的v1和q1:
position : v1,
orientation : q1
});
console.log(p);
// Finally, let's play with some transforms.
var tf = new ROSLIB.Transform({//创建一个Transform类型的对象tf,并设置其translation为v2,rotation为q2。
translation : v2,
rotation : q2
});
p.applyTransform(tf);//使用applyTransform方法将tf应用于p,修改了p对象。
console.log(p);//使用console.log打印输出最终的p对象。
整体上,这段代码展示了ROS JavaScript库中的一些基本数学操作,包括向量的相加、四元数的乘法和取反,以及姿态和变换的应用。在JavaScript控制台中,您可以查看这些对象的输出结果。
二.克隆 EESC/USP Mobile Robotics Laboratory · GitHub/ros3djs项目
git clone https://github.com/RobotWebTools/ros3djs.git
运行test文件夹中的项目
在项目中安装相关的依赖项:
cd ros3djs
npm install chai eventemitter2
npm install -g mocha
执行:
mocha test/quaternion.test.js
报错:
Error: Not supported at Object.exports.doImport (/home/sukai/.nvm/versions/node/v10.19.0/lib/node_modules/mocha/lib/nodejs/esm-utils.js:35:41) at formattedImport (/home/sukai/.nvm/versions/node/v10.19.0/lib/node_modules/mocha/lib/nodejs/esm-utils.js:9:28) at Object.exports.requireOrImport (/home/sukai/.nvm/versions/node/v10.19.0/lib/node_modules/mocha/lib/nodejs/esm-utils.js:42:34) at Object.exports.loadFilesAsync (/home/sukai/.nvm/versions/node/v10.19.0/lib/node_modules/mocha/lib/nodejs/esm-utils.js:100:34) at Mocha.loadFilesAsync (/home/sukai/.nvm/versions/node/v10.19.0/lib/node_modules/mocha/lib/mocha.js:447:19) at singleRun (/home/sukai/.nvm/versions/node/v10.19.0/lib/node_modules/mocha/lib/cli/run-helpers.js:125:15) at exports.runMocha (/home/sukai/.nvm/versions/node/v10.19.0/lib/node_modules/mocha/lib/cli/run-helpers.js:190:10) at Object.exports.handler (/home/sukai/.nvm/versions/node/v10.19.0/lib/node_modules/mocha/lib/cli/run.js:370:11) at innerArgv.then.argv (/home/sukai/.nvm/versions/node/v10.19.0/lib/node_modules/mocha/node_modules/yargs/build/index.cjs:443:71) at process._tickCallback (internal/process/next_tick.js:68:7) at Function.Module.runMain (internal/modules/cjs/loader.js:834:11) at startup (internal/bootstrap/node.js:283:19) at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)
解决:
该错误表明Mocha不支持ES模块的导入。Mocha目前仅支持CommonJS模块的导入方式。
您在运行mocha test/quaternion.test.js
时遇到了该问题。解决此问题的一种方法是将测试文件的扩展名从.js
更改为.mjs
,这将指示Node.js以ES模块的方式加载该文件。
请按照以下步骤尝试修复该问题:
-
将测试文件
quaternion.test.js
的扩展名更改为.mjs
,即quaternion.test.mjs
。 -
修改测试文件中的导入语句:
- 将
require('chai').expect
修改为import { expect } from 'chai'
。 - 将
require('eventemitter2').EventEmitter2
修改为import EventEmitter2 from 'eventemitter2'
。 - 将
require('..')
修改为import ROSLIB from '..'
。
- 将
quaternion.test.js修改后quaternion.test.mjs的文件名
quaternion.test.mjs头部修改后的结果:
//var expect = require('chai').expect;
import { expect } from 'chai';
//var ROSLIB = require('..');
import ROSLIB from '..';
-
在终端中使用以下命令运行测试:
cd ros3djs
mocha --experimental-modules test/quaternion.test.mjs
运行结果:
Quaternion
creation
✔ should return an identity quaternion when no params are specified
✔ should return an identity quaternion when null is specified
✔ should return a quaternion matching the options hash
✔ should return a quaternion matching the options
conjugation
✔ should conjugate itself
5 passing (5ms)
运行了Mocha测试框架,并成功通过了5个测试用例的测试结果。
解释测试结果:
-
Quaternion
是测试套件的名称。 -
creation
是嵌套在Quaternion
测试套件中的一个子套件,用于测试创建四元数的功能。-
should return an identity quaternion when no params are specified
通过了该测试用例,它验证了当未指定任何参数时,创建的四元数是单位四元数(identity quaternion)。 -
should return an identity quaternion when null is specified
通过了该测试用例,它验证了当指定参数为null时,创建的四元数是单位四元数。 -
should return a quaternion matching the options hash
通过了该测试用例,它验证了通过选项哈希(options hash)创建的四元数与预期匹配。 -
should return a quaternion matching the options
通过了该测试用例,它验证了通过选项对象创建的四元数与预期匹配。
-
-
conjugation
是嵌套在Quaternion
测试套件中的另一个子套件,用于测试四元数的共轭功能。-
should conjugate itself
通过了该测试用例,它验证了对一个四元数执行共轭操作后,结果与预期一致。
-
总结: 这个测试运行了Quaternion
对象的几个功能的测试用例,并且所有的测试用例都通过了(passing
)。每个测试用例都有一个描述和一个检查条件,如果条件满足,那么该测试用例将通过。通过了所有的测试用例意味着在测试过程中,代码行为与预期一致。
三.克隆 GitHub - EESC-LabRoM/rosweb: Web based supervisory system for ROS rosweb 项目
git clone https://github.com/EESC-LabRoM/rosweb.git
安装依赖:
cd rosweb
npm install
报错:
Downloading binary from https://npm.taobao.org/mirrors/node-sass//v3.13.1/linux-x64-64_binding.node
Cannot download "https://npm.taobao.org/mirrors/node-sass//v3.13.1/linux-x64-64_binding.node":
HTTP error 404 Not Found
Hint: If github.com is not accessible in your location
try setting a proxy via HTTP_PROXY, e.g.
export HTTP_PROXY=http://example.com:1234
or configure npm proxy via
npm config set proxy http://example.com:8080
> node-sass@3.13.1 postinstall /home/sukai/workspace/roskaiyuanweb/rosweb/node_modules/node-sass
> node scripts/build.js
这个错误信息表示在尝试从https://npm.taobao.org/mirrors/node-sass//v3.13.1/linux-x64-64_binding.node
下载node-sass
的二进制文件时,服务器返回了404 Not Found错误。这通常意味着服务器上没有你尝试下载的文件。
这可能是因为你尝试安装的node-sass
版本(3.13.1)与你的Node.js版本不兼容。在错误信息中,它提到了"please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js",这可能意味着你需要更新你的node-sass
版本。
你可以尝试更新node-sass
到最新版本,或者至少到一个与你的Node.js版本兼容的版本。你可以使用以下命令来安装最新版本的node-sass
:
npm install node-sass@latest
如果你在package.json
文件中指定了node-sass
的版本,你可能需要在那里更新版本号。
另外,你也可以考虑使用dart-sass
代替node-sass
。dart-sass
是node-sass
的替代品,它是用Dart编写的,因此不需要二进制绑定,安装起来更容易。你可以使用以下命令来安装dart-sass
:
npm install sass
如果你选择使用dart-sass
,你需要在你的构建工具或脚本中替换node-sas
参考:rosbridge_suite入门教程-rosweb安装 - 创客智造/爱折腾智能机器人
cd rosweb
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装插件jshint
npm i gulp-jshint jshint
安装插件natives
npm i natives@1.1.6
控制台输入gulp
gulp
报错:
Command 'gulp' not found, but can be installed with:
sudo apt install gulp
这个错误表示你的系统中没有找到gulp
命令。gulp
是一个流行的JavaScript任务运行器,用于自动化开发工作流程,如编译、压缩、测试等。
错误消息建议你使用sudo apt install gulp
命令来安装gulp
,但这只会安装全局的gulp
命令,而不是项目级别的gulp
。
在大多数情况下,你应该使用npm来安装gulp
,而不是使用apt。你可以使用以下命令来全局安装gulp
:
npm install --global gulp-cli
这将安装gulp
命令行工具(gulp-cli
),你可以在任何地方使用gulp
命令。
然后,你需要在你的项目中安装gulp
。你可以使用以下命令来安装:
npm install --save-dev gulp
这将在你的项目中安装gulp
,并将其添加到你的package.json
文件的devDependencies
字段。
安装完成后,你应该能够在你的项目中使用gulp
命令了。如果你仍然无法使用gulp
命令,你可能需要检查你的PATH
环境变量,确保它包含了npm全局模块的路径。
控制台输入 gulp
gulp
[10:15:54] Using gulpfile ~/workspace/roskaiyuanweb/rosweb/gulpfile.js
[10:15:54] Starting 'html'...
[10:15:54] Starting 'ts'...
[10:15:54] Starting 'sass'...
[10:15:54] Starting 'sass_wdgt'...
[10:15:54] Starting 'img'...
[10:15:54] Starting 'hbs'...
[10:15:54] Finished 'hbs' after 11 ms
[10:15:54] Starting 'jsl'...
[10:15:54] Starting 'wdgt'...
[10:15:54] Starting 'wdgt_ts'...
[10:15:54] Starting 'start'...
[10:15:54] Webserver started at http://0.0.0.0:8000
[10:15:54] Finished 'start' after 3.5 ms
[10:15:55] Finished 'html' after 740 ms
[10:15:55] Finished 'sass' after 731 ms
[10:15:55] Finished 'sass_wdgt' after 884 ms
[10:15:55] Finished 'jsl' after 898 ms
[10:15:55] Finished 'wdgt_ts' after 901 ms
[10:15:55] Finished 'ts' after 982 ms
[10:15:55] Finished 'img' after 971 ms
[10:15:55] Finished 'wdgt' after 960 ms
[10:15:55] Starting 'build'...
[10:15:55] Finished 'build' after 26 μs
[10:15:55] Starting 'default'...
[10:15:55] Finished 'default' after 732 ns
你运行的gulp
命令正在执行一系列的任务,包括编译TypeScript(ts
任务)、编译Sass(sass
任务)、处理图片(img
任务)、处理JavaScript(jsl
任务)等。这些任务都已经完成了。
然后,gulp
启动了一个Web服务器(start
任务),并在http://0.0.0.0:8000
上运行。这个Web服务器会持续运行,直到你停止gulp
命令。这就是为什么看起来像是gulp
命令"卡住"了。
实际上,gulp
并没有卡住,它正在运行Web服务器。你可以在浏览器中访问http://localhost:8000
(或者你的机器的IP地址,如果你在其他机器上),你应该能看到你的Web应用。
如果你想停止Web服务器,你可以在命令行中按Ctrl+C
。这将停止gulp
命令,包括它启动的Web服务器。
nginx安装
下载地址:http://nginx.org/en/download.html
选择Windows最新稳定版下载,浏览器下载很慢,建议复制下载链接迅雷下载
1. ubuntu 安装 nginx
sudo apt-get install nginx
配置nginx(1)
- 编译完成生产dist目录,拷贝到nginx的html目录
- 假设nginx的默认目录在/var/www/html,删除html目录
- 假设rosweb在~/rosweb, 拷贝
cp -r ~/rosweb/dist /var/www/html
- 访问http://localhost即可
或者修改配置文件:
sudo gedit /etc/nginx/sites-enabled/default
找到 root /var/www/html; 改:
root /home/sukai/workspace/roskaiyuanweb/rosweb/dist;
重启 nginx:
sudo service nginx restart
你可以使用curl
或wget
命令来下载文件。这些命令在大多数Unix-like系统(如Linux和macOS)中都可用。
以下是使用curl
下载文件的命令:
curl -O http://static.robotwebtools.org/threejs/current/three.min.js
或者
curl -O https://github.com/mrdoob/three.js/blob/master/build/three.min.js
以下是使用wget
下载文件的命令:
wget http://static.robotwebtools.org/threejs/current/three.min.js
或者
wget https://github.com/mrdoob/three.js/blob/master/build/three.min.js
这些命令将会下载three.min.js
文件到你当前的工作目录。
如果你在Windows系统上,你可能需要安装额外的软件来运行这些命令。你也可以直接在浏览器中打开这个链接,然后右键点击页面,选择"保存为"来下载文件。
修改文件:
/home/sukai/workspace/roskaiyuanweb/rosweb/dist
<!--
<script type="text/javascript" src="http://static.robotwebtools.org/EventEmitter2/0.4.14/eventemitter2.min.js"></script>
<script type="text/javascript" src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
-->
改:
<script src="js/eventemitter2.js"></script>
<script src="js/roslib.min.js"></script>
<!--<script type="text/javascript" src="http://static.robotwebtools.org/threejs/current/three.min.js"></script>
<script type="text/javascript" src="http://static.robotwebtools.org/ros3djs/current/ros3d.min.js"></script>-->
改
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/ros3d.min.js"></script>
游览器访问nginx地址:(我配置了端口号9001,你们自己不配置的话是默认80)
http://localhost:9001/
四.克隆 https://github.com/dheera/rosboard.git
rosboard
cd /home/sukai/workspace/roskaiyuanweb/rosboard
./run
游览器登入:
http://localhost:8888/
五.克隆git clone https://github.com/pantor/ros-control-center.git
ros-control-center
cd ros-control-center
npm install
mpm start
访问:
http://localhost:4200
用官网地址体验
http://pantor.github.io/ros-control-center/dashboard
加载速度慢,需要等!
这个项目叫做 "ROS Control Center",是一个用于控制运行ROS(Robot Operating System)的机器人的网络控制中心。它在浏览器中运行,使用websocket连接和RobotWebTools的roslibjs。
以下是该项目的主要功能:
- 显示节点,主题和服务名称。
- 订阅和发布消息。
- 调用服务。
- 显示和更改参数。
此外,它还实现了一些其他功能,如控制台(默认为rosout)输出,电池状态视图,摄像头流视图,以及为了更好的可用性而设计的高级模式。
要在你的ROS机器人上使用这个控制中心,你需要运行Robot Web Tools的rosbridge_suite。然后在同一网络中的任何计算机上运行控制中心。在设置选项卡中,你需要输入你的机器人的IP地址和端口。然后打开控制选项卡并重新加载。
ROS Control Center支持通过web_video_server包的图像和摄像头流。如果相机和相机信息消息按照web_video_server的标准发布,那么流将会在设置中显示。
对于你自己的自定义消息和服务类型,你可以下载这个仓库并通过控制台中的http-server启动一个服务器。然后,在浏览器中导航到index.html。你可以将个别的html模板添加到app/topics/或app/services/文件夹中。你的文件的路径必须对应ROS服务或消息类型的名称。
在右侧边栏显示日志输出(默认为rosout)。在左侧,显示组名。ROS主题,服务和参数可以被分组,以便更好的概览。
在右下角,可以显示一个电池状态条;电池主题可以在设置选项卡中调整。
ROS Control Center依赖于Angular作为通用的JavaScript和路由框架,Bootstrap用于设计,roslib.js用于ROS连接。文章来源:https://www.toymoban.com/news/detail-613534.html
该项目采用BSD许可证发布。文章来源地址https://www.toymoban.com/news/detail-613534.html
Robot Web Tools社区的网址 https://github.com/robotwebtools https://robotwebtools.github.io git clone https://github.com/pantor/ros-control-center.git git clone https://github.com/EESC-LabRoM/rosweb.git git clone https://github.com/dheera/rosboard.git git clone https://github.com/RobotWebTools/ros3djs.git git clone https://github.com/RethinkRobotics-opensource/rosnodejs.git git clone https://github.com/cruise-automation/rosbag.js.git git clone https://github.com/RobotWebTools/ros2djs.git git clone https://github.com/RobotWebTools/roslibjs.git git clone https://github.com/RobotWebTools/rclnodejs.gitgit clone https://github.com/RobotWebTools/rosbridge_suite.git
到了这里,关于rosweb使用,roslibs使用,ros2djs,ros3djs具体使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!