Frontend Using the UI

Using the UI

All the command on this page are also present in the README.md file of the frontend folder and as the main page of the frontend code documentation.

Modes

The UI can be use in 2 modes, development and production.

Development Mode

With vue-cli-service, it is possible to start a webpack server that will host the UI allowing developpers to program in "real-time" (the code is rebuild on file save) and allow debugging using the vue-devtool. To serve the UI, use the following command :

npm run serve

This will start the webpack server and allow you to see the current web page on you local machine.

Production Mode

To enter production, the code needs to be build using the following command :

npm run build

This will bundle (and minimize) the code and place it in a folder name dist in the frontend folder. A server can be pointed to this resource folder to serve the web page.

The application

Using the application is pretty straight forward, start the application and access it using a chrome base browser. By default, opening a page should connect you automatically to the easyrtc server and its room. To connect to a robot, use the Connect to Robot menu in the top right to list robots that are present in the room and click on one in the list to connect to it. A yellow spinner will appear indicating that it's trying to connect, on a successful connection the spinner will be replace by a green tag with the text "connected". To disconnect, click on the connected robot in the list.

Notes : The following pages can only be use if you are connected to a robot or else most features are disabled.

The teleoperation page

The teleoperation page is the by default page where you are directed when first accessing the application. This pages allow you to operate the robot through the easyrtc server using the data channels that is open between an operator and the robot. When connected to a robot, 2 video should be shown, one is the camera of the robot and the other the map. If you want to operate the robot, use the switch next to the joystick to activate it and use your mouse to manipulate it.

The patrol planner page

When connected, the robot map will be shown in the right box, you can click anywhere on the map to add waypoints. Those waypoint will then be listed in the upper table on the left. This table allows to remove unwanted waypoint from the list. You can also clear the entire list or send it the robot. When sending it, the robot should try and follow the directive received. The path that those waypoints forms is called a patrol. You can use the other table to save a patrol or load one that you previously saved.

As noted before in the project state, there is no database currently set to save or load a patrol.

Other tools

Linter

To be sure every developers use the same syntax and general programming rules, we use ESLint. We use the airbnb rule sets with the vue plugin for ESLint. We changed a few rules from the other sets our convenience. To run the linter to check and auto fix problems, enter the following command :

npm run lint

Documentation

For the documentation of the code, we use JSDoc. JSDoc reads the comments in the code and looks for specific tags to generate the docs. In the case of .vue files, we currently use jsdoc-vuejs, but it is missing some options like the documentation of hooks in single file component, so we might fork the repo or the jsdoc-vue repo to add the wanted options eventually. To generate the documentation, enter the following command :

npm run docs

This will generate the documentation and place it in the docs folder of the project.