airxtouch-toolkit-proxy v0.1.1

AIRxTOUCH™ Advanced developer guide for web applications

⚠ This library is only usefull if you own an AIRxTOUCH™ device ⚠

Prerequisite

• Read and understand the basic developer guidelines

Features

• Use the zoom (simulation of ctrl + mousewheel)
• Define dynamically your application layout
• Enable hover interaction

Install the AIRxTOUCH Proxy browser extension

In order to communicate with the driver with a web app, you need to install our browser extension

Activate the extension on your application

• For debug purposes we recommand to pin the extension icon on your browser
• While on your application, authorize the extension to interact with your page by clicking on the extension icon (red feather)
• Click Accept on the popup

Keep in mind that this only authorize the current url on your device. You'll need to repeat this action on every AIRxTOUCH™ device for every application.

Initialize the connection with the driver in your code

To interact with the driver, add the following div to your code

<div
  id="airxtouch-proxy"
  style="display: none"
>
</div>

• The id must be airxtouch-proxy
• The div must be available when the DOM is loaded

If you did it properly, you will see a badge on the extension icon with the "ON" label. You will also see the following line in your console : AIRxTOUCH proxy configuration detected

If the background color of the badge is green, it means that the communication with the driver is successfull

If the background color of the badge is red, it means the communication with the driver is not established.

If you are not currently running your application (eg development environnement) on a AIRxTOUCH™ device you can ignore this.

If you are running you are running your application on a AIRxTOUCH™ device, make sure the driver is launched (icon in system tray)

Interact with the driver in your code

Install our library

npm install airxtouch-toolkit-proxy --save

This library contain all the enums and objects you'll need to interact with the driver

import {
  AIRxTouchInteractionMode,
  AIRxTouchDefaultLayoutSetting,
  GetElementBounds
} from "airxtouch-proxy-helper";

You can interact with the driver by adding and editing attributes on the airxtouch-proxy div that you previously added

Examples

Simple example : Init config and toggle simple options

data-layout example : How to use data-layout & GetElementBounds