msadowski/1.js

## 1.js
  var ros = new ROSLIB.Ros({
    url : 'ws://localhost:9090'
  });

## 2.js
  ros.on('connection', function() {
    document.getElementById("status").innerHTML = "Connected";
  });

## build.sh
cd ~/catkin_ws/
catkin build # or catkin_make
source devel/setup.bash
roslaunch robot_gui_bridge websocket.launch

## gui_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<script type="text/javascript" src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>

<script type="text/javascript" type="text/javascript">
  var ros = new ROSLIB.Ros({
    url : 'ws://localhost:9090'
  });

  ros.on('connection', function() {
    document.getElementById("status").innerHTML = "Connected";
  });

  ros.on('error', function(error) {
    document.getElementById("status").innerHTML = "Error";
  });

  ros.on('close', function() {
    document.getElementById("status").innerHTML = "Closed";
  });
</script>
</head>

<body>
  <h1>Simple ROS User Interface</h1>
  <p>Connection status: <span id="status"></span></p>
  <p>Last /txt_msg received: <span id="msg"></span></p>
</body>
</html>

## info.sh
[INFO] [1561100304.196110]: Rosbridge WebSocket server started on port 9090

## joy.js
    createJoystick = function () {
      var options = {
        zone: document.getElementById('zone_joystick'),
        threshold: 0.1,
        position: { left: 50 + '%' },
        mode: 'static',
        size: 150,
        color: '#000000',
      };
      manager = nipplejs.create(options);

      linear_speed = 0;
      angular_speed = 0;

      self.manager.on('start', function (event, nipple) {
        console.log("Movement start");
      });

      self.manager.on('move', function (event, nipple) {
        console.log("Moving");
      });

      self.manager.on('end', function () {
        console.log("Movement end");
      });
    }
    window.onload = function () {
      createJoystick();
    }

## joy_div.html
  <div id="zone_joystick" style="position: relative;"></div>

## joy_end.js
manager.on('end', function () {
  if (timer) {
    clearInterval(timer);
  }
  self.move(0, 0);
});

## joy_move.js
manager.on('move', function (event, nipple) {
  max_linear = 5.0; // m/s
  max_angular = 2.0; // rad/s
  max_distance = 75.0; // pixels;
  linear_speed = Math.sin(nipple.angle.radian) * max_linear * nipple.distance/max_distance;
  angular_speed = -Math.cos(nipple.angle.radian) * max_angular * nipple.distance/max_distance;
});

## joy_script.html
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/nipplejs/0.7.3/nipplejs.js"></script>

## joy_start.js
manager.on('start', function (event, nipple) {
  timer = setInterval(function () {
    move(linear_speed, angular_speed);
  }, 25);
});

## launch.sh
mkdir ~/catkin_ws/src/robot_gui_bridge/launch
touch ~/catkin_ws/src/robot_gui_bridge/launch/websocket.launch

## launch.xml
<launch>
  <include file="$(find rosbridge_server)/launch/rosbridge_websocket.launch"/>
</launch>

## listen.js
  var txt_listener = new ROSLIB.Topic({
    ros : ros,
    name : '/txt_msg',
    messageType : 'std_msgs/String'
  });

  txt_listener.subscribe(function(m) {
    document.getElementById("msg").innerHTML = m.data;
  });

## pub.js
  cmd_vel_listener = new ROSLIB.Topic({
    ros : ros,
    name : "/cmd_vel",
    messageType : 'geometry_msgs/Twist'
  });

  move = function (linear, angular) {
    var twist = new ROSLIB.Message({
      linear: {
        x: linear,
        y: 0,
        z: 0
      },
      angular: {
        x: 0,
        y: 0,
        z: angular
      }
    });
    cmd_vel_listener.publish(twist);
  }

## test_pub.js
  txt_listener.subscribe(function(m) {
    document.getElementById("msg").innerHTML = m.data;
    move(1, 0);
  });

## workspace.sh
mkdir -p ~/catkin_ws/src
cd ~/catkin_ws/src
catkin create pkg robot_gui_bridge --catkin-deps rosbridge_server
cd ~/catkin_ws
rosdep install --from-paths src --ignore-src -r -y
	ros.on('connection', function() {
	document.getElementById("status").innerHTML = "Connected";
	});
	cd ~/catkin_ws/
	catkin build # or catkin_make
	source devel/setup.bash
	roslaunch robot_gui_bridge websocket.launch
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />

	<script type="text/javascript" src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>

	<script type="text/javascript" type="text/javascript">
	var ros = new ROSLIB.Ros({
	url : 'ws://localhost:9090'
	});

	ros.on('connection', function() {
	document.getElementById("status").innerHTML = "Connected";
	});

	ros.on('error', function(error) {
	document.getElementById("status").innerHTML = "Error";
	});

	ros.on('close', function() {
	document.getElementById("status").innerHTML = "Closed";
	});
	</script>
	</head>

	<body>
	<h1>Simple ROS User Interface</h1>
	<p>Connection status: <span id="status"></span></p>
	<p>Last /txt_msg received: <span id="msg"></span></p>
	</body>
	</html>
	createJoystick = function () {
	var options = {
	zone: document.getElementById('zone_joystick'),
	threshold: 0.1,
	position: { left: 50 + '%' },
	mode: 'static',
	size: 150,
	color: '#000000',
	};
	manager = nipplejs.create(options);

	linear_speed = 0;
	angular_speed = 0;

	self.manager.on('start', function (event, nipple) {
	console.log("Movement start");
	});

	self.manager.on('move', function (event, nipple) {
	console.log("Moving");
	});

	self.manager.on('end', function () {
	console.log("Movement end");
	});
	}
	window.onload = function () {
	createJoystick();
	}
	manager.on('end', function () {
	if (timer) {
	clearInterval(timer);
	}
	self.move(0, 0);
	});
	manager.on('move', function (event, nipple) {
	max_linear = 5.0; // m/s
	max_angular = 2.0; // rad/s
	max_distance = 75.0; // pixels;
	linear_speed = Math.sin(nipple.angle.radian) * max_linear * nipple.distance/max_distance;
	angular_speed = -Math.cos(nipple.angle.radian) * max_angular * nipple.distance/max_distance;
	});
	manager.on('start', function (event, nipple) {
	timer = setInterval(function () {
	move(linear_speed, angular_speed);
	}, 25);
	});
	mkdir ~/catkin_ws/src/robot_gui_bridge/launch
	touch ~/catkin_ws/src/robot_gui_bridge/launch/websocket.launch
	<launch>
	<include file="$(find rosbridge_server)/launch/rosbridge_websocket.launch"/>
	</launch>
	var txt_listener = new ROSLIB.Topic({
	ros : ros,
	name : '/txt_msg',
	messageType : 'std_msgs/String'
	});

	txt_listener.subscribe(function(m) {
	document.getElementById("msg").innerHTML = m.data;
	});