Cuply - Hydroponics Greenhouse Cabinet Powered by Django Channels and Arduino - Front-end
I'm in the process of making a greenhouse out of a glass cabinet that sits on our balcony. Inside it, there's to be a plethora of sensors and actuators hooked up to Arduino Due microcontroller, which is in turn connected to an old Raspberry Pi. The software stack is Django with Channels in the back-end, and React with some D3 in the front-end. It was a project long time in development, and this series of articles will explore it from the inception to the latest product.
This summer I set out to work on Cuply so I containerized the thing and set up the Raspberry Pi to house the project. I destroyed one SD card in the process but it's still working with the old one. Just a bit too cramped for my liking. When setting up the hardware I did some soldering (for which I bought the soldering iron) for the relay contraption. I tested out the pumps, checked for leaks and sealed them with silicone glue. For the back-end part I wrote majority of tests and implemented the coverage for it. I still need to push the repo to the cloud. Stay put for that one.
It was time for me to move to the front-end, which this article is about. The progress has been slow, but the Cuply project is moving forward despite outside distractions. The front-end architecture is driven by React. The dashboard is using the Bootstrap CSS framework and there are some D3 graphs that display the state of sensors. D3 bits are heavily modified examples taken from Observable.
I don't have a user registration system in place at the moment so when setting the project up, a user needs to be created in the back-end with createsuperuser Django management command. It's not an issue to have a superuser here because the project is isolated in the local network and the user is the only one existing in the project. Parameters can also be changed with the enabled Django admin.
A microcontroller is also needed to be set up in the Django admin, but at this point I'm thinking about hardcoding it in the settings and getting rid of the database interaction since there's only one microcontroller present. To ease my trouble, I exported the fixtures of the user, profile, microcontroller and devices so I can recreate them at will with loaddata management command.
Containerizing it spins up two containers. One for queue for the websockets and the other one for the app itself. The latter exposes the Arduino from the host so the order of things when spinning it up matters. Plug in the Arduino in the electrical outlet, then plug it in the Raspberry. This is important because the Arduino requires its own power supply, otherwise it makes Raspberry unstable.
Front-end bit is completely isolated and communicates with the back-end via REST API, websockets and authorizes itself through JWT. It is built with create-react-app.
When turning on the interface in the browser for the first time, a modal with logging in is presented to the user and one user/password combination later, the rest of the interface is unlocked. The navigation consists of the standard buttons for the main page and for signing out, then the items that are:
- Sensors
- Actuators
- Plants
- Trends
- Settings
The first three display and edit the state of the items in the cupboard. Trends deals with displaying the graph of the historical data of the sensors and Settings changes the user's API key for FloraCodex. Editing the specific item opens a modal with a form to be changed and submitted back on the server via REST API. The real time data is fed to the dashboard through the websocket.
Here are some screenshots:
