Monday, August 27, 2012

The HTML5 Canvas object can be used to do simple image processing tasks such as blurring, sharpening, darkening etc. provided the proper algorithm is written into the Javascript code. This post will provide an example of turning a transparent image such as the sample image on the right into a silhouette.

The code logic is quite straightforward - draw the image onto the canvas, then read each RGBA pixel from the canvas and set the RGB values to zero while keeping the alpha channel values intact.

The following is just the HTML code for laying out the image and button elements.

Monday, August 20, 2012

I found this new open-source software CloudCompare for 3D point cloud and mesh processing, which comes along with a light weight viewer ccViewer. The interesting thing for LiDAR professionals is that the viewer is compiled with support for reading and displaying LiDAR LAS files. The display performance is pretty good even for large LAS files, but that's just about it for the viewer, other than some basic viewing perspectives and basic display coloring. It only has the ability to color the LiDAR points by classification or by elevation. On the other hand, the source code is available and if you have the time and the inclination, you can fork or contribute to the project and make the software work better with LiDAR LAS files.

Running ccViewer
To run the software, simply double click on the ccviewer.exe executable extracted out from the downloaded binaries as shown below. Note the presence of the libLAS.dll in the extracted folder.

This should open up the ccViewer application window.

Now all that is needed to display LiDAR LAS files is to drag and drop the file onto the ccViewer application window.

The following prompt might appear but simply click OK and the LiDAR point cloud will be displayed.

For more information, visit the project's web site at http://www.danielgm.net/cc/, where the binaries and souce code for the CloudCompare and the ccViewer software can be downloaded.

Monday, August 13, 2012

If you make your own custom Google Maps icons, then it is sometimes necessary to create suitable shadow icons for them. There are a few free online tools to do the job but I thought I would try to use Gimp to do the task. I figured out the basic steps:

Duplicate the custom icon,

De-saturate and darken the duplicate,

Scale the duplicate in half vertically and skewed it horizontally,

Reduce the shadow opacity and make another duplicate shadow layer,

Refine the shadow layers.

Save the shadow icon

Make a duplicate layer of the custom icon

Start Gimp. Load the custom icon e.g. fair.png.

Note the dimensions of the custom icon in the title bar at the top; 32 by 32 pixels in this example.

If the Layers pane is not displayed, then press CTRL+L. Select the original icon layer, which is usually labelled as Background.

Click the Duplicate layer icon as shown above.

A duplicate named Background copy is created.

Click the eye icon for the Background copy layer to turn off the display for that layer.

De-saturate and darken a duplicate layer

In the Layers pane, select the Background layer.

In the menu bar, select Colors | Hue-saturation.

The Hue-Saturation dialog box appears.

In the Lightness scroll field, drag the handle to the left. Similarly, drag the Saturation handle all the way to the left. Click OK.

The layer is grayed and darkened.

Scale vertically by half and skew horizontally by half the shadow layer

Select Layer | Scale Layer.

The Scale Layer dialog box appears.

Toggle the chain off as shown below. This turns off the constant aspect ratio.

In the Height field, type in half the current height e.g. 16. Click Scale.

The layer is scaled vertically in half.

Press SHIFT+T.

The Shear dialog box appears.

In the Shear magnitude X field, type in negative half of the current height e.g. -16. Click Shear.

The layer is sheared horizontally by half.

Adjust the shadow opacity, location and make duplicate the shadow layer

Select the Move Tool in the tool box or press M. Drag the layer until the layer border is aligned as shown below.

Select Image | Fit Canvas to Layers.

The canvas is expanded to fit the skewed layer.

In the Layers pane, drag the Opacity scroll handle to reduce the opacity e.g. 25%.

Monday, August 6, 2012

In standard desktop GIS software applications, it is a common task to display geo-referenced images. I wanted to be able to do the same using just a modern browser and an Internet connection. So after a few late nights, I completed writing this Google Mapplet to load and display local image files with associated ESRI world files as custom overlays in Google Maps. I had to use the HTML5 FileReader objects so only modern browsers such as Chrome, FireFox, Internet Explorer 10 will work.

In the Image file field, click the button. Browse and select an image file e.g. C44122a1geo.jpg.

In the World file field, click the button. Browse and select the corresponding ESRI world file e.g. C44122a1geo.jgw.

If the image file is in the non-projected coordinate system, then choose Geographic in the Coordinate system type combo box. If the image file is in a projected coordinated system, then choose Projected.

Note: the raster image transformation for projected coordinate system to the Google Maps Mercator coordinate system is not very accurate. The positioning would be more accurate if the raster image were already in non-projected or Mercator coordinate system.

If the image file is in a projected coordinate system, then choose the correct projection in the Projection combo box.