Introduction

This article explains how the Shopping Mall Wayfinder sample experience was built and how you can reuse it for your own needs. To access this sample, use the Examples tab of the Experiences panel in Composer or Player. You can also download it from the Intuiface Examples catalog

This experience illustrates how to locate destinations within a floor plan. It can be used for shops in a mall as well as units in an apartment / floor plan or even for people in an office building or school campus.

How it works

The main principles are the following:

• place an image of the floor plan in a Group collection.
• establish the position of each individual shop in the floor plan image using pixel coordinates relative to the floor plan image (more about this below)
• within the same collection, place a pin icon over each identified set of shop coordinates
• create an Excel worksheet that associates each set of shop coordinates with additional shop information
• use Excel filters to search among the shops

Excel is being used as a database. Watch this webinar recording to learn more about working with Intuiface & data sources like Excel.

Categories and items lists

Each list on the left side of this experience is fed by a spreadsheet from the Excel file that powers this experience.

The "Search by Category" template is comprised of:

• a toggle button for each shop category
  • the toggle set property is used to make sure a user cannot select two categories at the same time.
• an is checked trigger for each toggle button, used to filter the list of shops

The Show all button is also a Toggle button with the same Toggle set property so that when you check it, it automatically unchecks the last selected category.

The Search Results template is a list of Buttons that, when pressed and released, triggers:

1. the display of the Active Group collection, located within the map, to highlight where the shop is located on the map.
2. the display of additional details about the selected shop within a Details Panel on the right side of the experience.

Floor plan / map and shop locations

To make this sample easy to reuse, we created a 1000 pixel x 1000 pixel image for the floor plan. Each shop in the Excel worksheet has a unique X,Y coordinate that is relative to the top left corner of the floor plan image, which has a coordinate of 0,0.

Each shop is identified with a pin using a Group collection containing multiple elements bound to the appropriate row within the Excel spreadsheet, such as the icon and X & Y position.

When any pin icon is tapped, several actions are called, including:

• fill in the Details Panel that appears on the right side of the scene, including description and hours of operation
• move the Active Group collection within the map to the selected pin on the floor plan and then display it.

The floorToggle toggle button:

• changes the floor plan image
• applies a filter to the shop list to display the appropriate shops

Video explanation - Building a Wayfinder with the H-CMS

You will also find in the Quarterly Q&A Live - Summer Edition 2022 video, a detailed example of how to build a Wayfinder with the H-CMS.