Delve into the Leo Rover’s unique user interface.
Leo Rover is like no other mobile robotic platform. Just take a look at the design and you’ll see it’s different from the rest of the rovers out there. But the differences reach way beyond the looks. In this article, we’ll check out the robot’s unique user interface.
Believe it or not – not all rovers on the market have their own UI. Fortunately, Leo Rover does. Here’s what it looks like when you launch it on your computer:
As the photo shows, the Leo Rover's interface allows you to see the world through the robot’s "eyes" thanks to the streaming from its front camera. At your disposal, there’s a joystick (the round shape in the bottom right corner) with which you can steer the rover, as well as the turn off and reboot buttons among other things. We’ll get to all that in a sec :).
The best part is that the Leo Rover’s interface is open-source and easily compatible and adaptable with other robots. And its array of functionalities (some of them already mentioned) makes it truly unique. Let’s take a closer look at what they are.
One of the unique features in the rover's UI is that you don't need any app to fire up the interface when you turn on your rover. Just connect to its WiFi access point and open the UI remotely. This is thanks to the fact that the Leo Rover’s user interface is built into the structure of the robot’s software. There’s an HTTP server set up on the rover that hosts the webpage. You have access to it once you connect to the rover’s network, that is, to its access point. Just type the rover's IP address – ‘10.0.0.1’ – in any web browser and you’ll be able to load the page. In other words, the UI in the Leo Rover is a regular webpage hosted on the robot. Thanks to such a solution, you don't have to install anything on your device to fire up the Leo Rover’s interface.
The UI in the Leo Rover robotic platform is responsive on any device. This means that the layout of the content automatically adjusts to the size of the screen it’s displayed on. Thus, whether you’re using your phone, tablet or computer, the rover’s interface should work just fine in every case (if it doesn’t, let us know about it at contact@fictionlab.pl :)).
The major feature of the Leo Rover’s UI is that it provides default streaming from the camera. The moment you launch the interface, there’s an image from the rover’s camera along with the ability to control the vehicle – all after just taking the robot out of the box.
Once the interface is up and running, you can control your Leo Rover with either the keyboard or the virtual joystick displayed on the screen. You can operate the joystick by using a mouse, or if you’ve launched the UI on a mobile device, by touching the joystick on the screen.
In the Leo Rover’s user interface, you can also read the battery voltage and either reboot or turn off the robot with the two buttons presented on the screen.
What’s more, you’ll be happy to know that the UI code is simple and readable enough that anyone can edit it.
This means you can add a lot of new functionalities to the UI, for instance, to the servo sliders that can be displayed in the interface. An example could be connecting an LED to the rover and controlling its brightness level with a servo slider.
Now, let’s take a look under the hood. When it comes to the interface itself, it’s built based on the three standard web technologies: HTML, CSS and JavaScript.
For the interface’s responsiveness to work, we used Bootstrap. It’s an extensible, front-end framework that provides ready-made elements for developing responsive websites. This is the part of the UI that’s visible – the front-end.
As for what we don’t see, for example, the information sent from the UI’s joystick, it’s on the back-end of the interface’s webpage. For this communication between the Leo Rover and the UI’s webpage, we use roslib.
Roslib is a JavaScript library that facilitates the use, enables quick node scripting, as well as interactive debugging of a running ROS system. It allows for the communication via Websocket transport layers with a package running on the rover – rosbridge server. As of now, the communication between the Leo Rover and the interface is mainly based on teleoperation.
For the video feed from the camera, we use a ROS package that takes an image from a standard ROS message which stores it. And then, with the use of the ROS web_video_server, the image is converted so that it can be displayed on the interface.
If this user interface is something you’d like to launch on another robot, you’ll be able to do that after some tinkering with it. Go to the Leo Rover UI’s repository for more technical information. For example, with the Leo Rover’s UI, you can remap the rosbridge server to another robot. We would love to see you do that and be happy to help with advice :). Choose the support channel that works best for you from the ones listed here if you need guidance.
And if you want to learn more about the mobile vehicle and the possibilities behind it, check out the latest features we developed for the stock Leo Rover.