-
Notifications
You must be signed in to change notification settings - Fork 0
2. System architecture
This page should give some more information about the architecture of GrowOne and how to extend or change it from a developer perspective.
The core of the application is implemented in C# using the
nanoFramework and was developed using an development board with
a ESP32-WROOM-32 chip, 4MB flash, 520KB SRAM (without PSRAM) - which costed about 10€
(at mid-2022). This chip has a built-in Wifi module that can be configured to connect with any
(2.4 GHz) Wifi network. With this, the application can be easily accessed over any device in the
same network. The application could be relatively easily ported to another board with similar
capabilities, as all the board-specific functionality is provided through the
GrowOne.Hardware.Board.IBoard interface.
The "backend" of the application manages the hardware components, all connected sensors,
actuators and signalers, supervises their parameters - and exposes its functionality over a
HTTP REST API, which is used by an included (self-hosted) web app. The API is implemented in
the GrowOne.Services.WebServer.ApiRequestHandler class and could be extended there.
Currently supported are the temperature and humidity sensors DHT22, analog soil moisture
sensors (like the ones with the "Capacitive Soil Moisture Sensor v1.2" label), the ultrasonic
Distance Sensors HC-SR04 (for checking the fill level of a connected water tank) and most
types of piezo buzzers (for acoustic warnings) and relais (for controlling any pumps or valves
for irrigation). New hardware components can be added to the GrowOne.Hardware namespace and
made accessible to other parts of the application by adding them into the
GrowOne.Services.DeviceManager.DeviceManagerService class.
The user interface is implemented as a a completely responsive web app and can be used with any modern web browser to display the current parameters of the device, control its funcionality and change most of its configuration - except the Wifi network setup. After the device was rebooted, the changed settings will come into effect.
The UI is written in JavaScript and uses Preact (a lightweight React
alternative with the same API) with HTM (an alternative to JSX
that doesn't require a build step). The styling is done using pico.css, a
minimal CSS framework for semantic HTML. Its code is completely contained in the
Resources/WebResources subdirectory.
It can be easily tested locally by starting a webserver (like the VSCode extension
LiveServer
or the http-server) in the WebResources
subdirectory and then by navigating to http://[ADDRESS:PORT]/app.html in your web browser.
After making your changes to the components or other code files, just refresh the page in your
browser and the changes will be immediately visible - no extra build steps required.
For testing the UI without the API, enter any non-empty password and click the "Login" button
while holding down the "Alt" key - the UI will then connect to a mock API that provides some
sample data.
To include the changes on the frontend into the actual application that will be deployed to the
device, the whole frontend project needs to be "packed" into a single file - the index.html.
For this, node.js has to be installed. While in the Resources/WebResources
directory, first install all required modules with the command npm install and then run the
command npx webpack to (re-)generate the bundled index.html file that will be deployed
to the device. To ensure the file is actually included in the build, make sure to "Rebuild" the
whole GrowOne project in Visual Studio before deploying it to the device.
Note: While it would be possible to skip the webpack build step and just include each single
file into the Resources/WebResources.resx file and serve these instead, it showed during
testing that this would increase the loading time of the web app a lot. Serving the whole web app
as a single file, however, allows the web app to load relatively quickly and it also saves a few
kilobytes of space on the device.