I had planned on wrapping up most of the Garden controller in this video but will end up pushing the hardware side of things, the setup of the irrigation system and putting things in the garden, for the next video. In this video I will just cover the Angular web application that is the user to front end the web services running on the microcontroller in the garden. I’ll cover the three main sets of Garden UI functionality: the overall garden tab, the history/charting tab and the settings tab. I am not doing an in-depth Angular tutorial so I will mainly show a demo of each function and how it was implemented (high level) in Angular. The size of the Garden UI web application has grown so I will wrap up showing how I compressed the files to better manage the space on the RPI Pico. After these changes I had plenty of room left to store a seasons’ worth of log files.

00:00 Introduction
01:07 A recap of the parts making up the Garden Automation project.
02:01 A look at the angular code used to implement the main Garden tab. I will show how I implement the data polling and data binding.
06:26 A demonstration of the garden tab. Also, a look at the free space available on the Pico microcontroller.
09:23 Showing the changes made to the background image used on the garden tab.
10:12 A demonstration of the functionality of the history tab that charts the log data from the garden.
13:25 A look at the code used to implement the history/charting function.
18:22 A demonstration of the setting tab, used to update the setting used to control the garden automation.
20:30 A walk through of the settings code. This was mostly copied from my Solar UI project, a more detailed walkthrough is in that project.
25:00 I need more space to store log files on the Raspberry Pi Pico microcontroller. I have a few options (Host the Garden UI somewhere else or compress the Angular distribution files). I walk through how I compressed the Angular files and supported this in the Garden Pico microDot web server implementation.

Resources

Create gzip version of the garden-ui distribution files.
npm i --save-dev gzipper
gzipper compress ./dist ./dist/gzip
cd ./dist/gzip/garden-ui
ren *.gz *.

Garden Pico Microcontroller code repository (As shown at the end of this video) : https://github.com/somervda/gardenPic...
Garden UI angular frontend code repository : https://github.com/somervda/gardenUI/...
MicroDot web server github: https://github.com/miguelgrinberg/mic...
Microdot compressed content: https://github.com/miguelgrinberg/mic...