Francesco Nicolas

Francesco Nicolas

1641946560

OpenCV.js: JavaScript Binding That Exposes OpenCV Library to The Web

OpenCV.js

This is a JavaScript binding that exposes OpenCV library to the web. This project is made possible by support of Intel corporation. Currently, this is based on OpenCV 3.1.0.

How to Build

  1. Get the source code
git clone https://github.com/ucisysarch/opencvjs.git
cd opencvjs
git clone https://github.com/opencv/opencv
cd opencv
git checkout 3.1.0

2.   Install emscripten. You can obtain emscripten by using Emscripten SDK.

./emsdk update
./emsdk install sdk-master-64bit --shallow
./emsdk activate sdk-master-64bit
source ./emsdk_env.sh

3.   Patch Emscripten & Rebuild.

patch -p1 < PATH/TO/patch_emscripten_master.diff

4.   Rebuild emscripten

./emsdk install sdk-master-64bit --shallow

5.   Compile OpenCV and generate bindings by executing make.py script.

  python make.py

Tests

Test suite contains several tests and examples demonstrating how the API can be used. Run the tests by launching test/tests.html file usig a browser.

Exported OpenCV Subset

Classes and functions that are intended for binding generators (i.e. come with wrapping macros such as CV_EXPORTS_W and CV_WRAP) are exposed. Hence, supported OpenCV subset is comparable to OpenCV for Python. Also, enums with exception of anonymous enums are also exported.

Currently, the following modules are supported. You can modify the make script to exclude certain modules.

  1. Core
  2. Image processing
  3. Photo
  4. Shape
  5. Video
  6. Object detection
  7. Features framework
  8. Image codecs

At a glance

The following example demonstrates how to apply a gaussian blur filter on an image. Note that everything is wrapped in a JavaScript module ('cv').

  // Gaussian Blur
  var mat1 = cv.Mat.ones(7, 7, cv.CV_8UC1),
      mat2 = new cv.Mat();

  cv.GaussianBlur(mat1, mat2, [3, 3], 0, 0, cv.BORDER_DEFAULT);

  mat1.delete();
  mat2.delete();

Next example shows how to calculate image keypoints and their descriptors using ORB (Oriented Brief) method.

  var numFeatures = 900,
        scaleFactor = 1.2,
        numLevels = 8,
        edgeThreshold = 31,
          firstLevel =0,
          WTA_K= 2,
          scoreType = 0, //ORB::HARRIS_SCORE
          patchSize = 31,
          fastThreshold=20,
          keyPoints = new cv.KeyPointVector(),
          descriptors = new cv.Mat();

    var orb = new cv.ORB(numFeatures, scaleFactor, numLevels, edgeThreshold, firstLevel,
                                         WTA_K, scoreType, patchSize, fastThreshold);

  // image and mask are of type cv.Mat
    orb.detect(image, keyPoints, mask);
    orb.compute(image, keyPoints, descriptors);

    keyPoints.delete();
    descriptors.delete();
    orb.delete();

Functions work on cv::Mat and various vectors. The following vectors are registered and can be used.

  register_vector<int>("IntVector");
  register_vector<unsigned char>("UCharVector"););
  register_vector<float>("FloatVector");
  register_vector<std::vector<Point>>("PointVectorVector");
  register_vector<cv::Point>("PointVector");
  register_vector<cv::Mat>("MatVector");
  register_vector<cv::KeyPoint>("KeyPointVector");
  register_vector<cv::Rect>("RectVector");
  register_vector<cv::Point2f>("Point2fVector");

Memory management

All the allocated objects should be freed manually by calling delete() method. To avoid manual memory management for basic types, the following data types are exported as JavaScript value arrays.

cv.Size
cv.Point

File System Access

If your OpenCV application needs to access a file, for instance a dataset or a previoulsy trained classifier, you can modify the make script and attach the files by using emscripten "--preload-file" flag.

Limitations

  1. MatExpr is not exported.
  2. No support for default parameters yet.
  3. Constructor overloading are implemented by number of paramteres and not their types. Hence, only following Mat constructors are exported.
  cv::Mat()
  cv::Mat(const std::vector<unsigned char>& data)
  cv::Mat(Size size, int type)
  cv::Mat(int rows, int cols, int type)
  cv::Mat(Size size, int type, void* data, size_t step)

Download Details:
Author: ucisysarch
Source Code: https://github.com/ucisysarch/opencvjs
License: View license

#opencv #python #javascript 

What is GEEK

