New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
JS: TypeScript type definitions #15306
Comments
An update: I plan to contribute with this. If not accepted here directly I can always create a project as Definitely Typed My plan is to generate TypeScript descriptions automatically from C++ sources so they are automatically updated with it. I'm assuming that JS API maps directly the C++ API or at least the mapping is formally defined. In detail I will try to generate the docs configure doxygen to generate XML output too. then parse this XML output to extract classes, members and the API docs from there and with this information build the .d.ts files. I would like to more experienced members if this makes sense or any feedback in the meanwhile . Thanks! ( I will give updates on this, if any, here) |
Hi, I am starting to use the wasm build and I also wanted the types. I've written the types for the helpers.js. I'm writting it here so it may be useful to you. declare type MatType = any;
declare class OpenCV {
CV_8U: MatType;
CV_8UC1: MatType;
CV_8UC2: MatType;
CV_8UC3: MatType;
CV_8UC4: MatType;
CV_8S: MatType;
CV_8SC1: MatType;
CV_8SC2: MatType;
CV_8SC3: MatType;
CV_8SC4: MatType;
CV_16U: MatType;
CV_16UC1: MatType;
CV_16UC2: MatType;
CV_16UC3: MatType;
CV_16UC4: MatType;
CV_16S: MatType;
CV_16SC1: MatType;
CV_16SC2: MatType;
CV_16SC3: MatType;
CV_16SC4: MatType;
CV_32S: MatType;
CV_32SC1: MatType;
CV_32SC2: MatType;
CV_32SC3: MatType;
CV_32SC4: MatType;
CV_32F: MatType;
CV_32FC1: MatType;
CV_32FC2: MatType;
CV_32FC3: MatType;
CV_32FC4: MatType;
CV_64F: MatType;
CV_64FC1: MatType;
CV_64FC2: MatType;
CV_64FC3: MatType;
CV_64FC4: MatType;
static then: (callback: (mod: typeof OpenCV) => void) => void;
static imshow(cvs: HTMLCanvasElement | string, dst: OpenCV.Mat): void;
static matFromImageData(imgData: ImageData): OpenCV.Mat;
static matFromArray(rows: number, cols: number, type: MatType, array: ArrayBuffer): OpenCV.Mat;
static imshow(cvs: HTMLCanvasElement | string, mat: OpenCV.Mat): void;
static imread(source: string | HTMLCanvasElement | HTMLImageElement): OpenCV.Mat;
}
declare namespace OpenCV {
class NativeObject {
delete: () => void;
}
class MatData {
set: (data: ArrayBuffer) => void;
}
class Mat extends NativeObject {
data: MatData;
constructor(width: number, height: number, type: number);
}
class VideoCapture {
video: HTMLVideoElement;
constructor(src: string | HTMLVideoElement);
read: (frame: OpenCV.Mat) => void
}
class Range {
start: number;
end: number;
constructor(start: number, end: number);
}
class Point {
x: number;
y: number;
constructor(x: number, y: number);
}
class Size {
width: number;
height: number;
constructor(width: number, height: number);
}
class Rect {
x: number;
y: number;
width: number;
height: number;
constructor();
constructor(rect: Rect);
constructor(point: Point, size: Size);
constructor(x: number, y: number, width: number, height: number);
}
class RotateRect {
center: Point;
size: Size;
angle: number;
constructor();
constructor(center: Point, size: Size, angle: number);
static points: (obj: any) => any;
static boundingRect: (obj: any) => any;
static boundingRect2f: (obj: any) => any;
}
class Scalar extends Array {
static all(v: number): Scalar;
constructor(v0: number, v1: number, v2: number, v3: number);
}
class MinMaxLoc {
minVal: number;
maxVal: number;
minLoc: Point;
maxLoc: Point;
constructor();
constructor(minVal: number, maxVal: number, minLoc: Point, maxLoc: Point);
}
class Circle {
center: Point;
radius: number;
constructor();
constructor(center: Point, radius: number);
}
class TermCriteria {
type: number;
maxCount: number;
epsilon: number;
constructor();
constructor(type: number, maxCount: number, epsilon: number);
}
}
export default OpenCV; |
@jeronimonunes I'm generating all types automatically from opencv repo. Let's join efforts. I updated my progress here #15315. for the types just install : "npm install mirada" - sources are located here: https://github.com/cancerberoSgx/mirada/tree/master/mirada/src/types and automatically generated from this repository sources (mostly parsing opencv docs doxygen xml output - I decided autogenerating them is the best idea although not perfect since I suspect more and more features will be supported in JS build in the short term. The only defect is that I have a post processing routine to remove some types that are generated but actually not supported ... But is nice to learn an API having type checking and documentation..... The project responsible of type genreation is this one: https://github.com/cancerberoSgx/mirada/tree/master/doxygen2typescript
https://cancerberosgx.github.io/demos/mirada-ts-playground/ So npmjs.org/mirada is the project with the typings. The idea is to keep it as simple as possible currently has :
The later is able to import/export in a lot of formats (all those supported by Imagemagick with a very few exceptions. ) See for example this page (WIP) from which you can load and save images in A LOT of formats, even some vector based ones like ps, pdf (of course raster). BTW it also support RAW formats and applying lcms image profiles icc, etc. Raw camera formats (which Imagemagick supports several and i think opencv doesn't could be a great addition for those processing photography (I?m not). Checkout the following (WIP) use the File load / save menu ImageMagick option to test some of mentioned formats: https://cancerberosgx.github.io/demos/mirada-playground/ BTW I'm planning to enhance this codec API to also support videos - so I can load a video file in node.js - or encode an image format supporting animations animated gif or anim webp, webm, pngm. I plan to use ffmpeg webassembly port for this mirada project is just that a basic API for node and browser, the types and tests. I don't want to add features there only thepieces I felt were missing in vailla opencv.js Then all the craziness features APIs codecs I'm putting them on this project: npmjs.org/ojos which is based on mirada. I'm kind of learning how to use opencv so some of these APIs are just easing for new users like me. other try to formalize some stuff I'm yet grasping or encapsulating operation metadata that is not formally documented/defined in opencv, or just experiments like animation easing formulas crazy things like I built this camera capture video real time filter playground using ojos, check this one that apply like 5 filters at the same time and "real time" is still 15 fps. BTW I decided to implement by own VideoCapture more friendly and probably faster than opencv.js - I'm doing the same thing in desktop apps (not electron, but gtk, qt rendering on a cairo surface and I'm trying this VideoCapture API to also work there - jus like mentioned FormatProxy facade): I'm learning and collecting ideas, but kind of lonely in this initiative. At some point I want to push the types to Definitely Typed but I really would appreciate a second opinion on several things.Could you report me an issue there to continue the conversation ? And probably you know more than me about using the actual library so would be awesome if you could contribute Regarding opencv.js build I plan to generate .wasm and remove the boilerplate/UMD stuff it currently has since right now is slow, mostly when loading the file. But probably that will be in the long term. Finally I'm implementing a Command line tool but opencv.js file loading is too slow - so I'm researching some IPC mechanism to keep a server running and clients requesting transformation. The language/format for operations (and sequences of operations I'm autogenerating it from the typings and some abstractions I defined in ojos. The objective is being able to write/post a sequence of operations (which can reuse Mats generated by previous ones) so complex tasks can be declared. this would allow to represent them visually so non developer users can use the library too. I think I found a couple of serialisation technologies that are faster than just json/xml but ideas here are also welcome - don't hesitate to report an issue in the repo with any feedback/opinion. This could also apply to the browser - when sharing video / desktop or meeting so I when a peer acts like the server - or running in a headless browser- so I will try to keep it agnostic. Thanks and sorry for the long post. |
OpenCV.js@4.0.1
|
|
@AldairCruz, by using scripts from this repo. Just refer them with script tag in head or body of html page.
After this, run In the future I will add English translations to all documentation from this repository, therefore, I recommend saving the link with an star 😊 . A little later, a full-fledged generator of typescript defenitions files based on runtime information with cli will be published there |
Thank you @tripolskypetr 😊 |
Thank you so much for this solution, i managed to make d.ts file from this approach. I can do it then i run this simple script
At the moment i have d.ts file with this definition for example:
it would be better if it looked like this:
In documentation https://docs.opencv.org/3.4/d6/d6e/group__imgproc__draw.html#ga07d2f74cadcf8e305e810ce8eed13bc9 |
@Winexcel, yes, thanks to this snippet it's possible. If you want, try to make refactor of my solution, the material-ui-umd is looking for contributors) |
@Winexcel If you realy going to modify the generator, try to implement some cli, it wood be great |
Hi, I had some some trivial use cases for opencv.js, so I've made an experimental typescript generator of the entire thing instead. https://github.com/peteruhnak/opencv-ts This is based on the existing opencv code that is used to generated the wasm/emscripten bindings. It is by no means complete, but seems like the most natural approach if we want to have this as part of opencv eventually (plus it was relatively painless to do) The generated typings are split into two parts:
The generator itself is here 941a979...peteruhnak:ts-experimental You should be able to try it and/or regenerate it based on info in the README https://github.com/peteruhnak/opencv-ts |
@alalek considering you plan to drop support for Python 2 in OpenCV 5, would there be any issues if I started using Python3' typing everywhere if I base it of the |
I didn't found any opencv typings in DefinitelyTyped and before I start writing some basic types I would like to know if there are any initiative towards this or what are the plans so we have typechecking for OpenCV.js project. Thanks
The text was updated successfully, but these errors were encountered: