Retool + Archilogic: Building apps with floor plan data

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:

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.

In this example, we'll use two tokens to visualize a floor plan and get data from the Space API:

See here for detailed instructions on how users can generate both of these tokens.

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:

We name the query get_floors and call the /floor endpoint:

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:

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 token parameter:

You should now see the user’s floor plan loaded in the custom component!

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:

Next, we need to add a text box and map the query’s response data to its value. The query response includes an array of arrays containing the IDs of all related resources (spaces and assets). We use JavaScript here to count the number of IDs in the spaces array within the resourceRelations array:

You should now see a calculated count of the number of spaces in the floor plan!

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:

Now you can build applications that include floor plans and spatial data, without building all of the underlying infrastructure yourself.

To get started with Archilogic, book a demo today! Ready to build with Retool? Start for free here.