Monday, January 11, 2021

QGIS - Change the background color of multiple raster images to transparent

QGIS can easily display geo-referenced raster images; by default the background pixels or no data value pixels are colored as black, as shown in the screenshot below. 

The black no data colored pixels can obscure other vector or raster data underneath it. You can use QGIS to define a color to be rendered as transparent in the raster layer's properties. This can be easily done for a single raster layer. If you want to do it for multiple raster layers at once, then you have to copy the style of the raster layer with a transparent color set and apply that style to the rest of the raster layers.

This post illustrates the steps.

Define the transparent color for a single raster layer

  1. Start up QGIS. Load and display the raster images.

    The raster layers are displayed with black as the background color.

  2. In the Layers pane, mouse right click on a raster layer. Choose Properties. Select Transparency.

    The Properties dialog box is displayed.

  3. In the Transparency pixel list, click the + icon.

    An RGB entry is added to the list.

  4. In the Red, Green, and Blue fields, enter 0.

  5. Click OK.

    The selected raster layer's background pixels are rendered transparent.

  6. In the Layers pane, mouse right click on the raster layer with transparent background and choose Styles | Copy Style.

  7. In the Layers pane again, press CTRL or SHIFT and select one or more raster layers.

    Multiple raster layers are selected.

  8. In the Layers pane, mouse right click on a selected raster layer and choose Paste Style.

    The selected raster layers' background is rendered transparent.

Monday, December 28, 2020

How to setup a C++ WebAssembly component to run in a create-react-app React project

I had a hard time trying to get a C/C++ WebAssembly component to work in a React application generated from the create-react-app utility. Some blogs suggested using the react-app-rewired package to override the configuration and use the wasm-loader; but I kept getting magic header not detected errors when loading the wasm file or some ES6 syntax errors. Finally I found a StackOverflow post that gave me some ideas on getting it to work. 

In this post, I outline the steps I did to create, use a C/C++ WebAssembly in a ReactJS application generated by the create-react-app tool, on a Linux Ubuntu machine. This example will call the WebAssembly's function to add in two numbers (1 and 2) and return the resultant value. The resultant value would be displayed at the top of the web page as shown in the screen shot below.

Create a ReactJS application with create-react-app

  1. Open up a Terminal. Change to your project directory and type in the following commands to create the ReactJS application cra-wasm-adder.

    $ cd /path/to/reactprj/
    $ npx create-react-app cra-wasm-adder

    The cra-wasm-adder ReactJS application is created.

  2. Underneath the root of the newly created project, create a source directory, e.g. src_cpp for the C/C++ WebAssembly code.

    $ cd /path/to/reactprj/cra-wasm-adder/
    $ mkdir src_cpp

    The src_cpp directory is created.

Create the C/C++ source code files

  1. In the newly created src_cpp directory, use a favorite source code editor to create a C/C++ file, e.g. adder.cpp. Enter the following code.

    Note: the adder function simply sums up two integer numbers and returns the value.

  2. Create a Shell script file, e.g. to call the Emscripten compiler emcc to compile the C/C++ source code.

    Note: the emcc compiles the C/C++ source code into a Javascript plumbing helper file and a WebAssembly (*.wasm) file.

  3. In the file, define the module name and output file names.

  4. Then type in the emcc command to generate a Javascript plumbing helper file and the WebAssembly (*.wasm) file.

    Note: the Javascript generated by the emcc compiler (my version is 2.0.5) is not fully compatible with the ReactJS transpiler. The file has to be edited for compatibility purposes. This modifications may differ for different versions of the compiler

  5. Type in the sed command to insert a line /* eslint-disable */  at the top of the Javascript plumbing file to disable the Ecmascript linting.

  6. Type in the sed command to replace the import.meta.url string to the WebAssembly file relative to the root of the public directory of the ReactJS project, e.g. /path/to/reactprj/public/.

    Note: in this example, the *.wasm file is placed directly underneath the root of the /path/to/reactprj/public/; so the resultant change looks like the code below.

  7. Type in the sed command to add in the window object to the self.location.href string.

    The result change Javascript looks like the snippet below.

  8. Type in the sed commands to comment out the dataURIPrefix declaration  and isDataURI function block.

    The resultant Javascript code is shown below.

  9. Next, type in the sed commands to modify the wasmBinaryFile variable to point to the actual relative location in the ReactJS' public directory and to remove and replace the getBinary and getBinaryPromise function blocks.

    After running the commands, the Javascript should like the code below:

  10.  Finally, type in the sed command to remove the call to the isDataURI function in the instantiateAsync function.

    The resultant Javascript:

  11. The last thing the script needs to do is to move the generated WebAssembly file to the /path/to/reactprj/public/ directory and the modified Javascript file to the /path/to/reactprj/src/ directory.

    mv $OUTPUT_JS ../src/
    mv $OUTPUT_WASM ../public/

    The directory structure should look like the screen shot below:

