Code Monkey home page Code Monkey logo

nativescript-taptic-engine's Introduction

NativeScript Taptic Engine plugin

Build Status NPM version Downloads Twitter Follow

Supported platforms

  • Official API: iPhone 7 / 7 Plus or newer
  • Unofficial API: iPhone 6s / 6s Plus or newer
  • Requires Xcode 8 to build

Installation

From the command prompt go to your app's root folder and execute:

tns plugin add nativescript-taptic-engine

Demo app (NativeScript Core, XML)

Want to dive in quickly? Check out the demo app! Otherwise, continue reading.

You can run the demo app from the root of the project by typing npm run demo.ios.device and you'll see this:

Demo app (NativeScript-Vue)

We also have a Vue demo! Check out the demo-vue app!

To run it locally:

git clone https://github.com/EddyVerbruggen/nativescript-taptic-engine
cd nativescript-taptic-engine/src
npm run demo-vue.ios

Using Angular?

There's nothing that prevents you from using Angular. Just copy the examples in the Vue or Core demo (or the snippets below).

Official API (requires at least iPhone 7)

It's recommended to use this API, but you're limited to iPhone 7 and higher. As per Apples guidelines there's no runtime way to determine if the device is capable of providing haptic feedback, so the Promise can largely be ignored so I'm not even showing them here.

The API names are modeled after what Apple has called them:

selection

Use selection feedback generators to indicate a change in selection.

TypeScript
// require the plugin
import {TapticEngine} from "nativescript-taptic-engine";

// instantiate the plugin
let tapticEngine = new TapticEngine();

tapticEngine.selection();
JavaScript
// require the plugin
var TapticEngine = require("nativescript-taptic-engine").TapticEngine;

// instantiate the plugin
var tapticEngine = new TapticEngine();

tapticEngine.selection();

notification

Use notification feedback generators to indicate successes, failures, and warnings.

There are 3 notification types: TapticEngineNotificationType.SUCCESS (default), .WARNING, and .ERROR.

TypeScript
// require the plugin
import {TapticEngine, TapticEngineNotificationType} from "nativescript-taptic-engine";

// instantiate the plugin
let tapticEngine = new TapticEngine();

tapticEngine.notification({
  type: TapticEngineNotificationType.ERROR
});

impact

Use impact feedback generators to indicate that an impact has occurred. For example, you might trigger impact feedback when a user interface object collides with something or snaps into place.

There are 3 impact styles: TapticEngineImpactStyle.LIGHT, .MEDIUM (default), and .HEAVY.

TypeScript
// require the plugin
import {TapticEngine, TapticEngineImpactStyle} from "nativescript-taptic-engine";

// instantiate the plugin
let tapticEngine = new TapticEngine();

tapticEngine.impact({
  type: TapticEngineImpactStyle.HEAVY
});

Unofficial API (requires at least iPhone 6s)

BEWARE This uses an undocumented feature which may get your app rejected when reviewed by Apple. People have used this approach without problems though.

weakBoom

This triggers the same effect as the 'Peek' in 'Peek & Pop', a very brief vibration.

TypeScript
// require the plugin
import {TapticEngineUnofficial} from "nativescript-taptic-engine";

// instantiate the plugin
let tapticEngineUnofficial = new TapticEngineUnofficial();

tapticEngineUnofficial.weakBoom().then(() => {
  // note that unsupported iOS devices like the simulator also end up here
}, (err) => {
  console.log("You're running on Android. Meh.");
});
JavaScript
// require the plugin
var TapticEngineUnofficial = require("nativescript-taptic-engine").TapticEngineUnofficial;

// instantiate the plugin
var tapticEngineUnofficial = new TapticEngineUnofficial();

tapticEngineUnofficial.weakBoom().then(
  function() {
    // note that unsupported iOS devices like the simulator also end up here
    console.log("Boomed weakly, if available.");
  }, function () {
    console.log("You're running on Android. Meh.");
  }
);

strongBoom

This triggers the 'Pop' effect of 'Peek & Pop', which is a bit more profound than the 'Peek' effect.

Codewise this is exactly the same as weakBoom, except for the function name of course.

burst

This triggers the 'Nope' effect you get when fi. force touching a home icon which doesn't have any action. It's a short burst of 3-ish 'weak booms'.

Codewise this is exactly the same as weakBoom and strongBoom, except for the function name of course.

Changelog

  • 2.1.0 Modernized the code a little, migrated to the plugin seed structure, and added a Vue demo.
  • 2.0.0 Added official API for iPhone 7. Moved the old API to TapticEngineUnofficial.*. Requires Xcode 8 to build.
  • 1.0.0 Initial release, unofficial API only. Compatible with any Xcode version.

nativescript-taptic-engine's People

Contributors

eddyverbruggen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

nativescript-taptic-engine's Issues

Webpack issue

Hi Eddy,

While trying to bundle with webpack, I'm getting the following error:

ERROR in ./pages/home/home.component.ts
Module not found: Error: Can't resolve 'nativescript-taptic-engine' in '/Users/patrickpereira/lazy/K-cal/app/pages/home'
@ ./pages/home/home.component.ts 10:0-58
@ ./pages/home/home.module.ngfactory.ts
@ .. async
@ ../~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
@ ./app.module.ngfactory.ts
@ ./main.aot.ts

Works fine when I remove nativescript-taptic-engine. Any help to make this work?

Cant find module

Im at a loss...my compiled app cant find the folder. Intellisense works, everything works fine except when I run my app I get:

file:///app/views/home/home.js:6:43: JS ERROR Error: Could not find module 'nativescript-taptic-engine'. Computed path '/var/mobile/Containers/Data/Application/B65BB3AF-ED2B-44AF-BF5D-9DF5586D84FC/Library/Application Support/LiveSync/app/tns_modules/nativescript-taptic-engine'.

Its listed as a plugin when I run tns plugin, when I import it I get intellisense on it:

import { TapticEngine } from "nativescript-taptic-engine";
let tap = new TapticEngine();

but calling new TapticEngine() triggers that error. This is happening on two different projects, one angular one not, and I've tried removing my platforms entirely and re-adding. Any ideas?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.