Buddha Community

OpenCV.js: JavaScript Binding That Exposes OpenCV Library to The Web
JavaScript Daily

JavaScript Daily

1632537859

NBB: Ad-hoc CLJS Scripting on Node.js

Nbb

Not babashka. Node.js babashka!?

Ad-hoc CLJS scripting on Node.js.

Status

Experimental. Please report issues here.

Goals and features

Nbb's main goal is to make it easy to get started with ad hoc CLJS scripting on Node.js.

Additional goals and features are:

  • Fast startup without relying on a custom version of Node.js.
  • Small artifact (current size is around 1.2MB).
  • First class macros.
  • Support building small TUI apps using Reagent.
  • Complement babashka with libraries from the Node.js ecosystem.

Requirements

Nbb requires Node.js v12 or newer.

How does this tool work?

CLJS code is evaluated through SCI, the same interpreter that powers babashka. Because SCI works with advanced compilation, the bundle size, especially when combined with other dependencies, is smaller than what you get with self-hosted CLJS. That makes startup faster. The trade-off is that execution is less performant and that only a subset of CLJS is available (e.g. no deftype, yet).

Usage

Install nbb from NPM:

$ npm install nbb -g

Omit -g for a local install.

Try out an expression:

$ nbb -e '(+ 1 2 3)'
6

And then install some other NPM libraries to use in the script. E.g.:

$ npm install csv-parse shelljs zx

Create a script which uses the NPM libraries:

(ns script
  (:require ["csv-parse/lib/sync$default" :as csv-parse]
            ["fs" :as fs]
            ["path" :as path]
            ["shelljs$default" :as sh]
            ["term-size$default" :as term-size]
            ["zx$default" :as zx]
            ["zx$fs" :as zxfs]
            [nbb.core :refer [*file*]]))

(prn (path/resolve "."))

(prn (term-size))

(println (count (str (fs/readFileSync *file*))))

(prn (sh/ls "."))

(prn (csv-parse "foo,bar"))

(prn (zxfs/existsSync *file*))

