html input

HTML: Input

The HTML follows a very simple boilerplate to make the controller. The AirController.css will remove all default CSS off a browser so you start off with a blank slate that will completely fill the screen.

Page

First off everything has to be put in pages, these pages can be switched by the unity plugin. A page is created like this:

<air-page name"loading">
	<!-- page content -->
</air-page>

AirPage uses the Base Mixin | Unity reference

Button

The air-button can be used to send simple inputs to Unity. A variety of event modes can be chosen.

<air-button name"jump" mode="down">Jump</air-button>
<air-button name"select-character" mode="down" value="1">Character 1</air-button>
<air-button name"select-character" mode="down" value="2">Character 2</air-button>

AirButton has the following properties:

Property	Type	Required	Default	Description
mode	String	True		Valid inputs are: down, hold, tap, double-tap.
value	Int	False		Can be an integer value that gets send with the event.

These are the modes:

Mode	Description
down	Sends the 'down' (onTouchStart) event
hold	Sends the 'down' (onTouchStart) and 'up' (onTouchEnd) events
tap	Sends the 'down' (onTap) event
double-tap	Sends the 'down' (onDoubleTap) event

AirButton uses the Base Mixin, Anchor Mixin & Premium Mixin | Unity reference

Profile image

Loading the users profile image with AirController is exceptionally easy. The below example will load the profile image in there

<air-profile-image name="profile" anchor="center-center"></air-profile-image>

AirProfileImage uses the Base Mixin & Anchor Mixin

Device motion & orientation

By adding the air-gyroscope element to a page it will send the device motion & orientation data to Unity.

<air-page name="flying">
	<air-gyroscope name="motion"></air-gyroscope>
</air-page>

Unity reference

Pan (drag)

If you add an air-pan element to a page it's area will receive and send pan events.

<air-pan name="aim" anchor="center-center"></air-pan>

AirPan uses the Base Mixin & Anchor Mixin | Unity reference

Swipe

If you add an air-swipe element to a page it's area will receive and send swipe events.

<air-swipe name="swipe" anchor="center-center"></air-swipe>

AirSwipe uses the Base Mixin & Anchor Mixin | Unity reference

Custom data

If you set data on a device by using Device.SetData(key, data) you can let AirController put that in your HTML automatically by using the air-data element.

<air-data key="score"></air-data>

AirData uses the Base Mixin & Anchor Mixin | Unity reference

Classes

Each device in unity has a Classes variable, it's contents will be added to the class attribute of the body tag in the controller's HTML.

Unity:

Device.Classes = "color0";

CSS:

.color0 .this-div-needs-color {
    background-color: blue;
}
.color1 .this-div-needs-color {
    background-color: red
}

HTML:

<div class="this-div-needs-color"></div>
<!-- This div will now have a blue background -->