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 Apps / Services Troubleshooting
...
How to test the app on 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:
| Code Block |
|---|
.\rebuild_and_install.shnpm run build |
This script would auto start building and install process to build the app with changes. You 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.
| Code Block |
|---|
journalctl -f --user-unit example-app.service |
...
How to contribute to the frontend:
...
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 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.
Click ‘Add Species’ to add a 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, the app would show a map for the species on the side. Click ‘Undo’ .
Click Undo button to undo the operation.
The ‘Reset’ Reset button would reset clear the whole map, and ‘Save’ .
The Save button would save the map to localStorage.Update 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 remove the species on the just change it to an empty pot.
If clicked ‘Save’, the pot map would be saved in localStorage so After setup the map, next time visit this page the previous map would automatically loadloaded.
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 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 5 6 stages and will show a have different colorcolors:
unvisited = white, nextVisit = yellow, visiting = green, visited/skipped = 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 localStoragecurrent state would be saved, so when the user enter next time visit this page it will automatically load the data.