Spatial Layouts Using MindSphere Aspects and Edge2Web Director

My previous post, MindSphere Asset Variables and Static Assets, discussed the use of asset variables and static aspects for describing assets in MindSphere. Assets are hierarchical, and can have location and other descriptive information including image files. We have been asked on a number of occasions to display asset information on a floor plan. In this article we will examine that use case and use static aspects to tie asset information together with a floor plan.

Asset Hierarchy

Let’s start with our assets. We have two reactor assets (liquid chemical processing systems) that reside on our main plant floor as reflected in Figure 1.

Figure 1: Asset Hierarchy for Plant-55 (click image to enlarge)

Notice our use of a subtenant for plant-55 at the root of this hierarchy. Subtenants are a great feature of MindSphere. Among other benefits, subtenants allow us to easily control access to assets by using them in the root of an asset hierarchy and assigning users to them. All of the MindSphere APIs take subtenant into account so when we query for assets as a subtenant user, we will only see the assets for our subtenant.

Under the subtenant is the plant itself, Plant 55-31.  Directly under the plant asset are area assets – Main Floor and Second Floor.  These two assets are associated with the edge2web.Floor asset type.

Finally under the main floor we have our two reactor assets which are of type edge2web.reactorasset and are to be displayed on the floor plan. Note that the reactors also have child assets – Pump, Tank, and Valve.

Floor Asset Type

Let’s take a closer look at the Floor asset type that will hold the descriptive information needed for our floor plan layout. The asset type has an associated static aspect called floorPlan which, in turn, has an aspect type called SpatialLayout. The Spatial Layout contains an imageUrl and a coordinate system for the associated image. In our example we are going to use the imageUrl to point to an image which is the floor plan for the Main Floor. The coordinate information allows us to use an asset’s Location field, which contains the longitude and latitude of the asset, to place the asset on the floor plan (more about this shortly).

Figure 2: Main Floor asset with floorPlan aspect (click image to enlarge)

Our Spatial aspect has seven fields:


The URL for the image. In this case it is pointing to a MindSphere file accessible from the /api/iotfile/… api. Note that we use /msapi here, as Edge2Web Director application will add this path to support etags for faster reload in the browser.


A hint as to what the values represent. GEO means geographical coordinates (i.e., longitude and latitude).

top, left, bottom, right

The top left and bottom right coordinates. Top and bottom are y-axis values; left and right are x-axis values.


The rotation of the coordinates. In our Floor Plan example, 0 degrees means the image is facing due north.


Below is one of the Reactor Assets that is a child of the Main Floor asset. Notice its longitude and latitude are within the bounds of the Spatial aspect.

Figure 3: Asset description for reactor-55-1 (click image to enlarge)

Floor Plan Rendering 

Now we’ll use Edge2Web Director to create the application that dynamically ties our assets to the floor plan image. The display is passed a MindSphere assetId for the parent asset (Main Floor). The asset’s spatial aspect, floorPlan, is used to get the image location and coordinates. The child assets’ locations (longitude and latitude) are then the used to display their associated cards on the image.

Note that there are some circumstances where using a child asset’s location isn’t appropriate – for example spatial layout on a machine diagram or a layout requiring a third dimension – in that case static aspects can help us once again. I won’t go into the details here but it is as simple as creating an aspect type for the child assets and using positioning information (geo coordinates, pixels, etc.) from that new aspect instead of the longitude and latitude stored in the asset’s location field.

Figure 4: Main floor plan with two reactor systems (click image to enlarge)

We’ve also augmented the basic asset information for the reactor systems with real time information from MindSphere’s Time Series service. We display that information when a reactor’s card is opened as shown below.

Figure 5: Card showing current operating metrics for reactor-55-2 (click image to enlarge)

Floor Plan Flow 

Here is a look at Edge2Web Director flow that displays the reactors’ asset and time series data on the appropriate floor plan . It accepts an input field for the assetId of the parent asset – in our example that is Main Floor, as well as information about the spatial aspect (i.e., where Director will find spatial data if it is available). This makes our flow reusable for any asset that contains a spatial aspect.

Figure 6: Edge2Web Director flow for displaying floor plan with asset markers (click image to enlarge)

MindSphere Service Calls

In Figure 7 below, the first executable steps in our flow use MindSphere’s findAssets api to retrieve the Main Floor asset and its child Reactor assets. Note that we do these two steps in parallel to improve display performance. The property sheet (right side of the screenshot) shows the inputs to, and outputs from, the findAssets api calls. We use a simple filter which searches for assets that have the passed assetId as their parentId.

We then call another flow to augment the information in the Reactor asset with real time information from it’s dynamic aspects (reactorLevel, reactorTemperature, etc.)

Figure 7: Edge2Web Director data service step for finding child assets (click image to enlarge)

Flex List Renders the Floor Plan and Assets

In Figure 8 below, the End step of the flow displays the asset information in collapsible cards on the floor plan. It uses Directors powerful Flex List renderer to display the asset information to the user.

Figure 8: Edge2Web Director flex list template for reactor card (click image to enlarge)

Using Marker Icons on the Floor Plan

Just for fun, we switched-on the Show as Marker property for our flex list display, then selected an icon to display at the appropriate locations. The screenshots below show the result of this tweak (note that we have re-positioned the markers slightly to improve the display optics).

Figure 9: Main floor plan with two reactor systems (click image to enlarge)

Figure 10: Card showing current operating metrics for reactor-55-2 (click image to enlarge)


Static aspects are a powerful way to describe information about your assets, as well as the physical areas in which they are installed. Even in this relatively simple use case you can see their expressive power. We have encountered many other uses for static aspects including operating set points for rules and thresholds, contact information for asset maintenance, and linkages to external systems. Together with dynamic aspects, they form a powerful foundation for describing your digital twins.