Virtualizing building floor plans to install sensor devices

For one of our clients we recently conceptualised and built a virtualized floor plan feature to install and configure sensor devices in buildings to capture and monitor environmental parameters such as temperature, humidity and light intensity in real-time.

By mapping the sensors onto a floor plan, we significantly improved the product’s data visualisation, centralisation, collaborative analysis, alerts and hardware location management, while adhering to modern design principles ensuring a seamless user experience.

Enhancing environmental monitoring with interactive floor plan integration

Faced with the need to make sensor data and alerts more accessible, we’re integrating a visual floor plan feature into our client's system. Previously, pages were more static and lacked context, making it challenging for users not only to pinpoint the exact device responsible for an alert but also to determine its location. By uploading detailed plans, devices can be virtually positioned to reflect their real-world location in various institutions. This enables immediate visual identification of alerts, streamlining device management. Enhancing this, a click on any device in the list smartly navigates to the corresponding floor plan and highlights the specific device, ensuring an intuitive connection between the list and the spatial layout. This feature also allows devices to be linked to existing or new system locations. For user convenience, the workspace occupies most of the area (following Fitts's Law), pins have a white outline to remain visible against any background, and there is a step-by-step onboarding guide for first-time users of the feature.

Optimising file uploads and device placement with React technologies

Our solution is built on the practical application of cutting-edge technologies. We've leveraged the robust capabilities of React and GraphQL, along with trusted npm packages, to bring this feature to life. react-dropzone has been employed for file uploads, while react-draggable provides the interactivity for device placement. These community-trusted packages are woven into our custom implementation, ensuring stability and responsiveness. 

Future enhancements

Looking ahead, we're excited to enhance our floor plan functionality with colour-coded icons for immediate status recognition, alongside features like pulsating devices on alarms for heightened awareness, displaying additional device information on demand, and implementing 3D floor plans for a more immersive monitoring experience. Additionally, a feature to download floor plans with visualised device locations is on the horizon, underlining our dedication to continuous improvement and offering a comprehensive view of environmental conditions.

Closing statement

We were happy to be given the full responsibility from feature conceptualization towards technical considerations and eventual implementation. If you're facing a similar or adjacent problem in your digital product, don't hesitate to get in touch!

Interested to hear more about our approach? Never hesitate to reach out at hello@panenco.com.