This is a guest post written by Aaron Fritsch of Archilogic. Archilogic provides developer tools for building software that manages physical space.
Floor plans are crucial in a wide range of industries, including real estate, construction, and facilities management. They provide an essential visual representation of the physical space and its characteristics, such as room dimensions, wall placements, and furniture layouts. Maintaining a portfolio of floor plans allows users to keep track of all the buildings and properties they manage or own, and makes it easier to share information about them. With Archilogic, you can build applications that read and write information about a user's portfolio of floor plans without building and managing the infrastructure on your own.
Managing floor plans can be a tedious and time-consuming task, particularly when changes are made to the physical space. This is where digital twins come in. A digital twin is a virtual replica of a physical space that can be used to simulate changes and test scenarios without affecting the real-world environment.
By integrating with Archilogic's SDKs and APIs, users can visualize floor plan information generated from digital twins efficiently and effectively, without prior knowledge of complex architectural software. They can make changes to digital representations of their physical space using a web-based editor, which are then made available immediately through the Floor Plan SDK and Space API. These developer tools ensure that applications always have the latest and most accurate floor plan information, and that there is consistency across all floor plans - making it easier to deliver reliable features at scale.
In this post, you'll learn how to build a Retool application, powered by Archilogic, that visualizes physical space. The application will:
- Retrieve a list of floors from an Archilogic user’s account
- Visualize users’ floor plans
- Retrieve resource information - usually spaces and assets - about a specific floor
In this example, we'll show you how to build an app with a standard Archilogic integration workflow.
Let's get started by retrieving floor plan data from Archilogic.
Retrieve a list of floors from an Archilogic user’s account
In this example, we'll use two tokens to visualize a floor plan and get data from the Space API:
- A publishable access token generated in their Archilogic account that will be used to visualize floor plans using the Floor Plan SDK
- A secret access token generated in their Archilogic account will be used to get a list of floors and resources in Archilogic that can be mapped to resources within your application using the Space API.
See here for detailed instructions on how users can generate both of these tokens.
Create a Space API resource
First, we'll create a resource that Retool can use to access the /floor endpoint of the Space API.
We'll start by adding new Resource query in the Bottom panel, and then create your own custom resource for the Space API:
In this example, we name this resource Archilogic Space API - retool integration demo, and provide the following:
- Base URL: https://api.archilogic.com/v2
- Headers key: Authorization
- Headers value: AL-Secret-Token + [your secret token]
We name the query
get_floors and call the /floor endpoint:
Create a simple interface for selecting a floor plan
Now let’s create a select box that will allow the user to select a floor plan from their Archilogic account. We need to add a select box and map the query’s response data to its options, values, and labels.
The select box will now refresh any time the
get_floors query runs in the application. To ensure that this happens, we can create an action button that runs the query when clicked, triggering an update of the select box:
The select box should now be populated with a list of floor plans from the user’s Archilogic account:
Visualize a floor plan
We now have everything we need to display a floor plan in the application. Let’s add a custom component to the application, and load Archilogic’s Floor Plan Engine SDK. Retool supports doing this in a number of ways, but to keep things simple, we’re going to load the SDK using iFrame code. This code is available in our template app. In the component's model, pass your publicToken as the value of the
You should now see the user’s floor plan loaded in the custom component!
Get resource information about a specific floor
Since Archilogic models are digital twins - not simply floor plans - we can now access all of the underlying data related to the floor plan that has been selected and allow our application to interact with it.
In this example, we will calculate how many spaces are in the selected floor plan.
To do this, we need to create a new query that Retool can use to access the individual floor information using the /floor endpoint of the Space API. In this example, we name the query
get_single_floor, call the /floor endpoint, pass the floor ID as a URL parameter, and our secret access token in the query's headers:
spaces array within the
You should now see a calculated count of the number of spaces in the floor plan!
The value of an Archilogic integration
In this application, it’s possible for users to make changes to their digital twins and see those changes update in this integrated example app in real-time. This means the following workflow can happen in seconds:
- Use the Archilogic editor to make a change to a floor plan
- Publish the changes
- See the changes in the integrated application
Now you can build applications that include floor plans and spatial data, without building all of the underlying infrastructure yourself.