PandaSuite: the new no-code platform for the Pepper robot
Pepper is an interactive robot, and as such, an amazing platform to engage people in a unique way. How to quickly and easily build, without coding, a robotic application to create a great experience? Discover PandaSuite, a no-code platform that lets you design, build and test interactive applications with Pepper!
1. A Pepper-compatible easy-to-use no-code platform
As part of a partnership, SoftBank Robotics Europe and PandaSuite developed a specific component to make the PandaSuite platform compatible with the Pepper robot.
Teachers and students can now benefit from the interaction performances of Pepper in their classrooms, with no coding skills required.
Designers can now discover new possibilities on Pepper and quickly render their ideas.
Developers can now easily prototype demo applications to illustrate their use cases.
Creating a robotic and interactive Android application for Pepper becomes as easy as creating a slideshow!
Pepper feat. PandaSuite
PandaSuite is a very interactive no-code platform to create applications and prototypes, and test them throughout the whole process. It lets you design, build, and launch interactive experiences without coding.
PandaSuite already has a lot of ready-made components. The integration of a specific Pepper component, named “Pepper chat”, now allows the creation and deployment of Pepper applications through the PandaSuite Studio interface.
The features of the Pepper chat component are mainly, but not limited to:
- Bookmarks management,
- Pepper tablet’s camera integration,
- Flow management, timers,
- Text input and variable management,
- Pepper animations usage,
- Multilingual capabilities,
- PandaSuite Pepper Viewer to previsualize and simulate events,
- Exporting the final Pepper application from the PandaSuite dashboard with a personalized icon, no branding and analytics.
Disclaimer: The “Pepper chat” component results from a partnership between PandaSuite and SoftBank Robotics Europe and is provided “as is” in this first beta version, without warranty of any kind. That means that some issues could remain while using this tool. Please do not hesitate to contact PandaSuite or Softbank Robotics Europe Support should you be facing any problems.
This article has been written using PandaSuite Studio Version 1.3.5 and PandaSuite Viewer Version 2.1.27.
2. First steps with PandaSuite Studio
You can create a free account to start creating your project on Pepper with PandaSuite Studio!
Note: a project cannot be shared between users, so if several people are going to be working on a given project, consider creating a specific account and taking turns using it.
Downloading and installing the PandaSuite Viewer on Pepper
To use your application on a real Pepper robot, you will need to install the PandaSuite Viewer application. There are two ways to install it on your Pepper’s tablet.
- Download the apk on your computer from this link.
- Check that both your computer and your robot are connected to the same network, and connect to its tablet to install it using :
$ adb connect TABLET_IP $ adb install pandaviewer-pepper-pandaviewer-release.apk
Directly on the robot
- On Pepper’s tablet, open Google Chrome and navigate to : https://pandasuite.com/dashboard/download-viewer?pepper
- Download and open the apk
- Install it following the displayed instructions
3. Discovering PandaSuite and its generic features
PandaSuite Studio offers a wide range of functionalities, we are going to cover the ones you will need to create a simple yet functional application for Pepper, but don’t hesitate to refer to the PandaSuite documentation for more details.
Designing the flow of your app
Before you start working in PandaSuite, you need to have a good outline of what you want to create. We suggest you start by creating a basic flow, and refine it until you have a step-by-step diagram of your future application.
You will then have to create or collect the various assets that you’re going to need for the application:
- Graphical assets such as images for the background, buttons…
- Sounds (Play Audio - Help Center)
- PandaSuite animations: You can create animations (Animations - Help Center), transitions (States & Transitions - Help Center), or even import your After Effects Animations (After Effects Animations - Help Center)
- Pepper Animations: PandaSuite doesn’t allow for specific animations upload yet, but you can use those already in your Pepper robot via the Animation Library. We suggest that you try them out to find which ones suit your application best.
- Dialog: you will have to create your .top file and thoroughly test it before uploading it to PandaSuite. If you’re not familiar with the QiChat language, you will find the dedicated article here: Discovering QiChat, the SBR language for creating chatbots.
Please note that the dialog .top files have to be zipped individually before you can import them to PandaSuite. If you need to use several languages in your application, all .top files must have the same name before being zipped, following the qiSDK convention.
Note: Please don’t use any underscores for bookmarks in a dialog meant to be used in PandaSuite, as they would be cut. The issue should be resolved soon.
Walkthrough of the various features in PandaSuite
To create a project, go to https://pandasuite.com/dashboard/create, click “New project”, select “Blank project”, choose “Tablet” and select the “1280x800” and “Landscape” settings, then name it.
After opening it in the Studio, let’s review all the features we are going to need in order to make a great Pepper application!
Properties, Actions and Media
First, let’s check out the Media feature: click on the Media icon to open the window where you can import all of your assets to PandaSuite Studio.
Actions is what helps you make your project interactive, we’ll come back to it.
The Properties window allows you to manage them at various levels, be it for your project or within a given component.
Screens, foreground & background
The screens are the body of your application, where you will recreate the flow you designed earlier and link everything together.
In the background, you can add a visual background image that will be the same throughout the screens to create a coherent project.
In the foreground, you can place technical elements such as the Pepper chat component that will then be available for the whole project.
You can navigate between the screens, foregrounds and backgrounds with the 3 little icons at the top right of the window.
Let’s start with the background. Click on “Add background”, and name it. Then simply drag & drop the image you want to use as background from the Medias window into the screen.
Now click on the Foregrounds icon, then “Add foreground”, and name it. Click on the “Component” icon at the top and select the Pepper chat one. Drag and drop it next to the screen, then open the “Properties” window and select your dialog .top file. Now if you double-click on the Pepper chat component, you will see the list of all the tags: they will be useful to create links between what is displayed and the dialog later on (click on “add markers” to add them as interactive actions for the rest of the project).
Now that both background and foreground are ready, let’s focus on the screens and the states.
The first important thing to note is the difference between a screen and a state in PandaSuite: a screen is like a folder that can contain one or several states, a state is a particular scene, a kind of snapshot at a specific moment of one or more objects. When you designed your flow, you probably created several steps broken down into smaller units: you can now use the screens as the broad steps of your flow to keep them clearly separated, and add states within as needed.
Create your first screen, and name it. Click “Properties” at the top and select the foreground and background you created earlier to link them to this screen.
Create a state in this screen, and name it.
Now it’s time to get creative!
Personalize your states with Objects
Use the “Text” and “Image” icons to define specific zones for text and images on your state. You can also use the “shapes” icon if needed, for arrows for example. Don’t forget to check out the “components” for interactive effects (scroll, pop-up, drag & drop...) and technical solutions such as a QR code reader.
Animate your objects with interactive actions
Once you’re happy with the layout, it’s time to add the interactive actions: select an object, then click the “Actions” icon. Click “Add”, select a trigger (single tap, swipe up…), and its result.
Note that there can be more than one action for a single trigger: for example here, a single tap on a language flag will set the language, trigger a dialog bookmark so that the robot says something, and go to another state to move on with the application flow. This is all done in the “Actions” panel.
Note: a go to screen enables you to switch between screens, you can of course select which specific state inside a screen you want to go to. A go to state can only be done within the screen you’re already in.
To interact with the Pepper Chat component, you will need to switch between the foreground and the screens in order to select it.
For instance, Pepper animations can be triggered by an interactive action: Choose a trigger > Interact with a component > Switch to Foregrounds > Select your Pepper Chat Component > Start QiAnim.
And speaking of animations, it’s really easy to create smooth transitions for your objects, as they are automatically handled by PandaSuite: when you create a linked state and change the location of a button, it will seem to slide smoothly between the two positions when the behaviour is played. To create the animation between your two states, choose a trigger and the action “Go to selected state/screen” (you can set a delay and duration to your transition).
Be careful, when you create a state B based on a state A, state A becomes the parent of state B. All objects are then linked between these two states. By default, any change on state A is automatically applied to state B. To create a transition, you need to make a change to your objects' characteristics in state B. Please refer to the PandaSuite documentation for more information (States & Transitions - Help Center).
You now have all the information you need to create a great Pepper application, but don’t forget to test it regularly during development!
Testing your application
In PandaSuite Studio, you can test your application whenever you want via the preview: save your work and click on the “Preview” icon at the top left. This allows you to check that nothing is missing and that everything works as it should.
Please note that some of the robot-related inputs such as QR code reader or dialog cannot be tested within PandaSuite Studio only: you will need a real robot at some point.
At the beginning of this lesson, we explained how to install the PandaSuite Viewer application on Pepper (see Downloading and installing the PandaSuite Viewer on Pepper). Don’t hesitate to test your application on the robot, even if it is not entirely finished: it’s better to spot bugs and missing parts of the flow early on.
On your Pepper robot, open the PandaSuite application on the tablet by clicking on its icon:
At the first launch, you will have to log in with your PandaSuite account created earlier. Update your project to reflect the latest state of your work, then open it. Your application will then play on Pepper, and you can test it thoroughly!
We hope that this tutorial will help you implement and test your ideas, be it a quick prototype or a simple demo, and discover all the possibilities of Pepper.
Thanks to PandaSuite Studio, you will discover a new way to create robotic applications, with no code, using Pepper as an interactive platform for everyone!
To go further, we have released a step-by-step tutorial on how to create a basic check-in application for Pepper on PandaSuite, but in the meantime, don’t hesitate to come up with your own ideas, and have fun implementing them with PandaSuite!