Skip to main content

Guide for JavaScript

Using our JavaScript SDK, you can implement the haptic into your JS/TS project. Type system for TypeScript, and ESM are also supported.

  1. Install package
  2. Set Up Haptic Environment

Requirements​

  • Node.js (Latest LTS version is recommended)
  • OS: Windows 10/11 (x64), macOS (Apple Silicon)
  • bHaptics Player installed and running
  • Deployed haptic application corresponding to your project
    • App ID and API Key of the haptic app
note

tact-js runs in the browser only. Use it within a web app bundled by a tool such as Vite.

About haptic application

You can create and manage haptic apps in Developer Portal, a web-based tool.

If you're unfamiliar with haptic apps or haven't created one yet, please follow the Portal guide before proceeding.

Before linking a haptic app to your game project, make sure the haptic app meets the following requirements:

  • At least one haptic event must be created.
  • API Key must be generated.
    • There is no API Key by default. To generate one, go to the "API Key" tab and click "New" button.
  • Haptic app must be deployed
    • If you see "Deploy Now" button in the upper right corner, click it to deploy your haptic app. Otherwise, if you can see "Up to date", it means that the latest haptic app has already been deployed.

Also, link process requires App ID and API Key. Go to the "Settings" tab, and check the App ID and API Key.

Check app ID, API key at the settings tab in Portal

Installation​

npm install tact-js

Import Packages​

import Tact from "tact-js";

Exclude for Optimizing​

If you are using Vite, add the following to your Vite Configuration file:

vite.config.js
export default defineConfig({
  // ...
  optimizeDeps: {
    exclude: ['tact-js'],
  },
  // ...
});

Set Up Haptic Environment​

Before using any haptic-related functions, you need to link the haptic app to your project, and initialize the haptic environment.

To do this, you need App ID and API Key of your haptic app. You can get them from the bHaptics Developer Portal.

Initialize​

  • Replace "your_app_id" and "your_api_key" with your App ID and API Key.
  • Before you launch the JavaScript project, ensure the bHaptics Player application is running on your computer.
import Tact from "tact-js";

const initTact = async () => {
  const result = await Tact.init({
    appId: "your_app_id",
    apiKey: "your_api_key",
  });

  console.log(result ? "Connection Success!" : "Connection Failed...");
}

Further Reading​

You're now ready to use the bHaptics haptic feature! Visit our JavaScript Reference to play haptics in your project, or refer the complete example code below.

If you have troubles for using this library, check the Troubleshooting.

Complete Example Code​

The example below uses Vite, since tact-js runs in the browser. Make sure bHaptics Player is running before you open the page.

index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bHaptics tact-js example</title>
  </head>
  <body>
    <button id="play">Play haptic</button>
    <pre id="log"></pre>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
src/main.js
import Tact, { PositionType } from "tact-js";

// Replace with your App ID and API Key from the bHaptics Developer Portal.
const APP_ID = "your_app_id";
const API_KEY = "your_api_key";

const logEl = document.getElementById("log");
const log = (msg) => {
  console.log(msg);
  logEl.textContent += msg + "\n";
};

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

let ready = false;

// 1. Initialize on load. bHaptics Player must already be running.
const initialize = async () => {
  log("Initializing bHaptics SDK...");
  ready = await Tact.init({ appId: APP_ID, apiKey: API_KEY });
  log(ready ? "Connected to bHaptics Player." : "Failed to connect. Is bHaptics Player running?");

  if (ready) {
    const devices = await Tact.getConnectedDevices();
    log(`Connected devices: ${JSON.stringify(devices)}`);
  }
};

// 2. Run a short haptic sequence when the button is clicked.
const runDemo = async () => {
  if (!ready) {
    log("SDK is not ready yet.");
    return;
  }

  // Play dot pattern — first 16 of the TactSuit Pro's 32 motors.
  log("- Playing dot pattern");
  const motorValues = [...Array(16).fill(50), ...Array(16).fill(0)];
  await Tact.playDot({ position: PositionType.Vest, motorValues, duration: 2000 });
  await sleep(2500);

  // Play path pattern.
  log("- Playing path pattern");
  await Tact.playPath({
    position: PositionType.Vest,
    x: [0.2, 0.4, 0.6, 0.8],
    y: [0.2, 0.8, 0.2, 0.8],
    intensity: [80, 60, 80, 60],
    duration: 3000,
  });
  await sleep(3500);

  // Play glove waveform on both hands (if connected).
  log("- Testing glove haptics");
  const motors = new Int32Array([100, 0, 0, 0, 0, 100, 0, 100]);
  const playtimes = new Int32Array([8, 0, 0, 0, 0, 1, 0, 4]);
  const shapes = new Int32Array([2, 0, 0, 0, 0, 0, 0, 0]);
  await Tact.playGlove({ position: PositionType.GloveL, motors, playtimes, shapes, repeatCount: 1 });
  await sleep(1000);
  await Tact.playGlove({ position: PositionType.GloveR, motors, playtimes, shapes, repeatCount: 1 });
  await sleep(1000);

  await Tact.stopAll();
  log("Demo completed");
};

document.getElementById("play").addEventListener("click", runDemo);

initialize();

If you want to explore more examples, check the README of our official GitHub repository.