HTML component

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.

HTML properties offlineHTML properties online

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.

 Note: since this content is online, your user must be online to view it. However, you can easily create a message to inform your users using the standard component triggers "Connected (online)" / "Offline (Offline)".

 

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. :-)

 

 

login form

Insert a Login Form 

Restrict access to your app to registered users only.

 synchro

Synchronize HTML5 Animation

Display your HTML5 animations using the HTML component and use synchronization to go one step further.

 photo

Use Camera

Learn how to take a photo from your application and display it directly in your screens

 localstorage.png

Store Data Locally

Keep track of the progress of a user and unlocked stages, even after closing the application.

 use an API

Connect To An API (weather)

Connect to an API and get external data in your application such as weather conditions.

 gps.png

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 !

custom modules

Here are the instructions:

 

mceclip2.png 

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

 

 

mceclip4.png

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

 

 

mceclip6.png

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.

 

 

mceclip7.png

The insertion of the .zip file

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

Warning: 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.

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.

 

 

 

 

Was this article helpful?
1 out of 2 found this helpful

Create today your interactive content

Easy-to-use ∗ Free ∗ No installation

START NOW!