UI

1. Overview

In order for the user to communicate with the robotic device, most of them will include an interactive screen or even a remote mobile App. 

For example, Gary robot has a touch screen located in Gary’s upper body.

There are two ways to develop the UI:

1. Develop your own web application (using React.js for example), and use the communication controller for connecting the frontend design to the robotic device (or develop your own server).

2. Using the UI controller: Our UI controller provides ready-to-use screens that allow any Python developer to display an amazing UI, by just calling a single method! Also the communication to handle user's feedbacks is included in this controller.

Let’s take a look at the following diagram:

1. On our python code, we are calling display_modal() function, passing relevant data like the title of the modal and confirmation button text. The application will wait for a response from the user.
2. The modal UI component is displayed on the chest system.
3. Once the user performs some action (closing the modal or pressing any of the buttons), the information is sent back to the python code.
4. We can read the action performed by the user and continue with the business logic.

2. Using the controller

Creating the controller in your app:

from raya.application_base import RayaApplicationBase

class RayaApplication(RayaApplicationBase):
    async def setup(self):
        ...
        self.UI = self.enable_controller('ui')
        ...

The controller includes several methods (each method display another UI component):

• display_modal()
• display_screen()
• display_action_screen() - call to action
• display_input_modal()
• display_choice_selector()

3. Examples & More info

• UI Controller general example

We extremely encourage you to visit our UI-KIT website. There you will find all the relevant information for all the components and a lot of examples.

Visit UI Kit center