1. WHAT ARE PERCH TEMPLATES

Included in every PERCH unit is a set of design templates that allow you to quickly create your own interactive displays. By simply swapping assets within the template, you can completely change the design of your PERCH display in a flash. 

 

What can I change without coding? 

  • audio
  • background graphic
  • button graphics and text (active and inactive states)
  • product spotlight and spotlight during hover state
  • display title or company logo
  • post-pick-up animation graphics/particles
  • “pick me up” graphic
  • product-specific content, including images, product descriptions, videos or reviews 

 

What can I change with coding? 

The templates are coded in XML. In a process similar to using HTML on a website, you can change the XML to alter the arrangement of how elements are displayed. With more advanced XML, you can change the interactive behavior of the templates and customize the experience further.

2. TEMPLATE CATALOGUE

First we will start with the options where the product area and the content of each product are in the same spot, so the content will be displayed once the product is removed from the table.

Depending on the number of products these are the different layouts: 

normal.png

In the second group the content of every product is displayed in the center and the products are placed around. This system behaves as a switch, so depending which product is picked up the correspondent content will appear on the Content Product Area.

The options for this operation mode are: 

     

 

 

 

For the form factor PERCH VERTICAL we have the following templates variations:

3. WIREFRAMES

PERCH HORIZONTAL

1 Product

4 Products

6 Products

12 Products

3 Products SWITCH

4 Products SWITCH

5 Products SWITCH

PERCH VERTICAL

1 Product   

2 Products

6 Products

4. CONTENT OF EACH FOLDER

Inside each folder for the different number of products you will find:

The Perch App
A resources folder including:

  • 3 XML files, that we will go through in the next section
  • log.text, not to worry
  • assets folder - containing all the separate assets that will be used in the App and that you will eventually replace with your own designs.
  • A settings folder, with different files related to the Perch Vision System 

5. XML GUIDE

We will be looking at the X-product_layout.xml and the X-product_classes.xml which are the relevant files for calling and placing all the assets of our system.

Layout.xml

The order in which we write our different elements will affect visually,  meaning that the last elements will be placed on top of the ones we coded first.

Background

Taking this in account we start with the background image:

<!--- background -->
<perchMetaObject name=”background” folder=”assets/COMMON_ASSETS/BACK
<position>Point(640,400,0)</position>
</perchMetaObject>

This will give us a static image placed in the center of our system (coordinates x=640, y=400) and that is being taken from this folder:

assets/COMMON_ASSETS/BACKGROUND

Notice that if you want to have a slideshow as a background you can drop more images in that folder, and they will be read automatically as a slideshow. Also you could have a video by just dropping a video file in that folder with the proper dimensions**. This is the “magic” behavior of the perchMetaObject. Anything you drop in that folder will be displayed.

NOTE**= Videos in Perch must have a width divisible by 32 

 

Effects

If you want to add some effects that appear over the background but don't cover the rest of the information (logo, products..), this is the place to insert the following lines of code.

Finger Fountain Effect

This effect will add to your system a “fountain” of graphics around the finger of the user: 

You will have to copy and paste this code after the background code:

<fingerFountain image=”assets/COMMON_ASSETS/FINGER_FOUNTAIN/star.png”/>

and create a folder inside “COMMON_ASSETS” called “FINGER_FOUNTAIN”. There you drop the graphic that you want to appear around the finger. For this example was this “star.png”: 

Finger Flares Effect

This effect will show a graphic following the tip of the finger of the user: 

You will have to copy and paste this code after the background code:

<fingerFlares file=”assets/COMMON_ASSETS/FINGER_FLARES/star.png” size=”100”/>

and create a folder inside “COMMON_ASSETS” called “FINGER_FLARES”. There you drop the graphic that you want to appear around the finger. For this example was this “star.png”: 

If you want to change the size of the graphic, you will have to change the size value to something bigger to 100 or smaller. 

Logo

Now we want to have the image with our logo, placed in position: (640,146,0)

 