(zx/$ #js ["ls"])

Call the script:

$ nbb script.cljs
"/private/tmp/test-script"
#js {:columns 216, :rows 47}
510
#js ["node_modules" "package-lock.json" "package.json" "script.cljs"]
#js [#js ["foo" "bar"]]
true
$ ls
node_modules
package-lock.json
package.json
script.cljs

Macros

Nbb has first class support for macros: you can define them right inside your .cljs file, like you are used to from JVM Clojure. Consider the plet macro to make working with promises more palatable:

(defmacro plet
  [bindings & body]
  (let [binding-pairs (reverse (partition 2 bindings))
        body (cons 'do body)]
    (reduce (fn [body [sym expr]]
              (let [expr (list '.resolve 'js/Promise expr)]
                (list '.then expr (list 'clojure.core/fn (vector sym)
                                        body))))
            body
            binding-pairs)))

Using this macro we can look async code more like sync code. Consider this puppeteer example:

(-> (.launch puppeteer)
      (.then (fn [browser]
               (-> (.newPage browser)
                   (.then (fn [page]
                            (-> (.goto page "https://clojure.org")
                                (.then #(.screenshot page #js{:path "screenshot.png"}))
                                (.catch #(js/console.log %))
                                (.then #(.close browser)))))))))

Using plet this becomes:

(plet [browser (.launch puppeteer)
       page (.newPage browser)
       _ (.goto page "https://clojure.org")
       _ (-> (.screenshot page #js{:path "screenshot.png"})
             (.catch #(js/console.log %)))]
      (.close browser))

See the puppeteer example for the full code.

Since v0.0.36, nbb includes promesa which is a library to deal with promises. The above plet macro is similar to promesa.core/let.

Startup time

$ time nbb -e '(+ 1 2 3)'
6
nbb -e '(+ 1 2 3)'   0.17s  user 0.02s system 109% cpu 0.168 total

The baseline startup time for a script is about 170ms seconds on my laptop. When invoked via npx this adds another 300ms or so, so for faster startup, either use a globally installed nbb or use $(npm bin)/nbb script.cljs to bypass npx.

Dependencies

NPM dependencies

Nbb does not depend on any NPM dependencies. All NPM libraries loaded by a script are resolved relative to that script. When using the Reagent module, React is resolved in the same way as any other NPM library.

Classpath

To load .cljs files from local paths or dependencies, you can use the --classpath argument. The current dir is added to the classpath automatically. So if there is a file foo/bar.cljs relative to your current dir, then you can load it via (:require [foo.bar :as fb]). Note that nbb uses the same naming conventions for namespaces and directories as other Clojure tools: foo-bar in the namespace name becomes foo_bar in the directory name.

To load dependencies from the Clojure ecosystem, you can use the Clojure CLI or babashka to download them and produce a classpath:

$ classpath="$(clojure -A:nbb -Spath -Sdeps '{:aliases {:nbb {:replace-deps {com.github.seancorfield/honeysql {:git/tag "v2.0.0-rc5" :git/sha "01c3a55"}}}}}')"

and then feed it to the --classpath argument:

$ nbb --classpath "$classpath" -e "(require '[honey.sql :as sql]) (sql/format {:select :foo :from :bar :where [:= :baz 2]})"
["SELECT foo FROM bar WHERE baz = ?" 2]

Currently nbb only reads from directories, not jar files, so you are encouraged to use git libs. Support for .jar files will be added later.

Current file

The name of the file that is currently being executed is available via nbb.core/*file* or on the metadata of vars:

(ns foo
  (:require [nbb.core :refer [*file*]]))

(prn *file*) ;; "/private/tmp/foo.cljs"

(defn f [])
(prn (:file (meta #'f))) ;; "/private/tmp/foo.cljs"

Reagent

Nbb includes reagent.core which will be lazily loaded when required. You can use this together with ink to create a TUI application:

$ npm install ink

ink-demo.cljs:

(ns ink-demo
  (:require ["ink" :refer [render Text]]
            [reagent.core :as r]))

(defonce state (r/atom 0))

(doseq [n (range 1 11)]
  (js/setTimeout #(swap! state inc) (* n 500)))

(defn hello []
  [:> Text {:color "green"} "Hello, world! " @state])

(render (r/as-element [hello]))

Promesa

Working with callbacks and promises can become tedious. Since nbb v0.0.36 the promesa.core namespace is included with the let and do! macros. An example:

(ns prom
  (:require [promesa.core :as p]))

(defn sleep [ms]
  (js/Promise.
   (fn [resolve _]
     (js/setTimeout resolve ms))))

(defn do-stuff
  []
  (p/do!
   (println "Doing stuff which takes a while")
   (sleep 1000)
   1))

(p/let [a (do-stuff)
        b (inc a)
        c (do-stuff)
        d (+ b c)]
  (prn d))

$ nbb prom.cljs
Doing stuff which takes a while
Doing stuff which takes a while
3

Also see API docs.

Js-interop

Since nbb v0.0.75 applied-science/js-interop is available:

(ns example
  (:require [applied-science.js-interop :as j]))

(def o (j/lit {:a 1 :b 2 :c {:d 1}}))

(prn (j/select-keys o [:a :b])) ;; #js {:a 1, :b 2}
(prn (j/get-in o [:c :d])) ;; 1

Most of this library is supported in nbb, except the following:

  • destructuring using :syms
  • property access using .-x notation. In nbb, you must use keywords.

See the example of what is currently supported.

Examples

See the examples directory for small examples.

Also check out these projects built with nbb:

API

See API documentation.

Migrating to shadow-cljs

See this gist on how to convert an nbb script or project to shadow-cljs.

Build

Prequisites:

  • babashka >= 0.4.0
  • Clojure CLI >= 1.10.3.933
  • Node.js 16.5.0 (lower version may work, but this is the one I used to build)

To build:

  • Clone and cd into this repo
  • bb release

Run bb tasks for more project-related tasks.

Download Details:
Author: borkdude
Download Link: Download The Source Code
Official Website: https://github.com/borkdude/nbb 
License: EPL-1.0

#node #javascript

Ajay Kapoor

1626321063

JS Development Company India | JavaScript Development Services

PixelCrayons: Our JavaScript web development service offers you a feature-packed & dynamic web application that effectively caters to your business challenges and provide you the best RoI. Our JavaScript web development company works on all major frameworks & libraries like Angular, React, Nodejs, Vue.js, to name a few.

With 15+ years of domain expertise, we have successfully delivered 13800+ projects and have successfully garnered 6800+ happy customers with 97%+ client retention rate.

Looking for professional JavaScript web app development services? We provide custom JavaScript development services applying latest version frameworks and libraries to propel businesses to the next level. Our well-defined and manageable JS development processes are balanced between cost, time and quality along with clear communication.

Our JavaScript development companies offers you strict NDA, 100% money back guarantee and agile/DevOps approach.

#javascript development company #javascript development services #javascript web development #javascript development #javascript web development services #javascript web development company

Francesco Nicolas

Francesco Nicolas

1641946560

OpenCV.js: JavaScript Binding That Exposes OpenCV Library to The Web

OpenCV.js

This is a JavaScript binding that exposes OpenCV library to the web. This project is made possible by support of Intel corporation. Currently, this is based on OpenCV 3.1.0.

How to Build

  1. Get the source code
git clone https://github.com/ucisysarch/opencvjs.git
cd opencvjs
git clone https://github.com/opencv/opencv
cd opencv
git checkout 3.1.0

2.   Install emscripten. You can obtain emscripten by using Emscripten SDK.

./emsdk update
./emsdk install sdk-master-64bit --shallow
./emsdk activate sdk-master-64bit
source ./emsdk_env.sh

3.   Patch Emscripten & Rebuild.

patch -p1 < PATH/TO/patch_emscripten_master.diff

4.   Rebuild emscripten

./emsdk install sdk-master-64bit --shallow

5.   Compile OpenCV and generate bindings by executing make.py script.

  python make.py

Tests

Test suite contains several tests and examples demonstrating how the API can be used. Run the tests by launching test/tests.html file usig a browser.

Exported OpenCV Subset

Classes and functions that are intended for binding generators (i.e. come with wrapping macros such as CV_EXPORTS_W and CV_WRAP) are exposed. Hence, supported OpenCV subset is comparable to OpenCV for Python. Also, enums with exception of anonymous enums are also exported.

Currently, the following modules are supported. You can modify the make script to exclude certain modules.

  1. Core
  2. Image processing
  3. Photo
  4. Shape
  5. Video
  6. Object detection
  7. Features framework
  8. Image codecs

At a glance

The following example demonstrates how to apply a gaussian blur filter on an image. Note that everything is wrapped in a JavaScript module ('cv').

  // Gaussian Blur
  var mat1 = cv.Mat.ones(7, 7, cv.CV_8UC1),
      mat2 = new cv.Mat();

  cv.GaussianBlur(mat1, mat2, [3, 3], 0, 0, cv.BORDER_DEFAULT);

  mat1.delete();
  mat2.delete();

Next example shows how to calculate image keypoints and their descriptors using ORB (Oriented Brief) method.

  var numFeatures = 900,
        scaleFactor = 1.2,
        numLevels = 8,
        edgeThreshold = 31,
          firstLevel =0,
          WTA_K= 2,
          scoreType = 0, //ORB::HARRIS_SCORE
          patchSize = 31,
          fastThreshold=20,
          keyPoints = new cv.KeyPointVector(),
          descriptors = new cv.Mat();

    var orb = new cv.ORB(numFeatures, scaleFactor, numLevels, edgeThreshold, firstLevel,
                                         WTA_K, scoreType, patchSize, fastThreshold);

  // image and mask are of type cv.Mat
    orb.detect(image, keyPoints, mask);
    orb.compute(image, keyPoints, descriptors);

    keyPoints.delete();
    descriptors.delete();
    orb.delete();

Functions work on cv::Mat and various vectors. The following vectors are registered and can be used.

  register_vector<int>("IntVector");
  register_vector<unsigned char>("UCharVector"););
  register_vector<float>("FloatVector");
  register_vector<std::vector<Point>>("PointVectorVector");
  register_vector<cv::Point>("PointVector");
  register_vector<cv::Mat>("MatVector");
  register_vector<cv::KeyPoint>("KeyPointVector");
  register_vector<cv::Rect>("RectVector");
  register_vector<cv::Point2f>("Point2fVector");

Memory management

All the allocated objects should be freed manually by calling delete() method. To avoid manual memory management for basic types, the following data types are exported as JavaScript value arrays.

cv.Size
cv.Point

File System Access

If your OpenCV application needs to access a file, for instance a dataset or a previoulsy trained classifier, you can modify the make script and attach the files by using emscripten "--preload-file" flag.

Limitations

  1. MatExpr is not exported.
  2. No support for default parameters yet.
  3. Constructor overloading are implemented by number of paramteres and not their types. Hence, only following Mat constructors are exported.
  cv::Mat()
  cv::Mat(const std::vector<unsigned char>& data)
  cv::Mat(Size size, int type)
  cv::Mat(int rows, int cols, int type)
  cv::Mat(Size size, int type, void* data, size_t step)

Download Details:
Author: ucisysarch
Source Code: https://github.com/ucisysarch/opencvjs
License: View license

#opencv #python #javascript 

bruce gibson

bruce gibson

1561445270

Top Vue.js Developers in USA

We, at HireFullStackDeveloperIndia, implement the right strategic approach to offer a wide variety through customized Vue.js development services to suit your requirements at most competitive prices.

Vue.js is an open-source JavaScript framework that is incredibly progressive and adoptive and majorly used to build a breathtaking user interface. Vue.js is efficient to create advanced web page applications.

Vue.js gets its strength from the flexible JavaScript library to build an enthralling user interface. As the core of Vue.js is concentrated which provides a variety of interactive components for the web and gives real-time implementation. It gives freedom to developers by giving fluidity and eases the integration process with existing projects and other libraries that enables to structure of a highly customizable application.

Vue.js is a scalable framework with a robust in-build stack that can extend itself to operate apps of any proportion. Moreover, vue.js is the best framework to seamlessly create astonishing single-page applications.

Our Vue.js developers have gained tremendous expertise by delivering services to clients worldwide over multiple industries in the area of front-end development. Our adept developers are experts in Vue development and can provide the best value-added user interfaces and web apps.

We assure our clients to have a prime user interface that reaches end-users and target the audience with the exceptional user experience across a variety of devices and platforms. Our expert team of developers serves your business to move ahead on the path of success, where your enterprise can have an advantage over others.

Here are some key benefits that you can avail when you decide to hire vue.js developers in USA from HireFullStackDeveloperIndia:

  • A team of Vue.js developers of your choice
  • 100% guaranteed client satisfaction
  • Integrity and Transparency
  • Free no-obligation quote
  • Portal development solutions
  • Interactive Dashboards over a wide array of devices
  • Vue.js music and video streaming apps
  • Flexible engagement model
  • A free project manager with your team
  • 24*7 communication with your preferred means

If you are looking to hire React Native developers in USA, then choosing HireFullStackDeveloperIndia would be the best as we offer some of the best talents when it comes to Vue.js.

#javascript #vue-js #web-development #node-js #reactjs #mobile-apps #angular-js #blockchain #ios #react-native #laravel #jquery #web-service #html5 #go #sql-server #user-experience #facebook #ember-js #symfony #raspberry-pi

Mya Lynch

Mya Lynch

1598065860

Top 5 JavaScript Libraries to Create an Organizational Chart

In this article, we’ll review five JavaScript libraries that allow you to create online organizational charts. To make this info useful for different categories of readers, we’ve gathered together libraries with different functionality and pricing policy. To help you decide whether one of them is worthy of your attention or not, we’ll take a look at the main features and check if the documentation is user-friendly.

DHTMLX Diagram Library

The DHTMLX diagram library allows creating easily configurable graphs for visualization of hierarchical data. Besides org charts, you can create almost any type of hierarchical diagrams. You can choose from organizational charts, flowcharts, block and network diagrams, decision trees, mind maps, UML Class diagrams, mixed diagrams, and any other types of diagrams. This variety of diagrams can be generated using a built-in set of shapes or with the help of custom shapes.

You can set up any diagram shape you need with text, icons, images, and any other custom content via templates in a few lines of code. All these parameters can be later changed from the UI via the sidebar options in the editor.

Top 9 JavaScript Charting Libraries

The edit mode gives an opportunity to make changes on-the-fly without messing with the source code. An interactive interface of the editor supports drag-and-drop and permits you to change each item of your diagram. You can drag diagram items with your mouse and set the size and position property of an item via the editor. The multiselection feature can help to speed up your work in the editor, as it enables you to manipulate several shapes.

The library has an exporting feature. You can export your diagram to a PDF, PNG, or JSON format. Zooming and scrolling options will be useful in case you work with diagrams containing a big number of items. There is also a search feature that helps you to quickly find the necessary shape and make your work with complex diagrams even more convenient by expanding and collapsing shapes when necessary. To show the structure of an organization compactly, you can use the vertical mode.

The documentation page will appeal both to beginners and experienced developers. A well-written beginner’s guide contains the source code with explanations. A bunch of guides will help with further configuration, so you’ll be able to create a diagram that better suits your needs. At the moment, there are three types of licenses available. The commercial license for the team of five or fewer developers costs $599, the enterprise license goes for $1299 per company, and the ultimate license has a price tag of $2899.

#javascript #web dev #data visualization #libraries #web app development #front end development #javascript libraries #org chart creator