rosweb使用,roslibs使用,ros2djs,ros3djs具体使用

这篇具有很好参考价值的文章主要介绍了rosweb使用,roslibs使用,ros2djs,ros3djs具体使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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();

            }


        });

rosweb,ros,rosweb,roslibs,ros2djs,ros3ds

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模块的方式加载该文件。

请按照以下步骤尝试修复该问题:

  1. 将测试文件quaternion.test.js的扩展名更改为.mjs,即quaternion.test.mjs

  2. 修改测试文件中的导入语句:

    • 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 '..';
  1. 在终端中使用以下命令运行测试:

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-sassdart-sassnode-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
 

你可以使用curlwget命令来下载文件。这些命令在大多数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/

rosweb,ros,rosweb,roslibs,ros2djs,ros3ds

rosweb,ros,rosweb,roslibs,ros2djs,ros3ds

 rosweb,ros,rosweb,roslibs,ros2djs,ros3ds

四.克隆 https://github.com/dheera/rosboard.git

 rosboard

cd /home/sukai/workspace/roskaiyuanweb/rosboard
./run

游览器登入:

http://localhost:8888/

rosweb,ros,rosweb,roslibs,ros2djs,ros3ds

rosweb,ros,rosweb,roslibs,ros2djs,ros3ds

五.克隆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

rosweb,ros,rosweb,roslibs,ros2djs,ros3ds

 加载速度慢,需要等!

rosweb,ros,rosweb,roslibs,ros2djs,ros3ds

这个项目叫做 "ROS Control Center",是一个用于控制运行ROS(Robot Operating System)的机器人的网络控制中心。它在浏览器中运行,使用websocket连接和RobotWebTools的roslibjs。

以下是该项目的主要功能:

  1. 显示节点,主题和服务名称。
  2. 订阅和发布消息。
  3. 调用服务。
  4. 显示和更改参数。

此外,它还实现了一些其他功能,如控制台(默认为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许可证发布。文章来源地址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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ROS2 Humble如何使用串口驱动?(Serial)

    目录 1. 串口库(Serial Library)简介: 2.  源码及主页 3.  国内git仓库(ROS2 humble已测试可用) 4. 可能出现的问题

    2024年02月16日
    浏览(42)
  • STM32 使用microros与ROS2通信

    本文主要介绍如何在STM32中使用microros与ROS2进行通信,在ROS1中标准的库是rosserial,在ROS2中则是microros,目前网上的资料也有一部分了,但是都没有提供完整可验证的demo,本文将根据提供的demo一步步给大家进行演示。 1、首先如果你用的不是STM32F4的话,则需要自己去生成 micro_r

    2024年02月08日
    浏览(46)
  • 【ROS2指南-19】使用Launch启动/监控多个节点

    ROS 2 中的启动系统负责帮助用户描述他们系统的配置,然后按照描述执行。系统的配置包括要运行的程序、运行它们的位置、传递给它们的参数以及 ROS 特定约定,这些约定通过为它们提供不同的配置,使得在整个系统中重用组件变得容易。它还负责监视已启动流程的状态,

    2023年04月15日
    浏览(69)
  • 【ROS2机器人入门到实战】Colcon使用进阶

    当前平台文章汇总地址:ROS2机器人从入门到实战 获取完整教程及配套资料代码,请关注公众号鱼香ROS获取 教程配套机器人开发平台:两驱版| 四驱版 为方便交流,搭建了机器人技术问答社区:地址 fishros.org.cn 基础篇中小鱼带你用gcc编译了ROS2节点。对你来说,使用CMake(GC

    2024年02月02日
    浏览(56)
  • windows10中安装和使用ROS2+python

    ROS称为机器人操作系统,是开发智能机器人的极具生产力的工具,主要用于仿真验证、代码部署。ROS已经从ROS1发展到ROS2,而ROS2才真正实现了分布式通信。如果现在开始学的话,建议最好直接上手ROS2。ROS2支持多开发语言,当然了,在算法开发语言中,Python绝对是一个最佳的

    2024年02月10日
    浏览(41)
  • ROS2 use_sim_time 使用问题

    在默认的情况下, use_sim_time 在 rclcpp 客户端下为 false ,rclcpp 客户端库将使用计算机的系统时钟作为时间源。如果将 use_sim_time 设置为 true , 则 rclcpp 客户端库使用模拟时钟,这时可以使用仿真系统,或者回放记录的数据,方便应用层调试,增加代码开发的灵活性。 为了支持这

    2024年02月09日
    浏览(46)
  • 【ROS2机器人入门到实战】使用RCLCPP编写节点

    当前平台文章汇总地址:ROS2机器人从入门到实战 获取完整教程及配套资料代码,请关注公众号鱼香ROS获取 教程配套机器人开发平台:两驱版| 四驱版 为方便交流,搭建了机器人技术问答社区:地址 fishros.org.cn 节点需要存在于功能包当中、功能包需要存在于工作空间当中。所

    2024年02月02日
    浏览(100)
  • 【ROS2机器人入门到实战】使用API进行导航

    当前平台文章汇总地址:ROS2机器人从入门到实战 获取完整教程及配套资料代码,请关注公众号鱼香ROS获取 教程配套机器人开发平台:两驱版| 四驱版 为方便交流,搭建了机器人技术问答社区:地址 fishros.org.cn Navigation 2 对外提供了动作服务用于导航调用。动作通信是 ROS 2 四

    2024年02月03日
    浏览(49)
  • ubuntu22.04,ros2使用自带opencv读取图片

    从网上找了很久的ros2如何使用自带的opencv库或者自定义安装opencv库的教程,自己看的云里雾里的,跟着配置走下来依旧是不能使用,出现的最多的问题,就是找不到头文件或者undefined reference to \\\'cv::imread(std::cxxll::basic stringchar, std::char traits, std::allocator const, int)\\\'这一类的未定义

    2024年02月10日
    浏览(51)
  • ROS2 库包设置和使用 Catch2 进行单元测试

            本文的目的是了解如何在 ROS2 中创建库,以供其他 ROS2 包使用。除此之外,本文还介绍了如何使用 catch2 框架编写单元测试。本文的第 

    2024年02月07日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包