Run the Shell script

  1. In a Terminal, change directory to the location of the shell script.

    $ cd /path/to/reactprj/src_cpp/

  2. Type in the following to run the script.

    $ bash

    If the compilation is successful, the resultant Javascript and WebAssembly should be placed in the directories as shown below.

Create WebAssembly React component

  1. In a text editor, create the React component under the /path/to/reactprj/src/ directory to use the WebAssembly component, e.g. AddNumbers.js .

  2. Type in the following code to import in the generated Javascript plumbing file and call the WebAssembly adder function.

Running the ReactJS application

  1. In a Terminal, run the React JS application.

    $ npm run start

    The browser opens up the development site.

  2. Note the message at the top which prints out the result of calling the WebAssembly's adder function: Hello 1+2=3.

The source code for this example is freely available on

Monday, November 16, 2020

How to enable regular user to set the Ubuntu system date as root without a password

I wanted to use the the time from a GPS to set the Ubuntu operating system date and time in an automated script; and I don't want the script to be interrupted with a prompt for an administrator password. So I tried to configure the sudoers configuration file to allow the group my user name belongs to to run the /bin/date command as root without a password. 

 For a long frustrating time, no matter what I configured, the date command would still prompt me for a password. Eventually, I got it working by doing the following: 

  1. Open up a Terminal and type in the commands to create my own configuration file.

    $ sudo visudo -f /etc/sudoers.d/10-override-date.conf

  2. In the text editor, type in the following:

    %dialout ALL=NOPASSWD: /bin/date

    Note: dialout is the group I wanted to assign the ability to run date as root without a password.

  3. Save and exit.

  4. Subsequently, using the date command as any user in the dialout group would be executed successfully without a password prompt, as shown below.

Monday, October 26, 2020

Using CloudCompare to determine a 3D rotation matrix's euler angles and vice versa

Working with 3D transformation matrices and Euler angles can be a little confusing with all that complex mathematical calculations. I found the Apply Transformation tool in CloudCompare to be useful in helping to calculate the Euler angles i.e. roll, pitch, and yaw given the transformation matrix, or vice versa. 

To use the tool the find the roll, pitch and yaw, you can do the following:

  1. Start up CloudCompare. Load a point cloud file and select it in the tree pane.

  2. Next, select Edit > Apply transformation.

    The Apply transformation dialog box appears.

  3. Type in the transformation matrix you want to determine the Euler angles.

  4. Then click the Euler angles tab.

    The calculated angles are displayed as Phi (yaw), Theta (pitch) and Psi(roll).

To determine the transformation matrix from the Euler angles, just type in the yaw, pitch, and roll values in the Phi, Theta and Psi fields. Then click the Matrix 4x4 tab. 

Monday, October 19, 2020

WebApp to convert an Applanix smooth best estimated trajectory (SBET) binary file to comma-separated value (CSV) file

