A mobile robot’s UI like no other

Delve into the Leo Rover’s unique user interface.

July 22, 2022

by

Aleksandra Szczepaniak

Leo Rover's 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.

The uniqueness of the Leo Rover’s UI

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:

Leo Rover’s interface launched in a computer’s browser
Leo Rover’s interface launched in a computer’s browser

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.

Webpage construct

One of the unique features in the rover UX is that you don't need any app to fire up the interface when you turn on the rover. Just connect to its wifi access point and open the UI remotely. It’s 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 a Leo Rover is a regular webpage hosted on the rover. Thanks to such a solution, you don't have to install anything on your device to fire up the Leo Rover’s interface.

Responsiveness

Leo Rover's UI on a tablet

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, tell us at contact@fictionlab.pl :)).

Leo Rover's UI launched on a smartphone
Leo Rover’s interface launched on a smartphone

Video streaming

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.

Touchscreen control

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, touching the joystick on the screen.

Additional functionalities

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.

Leo Rover's interface's code
Several example lines of the UI’s code in JavaScript

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.

Leo Rover’s UI displaying the battery voltage, the reboot and turn off buttons, and servo sliders
Leo Rover’s UI displaying the battery voltage, the reboot and turn off buttons, and servo sliders

The interface’s guts

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 a Leo Rover and the UI’s webpage, we use roslib.

Leo Rover’s UI communication scheme
Leo Rover’s UI communication scheme

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 a 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.

Keep discovering what Leo Rover has to offer

If this interface is something you’d like to launch on another robot, you’ll be able to do that after a short while of tinkering. 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 a stock Leo Rover.

Want to see more posts like that?

Subscribe to stay informed.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

See more blog posts:

<- get back to the Blog