{"id":2077,"date":"2018-10-26T13:25:13","date_gmt":"2018-10-26T05:25:13","guid":{"rendered":"http:\/\/www.magicandlove.com\/blog\/?p=2077"},"modified":"2018-10-26T16:16:16","modified_gmt":"2018-10-26T08:16:16","slug":"first-try-of-p5-and-opencv-js-in-electron","status":"publish","type":"post","link":"http:\/\/www.magicandlove.com\/blog\/2018\/10\/26\/first-try-of-p5-and-opencv-js-in-electron\/","title":{"rendered":"First try of P5 and OpenCV JS in Electron"},"content":{"rendered":"

This is my first try of the p5.js<\/a> together with the official release of OpenCV JavaScript. I decided not to use any browsers and experimented with the integration in the Electron<\/a> environment with Node.js<\/a>. The first experiment is a simple image processing application using Canny edge detector. The IDE I choose to work on is the free Visual Studio Code<\/a> and which is also available in multiple OS platforms. I have tested both in Windows 10 and Mac OSX Mojave. In Mac OSX, I first install the Node.js with Homebrew<\/a>.<\/p>\n

\r\nbrew update\r\nbrew install node\r\n<\/pre>\n
Then I install the Electron as a global package with npm.<\/p>\n
\r\nnpm install -g electron\r\n<\/pre>\n
For the Visual Studio Code<\/a>, I also include the JavaScript support and the ESLint plugin. The next step is to download the p5.js<\/em> and p5.dom.js<\/em> code from the p5.js website<\/a> to your local folder. I put them into a libs<\/em> folder outside of my application folders. For OpenCV, it actually includes the pre-built opencv.js<\/a> from its documentation repository. The version I used here is 3.4.3. The only documentation I can find for OpenCV JS is this tutorial<\/a>.<\/p>\n
For each of the Node.js application, you can initialise it with the following command in its folder. Alternately, you can also do it within the Terminal window from Visual Studio Code. Fill in the details when prompted.<\/p>\n
\r\nnpm init\r\n<\/pre>\n
In Visual Studio Code, you have to add a configuration to use the electron<\/em> command to run the main program, main.js<\/em>, rather than using the default node<\/em> command. After adding the configuration, it will generate the launch.json<\/em> file like the following,<\/p>\n
\r\n{\r\n    \/\/ Use IntelliSense to learn about possible attributes.\r\n    \/\/ Hover to view descriptions of existing attributes.\r\n    \/\/ For more information, visit: https:\/\/go.microsoft.com\/fwlink\/?linkid=830387\r\n    \"version\": \"0.2.0\",\r\n    \"configurations\": [\r\n        {\r\n            \"type\": \"node\",\r\n            \"request\": \"launch\",\r\n            \"name\": \"Electron Main\",\r\n            \"runtimeExecutable\": \"electron\",\r\n            \"program\": \"${workspaceFolder}\/main.js\",\r\n            \"protocol\": \"inspector\"\r\n        }\r\n    ]\r\n}\r\n<\/pre>\n
For the programming part, I used a main.js<\/em> to define the Electron window and its related functions. The window will load the index.html<\/em> page. It is the main webpage for the application. It will then call the sketch.js<\/em> to perform the p5.js<\/em> and OpenCV<\/em> core functions. The p5.js<\/em> and OpenCV<\/em> communicate through the use of the canvas<\/em> object. The GUI functions, imread()<\/em> and imshow()<\/em> are used for such communication. This example will switch on the default webcam to capture the live video and perform a blur and Canny edge detection.<\/p>\n