小蓝xlanll

这个屌丝很懒，什么也没留下！

热门标签

rosweb使用，roslibs使用，ros2djs，ros3djs具体使用_ros web

作者：小蓝xlanll | 2024-02-18 12:01:18

踩

ros web

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连接。

该项目采用BSD许可证发布。

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/107762?site