An Applanix ( smooth best estimated trajectory (SBET) binary file is a common file you may encounter when working in field LiDAR, and aerial photo data collection. It is basically a refined trajectory of the real time navigation of the path taken in the field data collection process.

I wrote an online WebApp tool ( to convert an SBET file (typically with an extension *.out) to a comma-separated value (CSV) file, and compressed to a ZIP file for easier transportation. The extraction, conversion and compression processes take place inside a Web browser locally only; there is no requirement to upload to a web server so that will save on the time and data connection costs.

To use this converter, simply visit the web site with any modern web browser.

Then, just drag and drop an SBET file, e.g. SBET.OUT onto the indicated area. Or click the Browse button and select the SBET file. Then click Open.

A process indicator will be displayed while the conversion is taking place. After the conversion has completed, a download link will appear as shown below.


Click the link to download the zip file and extract out the converted CSV file. An example of the result of the conversion is shown below. 


Monday, August 17, 2020

Android Studio: Fix for Default Activity not found warning

Recently after upgrading Android Studio to version 4.x, I found some of my old Android projects showing a warning message: "Warning: Default Activity not found" when I tried to run the project in the emulator; and Android Studio would not be able to launch the app. 

I tried the following:

  • Build | Clean project in Android Studio
    • Invalidate Caches / Restart in Android Studio
  • Verified AndroidManifest.xml is declaring the main activity correctly
  • Deleted the Android Studio caches - .idea/, .gradle/, *.iml

None worked.

When I tried to edit the run configuration, no matter what launch options I chose, the warning message still persisted, as shown in the screenshot below and I could not run the application. 

Finally, systematically I discovered the problem to be related to the Google Play Services AdMob dependency. The app's build.gradle snippet below shows the dependency.

dependencies { 
 implementation ''


Note: When using the newer Google Play Services Ads, the minimum SDK must now be set to at least 16. 

The screenshot below shows the Android Studio project when using 14 as the minimum SDK level. Notice the large red cross.

The screenshot shows the state of the Android Studio project after changing the minimum SDK level to 16 and selecting File | Sync Project with Gradle Files. Notice the large red cross is no longer displayed. Android Studio should be able to launch the app from this point on.

Monday, June 1, 2020

Configure an Ubuntu VirtualBox guest instance for ssh access from the host OS

I use VirtualBox to run guest OS such as Ubuntu 18.04 virtual machines for trying out stuff and experiments to prevent messing up my host operating system, e.g. Ubuntu. For convenience, the guest Ubuntu OS running in the VirtualBox can be accessed remotely from the host OS by creating a network adapter that bridges between the host and the guest. This post describes the configuration needed to allow the host OS to connect to the guest OS remotely through a secured shell (ssh).

The following steps assume an Ubuntu virtual machine has been created in VirtualBox and shutdown.

Create a bridge network adapter
  1. Run VirtualBox.

    The VirtualBox Manager is displayed.

  2. Select the Ubuntu virtual machine e.g. vm1. Click Settings.

    The Settings appear.

  3. Select Network.

  4. Select the Adapter 2 tab. Toggle on the Enable Network Adapter field.

  5. Choose Bridged Adapter in the Attached to field.
  6. In the Name field, choose the network you want the virtual machine to join, e.g. wlp3s0. Click OK.

    The bridged network adapter is created in the virtual machine.
 Identify the virtual machine's IP address on the bridged network
  1. In VirtualBox, run the guest virtual machine, e.g. vm1.
  2. Log in to the guest OS. Open up a Terminal.
  3. Type in the ifconfig command at the prompt:

    A list of network adapters and related information is displayed.

  4. Note down the virtual machine's ip address, e.g.

Install SSH server
If the SSH server is not installed in the guest Ubuntu OS, then do the following steps.
  1. Open a Terminal.
  2. At the prompt, type in the command:

    $ sudo apt-get install openssh-server
  3. At the prompt, type in the command to enable the ssh service.

    $ sudo systemctl enable ssh
  4. Start the ssh service by entering the following command.

    $ sudo systemctl start ssh
Remote access to the guest virtual machine
Now the virtual machine can be accessed from the host operating system. With the virtual machine running, the following commands can be used to access the guest OS.
  1. Open up a Terminal. Type in the following command:

    $ ssh remote_user@

    Note: where remote_user is the login name for the guest OS and is the IP address of the virtual machine on the host's network.
Related Posts with Thumbnails