Introduction

This article reviews the construction of the Trade Show Kiosk Sample experience, a trade show kiosk providing visitors with essential information such as News/PR, Exhibitor profiles, and a hall plan. Visitors can also vote to nominate their favorite companies. This experience is available for download from the online Intuiface Examples catalog or via the Examples tab of the Composer Experiences panel.

“Home” Scene

An eye-catching scene intended to attract visitors’ attention and to encourage them to explore. On it, we have included a Twitter Interface Asset, Weather Interface Asset, and Clock Interface Assets.

The Menu

A menu appears in all but the Home scene. It consists of a set of 4 Toggle Buttons: NEWS, EXHIBITORS, VOTE, and MAP, which are used to navigate to the corresponding scenes.

“News” Scene

In this scene, we use a Data Template derived from an Excel Interface Asset( to list all available news articles and their content (images, titles, video links, etc.). The overall layout of the data template is an Asset Grid. When a visitor taps on the “Read article” button, a Pop Up showing all the related content will move into view. The content elements of this pop-up are bound to the content of our Excel sheet using the Binding Principle.

A webinar showing how to work with data templates and Excel can be found here.

“Exhibitors” Scene

Similar to the “News” scene, this “Exhibitors” scene uses the Data Template principle with another Excel Interface Asset named “Exhibitors List” to store all information about exhibitors, including Name, Logo, Description, Category, Region, etc. The data template for the exhibitors’ logos is displayed as an Asset Grid. By tapping on a logo, a filter is activated on the spreadsheet, ensuring the “List detail” scene only shows information about the selected company.

This Asset Grid is accompanied by 3 different Filters: Filter by Region, Filter by Category, and Filter by Name, respectively.

The first 2 filters (by Region and by Category) are built as drop-down list selections (you can find an instruction video on how to build a drop-down list here). Each drop-down list consists of a visible Toggle Button for user interaction and an invisible Asset Grid containing several buttons whose text is bound to an Excel spreadsheet (one for Regions, another for Categories). For example, in the Regions Excel file, we have 4 rows: All Regions, North America, Europe, and Asia; therefore, we expect the corresponding Asset Grid would have 4 similar rows, which are All Regions, North America, Europe, and Asia, respectively. When a visitor taps on the Toggle Button, the corresponding Asset Grid will appear as a drop-down list of selections. After the visitor then makes a selection from the list, the drop-down will close, and the selection will appear on the Toggle Button.

To update text on the Toggle Button, we overlay 2 Simple Text assets on the Toggle Buttons whose text is originally set to “Choose region” and “Choose category”. A trigger and action set is then added: when the Toggle Button is released, 1) the selected text will replace the original text of these 2 Simple Text assets, and 2) the toggle button will be unchecked.

To create filers for Region and Category, we use the Excel interface asset Filtering Mechanism. Add a trigger and action set to the button in the Asset Grid. When the button is released, a filter will be added to the column (either Region or Category, depending on the filter) in the “Exhibitor List” Excel sheet with the condition that the value of the column has to be equal to the text of the button.

NOTE: When visitors choose either “All Regions” or “All categories” from the drop-down list, the corresponding column filter should be removed, and the exhibitors from all regions or all categories will be displayed. To do so, we have to add a condition to the “when button is released” trigger: when the button is released and the selection matches “All regions” or “All categories”, we clear the column filter (either in the “Region” or the “Category” column).

When the button is released and the selection does not match “All regions” or “All categories”, we add a column filter like we normally do.

Lastly, an additional trigger and action set is used to convert the Simple Text assets back to their original values (“Choose region” and “Choose category”) and to clear all the filters if the visitor shows no further interaction in the next 20 seconds.

For the Text Input filter, we simply use the same Search Function Using Excel Filters by creating a trigger and action set: when the Enter key is pressed, add a filter to the “Name” column in the “Exhibitors List” Excel spreadsheet to identify which exhibitors have a “Name” value (case insensitive) equal to that of the Text Input asset. Similar to the previous filters, we insert an additional trigger and action set to clear the Text Input asset and the filter if no actions are performed in the next 20 seconds.

“Vote” Scene

This scene enables visitors to vote for and rank their favorite exhibitors as Champion, First Runner Up, and Second Runner Up. When a visitor chooses a logo on the left-hand side, a selection pop-up will appear for her to choose whether to nominate this exhibitor as Champion, First Runner Up, or Second Runner Up. The name of the exhibitor will then show in the “My votes” box on the right hand side either as “Champion”, “First Runner Up” or “Second Runner Up”.

