Equipment Builder
a drag-and-drop isometric schematics builder
Background
Building managers like to have a visual representation of the equipment in their building, as it allows them to quickly identify problem areas within a system, as well as anticipate future maintenance needs. Unfortunately, antiquated off-the-shelf libraries stood in stark contrast against Maya's clean aesthetic, and their uncompressed size created significant technical debt. Unfortunately, the legacy equipment graphics library used by Riptide was not only dated in its appearance, it relied heavily on the GIF file format to display animations of equipment at various states, creating significant technical debt and crippling browsers. We elected to use an isometric projection of generic pieces of equipment, rendered in SVG. This proved beneficial not just in file size (many graphics were less than 1kb), but it allowed us to control animation speeds programmatically.
Orienting the same piece of equipment along the X, Y, and Z axes
Process
Each piece of equipment was first modeled in 3D, allowing me to render it from all of the cardinal directions. Once I had these still images, I simplified their appearance in Illustrator. Before exporting, I added circle elements centered on the vertices where pieces would snap together on the interface. These circles had their color programmatically removed, but their cx/cy coordinates remained consistent.
Equipment graphics could be linked one or more pieces of equipment with the same configuration—only the endpoints would need to be updated
Keeping notes on individual pieces of equipment kept a rich history of records, allowing future technicians to anticipate any problems easily
Takeaway
This project afforded me the opportunity to work in two mediums I had only passing experience in: 3D and SVG. First, pieces of equipment were modeled in Trimble Sketchup, including HVAC units, heat exchanges, boilers, and chillers. These graphics were then cleaned up and simplified as SVG shapes, which could be conditionally animated based on real-time data. The result was a lightweight*, scalable, and visually appealing library of equipment graphics for the modern building controller. *The legacy graphics library clocked in around 20mb, whereas the one I built weighed 250kb.