JavaCV Configuration in Windows

I had published a article on how to configure JavaCV on windows machine about 5 year back. Since then a lot of changes has been made to JavaCV:
  • The repository host Google Code stopped their services
  • JavaCV team moved to github with a different package name. They have replaced the "com.googlecode.javacv.cpp." package with "org.bytedeco.opencv." or "org.bytedeco.javacv"
  • They ( probably OpenCV too) moved some classes here and there.  eg:  the static method cvSaveImage is now under org.bytedeco.opencv.helper.opencv_imgcodecs.cvSaveImage package. It was on com.googlecode.javacv.cpp.opencv_highgui.cvSaveImage  before.
  • Finally the good thing is the installation/setup steps has been easier than before.  This is because they have wrapped all libraries files (dll, so ) into the platform specific jar files and we don't need to install and configure the OpenCV binaries separately

Setup Steps:

1) Install the JDK on your system. 

You can choose between 3 options:
  • OpenJDK http://openjdk.java.net/install/ or
  • Sun JDK http://www.oracle.com/technetwork/java/javase/downloads/ or
  • IBM JDK http://www.ibm.com/developerworks/java/jdk/

2) Download the JavaCV binaries.

2.a) Manually:
2.b) Automatically - Using Maven (Recommended)
<dependency>
    <groupId>org.bytedeco</groupId>
    <artifactId>javacv-platform</artifactId>
    <version>1.5.3</version>
</dependency>

3) Project Setup:

3.a) Basic project using Eclipse/Netbeans,Intellij or other IDE
Extract the JavaCV binaries and add all the jars into your classpath.

3.b) Maven Project Setup:
If you want to use Maven you need to add the dependencies as in 2.b) in your pom.xml file. There is already a sample project available on GitHub. Download it and import into  your IDE. It has a sample code to capture images from webcam.

GitHub Sample Project URL: https://github.com/gtiwari333/JavaCV-Test-Capture-WebCam


Sample Code to Capture Images from WebCam:



Happy Coding ...

Solve - Hyper-v not compatible on VMware player

I had enabled hyper-visor when installing docker in my system. But it seems it needs to be disabled to allow VMware run smoothly.

The error that I got from VMware.
Hyper-V not compatible - VMWare Error










 

 

 

Here's how I solved it:

1) Run command prompt as Administrator
2) Run the following command to disable hyper visor launcher
  C:\>bcdedit /set hypervisorlaunchtype off

If you want to enable it back to run Docker, the following command will help.
  C:\>bcdedit /set hypervisorlaunchtype auto

MySql get full name from last first mid name

Using CONCAT_WS to extract full name from first , middle and last name. 

It also handles the case that the mid_name can be empty or null or even have multiple spaces!


SELECT id, email,
    CASE WHEN mid_name IS NULL OR TRIM(mid_name) ='' THEN
        CONCAT_WS( " ", first_name, last_name )
    ELSE
        CONCAT_WS( " ", first_name, mid_name, last_name )
    END AS full_name
FROM USER;

JPA EntityManager get Session Object in Hibernate

How to get Session object from JPA EntityManager


With Hibernate (JPA 2.0 implementation), you would do:

Steps:


//1. Inject/Autowire Entity Manager
@Inject 
private EntityManager entityManager;    //javax.persistence.EntityManager 


//2. Get Session Object 
Session session = entityManager.unwrap(Session.class);  //org.hibernate.Session


Hibernate Create Update Delete child objects - Best way

Hibernate Create Update Delete child objects - Best way




AngularJS Download File From Server - Best way with Java Spring Backend

Here's how you can download a file from server using AngularJS.

In this example, the client sends a API call to Java server to download a file /api/download/{id} and server sends the base64 data stream download for a given file id.

Below is the snippet from working code. The code is pretty descriptive.
This will allow you to download any type of file.

AngularJS controller method:

function downloadReportFile(fileId) {
    Download.downloadQueuedReport({id: fileId}, function (response) {

        var anchor = angular.element('<a/>');
        anchor.attr({
            href: 'data:application/octet-stream;base64,' + response.data,
            target: '_self',
            download: response.headers.filename        });

        angular.element(document.body).append(anchor);
        anchor[0].click();

    });
}

AngularJS service to do the API call:


'downloadQueuedReport': {
    method: 'GET',
    url: 'api/download/:id',
    params: {id: '@id'},
    transformResponse: function (data, headers) {
        var response = {};
        response.data = data;
        // take note of headers() call        response.headers = headers();
        return response;
    }
},

Spring Powered Backend REST API 

