OpenGL Accelerated HTML Overlay: Basics

From RidgeRun Developer Wiki



  Index Next: Getting_Started/Evaluating_HTML_Overlay



Foundations

HTML Overlay offers an alternative for image signal processing. The key features are:

  • Graphical operations accelerated by graphical API's, such as OpenGL.
  • Webpage rendering with WebkitGTK, with javascript control and variable website refresh-rate
  • Compatible with NVIDIA Jetson and IMX6.
  • Compatible with x86 architecture and discrete GPUs.

How HTML Overlay works

This section illustrates how the overlay works. For future reference, the position (0,0) of the pixels will be in the top left corner.

The SMPTE pattern will be used as the background image, and the RidgeRun logo will be overlaid over the first image. For reference, the SMPTE image has a size of 1920x1080, and the RidgeRun logo has a size of 1280x720.

Example of how HTML Overlay works
Figure 1: SMPTE pattern
Example of how HTML Overlay works
Figure 2: RidgeRun logo


In this demonstration, we will overlay the RidgeRun logo in the center of the SMPTEimage. In this case, the input Region of Interest (ROI) for the RidgeRun logo will be the whole image. For the output ROI, where the logo will be displayed, we have to adjust its dimension by scaling down the logo and placing the location in the center. In summary:

  • Input ROI:
    • X coordinate: 0
    • Y coordinate: 0
    • Width: 1280
    • Height: 720
  • Output ROI:
    • X coordinate: 704
    • Y coordinate: 396
    • Width: 512
    • Height: 288

The following flow diagram shows how the overlay is applied according to the ROIs that were previously defined. The dimension for the logo was 1280x720 pixels but, in order to keep a good relationship between the logo and the main displayed image (SMPTEimage), the logo was downscaled to 512x288 pixels.




Mechanism explanation of HTML Overlay
Figure 3: Placing an image (RidgeRun logo) in the center of the overlay picture (SMPTE pattern).




Now, let's say we just want the icon or mark from the RidgeRun logo to be displayed. To do that, adjust the input ROI to crop only the icon. And let's going to say that we want to keep the same resolution as if the image to be in front of the SMPTEimage image has the same dimension as the whole RidgeRun logo. That means keeping a resolution of 512x288 instead of using the cropped dimension size of 192x240.

  • Input ROI
    • X coordinate: 269
    • Y coordinate: 230
    • Width: 192
    • Height: 240
  • Output ROI:
    • X coordinate: 704
    • Y coordinate: 396
    • Width: 512
    • Height: 288

The following flow diagram shows how the overlay is applied to the new ROI previously defined. Take a look at how the cropped area was successfully put in place, and since the cropped area dimension (192x240) is different from the output ROI dimension (512x288), the HTML Overlay can perfectly stretch in or out the logo to fit the desired area.




Mechanism explanation of HTML Overlay
Figure 4: Placing a croped image (RidgeRun icon from logo) in the center of the overlay picture (SMPTE pattern).







  Index Next: Getting_Started/Evaluating_HTML_Overlay