Typescript support .d.ts about quaggajs

[sharikovvladislav]

Why don't you merge some of this?

https://github.com/serratus/quaggaJS/pulls?utf8=%E2%9C%93&q=is%3Apr%20is%3Aopen%20type

IDE doesn't help since you don't have types property in package.json. https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html

[madmanpierre]

Hi Chris,

I don’t know what I have done wrong with my pull requests (or did you receive them and just not merge them?)

Anyway, since it is just one file and you are the only public project I’ve contributed to … here is the most up to date d.ts file I have if you want to put it into your product.

Regards,

Peter Horwood aka Madman Pierre

VP Development

Maintenance Connection Canada (Asset Pro Solutions Inc.)

Site 1 Box 47 RR 1 Stn. Main

282135 Symon’s Valley Road

Airdrie, Alberta T4B 2A3 Canada

403.993.7890

From: peter horwood [mailto:[email protected]]
Sent: Monday, August 24, 2015 8:47 AM
To: 'serratus/quaggaJS' [email protected]
Subject: RE: [quaggaJS] Typescript support .d.ts (#42)

Hi, yes I have it available. I was going to wait until I got feedback ‘here’ before pushing it to definitely typed.

I had submitted a pull request later today, but I’ll do another one and see if we can get it here.

From: Ian Yates [mailto:[email protected]]
Sent: August 24, 2015 1:22 AM
To: serratus/quaggaJS <[email protected] mailto:[email protected] >
Cc: peter horwood aka Madman Pierre <[email protected] mailto:[email protected] >
Subject: Re: [quaggaJS] Typescript support .d.ts (#42)

@madmanpierre https://github.com/madmanpierre - have you got your definition ready? I checked Definitely Typed but couldn't see anything there, nor any *.d.ts file in this repo. If creating the PR is a bit tricky could you post it as a gist?

When I get around to trying this library in a couple of days (and working on getting it going in IE 11 if I'm lucky) then I'll turn to creating a definition file but it'd be great if yours was available instead.

—
Reply to this email directly or view it on GitHub #42 (comment) . https://github.com/notifications/beacon/AC7G00DNYS09Ao9lZLgUpEIApoLmH15Hks5oqr2pgaJpZM4E6LnK.gif

// Type definitions for QuaggaJS v2015.05.20
// Project: http://serratus.github.io/quaggaJS/
// Definitions by: Cam Birch, Peter Horwood aka Madman Pierre

declare var Quagga: QuaggaJSStatic;

interface QuaggaJSStatic {
/**
* This method initializes the library for a given configuration config (see below) and invokes the callback
* when Quagga is ready to start. The initialization process also requests for camera access if real-time
* detection is configured.
/
init(config: QuaggaJSConfigObject, callback?: (err: any /TS 1.3 does not include NavigatorUserMediaError/) => void): void;
init(config: QuaggaJSConfigObject, callback: (err: any) => void, imageWrapper: any): void;
/*
* When the library is initialized, the start() method starts the video-stream and begins locating and decoding
* the images.
/
start(): void;
/*
* If the decoder is currently running, after calling stop() the decoder does not process any more images.
* Additionally, if a camera-stream was requested upon initialization, this operation also disconnects the
* camera.
*/
stop(): void;

/**
 * Only declared in source....
 */
pause(): void;

/**
 * This method registers a callback(data) function that is called for each frame after the processing is done.
 * The data object contains detailed information about the success/failure of the operation. The output varies,
 * depending whether the detection and/or decoding were successful or not.
 */
onProcessed(callback: QuaggaJSResultCallbackFunction): void;
/**
 * Registers a callback(data) function which is triggered whenever a barcode- pattern has been located and
 * decoded successfully. The passed data object contains information about the decoding process including the
 * detected code which can be obtained by calling data.codeResult.code.
 */
onDetected(callback: QuaggaJSResultCallbackFunction): void;

ResultCollector: QuaggaJSResultCollector;

/**
*
*/
registerResultCollector(resultCollector: QuaggaJSResultCollector): void;

/**
 * Only declared in source....
 */
setReaders(readers: any): void;

/**
 * In contrast to the calls described above, this method does not rely on getUserMedia and operates on a single
 * image instead. The provided callback is the same as in onDetected and contains the result data object.
 */
decodeSingle(config: QuaggaJSConfigObject, resultCallback: QuaggaJSResultCallbackFunction): void;
/**
* I have not figured ImageDebug out fully yet
*/
ImageDebug: {
    drawPath: QuaggaJSDebugDrawPath;
    drawRect: QuaggaJSDebugDrawRect;
};

ImageWrapper: any;

/**
* an object Quagga uses for drawing and processing, useful for calling code when debugging
*/
canvas: {
    ctx: {
        image: CanvasRenderingContext2D;
        overlay: CanvasRenderingContext2D
    };
    dom: {
        image: HTMLCanvasElement;
        overlay: HTMLCanvasElement
    }
};

}

/**

• Called whenever an item is detected or a process step has been completed.
  */
  interface QuaggaJSResultCallbackFunction {
  (data: QuaggaJSResultObject): void;
  }

/**

• Called to draw debugging path. The path is an array of array of 2 numbers.
• The def.x specifies element in the sub array is the x, and similary the def.y defines the y.
• typical values 0, 1, 'x', 'y'
  /
  interface QuaggaJSDebugDrawPath { (path: any[], def: QuaggaJSxyDef, ctx: CanvasRenderingContext2D, style: QuaggaJSStyle): void }
  /*
• Called to draw debugging Rectangle
  */
  interface QuaggaJSDebugDrawRect { (pos: any[], size: QuaggaJSRectSize, ctx: CanvasRenderingContext2D, style: QuaggaJSStyle): void }

/**

• an object with an x and a y value, the x and y specify which element in another array is the x or y value.
• typical values 0, 1, 'x', 'y'
  /
  interface QuaggaJSxyDef {
  x: any;
  y: any;
  }
  /*
• an object with an x and a y value
  /
  interface QuaggaJSxy {
  x: number;
  y: number;
  }
  /*
• an object with a pair of x and a y values.
• Used for giving a htiml canvas context.strokeRect function it's x, y, width and height values.
  */
  interface QuaggaJSRectSize {
  pos: QuaggaJSxy;
  size: QuaggaJSxy;
  }

/**

• an object with the styles, color can actually be a color, a gradient or a pattern (see defintions for context.strokeStyle.
• But is most commonly a colour.
  /
  interface QuaggaJSStyle {
  color: string;
  lineWidth: number; / http://www.w3schools.com/tags/canvas_linewidth.asp /
  }
  /*
  • Pass when creating a ResultCollector
    /
    interface QuaggaJSResultCollector {
    /*
  • keep track of the image producing this result
    /
    capture?: boolean;
    /*
  • maximum number of results to store
    /
    capacity?: number;
    /*
  • a list of codes that should not be recorded. This is effectively a list of filters that return false.
    /
    blacklist?: QuaggaJSCodeResult;
    /*
  • passed a QuaggaJSCodeResult, return true if you want this to be stored, false if you don't. Note: The black list is effectively a list of filters that return false.
  • so if you only want to store results that are ean_13, you would say return codeResult.format==="ean_13"
    /
    filter?: QuaggaJSResultCollectorFilterFunction;
    /
  • a static function that returns you a ResultCollector
    /
    create? (QuaggaJSResultCollector): QuaggaJSResultCollector;
    getResults? (): QuaggaJSCodeResult[];
    }
    /*
• used for ResultCollector blacklists and filters
  /
  interface QuaggaJSCodeResult {
  code?: string;
  format?: string;
  }
  /*
  • Called to filter which Results to collect in ResultCollector
    /
    interface QuaggaJSResultCollectorFilterFunction {
    (data: QuaggaJSCodeResult): boolean;
    }
    /*
  • The callbacks passed into onProcessed, onDetected and decodeSingle receive a data object upon execution.
  • The data object contains the following information. Depending on the success, some fields may be
  • undefined or just empty.
    */
    interface QuaggaJSResultObject {
    codeResult: QuaggaJSResultObject_CodeResult;
    line: {
    x: number;
    y: number;
    }[];
    angle: number;
    pattern: number[];
    box: number[][];
    boxes: number[][][];
    }
    interface QuaggaJSResultObject_CodeResult {
    code: string;
    start: number;
    end: number;
    codeset: number;
    startInfo: {
    error: number;
    code: number;
    start: number;
    end: number;
    };
    decodedCodes: {
    error?: number;
    code: number;
    start: number;
    end: number;
    }[];
    endInfo: {
    error: number;
    code: number;
    start: number;
    end: number;
    };
    direction: number;
    format: string;
    }

interface QuaggaJSConfigObject {
/**
* The image path to load from, or a data url
* Ex: '/test/fixtures/code_128/image-001.jpg'
* or: 'data:image/jpg;base64,' + data
*/
src?: string;

inputStream?: {
    /**
     * @default "Live"
     */
    name?: string;
    /**
     * @default "LiveStream"
     */
    type?: string;
    constraints?: {
        /**
         * @default 640
         */
        width?: number;
        /**
         * @default 480
         */
        height?: number;
        /**
         * @default "environment"
         */
        facing?: string;
    };
    /**
    * defines rectangle of the detection/localization area. Useful when you KNOW that certain parts of the image will not contain a barcode, also useful when you have multiple barcodes in a row and you want to make sure that only a code in, say the middle quarter is read not codes above or below
    */
    area?: {
        /**
        * @default "0%", set this and bottom to 25% if you only want to read a 'line' that is in the middle quarter
        */
        top?: string;
        /**
        * @default "0%"
        */
        right?: string;
        /**
        * @default "0%"
        */
        left?: string;
        /**
        * @default "0%", set this and top to 50% if you only want to read a 'line' that is in the middle half
        */
        bottom?: string;
    };
    singleChannel?: boolean;

    size?: number;
    sequence?: boolean;
};
/**
 * @default false
 */
tracking?: boolean;
/**
 * @default false
 */
debug?: boolean;
/**
 * @default false
 */
controls?: boolean;
/**
 * @default true
 */
locate?: boolean;
/**
 * @default 4
 */
numOfWorkers?: number;
visual?: {
    /**
     * @default true
     */
    show?: boolean;
};
decoder?: {
    /**
     * @default false
     */
    drawBoundingBox?: boolean;
    /**
     * @default false
     */
    showFrequency?: boolean;
    /**
     * @default true
     */
    drawScanline?: boolean;
    /**
     * @default false
     */
    showPattern?: boolean;
    /**
     * @default [ "code_128_reader" ]
     */
    readers?: string[];
};
locator?: {
    /**
     * @default true
     */
    halfSample?: boolean;
    /**
     * @default "medium"
     * Available values: x-small, small, medium, large, x-large
     */
    patchSize?: string;
    /**
     * @default false
     */
    showCanvas?: boolean;
    /**
     * @default false
     */
    showPatches?: boolean;
    /**
     * @default false
     */
    showFoundPatches?: boolean;
    /**
     * @default false
     */
    showSkeleton?: boolean;
    /**
     * @default false
     */
    showLabels?: boolean;
    /**
     * @default false
     */
    showPatchLabels?: boolean;
    /**
     * @default false
     */
    showRemainingPatchLabels?: boolean;
    boxFromPatches?: {
        /**
         * @default false
         */
        showTransformed?: boolean;
        /**
         * @default false
         */
        showTransformedBox?: boolean;
        /**
         * @default false
         */
        showBB?: boolean;
    };
};

}

[serratus]

Thanks for your effort. I'm totally new to TypeScript, but like the concept quite a lot, especially having Java background makes things more predictable.

Simply out of curiosity, can you send me a pre-release?

[madmanpierre]

I'm not sure how to send it to you other than posting 'here' so .... here it is, and it is working for everything I am using quagga for so far, fully documented with JavaDoc's too so intellisense works in Visual Studio:

[madmanpierre]

That didn't work. Markdown messed it up. I'll think of some other way.

[serratus]

No worries. I've received your file and will review it. But having it in the repository makes sense. You can simply create a pull request by forking the repository and attaching the file to a new branch in your fork. Then GitHub should already ask you about a possible pull request.

[madmanpierre]

I see that the new format attribute is working (Issue 45). I'll update my fork and send another pull request tomorrow with the updated .d.ts file. Note: the .d.ts file in the current pull request has now completed my testing and, other than this update to meet your issue 45 change, I am content that the .d.ts file is working correctly. There will be some details I haven't tested, but I've tested everything I will be using and a few extras, and everything worked. (And I have done NO testing of Quagga except using Typescript.)

[madmanpierre]

For my pull request ... what directory do you WANT the .d.ts file in? It does not matter from ts's perspective, and it is ONLY used during development, it is NOT used with user runtime, so it just has to be in a place it can be easily found for developers. I could create a d.ts directory and put it in there if you want. But once I know where you want it, I'm ready for a new pull request with it.

[serratus]

I'm happy with anything you prefer, since you have much more knowledge in TypeScript than I have. My suggestion for such files is simply the root directory, because it serves a similar purpose as the package.json file, or any other index file related to the project.

[IanYates]

@madmanpierre - have you got your definition ready? I checked Definitely Typed but couldn't see anything there, nor any *.d.ts file in this repo. If creating the PR is a bit tricky could you post it as a gist?

When I get around to trying this library in a couple of days (and working on getting it going in IE 11 if I'm lucky) then I'll turn to creating a definition file but it'd be great if yours was available instead.

[madmanpierre]

Hi, yes I have it available. I was going to wait until I got feedback ‘here’ before pushing it to definitely typed.

I had submitted a pull request later today, but I’ll do another one and see if we can get it here.

From: Ian Yates [mailto:[email protected]]
Sent: August 24, 2015 1:22 AM
To: serratus/quaggaJS [email protected]
Cc: peter horwood aka Madman Pierre [email protected]
Subject: Re: [quaggaJS] Typescript support .d.ts (#42)

@madmanpierre https://github.com/madmanpierre - have you got your definition ready? I checked Definitely Typed but couldn't see anything there, nor any *.d.ts file in this repo. If creating the PR is a bit tricky could you post it as a gist?

When I get around to trying this library in a couple of days (and working on getting it going in IE 11 if I'm lucky) then I'll turn to creating a definition file but it'd be great if yours was available instead.

—
Reply to this email directly or view it on GitHub #42 (comment) . https://github.com/notifications/beacon/AC7G00DNYS09Ao9lZLgUpEIApoLmH15Hks5oqr2pgaJpZM4E6LnK.gif

[MichaelSL]

Hi. I have added a request to Definitely typed and then found this post. @madmanpierre , @serratus , have you published the types definitions file somewhere?

[madmanpierre]

I tried a pull request a couple times but either I messed up or the pull request hasn’t been accepted.

I’ve attached it here (to my email reply), hopefully it will come through.

If not, look up madmanpierre on skype, in your contact request state the reason is you want this file and I’ll accept and send it to you.

Hi. I have added a request to Definitely typed DefinitelyTyped/DefinitelyTyped#8707 and then found this post. @madmanpierre https://github.com/madmanpierre , @serratus https://github.com/serratus , have you published the types definitions file somewhere?

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub #42 (comment) https://github.com/notifications/beacon/AC7G0wy8Q6RqyMJtyJBYJAYqwZkS7jsjks5pwpD9gaJpZM4E6LnK.gif

// Type definitions for QuaggaJS v2015.05.20
// Project: http://serratus.github.io/quaggaJS/
// Definitions by: Cam Birch, Peter Horwood aka Madman Pierre

declare var Quagga: QuaggaJSStatic;

interface QuaggaJSStatic {
/**
* This method initializes the library for a given configuration config (see below) and invokes the callback
* when Quagga is ready to start. The initialization process also requests for camera access if real-time
* detection is configured.
/
init(config: QuaggaJSConfigObject, callback?: (err: any /TS 1.3 does not include NavigatorUserMediaError/) => void): void;
init(config: QuaggaJSConfigObject, callback: (err: any) => void, imageWrapper: any): void;
/*
* When the library is initialized, the start() method starts the video-stream and begins locating and decoding
* the images.
/
start(): void;
/*
* If the decoder is currently running, after calling stop() the decoder does not process any more images.
* Additionally, if a camera-stream was requested upon initialization, this operation also disconnects the
* camera.
*/
stop(): void;

/**
 * Only declared in source....
 */
pause(): void;

/**
 * This method registers a callback(data) function that is called for each frame after the processing is done.
 * The data object contains detailed information about the success/failure of the operation. The output varies,
 * depending whether the detection and/or decoding were successful or not.
 */
onProcessed(callback: QuaggaJSResultCallbackFunction): void;
/**
 * Registers a callback(data) function which is triggered whenever a barcode- pattern has been located and
 * decoded successfully. The passed data object contains information about the decoding process including the
 * detected code which can be obtained by calling data.codeResult.code.
 */
onDetected(callback: QuaggaJSResultCallbackFunction): void;

ResultCollector: QuaggaJSResultCollector;

/**
*
*/
registerResultCollector(resultCollector: QuaggaJSResultCollector): void;

/**
 * Only declared in source....
 */
setReaders(readers: any): void;

/**
 * In contrast to the calls described above, this method does not rely on getUserMedia and operates on a single
 * image instead. The provided callback is the same as in onDetected and contains the result data object.
 */
decodeSingle(config: QuaggaJSConfigObject, resultCallback: QuaggaJSResultCallbackFunction): void;
/**
* I have not figured ImageDebug out fully yet
*/
ImageDebug: {
    drawPath: QuaggaJSDebugDrawPath;
    drawRect: QuaggaJSDebugDrawRect;
};

ImageWrapper: any;

/**
* an object Quagga uses for drawing and processing, useful for calling code when debugging
*/
canvas: {
    ctx: {
        image: CanvasRenderingContext2D;
        overlay: CanvasRenderingContext2D
    };
    dom: {
        image: HTMLCanvasElement;
        overlay: HTMLCanvasElement
    }
};

}

/**

• Called whenever an item is detected or a process step has been completed.
  */
  interface QuaggaJSResultCallbackFunction {
  (data: QuaggaJSResultObject): void;
  }

/**

• Called to draw debugging path. The path is an array of array of 2 numbers.
• The def.x specifies element in the sub array is the x, and similary the def.y defines the y.
• typical values 0, 1, 'x', 'y'
  /
  interface QuaggaJSDebugDrawPath { (path: any[], def: QuaggaJSxyDef, ctx: CanvasRenderingContext2D, style: QuaggaJSStyle): void }
  /*
• Called to draw debugging Rectangle
  */
  interface QuaggaJSDebugDrawRect { (pos: any[], size: QuaggaJSRectSize, ctx: CanvasRenderingContext2D, style: QuaggaJSStyle): void }

/**

• an object with an x and a y value, the x and y specify which element in another array is the x or y value.
• typical values 0, 1, 'x', 'y'
  /
  interface QuaggaJSxyDef {
  x: any;
  y: any;
  }
  /*
• an object with an x and a y value
  /
  interface QuaggaJSxy {
  x: number;
  y: number;
  }
  /*
• an object with a pair of x and a y values.
• Used for giving a htiml canvas context.strokeRect function it's x, y, width and height values.
  */
  interface QuaggaJSRectSize {
  pos: QuaggaJSxy;
  size: QuaggaJSxy;
  }

/**

• an object with the styles, color can actually be a color, a gradient or a pattern (see defintions for context.strokeStyle.
• But is most commonly a colour.
  /
  interface QuaggaJSStyle {
  color: string;
  lineWidth: number; / http://www.w3schools.com/tags/canvas_linewidth.asp /
  }
  /*
  • Pass when creating a ResultCollector
    /
    interface QuaggaJSResultCollector {
    /*
  • keep track of the image producing this result
    /
    capture?: boolean;
    /*
  • maximum number of results to store
    /
    capacity?: number;
    /*
  • a list of codes that should not be recorded. This is effectively a list of filters that return false.
    /
    blacklist?: QuaggaJSCodeResult;
    /*
  • passed a QuaggaJSCodeResult, return true if you want this to be stored, false if you don't. Note: The black list is effectively a list of filters that return false.
  • so if you only want to store results that are ean_13, you would say return codeResult.format==="ean_13"
    /
    filter?: QuaggaJSResultCollectorFilterFunction;
    /
  • a static function that returns you a ResultCollector
    /
    create? (QuaggaJSResultCollector): QuaggaJSResultCollector;
    getResults? (): QuaggaJSCodeResult[];
    }
    /*
• used for ResultCollector blacklists and filters
  /
  interface QuaggaJSCodeResult {
  code?: string;
  format?: string;
  }
  /*
  • Called to filter which Results to collect in ResultCollector
    /
    interface QuaggaJSResultCollectorFilterFunction {
    (data: QuaggaJSCodeResult): boolean;
    }
    /*
  • The callbacks passed into onProcessed, onDetected and decodeSingle receive a data object upon execution.
  • The data object contains the following information. Depending on the success, some fields may be
  • undefined or just empty.
    */
    interface QuaggaJSResultObject {
    codeResult: QuaggaJSResultObject_CodeResult;
    line: {
    x: number;
    y: number;
    }[];
    angle: number;
    pattern: number[];
    box: number[][];
    boxes: number[][][];
    }
    interface QuaggaJSResultObject_CodeResult {
    code: string;
    start: number;
    end: number;
    codeset: number;
    startInfo: {
    error: number;
    code: number;
    start: number;
    end: number;
    };
    decodedCodes: {
    error?: number;
    code: number;
    start: number;
    end: number;
    }[];
    endInfo: {
    error: number;
    code: number;
    start: number;
    end: number;
    };
    direction: number;
    format: string;
    }

interface QuaggaJSConfigObject {
/**
* The image path to load from, or a data url
* Ex: '/test/fixtures/code_128/image-001.jpg'
* or: 'data:image/jpg;base64,' + data
*/
src?: string;

inputStream?: {
    /**
     * @default "Live"
     */
    name?: string;
    /**
     * @default "LiveStream"
     */
    type?: string;
    constraints?: {
        /**
         * @default 640
         */
        width?: number;
        /**
         * @default 480
         */
        height?: number;
        /**
         * @default "environment"
         */
        facing?: string;
    };
    /**
    * defines rectangle of the detection/localization area. Useful when you KNOW that certain parts of the image will not contain a barcode, also useful when you have multiple barcodes in a row and you want to make sure that only a code in, say the middle quarter is read not codes above or below
    */
    area?: {
        /**
        * @default "0%", set this and bottom to 25% if you only want to read a 'line' that is in the middle quarter
        */
        top?: string;
        /**
        * @default "0%"
        */
        right?: string;
        /**
        * @default "0%"
        */
        left?: string;
        /**
        * @default "0%", set this and top to 50% if you only want to read a 'line' that is in the middle half
        */
        bottom?: string;
    };
    singleChannel?: boolean;

    size?: number;
    sequence?: boolean;
};
/**
 * @default false
 */
tracking?: boolean;
/**
 * @default false
 */
debug?: boolean;
/**
 * @default false
 */
controls?: boolean;
/**
 * @default true
 */
locate?: boolean;
/**
 * @default 4
 */
numOfWorkers?: number;
visual?: {
    /**
     * @default true
     */
    show?: boolean;
};
decoder?: {
    /**
     * @default false
     */
    drawBoundingBox?: boolean;
    /**
     * @default false
     */
    showFrequency?: boolean;
    /**
     * @default true
     */
    drawScanline?: boolean;
    /**
     * @default false
     */
    showPattern?: boolean;
    /**
     * @default [ "code_128_reader" ]
     */
    readers?: string[];
};
locator?: {
    /**
     * @default true
     */
    halfSample?: boolean;
    /**
     * @default "medium"
     * Available values: x-small, small, medium, large, x-large
     */
    patchSize?: string;
    /**
     * @default false
     */
    showCanvas?: boolean;
    /**
     * @default false
     */
    showPatches?: boolean;
    /**
     * @default false
     */
    showFoundPatches?: boolean;
    /**
     * @default false
     */
    showSkeleton?: boolean;
    /**
     * @default false
     */
    showLabels?: boolean;
    /**
     * @default false
     */
    showPatchLabels?: boolean;
    /**
     * @default false
     */
    showRemainingPatchLabels?: boolean;
    boxFromPatches?: {
        /**
         * @default false
         */
        showTransformed?: boolean;
        /**
         * @default false
         */
        showTransformedBox?: boolean;
        /**
         * @default false
         */
        showBB?: boolean;
    };
};

}

[MichaelSL]

@madmanpierre , thank you!

[andreujuanc]

This requires lots of work to maintain the definition up-to-date. If just need to work with Quagga and Typescript you can just declare var Quagga: any; on top of your class, and thats it :) Works for me fine.

BTW, Quagga is a great project! cheers to the author.

[serratus]

Unfortunately I have too little expertise on the topic of Typescript. But it seems very suitable for documenting a public API such as this one for Quagga. May I ask which tools you are using for development in Typescript? Anything special?

[madmanpierre]

I use Visual Studio Community edition and Pro edition. While Typescript is nice for the documentation, I really like it for getting design/compile time errors instead of runtime errors. That way I get the errors instead of my customers. Using Visual Studio I also get intellisense which makes it easier to ‘remember’ the 1000’s of function calls in dozens of libraries we use.

Regards,

Peter Horwood aka Madman Pierre

VP Development

Maintenance Connection Canada (Asset Pro Solutions Inc.)

Site 1 Box 47 RR 1 Stn. Main

282135 Symon’s Valley Road

Airdrie, Alberta T4B 2A3 Canada

403.993.7890

From: Christoph Oberhofer [mailto:[email protected]]
Sent: Tuesday, May 3, 2016 3:04 PM
To: serratus/quaggaJS [email protected]
Cc: peter horwood aka Madman Pierre [email protected]; Mention [email protected]
Subject: Re: [serratus/quaggaJS] Typescript support .d.ts (#42)

Unfortunately I have too little expertise on the topic of Typescript. But it seems very suitable for documenting a public API such as this one for Quagga. May I ask which tools you are using for development in Typescript? Anything special?

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub #42 (comment) https://github.com/notifications/beacon/AC7G07sai02ya2pvncliwUoNN0wXm86mks5p97glgaJpZM4E6LnK.gif

// Type definitions for QuaggaJS v2015.05.20
// Project: http://serratus.github.io/quaggaJS/
// Definitions by: Cam Birch, Peter Horwood aka Madman Pierre

declare var Quagga: QuaggaJSStatic;

interface QuaggaJSStatic {
/**
* This method initializes the library for a given configuration config (see below) and invokes the callback
* when Quagga is ready to start. The initialization process also requests for camera access if real-time
* detection is configured.
/
init(config: QuaggaJSConfigObject, callback?: (err: any /TS 1.3 does not include NavigatorUserMediaError/) => void): void;
init(config: QuaggaJSConfigObject, callback: (err: any) => void, imageWrapper: any): void;
/*
* When the library is initialized, the start() method starts the video-stream and begins locating and decoding
* the images.
/
start(): void;
/*
* If the decoder is currently running, after calling stop() the decoder does not process any more images.
* Additionally, if a camera-stream was requested upon initialization, this operation also disconnects the
* camera.
*/
stop(): void;

/**
 * Only declared in source....
 */
pause(): void;

/**
 * This method registers a callback(data) function that is called for each frame after the processing is done.
 * The data object contains detailed information about the success/failure of the operation. The output varies,
 * depending whether the detection and/or decoding were successful or not.
 */
onProcessed(callback: QuaggaJSResultCallbackFunction): void;
/**
 * Registers a callback(data) function which is triggered whenever a barcode- pattern has been located and
 * decoded successfully. The passed data object contains information about the decoding process including the
 * detected code which can be obtained by calling data.codeResult.code.
 */
onDetected(callback: QuaggaJSResultCallbackFunction): void;

ResultCollector: QuaggaJSResultCollector;

/**
*
*/
registerResultCollector(resultCollector: QuaggaJSResultCollector): void;

/**
 * Only declared in source....
 */
setReaders(readers: any): void;

/**
 * In contrast to the calls described above, this method does not rely on getUserMedia and operates on a single
 * image instead. The provided callback is the same as in onDetected and contains the result data object.
 */
decodeSingle(config: QuaggaJSConfigObject, resultCallback: QuaggaJSResultCallbackFunction): void;
/**
* I have not figured ImageDebug out fully yet
*/
ImageDebug: {
    drawPath: QuaggaJSDebugDrawPath;
    drawRect: QuaggaJSDebugDrawRect;
};

ImageWrapper: any;

/**
* an object Quagga uses for drawing and processing, useful for calling code when debugging
*/
canvas: {
    ctx: {
        image: CanvasRenderingContext2D;
        overlay: CanvasRenderingContext2D
    };
    dom: {
        image: HTMLCanvasElement;
        overlay: HTMLCanvasElement
    }
};

}

/**

• Called whenever an item is detected or a process step has been completed.
  */
  interface QuaggaJSResultCallbackFunction {
  (data: QuaggaJSResultObject): void;
  }

/**

• Called to draw debugging path. The path is an array of array of 2 numbers.
• The def.x specifies element in the sub array is the x, and similary the def.y defines the y.
• typical values 0, 1, 'x', 'y'
  /
  interface QuaggaJSDebugDrawPath { (path: any[], def: QuaggaJSxyDef, ctx: CanvasRenderingContext2D, style: QuaggaJSStyle): void }
  /*
• Called to draw debugging Rectangle
  */
  interface QuaggaJSDebugDrawRect { (pos: any[], size: QuaggaJSRectSize, ctx: CanvasRenderingContext2D, style: QuaggaJSStyle): void }

/**

• an object with an x and a y value, the x and y specify which element in another array is the x or y value.
• typical values 0, 1, 'x', 'y'
  /
  interface QuaggaJSxyDef {
  x: any;
  y: any;
  }
  /*
• an object with an x and a y value
  /
  interface QuaggaJSxy {
  x: number;
  y: number;
  }
  /*
• an object with a pair of x and a y values.
• Used for giving a htiml canvas context.strokeRect function it's x, y, width and height values.
  */
  interface QuaggaJSRectSize {
  pos: QuaggaJSxy;
  size: QuaggaJSxy;
  }

/**

• an object with the styles, color can actually be a color, a gradient or a pattern (see defintions for context.strokeStyle.
• But is most commonly a colour.
  /
  interface QuaggaJSStyle {
  color: string;
  lineWidth: number; / http://www.w3schools.com/tags/canvas_linewidth.asp /
  }
  /*
  • Pass when creating a ResultCollector
    /
    interface QuaggaJSResultCollector {
    /*
  • keep track of the image producing this result
    /
    capture?: boolean;
    /*
  • maximum number of results to store
    /
    capacity?: number;
    /*
  • a list of codes that should not be recorded. This is effectively a list of filters that return false.
    /
    blacklist?: QuaggaJSCodeResult;
    /*
  • passed a QuaggaJSCodeResult, return true if you want this to be stored, false if you don't. Note: The black list is effectively a list of filters that return false.
  • so if you only want to store results that are ean_13, you would say return codeResult.format==="ean_13"
    /
    filter?: QuaggaJSResultCollectorFilterFunction;
    /
  • a static function that returns you a ResultCollector
    /
    create? (QuaggaJSResultCollector): QuaggaJSResultCollector;
    getResults? (): QuaggaJSCodeResult[];
    }
    /*
• used for ResultCollector blacklists and filters
  /
  interface QuaggaJSCodeResult {
  code?: string;
  format?: string;
  }
  /*
  • Called to filter which Results to collect in ResultCollector
    /
    interface QuaggaJSResultCollectorFilterFunction {
    (data: QuaggaJSCodeResult): boolean;
    }
    /*
  • The callbacks passed into onProcessed, onDetected and decodeSingle receive a data object upon execution.
  • The data object contains the following information. Depending on the success, some fields may be
  • undefined or just empty.
    */
    interface QuaggaJSResultObject {
    codeResult: QuaggaJSResultObject_CodeResult;
    line: {
    x: number;
    y: number;
    }[];
    angle: number;
    pattern: number[];
    box: number[][];
    boxes: number[][][];
    }
    interface QuaggaJSResultObject_CodeResult {
    code: string;
    start: number;
    end: number;
    codeset: number;
    startInfo: {
    error: number;
    code: number;
    start: number;
    end: number;
    };
    decodedCodes: {
    error?: number;
    code: number;
    start: number;
    end: number;
    }[];
    endInfo: {
    error: number;
    code: number;
    start: number;
    end: number;
    };
    direction: number;
    format: string;
    }

interface QuaggaJSConfigObject {
/**
* The image path to load from, or a data url
* Ex: '/test/fixtures/code_128/image-001.jpg'
* or: 'data:image/jpg;base64,' + data
*/
src?: string;

inputStream?: {
    /**
     * @default "Live"
     */
    name?: string;
    /**
     * @default "LiveStream"
     */
    type?: string;
    constraints?: {
        /**
         * @default 640
         */
        width?: number;
        /**
         * @default 480
         */
        height?: number;
        /**
         * @default "environment"
         */
        facing?: string;
    };
    /**
    * defines rectangle of the detection/localization area. Useful when you KNOW that certain parts of the image will not contain a barcode, also useful when you have multiple barcodes in a row and you want to make sure that only a code in, say the middle quarter is read not codes above or below
    */
    area?: {
        /**
        * @default "0%", set this and bottom to 25% if you only want to read a 'line' that is in the middle quarter
        */
        top?: string;
        /**
        * @default "0%"
        */
        right?: string;
        /**
        * @default "0%"
        */
        left?: string;
        /**
        * @default "0%", set this and top to 50% if you only want to read a 'line' that is in the middle half
        */
        bottom?: string;
    };
    singleChannel?: boolean;

    size?: number;
    sequence?: boolean;
};
/**
 * @default false
 */
tracking?: boolean;
/**
 * @default false
 */
debug?: boolean;
/**
 * @default false
 */
controls?: boolean;
/**
 * @default true
 */
locate?: boolean;
/**
 * @default 4
 */
numOfWorkers?: number;
visual?: {
    /**
     * @default true
     */
    show?: boolean;
};
decoder?: {
    /**
     * @default false
     */
    drawBoundingBox?: boolean;
    /**
     * @default false
     */
    showFrequency?: boolean;
    /**
     * @default true
     */
    drawScanline?: boolean;
    /**
     * @default false
     */
    showPattern?: boolean;
    /**
     * @default [ "code_128_reader" ]
     */
    readers?: string[];
};
locator?: {
    /**
     * @default true
     */
    halfSample?: boolean;
    /**
     * @default "medium"
     * Available values: x-small, small, medium, large, x-large
     */
    patchSize?: string;
    /**
     * @default false
     */
    showCanvas?: boolean;
    /**
     * @default false
     */
    showPatches?: boolean;
    /**
     * @default false
     */
    showFoundPatches?: boolean;
    /**
     * @default false
     */
    showSkeleton?: boolean;
    /**
     * @default false
     */
    showLabels?: boolean;
    /**
     * @default false
     */
    showPatchLabels?: boolean;
    /**
     * @default false
     */
    showRemainingPatchLabels?: boolean;
    boxFromPatches?: {
        /**
         * @default false
         */
        showTransformed?: boolean;
        /**
         * @default false
         */
        showTransformedBox?: boolean;
        /**
         * @default false
         */
        showBB?: boolean;
    };
};

}

[sheam]

has this pull request been merged yet? I don't see the def file in the NPM package.

[serratus]

Hi Peter,

Thanks for sending me the most recent version. Unfortunately I have never received a pull request from you. But I'll put this file into the repository ASAP and try to keep it up to date. In case I have questions about the format I know who to turn to.

[sheam]

Any update on this? I do not see a .d.ts file in the zip file I downloaded.

[serratus]

@sheam Sorry for the long delay. I'm just getting started with TypeScript and needed to update some of the definitions. I will keep the file up to date with the upcoming versions.

If anyone could confirm that these definitions are indeed working, please let me know so I can close this issue.

[sheam]

The def file as posted above works fine. But the definition file included in the download .zip file doesn't really work for me.

I was able to get the included file (in .zip) to work by commenting out line 6,
export default Quagga;

Likely is a problem with my TS knowledge, however I don't see that export line on other .d.ts files.

[NCC1701M]

Why don't you pull it to https://github.com/typings/registry and/or https://github.com/DefinitelyTyped/DefinitelyTyped so everyone can use it via the typings and/or tsd tools?

[tvedtorama]

For the record, redux-saga works out of the box with npm install, no need for typings. I think it is because they put a index.d.ts file in their root - but not sure. In typescript-friendly projects, this seems to be the ultimate option.

[ericblade]

types were added to the repository some time ago, if they are still an issue please file an issue at https://github.com/ericblade/quagga2/issues or a PR to same repo