Skip to content

html input

Jump to bottom
Peter Klooster edited this page Mar 13, 2019 · 3 revisions

AirController (HTML/JS)

HTML

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 -->

Mixins

Mixins are sections of code that get reused within AirController (vue)

Base Mixin

The base mixin is used in all AirController vue objects. It holds all base functionality.

The base mixin will add the following classes to the object:

[component-name] & [component-name]--[id || name]

<air-button name="jump"></air-button> // air-button & air-button--jump
<air-axis name="move"></air-axis> // air-axis & air-axis--move
<air-axis id="left" name="move"></air-axis> // air-axis & air-axis--left

All components using the Base mixin have the following properties:

Property Type Required|Default Description
name String True The name of this object
id String false Can be used to overwrite the value placed behind -- in the class.

Anchor Mixin

The anchor mixin helps you position objects on your controller. For the most part you don't need the worry about positioning your elements, AirController will handle the css needed to position elements.

The anchor mixin will add the following classes to the object when an anchor is set:

anchor & anchor--[anchor]

<air-button name="jump" anchor="center-center"></air-button> // anchor & anchor--center-center

All components using the Anchor mixin have the following properties:

Property Type Required|Default Description
anchor String False The anchor used to position this element. Values should be in the y-x format. Aka: top-left, top-center, top-right, center-left, center-center, center-right, bottom-left, bottom-center, bottom-right

Premium Mixin

The premium mixin allows certain components to block their action if the users are not marked as premium/hero.

The premium mixin will add the following classes to the object when premium-only is set:

premium-only & (premium-only--disabled)

// With a premium device
<air-button name="jump" anchor="center-center" premium-only></air-button> // premium-only

// With a non-premium device
<air-button name="jump" anchor="center-center" premium-only></air-button> // premium-only & premium-only--disabled

All components using the Premium mixin have the following properties:

Property Type Required|Default Description
premium-only Boolean False (false) If set the component's action will be blocked

Clone this wiki locally