@RequestMapping(value = "api/download/{id}",
    method = RequestMethod.GET,
    produces = MediaType.APPLICATION_OCTET_STREAM_VALUE
 public ResponseEntity<byte[]> downloadReportFile(@PathVariable Long id) {
    log.debug("REST request to download report file");

    File file = getReportFile(id); // a method that returns file for given ID
    if (!file.exists()) { // handle FNF
        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
    }

    try {
        FileSystemResource fileResource = new FileSystemResource(file);

        byte[] base64Bytes = Base64.encodeBase64(IOUtils.toByteArray(fileResource.getInputStream()));

        HttpHeaders headers = new HttpHeaders();
        headers.add("filename", fileResource.getFilename());

        return ResponseEntity.ok().headers(headers).body(base64Bytes);
    } catch (IOException e) {
        log.error("Failed to download file ", e);
        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
    }

}

How browserSync actually works ?

How BrowserSync actually works ?


BrowserSync starts a small Node.js server which injects a script ( as below) into the webpage that it's monitoring.The script makes use of WebSockets to communicate between server and client to watch for changes to the code or browser actions. As soon as BrowserSync detects an action ( either in one browser or a server code) it performs a page reload.


<body>
<script id="__bs_script__">
//<![CDATA[

    document.write("<script async src='/browser-sync/browser-sync-client.2.11.2.js'> <\/script>".replace("HOST", location.hostname));
   
//]]>
</script>
...
...


If you’re already using a local web server or need to connect to a live website, you can start BrowserSync as a proxy server. See how to do this.

Articles related to BrowserSync /Grunt configuration:

BrowserSync local server proxy configuration

Integrate BrowserSync - with existing local server :

In this example, I will show how we can configure BrowserSync - Grunt task with you existing existing webapp that is running on a local server.

If you want to know the details on
  • how to configure the BrowserSync and Watch tasks  on Grunt, Please visit my previous post :

The configuration is simple : You just need to let the browserSync to know URL of your local server.

options: {
         proxy: "local.server-URL"
       }


The final Gruntfile.js file : (full configuration is already described on my earlier blog  post
BrowserSync Grunt configuration - Multi browswer Live Reload )

   
module.exports = function(grunt) {
  // Task configuration will go here
  grunt.initConfig({
   watch: {
  
      },
   browserSync: {
       bsFiles: {
         src: [
           "css/*.css", "js/.js", "./*.html" //search file/folders
         ]
       },
       options: {
         proxy: "local.server-URL" // NEEDS TO BE CONFIGURED
       }
   }
  });
  
  
  // Load tasks dependencies
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-browser-sync');
  
  // Setup default task
  // both browserSync and watch will run when running >grunt command
  grunt.registerTask('default', ['browserSync', 'watch']);

};



BrowserSync Grunt configuration - Multi browswer Live Reload

How to configure BrowserSync's Live Reload feature with Grunt tasks :


BrowserSync is capable of live reloading and syncing the changes across all your test browsers. This will launch a mini web server by using your current working directory as the base, watch your files for changes & auto-inject those changes into all connected browsers.

See my earlier blog post for the pros/cons of BrowserSync over LiveReload.

In this tutorial, I will demonstrate how to configure the BrowserSync with Grunt tasks "grunt-contrib-watch" and "grunt-browser-sync" in a basic web page setup. You can easily configure your bigger projects on you follow the following steps:



Setup Steps:

The link to github project is given at the end of this article.

1) Web App/Site setup :

I've a basic web site with the following files / directories in my working folder:

  index.html
  css/
      main.css
  js/
      app.js


BrowserSync vs LiveReload productivity boosters comparison

BrowserSync and LiveReload both are the cool tools that are aimed to improve the development workflow i.e., productivity of front-end development team. In summary, they both reload your browser automatically when you change some css or javascript or HTML - let's say any resource.

The main feature that we get from BrowserSync is : it has capacity of live reloading all your test browsers. It doesn't has constraint to one browser, meaning : it can reflect your code changes on every browser/device/emulator. The new devices/browsers can be added/tested with no additional configurations.

 

Pros and Cons of BrowserSync with LiveReload:

Pros :
  • Works across multiple devices at the same time
  • Works with all browsers and devices
    • No configuration/plugin needed in each browser
  • Synchronized actions across all browsers
    • form input, page scroll, navigation all gets synchronized across the browsers
  • Works with all browsers and devices
Con :
  • Initial configuration might be a little tricky
    • npm, grunt or gulp etc needs to be configured and the dependencies might give some problems to configure