This is a web based dashboard for Teachable Camera. It lets you see what objects have been detected and provides a live view of the camera feed. It is intended to be a starting point for building out a more complete application.
The web app is built using React with the Martial UI framework. It was started off of the Martial UI Dashboard example. The video feed is simply a JPEG image that gets progressively updated. A Javascript MQTT client is used to receive object detection information.
The web app gets compiled into a set of static files that are served up by the Coral Board. The dashboard-server container handles serving these files. The static files must be compiled on a separate computer because there is not enough memory on the Coral board to do it there.
If you make changes to the web app, you need to recompile the static files, copy them to the dashboard-serve folder and then move the updated dashboard-serve folder to the Coral board using scp.
Follow these steps if you would like to make changes to the Dashboard Web App. If you are happy with it, then you can skip all this.
-
On a separate computer install Node (which comes with NPM).
-
In this directory run
npm install
-
In this directory run 'npm run build`. This will compile an updated set of static files in the build sub-directory.
-
Run the
./move_to_prod.shscript which will copy the files in build to the dashboard-serve/build folder. -
Move the dashboard-serve folder over to the Coral Board using
scp. It should overwrite the dashboard-serve folder in the repo on the Coral Board. For example:
// Modify for your system!! JUST AN EXAMPLE
% scp -r dashboard-serve [email protected]:/usr/local/teachable-camera/
-
On the Coral Board, in the Teachable Camera repo, run
docker-compose buildto build a new version of the dashboard container with the updated web app. -
🎉 Celebrate 👏🏾