<Page class="page"
	navigatingTo="onNavigatingTo"
	xmlns="http://schemas.nativescript.org/tns.xsd"
	xmlns:jv="nativescript-virtual-joystick">
	<ActionBar class="action-bar">
		<Label class="action-bar-title" text="Virtual Joystick"></Label>
	</ActionBar>

	<StackLayout>
		<Label text="{{ 'Angle: ' + angle }}" />
		<Label text="{{ 'Strength: ' + strength }}" />

		<Label text="{{ 'Left Horizontal: ' + lx }}" />
		<Label text="{{ 'Left Vertical: ' + ly }}" />

		<Label text="{{ 'Right Horizontal: ' + rx }}" />
		<Label text="{{ 'Right Vertical: ' + ry }}" />

		<StackLayout orientation="horizontal">
			<jv:VirtualJoystick
				move="onMove"
				angle="{{ angle }}"
				strength="{{ strength }}"
				xAxis="{{ lx }}"
				yAxis="{{ ly }}"
				jvColor="#AA0000"
				jvBackgroundColor="#0000AA"
				jvBorderColor="#00AA00"
				width="50%" />

			<jv:VirtualJoystick
				angle="{{ angle }}"
				strength="{{ strength }}"
				xAxis="{{ rx }}"
				yAxis="{{ ry }}"
				jvColor="#330000"
				jvBackgroundColor="#000033"
				jvBorderColor="#003300"
				buttonStickToBorder="true"
				width="50%" />
		</StackLayout>
	</StackLayout>
</Page>