Prototyping
Design & Development
I was responsible for designing and implementing the entire user interface for this 360 imagery management system. This included user management with roles and permissions, data visualization, and complex navigation systems.
The first challenge was to prototype a system that could handle large amounts of 360-degree imagery data efficiently. We needed to create a smooth experience similar to Google Street View but for custom datasets. I focused on getting the essential first — loading and displaying the images fast.
Prototyping was done using Svelte. The UI was made adhoc by myself using TailwindCSS, as usual.
360 Viewer
Technical Implementation
The core of the application was the 360-degree image viewer. We used Three.js for rendering the spherical images and implemented custom controls for navigation.
The viewer needed to handle complex data from Andorra's mountainous terrain. This included processing car orientation data, camera angles, and elevation data - which was particularly challenging due to the country's topography and occasional data inaccuracies.
The viewer included features like:
- — Smooth pan and zoom controls
- — Location-based navigation
- — Terrain-aware positioning
- — Car and camera orientation handling
Annotations
Feature Development
A key feature of PanoInsights was the ability to add and manage annotations within the 360-degree views. This was particularly useful for marking points of interest or documenting issues in the field.
The system included comprehensive user management with roles and permissions to control who could view, add, and edit annotations. This was crucial for maintaining data integrity across large datasets.