PandaSuite for the Pepper robot: the tutorial video

Create your Pepper Android check-in demo application with this step-by-step tutorial
PandaSuite for the Pepper robot: the tutorial video

Now that you know how to use PandaSuite Studio’s main features, let’s go further and create a simple yet fully functional Android application. This is a check-in app that could be found in a hotel’s lobby for example.

What you should know about

A step-by-step tutorial video

The video below will guide you through all the steps of the creation process, which are also summarized below.

The PandaSuite step-by-step tutorial video to create a simple Pepper Android demo application - Youtube 27:05

Assets setup

What you will need

First, create a new project as described in the previous part (First steps with PandaSuite Studio), then open it in PandaSuite Studio.

Then, import all of the assets provided above.

Now go to Background and set up the background image.

Import the “Pepper Chat” component in the Foreground, with the correct .zip folders containing the .top files for French and English.

“Welcome” screen: the traveler walks into the hotel

Create your first screen, called “Welcome”: in the “Properties” panel, link the foreground and background you created earlier.

This is what people will see on Pepper’s tablet when they arrive in front of the robot, so it features a “welcome” text and a prompt to select the language: create a text zone for “Welcome!” and another for “Please select your language” (you can play with the fonts and colors), then add the two language flags below.

“Identification” screen: the travelers identify themselves by name or QR code

Now create the “identification” screen: the users will be prompted to identify themselves, and can choose to do so by either giving their name or scanning a QR code. You can also see a “back” arrow on the top left corner, that enables the user (or the developer!) to go back to the beginning. Drag & drop the two images and add masks to outline them, add the arrow and the two text fields.

Create a linked state and remove all the elements except for the arrow. Open the “components” menu and add the “QR Reader” component.

Create another linked state from the “Main” one for the name input. Again, remove all elements except for the arrow, and add the text, plus the “Text Input” and “Interactive Area” components, and make the last one a button for validation, with some text on it.

“Menu” screen: The traveler is logged in and can access the concierge and map services

Create the third screen named “Menu”. Copy & paste the “back” arrow and add the “Welcome” text field. Add the “concierge” and “map” buttons. Then create two linked states from the “Home” one, one for each button.

For the “Concierge” state, replace the text on the “Concierge” and “Map” buttons with “Taxi” and “Restaurant”.

For the “Map” state, remove the buttons and add a “Web” component. In the Properties panel, enter the following URL: https://tympanus.net/Development/Interactive3DMallMap/

Adding the interactive actions

Now that all the states are ready, we can go back and add the interactive actions in order to create the flow!

First, let’s check the bookmarks. Click on Foreground, then double-click the Pepper Chat component. In the “Pepper Chat” window, click on “Add Marker”: all the bookmarks will appear and can now be used as actions.

To add an interactive action, select the element, then click on the “Actions” icon at the top.

Pepper chat: the robot greets the traveler

  • Human is engaged, trigger marker (%welcome)
  • Human is engaged, go to screen (“Welcome”)

This will make the robot start the interaction with a greeting when he sees someone.

Welcome screen: the traveler chooses a language

“Welcome” state
UK flag:

  • Single tap, change language (“English”)
  • Single tap, trigger marker (%english)
    For the “trigger marker” interactive action, you have to choose “interact with a component”, select Foreground, click on the “Pepper Chat” component, and select “trigger marker”.
  • Single tap, go to screen (“identification”)

French flag:

  • Single tap, change language (“French”)
  • Single tap, trigger marker (%french)
  • Single tap, go to screen (“identification”)

Identification screen: the traveler identifies themselves by name or QR code

“Main” state

  • Arrow: Single tap, go to screen (“welcome”)
  • QR code icon:
    • Single tap, go to state (“new QR”)
    • Single tap, trigger marker (%qrcode)
  • Text icon:
    • Single tap, go to state (“ref”)
    • Single tap, trigger marker (%name)

“QRCode” state

  • QR reader: QR Code detected, go to screen (“menu”)

“Name” state

  • Text input field:
    • On Validated, set variable (replace the value by "[param:input Value]")
      To access the value, click on the stack icon for the “set variable” action, then select “value” and edit it.
    • On Validated, go to screen (“menu”)
  • Button: Single tap: validate
    For the “validate” action, you have to choose “interact with a component”, click on the text input field, and select “validate”.

Menu screen: The traveler is logged in and can access the concierge and map services

“Home” state

  • Arrow: Single tap, go to screen (“welcome”)
  • Concierge button: Single tap, go to state (“concierge”)
  • Map button: Single tap, go to state (“map”)

“Concierge” state

  • Taxi button: Single tap, trigger marker (%taxi)
  • Restaurants button: Single tap, trigger marker (%restaurants)

Note: Adding interactive actions for bookmarks makes the robot say something, acknowledging the action performed by the user, but the .top file is written in such a way that he also listens for specific triggers afterward, allowing the user to achieve the same result by clicking the button or just saying the trigger.

And voilà!

This application is of course not complete: in a real application, there would have been many more possibilities to handle, like a “guest” option in the identification process, or a way to interact with the map for example.

We hope that this tutorial was helpful! You can now use the same method to implement and test your ideas, and discover all the possibilities of Pepper!