Frontend Introduction

The app is using React and TypeScript, and it’s developed based on this example app from farm-ng.

Useful links:

Developing Custom Applications

Custom Applications Manifest

Custom Apps / Services Troubleshooting

Monitor App

How to test the app on the BenchBot

Get access to the BenchBot

If you haven’t got access to the brain, please read this article first and follow the instructions to get your access to brain:

Access and Develop on the Brain

Run the app on the BenchBot

When ever make any changes on the frontend, first make sure the brain has the latest changes (either develop directly on the brain or use git pull to get changes), then run following command on front_end folder:

This script would start building the frontend with latest changes. After that just click the BenchBot App button on the brain to start the app.

Sometimes the latest changes may not get updated on the brain, you might need to reboot the brain to get the updates.

Show app logs

Run the following command to show a full list of logs of the app.

How to contribute to the frontend:

First please ask for access to the GitHub repository, then download the repo using following command:

After download the code, please switch to develop branch to get up-to-date changes.

Start the app on your local

Using these commands to start the app on your local:

Folder Structure:

You’ll see 3 folders under the repo which are brain_api, front_end, and mini_computer_api. The front_end folder contains codes for the frontend.

Pages:

There are 4 main pages for the app temporarily.

Manual Control page:

This page is for manually control the BenchBot to move on a single axis, move to a specific given location, or test taking image functionality.

Given X, Y, Z value in the textbox, click ‘+X’ to move the BenchBot left and ‘-X’ to move right, same as Y and Z axis. All of the moves will be logged out in the logs text field.

Camera Config page:

This page is used to setup the IP address and port, it’s still under construction.

Species Map page:

This page is used for setup species map for the BenchBot. You can initiate, update or delete the map.

When first time visit the page, set up the map configs at the Map Setting part, then select a species and set rows.

In the Add Species part, select the species and rows to add, then click Add Species button to add exact rows of species to the map.

Click Undo button to undo the operation.

The Reset button would clear the whole map.

The Save button would save the map to the backend, it can also clear the map state after a traversal.

The app would show a map for the species on the side, update every single pot using the dropdown to select different species, or just change it to an empty pot.

After setup the map, next time visit this page the previous map would automatically loaded.

Traversal page:

This page is used to see the real time updates of the traversal, there are two buttons to control start and pause the traversal. And the logs and image preview will show on the left of the screen. The species map user have edited will be show on the right of the screen, when traversal starts, each pot would have 6 stages and will have different colors:

unvisited = white, nextVisit = yellow, visiting = green, visited/skipped = gray, failed = red.

When click the pause button or exit the page, the traversal will be automatically paused and current state would be saved, so next time visit this page it will automatically load the data.