Clirio Cloud
A web-based collection of tools for managing workspaces in Clirio View. Includes a user dashboard, workspace and observation creation tools, and interactive Bing maps.
Type
Blazor Web App
Year
2022
Skills Applied
- Front-End
- Back-End
- UX / UI
- Web Development
- C#
- Blazor
- JavaScript
- HTML
- CSS
- .NET
- Tailwind
- Azure
Company
ClirioOverview
Clirio Cloud is a collection of tools that have been growing over time. These tools are provided to users of the Clirio Suite on a website developed with Blazor. Clirio builds solutions that help users inspect, document, and collaborate in 3D and XR on geospatial workspaces.
One of the main goals of Clirio Cloud is to complement the upload and organizational capabilities of the iOS Clirio apps, which serve as the primary capture platform. While a user can easily capture and upload 3D photogrammetry scans with Clirio's iOS apps, they might also want to upload other 3D models, for which Clirio Cloud provides an interface. Other workspace tools are upload and management of custom basemaps, upload of boreholes, guest invitations, point of interest creation, and workspace deletion.
Furthermore, Clirio Cloud provides an analytics dashboard to users, as well as an easy way to access the Clirio knowledge base and training videos. Finally, there also are subscription and account management tools.
Development
The website was initially set up by Timothy Thibault using Blazor, to try using a web framework that has C# as its programming language, which would be an advantage considering we also used C# for Unity development. After setting up authentication, subscription management, and workspace listing with metadata, development was mostly handed off to me.
The first stories I implemented revolved around workspace management, where I added observation upload features. These typically use Blazor's forms to let users fill out required information, and a file upload tray. These first stories encompassed a variety of challenges. I had to connect to our APIs to load workspace and POI data, as well as to upload data. There was also the need to validate certain data such as coordinates, and to provide user feedback such as marking required or incorrect fields and showing the upload status. I designed the UI on the fly, following the existing styling.
After adding all of the workspace management features such as 3D model upload and user invitations, I started working on another set of stories revolving around the dashboard. I partnered up with Jordan Wischmann, who designed mockups, which I then implemented.
A noteworthy feature that was added fairly late, are the interactive Bing maps. These are used to position new workspaces and points of interest and can get the user's location for convenience. They are accommodated by a set of GPS coordinate input fields, which sync with the map.
Learning
I enjoyed learning Blazor, as it shared some similarities to PHP but had quite a lot of advantages, such as easy form binding to data models, data validation, and improved readability and writeability to me as a developer who often works in C#. Besides Blazor, the Tailwind CSS Framework was also new to me, but learning that wasn't too hard since I am fairly familiar with CSS3. I did enjoy learning about it too, because I prefer its customizability and efficiency compared to Bootstrap, although I still prefer Sass for my personal projects.
Code Sample
An example of data binding between the form and data model for the Create POI page.