npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@anyline/anyline-guidance-sdk

v2.1.0

Published

Anyline guidance sdk to retrieve high resolution image from a video stream with tire overlay that helps to point accurately to the tire.

Downloads

36

Readme

Anyline Guidance SDK

Anyline guidance sdk to retrieve high resolution image from a video stream with tire overlay that helps to point accurately to the tire.

See Migrating from v1 to v2

Installation

npm install @anyline/anyline-guidance-sdk

SDK Config and Callbacks

import init from '@anyline/anyline-guidance-sdk';
// ...
// call init when you want to start the sdk
init(config, callbacks);

1. config (required)

The config value is used to apply developer specific settings to the SDK. Currently, config can be used to control the number of times onboarding instructions are shown. For example:

const config = { 
  onboardingInstructions: { 
    timesShown: 3, 
  },
};

In this example, onboarding instructions will be shown for a total of 3 times, after which the onboarding instructions will be skipped and sdk will start directly at the Video Stream screen.

NOTE: timesShown is stored in the localStorage. Clearing the localStorage will reset the setting.

If you wish to show the onboarding instructions everytime the sdk is initialised, set config like so

const config = {};

2. callbacks (required)

The callbacks object consists of two functions: onComplete and onPreProcessingChecksFailed

  • onComplete (required) is called once the SDK has finished processing the image.
  • onPreProcessingChecksFailed (optional) is called when the image captured by an end-user has failed to pass image quality checks. The user has the option to either proceed with the image or take a new picture. Example:
const callbacks = { 
  onComplete: ({ blob }) => {
    // final returned image
  }, 
  onPreProcessingChecksFailed: ({ blob, message }) => {
    // intermediate image
  },
};

Migrating from v1 to v2

Key changes

  1. Initialisation
  • v1: init called with a single config object and returned a promise
  • v2: init called with two arguments: config and callbacks and no longer returns a promise (use callbacks to retrieve blob).
  1. Config
  • v1: can be empty
  • v2: for empty config use {}
  1. Callbacks (v2 only)
  • onComplete required
  • onPreProcessingChecksFailed optional

Example

v1:

const { blob } = await init({
  onboardingInstructions: {
    timesShown: 3
  }
})

v2:

const config = {
  onboardingInstructions: {
    timesShown: 3
  }
};
const callbacks = {
  onComplete: ({ blob }) => {
    // ...
  }
}
init(config, callbacks)

See SDK Config and Callbacks for detailed implementation about config and callbacks.


Developers / Contributors

To start

  • Make sure you are using the correct node version by running nvm use
  • If you don't have the required node version, install the required node version by running nvm install
  • (skip if the previous step is done) If you don't have nvm installed, install nvm (on MacOS) via brew install nvm
  • install yarn npm install -g yarn
  • run yarn to install the project dependencies

To Build

  • run yarn build (uses esbuild.config.js), it generates 3 files for 3 different integration environments
    • ESM (for ESM)
    • CJS (for commonJS)
    • IIFE (for direct script tag inclusions)

To Try

This will build public/index.html and serve public/index.html in a local server running on http://localhost:8000.

  Hot-reload is not supported on "index.html" at the moment, so you will have to manually refresh the page after every change.