Installing the long term release version of QGIS using Flatpak on Ubuntu

The flatpak command on Ubuntu is used to install packaged software such as QGIS from a remote flathub repository. Normally, the following Terminal command to install QGIS is as follows:

$ flatpak install qgis

By default, this will install the stable branch of QGIS. In the screen shot below, it is version 3.18, but this may not be the version you want. Perhaps you wanted to use the long term release version, which is under a different lts branch. 

To get flatpak to install the lts branch of QGIS, type in the following command in the Terminal.

$ flatpak install org.qgis.qgis//lts

And follow the prompts to complete the installation.

Finally, as a check, open up QGIS and display the version.

Find the location of a Docker volume on Windows

Like any Docker versions, Docker on Windows (with WSL2) can create and use Docker data volumes. The command to create a Docker volume (named as my-data-volume), as shown in the screenshot below is: 

$ docker volume create my-data-volume

 

The question then is where is the corresponding location of this data volume e.g. my-data-volume in the Windows file system.

Using the inspect command below to display the Docker volume details shows the following information.

$ docker volume inspect my-data-volume

 

The print out indicates the my-data-volume can be found at /var/lib/docker/volumes/ but the path cannot be located with the Windows Explorer.

Instead, to go to the actual location, you will have to use the WSL path e.g.

\\wsl$\docker-desktop-data\version-pack-data\community\docker\volumes\

Typing this path in Windows Explorer shows the my-data-volume location.

Creating a simple CUDA with CMake C++ project

Assuming you have downloaded and installed the right version of the NVIDIA CUDA Toolkit for your NVIDIA GPU card, the next step is to create your awesome C++ CUDA project. In this post, I will illustrate how to create a simple Hello World project using CMake on Ubuntu. 

1. In a folder, create a CUDA C++ file, e.g. hello.cu. Type in the following code as shown in the snippet below.
   
   Note: the main function simply calls an empty CUDA mykernel consisting of 1 block and 1 thread per block function. Then it prints out a hello message.
   
   
2. Next, create a CMakeLists.txt file. Type in the following code as shown.
   
   Note: The CMakeLists.txt simply tells CMake to use C++ and CUDA languages and then defines the executable and its source.
   
   
   
3. Create a build directory. Then change directory into the build directory and run the cmake command.
   
   $ mkdir build
   $ cd build
   $ cmake ..
   
   The processing messages appear.
   
   
   
4. Now compile the project with the make command.
   
   $ make
   
   
   
   
   
5. Finally, run the hello executable.
   
   $ ./hello
   
   The message "Hello CUDA!" is printed to the screen.
   

The sample project can be downloaded from the Github repository at https://gitlab.com/dominoc925/hello-cuda-cmake

CUDA11.2.props not found in Visual Studio Community 2019

While trying out the NVIDIA CUDA development sample solutions in Visual Studio Community 2019, I encountered error messages about some CUDA11.2.props files not found. An example is shown in the screen shot below.

The solution to this is simple: simply do the following:

1. Using the Windows Explorer, browse to the location of the NVIDIA CUDA Toolkit e.g. C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v11.2\extras\visual_studio_integration\MSBuildExtensions\.
   
   
   
   
2. Select and copy all the files inside the folder: CUDA 11.2.props, CUDA 11.2.targets, CUDA 11.2.xml, and Nvda.Build.CudaTasks.v11.2.dll.
   
   
3. Browse to the folder C:\Program Files(x86)\Microsoft Visual Studio\2019\Community\MSBuild\Microsoft\VC\v160\BuildCustomizations\.
   
   
   
4. Paste the copied CUDA files inside.
   
   
   
   
   

Now, when compiling the CUDA sample solutions, the error messages no longer appear, as shown below.

Koordinat2 WebApp for geo-coordinates conversion and display

Koordinat2 WebApp (https://dominoc925-pages.appspot.com/webapp/koordinat2/default.html) was developed using ReactJS and WebAssembly for converting geo-coordinates and showing them on a map. The WebApp uses Proj4 in the backend for performing the projection conversion and datum conversion; hence it supports over a thousand coordinate reference systems. 

Using the Koordinat2 WebApp is easy. The following shows what can be done with the WebApp.

Opening the WebApp

1. Using a modern browser, open up the the Koordinat2 WebApp at this url https://dominoc925-pages.appspot.com/webapp/koordinat2/default.html
   
   The WebApp page is displayed.
   
   
   

Choosing Coordinate Systems

1. To define the primary input coordinate system, click the gear icon in the Input Coordinates panel.
   
   The Select Source Coordinate System dialog appears.
   
   
   
2. In the Search field, type in a EPSG code e.g. 3414 for SVY21. Or type in part of a coordinate system name, e.g. Borneo.
   
   One or more entries are listed.
   
   
   
3. Click on a listed entry, e.g. Timbalai 1948 / RSO Borneo (m).
   
   The selected coordinate system is chosen.
   
   
   
4. To define the secondary or output coordinate system, click the gear icon in the Output Coordinates panel.
   
   
   
5. Choose the Output coordinate system e.g. EPSG 4326 using similar procedure as the previous steps 3 to 4.
   

Converting Coordinates

1. To convert coordinates in the Input Coordinate system, type in the Easting and Northing (or Latitude and Longitude) values in the corresponding entry fields.
   
   The converted coordinates are displayed immediately in the Output Coordinates Longitude and Latitude fields (or Easting and Northing fields).
   
   A corresponding marker is also created on the Map pointing to the location of the coordinate.
   
   
   
2. Optional. Clicking on the marker will pop up a moveable Information box.
   
   

 

Displaying Coordinates of Map Locations

1. To display coordinates of locations on the map, simply click the map location with the mouse.
   
   A marker is placed at the clicked location.
   
   The clicked location coordinates are displayed in the Input Coordinates and Output Coordinates panels.
    

  Displaying a Grid

1. On the toolbar on the top right, click the Grid icon.
   
   The Select Grid Settings dialog box appears.
   
   
   
2. Optional. Click the Line color field to choose a grid color.
   
   
3. In the Grid type field, choose the grid type to display e.g. UTM or Geographic.
   
   
4. Click Okay.
   
   The selected grid is displayed on the map.
   

Selecting a Base Layer

1. On the tool bar on the top right, click the Layer icon.
   
   The Select Base Layer dialog box appears.
   
    
2.  Choose a layer to display, e.g. Open Street Map Landscape.
   
   The base layer changes to the selected layer.
   

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.
   

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. make.sh 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 make.sh 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 make.sh 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 make.sh shell script.
   
   $ cd /path/to/reactprj/src_cpp/
   
   
2. Type in the following to run the script.
   
   $ bash make.sh
   
   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 https://gitlab.com/dominoc925/cra-wasm-adder.