Web component

Follow

The Web component offers endless possibilities. This is the most flexible component with or without any notion of code.

Here is how you can use this component:

• Display online content: a page of your website, a YouTube video, a Google Form, a Twitter feed ... 
• Show HTML5 animation created with Edge Animate, GreenSock ...
• Get new interactive features through interactive ready-to-use modules: camera, GPS...
• If you know how to code, you'll be able to create your own modules, customize them and use them as any component of the studio.

Let's go into the details of these situations.

 

1. Online Content

This is the simplest use of the Web component.

You can display any web page directly in your application. YouTube video, Google Form , Twitter feed ... but also a page of your website!

This component is a webview of the web page of your choice.

To display a page, select the property "Online" in the component Properties window and insert the URL of your choice. Double click on the transparent area to preview HTML5 content.

 

2. HTML5 Animation

If you have a HTML5 animation (Edge Animate, GreenSock ...), you can easily incorporate it into your application.

Simply upload the .zip file in your project and use this component with the "Offline" mode. Don't forget to write the main page of your HTML in the Properties window.

Your animation is displayed in the transparent area of ​​the component: double-click it to view HTML5 content.

If you insert a .zip, please be careful to put your files in the root: they must be directly accessible after extraction to be used. Do not bundle your files in a folder when compressing.

 

3. Ready-To-Use Modules

PandaSuite offers great freedom to access new interactive features in HTML.

If you don't know how to code, we created several ready-to-use modules, detailed in the following articles. You can use them directly in your projects, you just have to download them. :-)

 

 

	Insert a Login Form  Restrict access to your app to registered users only.
	Synchronize HTML5 Animation Display your HTML5 animations using the HTML component and use synchronization to go one step further.
	Use Camera Learn how to take a photo from your application and display it directly in your screens
	Store Data Locally Keep track of the progress of a user and unlocked stages, even after closing the application.
	Connect To An API (weather) Connect to an API and get external data in your application such as weather conditions.
	Use GPS Locate your users and trigger interactions according to their geographical position.

4. Custom Modules

If you know HTML / Javascript, you can easily create your own interactive modules. They can be used as any other component of the studio. Simply upload the .zip file in the HTML component and that's all. Let's go !

Here are the instructions:

 

 

Prepare JSON File

This file lets you describe how to use your HTML. You can customize every "standard" attribute of a component. They are arranged by category in order to be easily reinterpreted in the design studio.

The list of categories:

• properties: the features of your component (Properties window)
• events: the triggers of your component (Interactivities window, when selecting the component)
• actions: the actions related to your component (Interactivities window, when creating an action on the component)
• markers: the default markers of your component (Edit window). Please note, you must authorize the creation of markers in your HTML code, see below.
• synchronization: the synchronizable properties of your component (Properties window of the Synchronization component)
• system: the custom wording of markers and arguments (Edit window)

Each feature is defined as a table composed of objects. Each object may have different properties.

The properties of the properties category:

• id: the unique identifier in your Javascript code
• name: the property name in the design studio
• locale_name: the translated name of the property. The languages ​​are listed in the standard form: en_US
• type: the type of properties.

There are 4 different types: Integer (number without decimal number, for example 2540), Float(number with decimal number, eg 14.45), String (string, eg "There are 5 cats") and Boolean (true or false ).

If the type is Integer or Float, you may also specify a min (minimum) and max (maximum).

Whatever the type of property, you can set a default value.

The activable property lets you embed a checkbox in the Property window and offer the possibility for you to turn on or off the property. If you do not use this property, it won't be possible to choose.

The properties of the actions category:

• id
• name
• locale_name
• params: the parameters of the action. It's defined as a table in which you can specify properties.

The properties of the events category:

• id
• name
• locale_name

The properties of the markers category:

• id
• name
• locale_name
• data: this property is really open: you can define any data as a marker.
• default: the default marker. If nothing is specified, this list will be empty in the studio. However, you can still add markers from the studio.

The properties of the synchronization category:

• id
• name
• locale_name

The properties of the system category:

• actions
• params
• events
• autosave

 

 

The file PandaBridge

The PandaBridge makes it easy to communicate between the HTML component and the application, in terms of transmission and reception. You must insert this file in your .zip file.

There are no changes required.

Download this file

 

 

The methods of the PandaBridge class

These methods lets you receive and send information between the component and the PandaSuite environment.

• PandaBridge.send: This is the send method to communicate from the component to the application. It is used to trace events / triggers.
• PandaBridge.init: It initalizes the component in order to execute the PandaBridge functionalities.
• PandaBridge.synchronize: This method is based on a specific function in which the arguments are the percentage of synchronization.
• PandaBridge.onLoad: This method is called only once, when visually loading the  component. This is how you receive the properties of the object and the list of markers defined in the pandasuite.json.
• PandaBridge.listen: This is how to receive actions of the studio, it is used for actions components.
• PandaBridge.isStudio: This corresponds to the action to be in the studio, for example in the case of the camera. It is boolean type, it responds to true or false.
• PandaBridge.getSnapshotData: This is how to trace the markers. It is paired with the setSnapshotData method.
• PandaBridge.setSnapshotData: This is how to edit markers. It is paired with the getSnapshotData method.

 

 

The insertion of the .zip file

Once you have prepared those files, you just have to zip them.

Insert the .zip file in an HTML component and configure this component as usually.

 

 

5. Customize online content

If you want to add interactivity to online content, you can use the pandasuite.json file and the PandaBridge file simply by adding a crossdomain.xml at the root file.