<!--- logo -->
<perchMetaObject name=”logo” folder=”assets/COMMON_ASSETS/LOGO”>
<position>Point(640,146,0)</position>
</perchMetaObject>

These are the common elements for all the templates.

Products

Now we will place our products in accordance to our needs. If we need to have four products this will be our code. To change the position of the products you will have to move the coordinates highlighted in bold:

<!--- top left -->
<instance class=”product_toggle” replace=”1”>
<position input=”productPos”>Point(245,202,0)</position>
</instance>
<!--- top right -->
<instance class=”product_toggle” replace=”2”>
<position input=”productPos”>Point(1042,202,0)</position>
</instance>
<!--- bottom left -->
<instance class=”product_toggle” replace=”3”>
<position input=”productPos”>Point(245,570,0)</position>
</instance>
<!--- bottom right -->
<instance class=”product_toggle” replace=”4”>
<position input=”productPos”>Point(1042,570,0)</position>
</instance>

Where we call the class “product_toggle” that we will define in the X-Products_classes.xml and we give each of them their position. 

 

Classes.xml

Our main class will be the “product_toggle” that will have a name, position, content and events related to the different interactions we write for that class.

<class name=”product_toggle”>
<perchObject name=”toggler”>
<!--name of the product -->
<name input=”product_name”>product*</name>
<!--position of the product -->
<position input=”productPos”>Point(0,0,0)</position>


<!--content of the product: spotlight, pick_me_up signal and the switch -->
<content>
WE WRITE OUR CONTENT HERE
</content> 
WE WRITE OUR LIST OF EVENTS HERE
</perchObejct>
</class>

Now let’s look at the content of our product.
This will be the sound that will be triggered when we pick up the product

<!-- pickup sound -->
<soundObject name=”sound” input=”soundfile” multiplay=”1” loop=”0”>
<file input=”soundFileName”>assets/AUDIO/sound*.aif</file>
</soundObject>

If we want a sound to be played in loop we will set the condition loop to 1, so loop=”1”

 

The content of the switch that will be displayed when we pick up the product will be described later in a class called “switch”

<!-- the switch -->
<instance class=”content_switcher” replace=”*” >
<name input=”switch_name”>content_switch</name>
<position input=”switch_position”>Point(0,0,0)</position>
</instance> 

This will be the spotlight to highlight our product:

<!-- spotlight -->
<perchMetaObject name=”spotlight” folder=”assets/COMMON_ASSETS/SPOTLIGHT” />

We also place a “call for action” graphic that indicates the user how to interact with the product:

<!-- pick me up -->
<perchMetaObject name=”pickup” folder=”assets/COMMON_ASSETS/PICKMEUP” >
<show start_scale=”Point(0.95,0.95,0)” scale=”Point(1,1,0)” start_alpha=”1” alpha=”1” delay=”0” repeat=”pingpong” duration=”1” function=”sinusInOutFunc” />
<hide position=”Point(40,140,0)” alpha=”0” delay=”0” repeat=”none” duration=”0” function=”quartInOutFunc” />
<position>Point(40,140,0)</position>
</perchMetaObject>

There are some new arguments in this perchMetaobject related to the behavior that this element will have when is shown or hidden.

<show start_scale=”Point(0.95,0.95,0)” scale=”Point(1,1,0)” start_alpha=”1” alpha=”1” delay=”0” repeat=”pingpong” duration=”1” function=”sinusInOutFunc” />

This will tween the graphics from a scale of 95% to 100% during one second and then scale it back (what we call pingpong behavior)

When we pick up the products we have a fancy explosion of particles with origin in the center position of our product. This is happening thanks to this class:

<!-- particles -->
<particles name=”product*”>
<drawColor>rgb(255,255,255)</drawColor>
<folder>assets/COMMON_ASSETS/PARTICLES</folder>
<subscribe message=”PERCH_MESSAGE”/>
</particles>

Last but not least we have to create the sensor that will be sensing if our product is there or not.

<!-- sensing area -->
<volumeTrackingArea name=”objectSensor_*”>rect(0,0,300,250)</volumeTrackingArea>

