Homepage
Centralization of resources in the web itself, replacing the old and obsolete "Package List" with a whole new UI/UX experience
Motivation
The biggest motivation for the development of a Homepage was the centralization of all the features that touch a Clover swarm that we developed in an easy and responsive way, in this case, by the browser itself. When we talk about simplifying a project for an inexperienced user in the field of drones (and especially with swarms), it is very important to think about how easy it will be for him to have access to the available resources.
Therefore, most of our efforts were focused on the web, with access through the browser itself, thus ensuring that any user who is not widely familiar with the linux environment will have several easily accessible tools in their hands. Such as the Swarm Station and the Blocks Programming IDE that we will discuss further.
Thinking about the initial stage of localhost for the pure Clover package, the page actually showed very useful features (like the block programming itself, the web terminal, the 3d visualization), however, there was no involvement with the UI/UX, or that is, the resources were not accessible to the lay user. Therefore, our first step was to centralize everything on a single page, our Homepage, from which the user can access the resources they want. And from there, we can show you our work on the other resources.
Initialization
The Homepage is available from the port hosted by Apache, i.e. it will be visible from your browser (Mozilla Firefox is recommended) by typing Localhost in the search bar. for each type of installation, this startup will be different:
Virtual Machine (VM): Boot is ready, just open the localhost port
Native installation: If you have not run any command like "roslaunch...", you need to do this at least once to ensure that the folder containing the Homepage is updated. To do this, run the command below in terminal to make sure (take advantage and check if the gazebo and clover Launch is all right):
In case even with the above command it runs successfully and the localhost port does not open the package list, we recommend following the Apache Troubleshooting. Note that if you've already made some changes to your Apache configuration file, you might have some problems with this localhost configuration. For this, we recommend, if possible, uninstall Apache and install it again with the original configuration that we described in the Installation topic.
Interface
As stated earlier, the entire Package List interface has been reworked to make it more user-friendly and intuitive, below is a comparison of the localhost port before and after the changes to improve the Swarm in Blocks experience.
As you can see, the difference in aesthetic terms is huge, a big improvement in the visual identity of the project. It is worth noting that the page was made inReactJS and has portability for mobile devices. Its main objective is to gather the main information and packages that the user may need in a simple page, however, highly centralized and important.
Packages
The Packages traditionally available through the Package List are 3: Clover Blocks, Swarm Clover Blocks and Clover Kit Tools. The first and the last were already available in the original project, we just worked on a visual improvement to access them, in addition, we added the Swarm Clover Blocks which is the heart of the Swarm in Blocks blocks programming project.
Clover Kit Tools gave way to our dear Swarm Station! In terms of improved accessibility and usability, the difference is striking. Starting from a simple list of features, we now, through the swarm station, have a real station for handling swarms of drones. It provides the main features that the user might need in an extremely intuitive and responsive environment (since everything is developed in rosjs).
The packages in detail are (with the commented workarounds we've made):
Clover Blocks: Block programming tool from pure Blockly (without any Swarm function);
Swarm Clover Blocks: Improvement of Clover Blocks, including blocks already created with Swarm functions in an easy and intuitive way, in addition to visual improvements for using the site such as:
Rework of the visual identity (colors, themes, dimensions, etc.);
Implementation of Night Mode to improve the programming experience at any time of day;
Creation of the Launch Button that provides the command to launch the terminal automatically;
Clover Kit Tools: Page with several tools for using Clover including: Documentation, ROS topics, ros3djs, camera images, blockly and etc.
Swarm Station: Complete rework on Clover Kit Tools, now on its own station. Counting not only with the features that were listed in the Tools Kit, but many new features implemented, such as the safe area, raspberry data and much more. Our work can be summarized in:
3D visualization;
Land All emergency buttom;
Information about Clovers (connectivity status, telemetry, battery, raspberry data etc);
List of topics for easy access to topics running on ROS;
Multiple web terminals available at the same time;
Safe area delimitation for safe flight.
With all that said, let's dive into Swarm Clover Blocks and its power!
Last updated
