Garden Observer is a web application for visualizing and monitoring the activity of live Husqvarna Automowers. It providers both real-time observation and historical playback of mower operations, including movement patterns and environmental interactions. At its core, Garden Observer features a 3D digital recreation of each mower and its surrounding environment. As automowers operate, they continuously report telemetry data to the cloud. Garden Observer subscribes to this data stream, allowing users to view: - Live mower states and positions - Historical run data and paths - Visual insights into mower performance over time The system is built using C#, Blazor, and Unity, combing modern web technology with real-time 3D rendering. Note that this is a tool used by internal Husqvarna employees and use for testing purposes only. This cloud environment is not set up for regular consumers. ![[Screenshot.png]] ## Subscribing to events Subscribing to events was done using a combination of Azure's Service Bus and HTTP polling. The polling was for retrieving data directly from Automowers such as current state. Requests would go through a proxy that is in contact with the Automower itself. We receive information about the state of the Automowers internal state machine along with its orientation and other things. Data is mostly dealt with in JSON format. ## Timeline The timeline is used to view data points of different _attributes_ of the Automower at different times. The timeline also includes layers for each attribute. An example of an attribute is the Automower's speed, longitude, etc. The user can view data within an adjustable time window. The timeline is a custom component built using a combination of the HTML Canvas API and regular elements. ![[timeline.gif]] ![[map-a.gif]] ![[map.gif]] ## 3D environment and models The Automower model is outsourced and created before hand then picked based on the type of Automower being observed. The terrain, snail trail, and heatmaps on the other hand are generated on the fly. ### The terrain Automowers operates using maps of defined areas telling it were to cut, not cut, navigate, etc. These maps are represented using SVG format. When observing the application fetches the Automower's current map. Using information in the SVG different meshes are generated to display which can be with or without color. Although what you would initially assume is an easy and fast task to convert SVG polygons to 3D meshes, due to some unique constraints we had and not wanting to give up any precision (due to textures), a custom polygon triangulation algorithm was created. The method used is a combination of the [Bowyer–Watson algorithm](https://www.gorillasun.de/blog/bowyer-watson-algorithm-for-delaunay-triangulation/) and [DDA (Digital Differential Analyzer algorithm)](https://www.geeksforgeeks.org/dda-line-generation-algorithm-computer-graphics/). ![[triangulation.png]] ### Updating the environment Unity was used for the 3D environment because it is what was used elsewhere at Husqvarna. However here is was built for WebAssembly. The web application would communicate with the Unity environment. The idea was to build primitives in Unity which we would update and control from the web application through messaging. See [[blazor-three-js]] for an idea of how this was built. Each game object in Unity has a Blazor component built around it. Instead of these Blazor components rendering HTML, they instead send messages to Unity to render/control their game objects. ![[components.png]]