The size of that rectangle (300,250) will be the dimensions of our sensor. 

Now we describe the behavior of our system.

<!--what will be displayed when we start out Perch application-->
<event type=”onInit”>
<show>spotlight</show>
<show>pickup</show>
<hide>content_switch</hide>
<hide>sound</hide>
<hide>hover_spotlight</hide>
</event> 

So we will be showing the spotlight and the pickup sing.

The same state will persist while the product is on the table, what we call "onPresent" state:

<!--what will be displayed when the product is on the table-->
<event type=”onPresent”>
<show>spotlight</show>
<show>pickup</show>
<hide>sound</hide>
<hide>content_switch</hide>
<hide>hover_spotlight</hide>
</event> 

When we remove the product of the table we want to show the content that we created for the product, hear the sound and hide the rest of  the assets:

 <!--what will be displayed when we remove the object-->
<event type=”onNotPresent”>
<broadcast_message />
<hide>spotlight</hide>
<hide>pickup</hide>
<show>content_switch</show>
<show>sound</show>
<hide>hover_spotlight</hide>
</event> 

We include a hover state that will provide a visual clue to the user of where should the product be placed. The system will sense when a hand is entering the "product area" and will display a graphic spotlight:

<event type=”onHandEnterProduct”>
<show>hover_spotlight</show>
</event> 
<event type=”onHandLeaveProduct”>
<hide>hover_spotlight</hide>
</event> 

 

Now it is time to define the content displayed when the product is removed by the user.
We will have a switch with three buttons to navigate the three sections about the product. So we have to include all those elements and define how they are interacting with each other.

Same as we did with the “product_toggle”, let’s look at the general structure of our “content_switcher” instance first:

<class name=”content_switcher”>
<perchObject>
<name input=”switch_name”>switch_name</name>
<position input=”switch_position”>Point(0,0,0)</position> 
<content>
WE WRITE OUR CONTENT HERE
</content> 
<events>
WE WRITE OUR LIST OF EVENTS HERE
</events>
</perchObject> 
</class> 

 

Let’s look at the content first.
We will have three types of content: details, which is a single image; media, which is a movie; and reviews, which is a slideshow that runs automatically through all the images in loop contained in that folder:

<!--switch content-->
<perchMetaObject name=”details” folder=”assets/PRODUCT_*/CONTENT_A”>
<rate>1</rate>
</perchMetaObject>

<perchMetaObject name=”media” folder=”assets/PRODUCT_*/CONTENT_B”>
<rate>1</rate>
</perchMetaObject>

<perchMetaObject name=”reviews” folder=”assets/PRODUCT_*/CONTENT_C”>
<rate>1</rate>
</perchMetaObject>

To navigate among that content we need some buttons. Button is another specific class that we will see in a moment:

<!-- switch buttons-->
<instance class=”button”>
<position input=”button_position”>Point(-140,152,0)</position>
<file input=”defaultI1”>assets/COMMON_ASSETS/BUTTONS/button_A.png</file>
<file input=”selectI1”>assets/COMMON_ASSETS/BUTTONS/button_A_active.png</file>
<name input=”button_name”>detail_b</name>
<handTrackingArea input=”handRegion”>rect(0,0,120,60)</handTrackingArea>
</instance> 
<instance class=”button”>
<position input=”button_position”>Point(0,152,0)</position>
<file input=”defaultI1”>assets/COMMON_ASSETS/BUTTONS/button_B.png</file>
<file input=”selectI1”>assets/COMMON_ASSETS/BUTTONS/button_B_active.png</file>
<name input=”button_name”>media_b</name>
<handTrackingArea input=”handRegion”>rect(0,0,120,60)</handTrackingArea>
</instance> 
<instance class=”button”>
<position input=”button_position”>Point(140,152,0)</position>
<file input=”defaultI1”>assets/COMMON_ASSETS/BUTTONS/button_C.png</file>
<file input=”selectI1”>assets/COMMON_ASSETS/BUTTONS/button_C_active.png</file>
<name input=”button_name”>reviews_b</name>
<handTrackingArea input=”handRegion”>rect(0,0,120,60)</handTrackingArea>
</instance> 

