Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

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

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:

.\rebuild_and_install.sh

This script would auto start building and install process to build the app with changes. You might need to reboot the brain to get the updates.

How to contribute to the frontend:

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

git clone https://github.com/precision-sustainable-ag/benchbot-brain-app.git

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:

cd .\front_end\
npm install
npm run dev

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.

src/
  components      # Reusable components
  interfaces      # Types for components
  pages           # pages for App
  utils           # api, constants and utility functions

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

Click ‘Add Species’ to add a species to the map, the app would show a map for the species on the side. Click ‘Undo’ button to undo the operation. The ‘Reset’ button would reset the whole map, and ‘Save’ button would save the map to localStorage.

Update every single pot using the dropdown to select different species, or remove the species on the pot.

If clicked ‘Save’, the pot map would be saved in localStorage so next time visit this page the map would automatically load.

Traversal page:

This page is used for user to see the real time updates of the traversal, there are two buttons to control start or 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 5 stages and will show a different color: unvisited = white, nextVisit = yellow, visiting = green, visited = gray, failed = red, so the user would have a direct view of the traversal process.

When click the pause button or exit the page, the traversal will be automatically paused, and will save current data in localStorage, so when the user enter next time it will automatically load the data.

  • No labels