We again use the Excel Interface Asset to create this trick: when a logo is tapped, a filter is added to the “Exhibitors List” Excel spreadsheet and the selection box will fly in.

By making a selection in this box (either “Champion”, “ First Runner Up” or “Second Runner Up”), the “Name” corresponding to the selected Logo will replace the associated Simple Text asset in the “My votes” box.

Notice that the Text Manipulation Interface Asset is used to adjust the Simple Text asset located in the Popup Selection (“You would like to nominate [exhibitor name] as:”).

After making choices, the visitor can then submit his votes to the system with the “Submit” button or clear all the choices with the “Clear” button. When a visitor submits his votes, a new row will be added to a pre-created Excel Interface Asset named “Votes”.

“List detail” Scene

This scene is used to display exhibitor details. All elements of this scene are bound to the Excel interface asset for the “Exhibitors list” spreadsheet using the Binding Principle. Again, for a discussion about how to work with Excel spreadsheets, watch the webinar here.

There are two Toggle Buttons in this scene: The first is the “Back” button to return to the previous scene. A trigger and action set is associated with this first button to make sure that on exiting the scene, all filters have to be cleared. The second button is “View on map”, used to navigate to the “Map” scene to view the booth's position on the map.

Note that there are 2 ways of entering this scene. The first way is from the “Exhibitors” scene and the second is from the “Map” scene.

“Map” Scene

This scene is comprised of 4 principal elements: The map, the Detail Box, the Points of Interest (POI) collection, and the POI indicator.
The map is always visible, whereas the POI buttons are always hidden. The Detail Box and the POI indicator are also hidden by default and only appear when the visitor interacts with the map.

To build the POI buttons, we first have to record the X and Y coordinates of all the exhibitors’ stands on the map graphic, relative to the overall display, and enter those numbers into our “Exhibitors List” Excel spreadsheet in the two columns named “X coordinates” and “Y coordinates”. Next, we create a square (that will act as a button) and drag it into the “Row of Exhibitors List” data feed in the Scene Structure panel, creating one per spreadsheet row, then bind its X and Y coordinates to the values of “X coordinates” and “Y coordinates” columns accessible via the “Row of Exhibitors List” Excel interface asset. Finally, we delete all the other rows in the data feed so they won’t be displayed.

Next, we create an animated icon to call attention to a specific point of interest. This is our POI indicator and we simply need to hide it.

For the Detail Box, we create a pop-up with the desired information to be displayed, such as the company’s name, logo, and two Toggle Buttons: “Close” (see below) and “See Detail” to navigate to “List detail” scene for more information regarding the exhibitor. The pop-up and all its elements are muted and placed in the Front layer of the scene and on the Map.

Up next, we assign a trigger and actions set to the POI button: when a square is tapped, we show the Detail Box, change the Text in the box to the value of the Company Name in our Excel Sheet, change the Image into the Logo in our Excel Sheet, and show the POI indicator at the location of the tapped button.

Another trigger and action set is assigned to the Close button (in the Detail Box) to reverse the Popup and the POI indicator back to their original muted state. For the “See Details” button, we assign another trigger and action set stating that if the button is released, we add a filter to the Exhibitors List Excel Sheet and go to the List Detail Scene.

Notice that there are two ways of entering this scene: from the Toggle Button menu at the top and from the “List Detail” scene. When entering from the menu, we must ensure no filter is applied and that the Front layer Popup and the Points of interest are muted. On the other hand, when entering from the “List Detail” scene, we need to display the position of the selected exhibitor with the POI Indicator and its related information on the Popup. To do so, we need a little help from a Global Variable. When the scene is being entered from the menu with a condition specifying that the Global Variable equals 0, we clear all the filters and mute the pop-up as well as the points of interest. If the global variable does not equal 0, a filter is applied, so we change the text in the Detail Box, show the Detail Box, and show the POI indicator at the position corresponding to the X and Y coordinates in the Excel Sheet and then clear the filter.

Finally, we have to reset the Global Variable back to 0 when exiting this scene.

The last thing we have to do is to go back a bit to the “List Detail” scene and set another trigger on the “See on map” button, which says that when the button is released, we change the Global Variable so that it no longer equals 0.