And the events describing the interaction will be:

<!-- events-->
<event type=”onInit”>
<tell_message message=”select”>detail_b</tell_message>
<tell_message message=”deselect”>media_b</tell_message>
<tell_message message=”deselect”>reviews_b</tell_message>
<show>details</show>
<hide>media</hide>
<hide>reviews</hide>
</event>

<event type=”onShow”>
<tell_message message=”select”>detail_b</tell_message>
<tell_message message=”deselect”>media_b</tell_message>
<tell_message message=”deselect”>reviews_b</tell_message>
<show>details</show>
<hide>media</hide>
<hide>reviews</hide>
</event> 

Which means that in the initial state of our Perch system and every time we remove the product and show the switch, the default state will be showing the “details” of the product and hiding media and reviews. The rest of the states are defined depending on which button is being pressed by the user:

<event type=”onMessage” message=”button_press” name=”detail_b”>
<tell_message message=”select”>detail_b</tell_message>
<tell_message message=”deselect”>media_b</tell_message>
<tell_message message=”deselect”>reviews_b</tell_message>
<show>details</show>
<hide>media</hide>
<hide>reviews</hide>
</event>

<event type=”onMessage” message=”button_press” name=”media_b”>
<tell_message message=”deselect”>detail_b</tell_message>
<tell_message message=”select”>media_b</tell_message>
<tell_message message=”deselect”>reviews_b</tell_message>
<hide>details</hide>
<show>media</show>
<hide>reviews</hide>
</event>

<event type=”onMessage” message=”button_press” name=”reviews_b”>
<tell_message message=”deselect”>detail_b</tell_message>
<tell_message message=”deselect”>media_b</tell_message>
<tell_message message=”select”>reviews_b</tell_message>
<hide>details</hide>
<hide>media</hide>
<show>reviews</show>
</event>

 

Finally let’s look at the whole button class:

<class name=”button”>
<perchObject>
<name input=”button_name”>button_name</name>
<position input=”button_position”>Point(0,0,0)</position>

<content protected=”1”>
<!--image of the button when is not selected-->
<image>
<file input=”defaultI1”>images/button1.png</file> 
<name>defaultGraphics</name> 
</image> 
<!--image of the button when is selected-->
<image>
<file input=”selectI1”>images/button1_selected.png</file> 
<name>selectGraphics</name> 
</image> 

<handTrackingArea input=”handRegion”>rect(0,20,180,100)</handTrackingArea>

</content>

As we can see the content of this class will be the image of the button when is not selected, the one when the user selects it and the “handTrackingArea” which is the area where the system will be checking whether is a hand/finger to declare the state of that button.

Now if we look at the events, we will send a message “button_press” to the class containing this button (in our case, the “content_switcher” ) announcing the new state of the button, so it can react to it in the way we programmed it:

<event type=”onTouchPress”> 
<bubble_message message=”button_press”/> 
</event> 


In the initial state we will be showing the default graphics:

<event type=”onInit”>
<show>defaultGraphics</show>
<hide>selectGraphics</hide>
</event>

When we receive the message “select” sent by the “content_switcher” we will be showing the "selectGraphics":

 

<event type=”onMessage” message=”select”>
<hide>defaultGraphics</hide>
<show>selectGraphics</show>
</event> 

When we receive the message “deselect” sent by the “content_switcher” we will be coming back to the initial state, so showing the "defaultGraphics" for the button:

<event type=”onMessage” message=”deselect”>
<show>defaultGraphics</show>
<hide>selectGraphics</hide>
</event>

 

6. DOWNLOAD THE TEMPLATES

Here you can download resources folder for each design in the Templates Catalogue

To run the App you will have to create a folder that contains this "resources" folder, the "settings" folder and the PERCH App that you will find in your Perch Unit.