Clover

Work with ROS from browser

Using the roslibjsopen in new window library it's possible to work with all the ROS resources (topics, services, parameters) from JavaScript code within the browser, which allows creating various interactive web applications for drone.

All the required software is preinstalled in RPi image for Clover.

Example

An example of a web page, working with roslib.js:

<html>
	<script src="js/roslib.js"></script>
	<script type="text/javascript">
		// Establish roslibjs connection
		var ros = new ROSLIB.Ros({ url: 'ws://' + location.hostname + ':9090' });

		ros.on('connection', function () {
			// Connection callback
			alert('Connected');
		});
		
		// Declare get_telemetry service client
		var getTelemetry = new ROSLIB.Service({ ros: ros, name : '/get_telemetry', serviceType : 'clover/GetTelemetry' });

		// Call get_telemetry
		getTelemetry.callService(new ROSLIB.ServiceRequest({ frame_id: 'map' }), function(result) {
			// Service respond callback
			alert('Telemetry: ' + JSON.stringify(result));
		});

		// Subscribe to `/mavros/state` topic
		var stateSub = new ROSLIB.Topic({ ros : ros, name : '/mavros/state', messageType : 'mavros_msgs/State' });
		stateSub.subscribe(function(msg) {
			// Topic message callback
			console.log('State: ', msg);
		});
	</script>
</html>

Taking off, landing and all the rest operations can be implemented in a similar way.

The page should be placed in the /home/pi/catkin_ws/src/clover/clover/www/ directory. After that, it will be available at http://192.168.11.1/clover/<page_name>.html. When the page is opened, browser should show an alert with the drone telemetry and constantly print the state of the flight controller to the console.

See additional information in roslibjs tutorialopen in new window.

Web GCS

See an example of simplified web ground control station on Clover at http://192.168.11.1/clover/gcs.htmlopen in new window.