Simple .NET5 C# example to show a Message box using AvaloniaUI

The cross platform AvaloniaUI (https://avaloniaui.net/) does not come with a message box class. In order to display message boxes like typical Windows applications, you have to use third party libraries. One such tool is the MessageBox.Avalonia NuGet package (https://github.com/AvaloniaUtils/MessageBox.Avalonia). 

This post shows how to create a simple Hello World project that calls the message box package to open up a modal message box from a main window. 

Create an AvaloniaUI MVVM project

1. In a Terminal, type in the command to create a project:
   
   $ dotnet new avalonia.mvvm -o hellomsg
   
   The template "Avalonia .NET Core MVVM App" was created successfully.
   
   
2. In the Terminal, change directory into the newly created project. Then install the MessageBox.Avalonia Nuget package.
   
   $ cd /path/to/hellomsg
   $ dotnet add package MessageBox.Avalonia
   
     Determining projects to restore...                                            
     Writing /tmp/tmpaumBpn.tmp                                                    
   info : Adding PackageReference for package 'MessageBox.Avalonia' into project '/path/to/hellomsg/hellomsg.csproj'.    
   ...etc..
   
    

Add a button to the newly created XAML file

1. Using a text editor, open up the MainWindow.axaml file.
   
   
2. Remove the TextBlock and add in a Button, as shown below.
   
   

   <Window xmlns="https://github.com/avaloniaui"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:vm="using:hellomsg.ViewModels"
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
           x:Class="hellomsg.Views.MainWindow"
           Icon="/Assets/avalonia-logo.ico"
           Title="hellomsg">
   
       <Design.DataContext>
           <vm:MainWindowViewModel/>
       </Design.DataContext>
   
       <!-- <TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/> -->
       <Button
           Command="{Binding ShowMsgBoxCommand}"
           CommandParameter="{Binding $parent[Window]}"
           Content="Open MessageBox"
       />
   
   </Window>
   

   
   Note 1: The Button's Command will bind to a ShowMsgBoxCommand in the MainWindowViewModel.
   Note 2: The Button will pass in the Window object to the ShowMsgBoxCommand through the CommandParameter.
   
   

Create the ShowMsgBoxCommand in the View Model

1. In a text editor, open up the file MainWindowViewModel.cs.
   
   
2. Add in a new ReactiveCommand property and name it as ShowMsgBoxCommand.
   
   
   

   public ReactiveCommand<object, Unit> ShowMsgBoxCommand { get; }
   

   
   
   Note: this command will take in an object and return the default Unit.
   
   
3. In the constructor, add in the code to create the ShowMsgBoxCommand command. Inside the command, create the message box, define the parameters and display it.
   
   

   ShowMsgBoxCommand = ReactiveCommand.CreateFromTask<object>( async (sender) => {
   var dialog = MessageBoxManager
                   .GetMessageBoxStandardWindow("My title", "My message");
   await dialog.ShowDialog(sender as Avalonia.Controls.Window);
   });
   

   
   
   Note: pass in the Window object as the owner of the message box to the ShowDialog method.
   
   
4. The full listing of MainWindowViewModel.cs is shown below.
   
   
   

   using System;
   using System.Collections.Generic;
   using System.Text;
   using System.Reactive;
   using ReactiveUI;
   using MessageBox.Avalonia;
   
   namespace hellomsg.ViewModels
   {
       public class MainWindowViewModel : ViewModelBase
       {
           public ReactiveCommand<object, Unit> ShowMsgBoxCommand { get; }
           public string Greeting => "Welcome to Avalonia!";
           public MainWindowViewModel(){
               ShowMsgBoxCommand = ReactiveCommand.CreateFromTask<object>( async (sender) => {
                   var dialog = MessageBoxManager
                                   .GetMessageBoxStandardWindow("My title", "My message");
                   await dialog.ShowDialog(sender as Avalonia.Controls.Window);
               });
           }
       }
   }
   

   
   

Run the application

1. In the Terminal, run the dotnet application.
   
   $ dotnet run
   
   
2. If all is correct, the following should appear. When the button is clicked, a modal message box should pop up.
   
   
   
   

How to resolve: Unable to load shared library 'libSkiaSharp' when trying to run an AvaloniaUI .NET 5 app

I was trying to run a simple .NET 5 application that uses the cross platform AvaloniaUI graphical user interface library on Ubuntu 20.04. More information about AvaloniaUI can be found on https://avaloniaui.net/. But after executing the command $ dotnet run, the exception error messages appear complaining about a missing libSkiaSharp shared object file, as shown in the screenshot below.

 

After some investigations, I managed to resolve the problem by removing the dotnet SDK binaries that come from the Ubuntu's Snap PPA repositories, that are installed when the following command is executed:

Instead of using Ubuntu's repo, the official Microsoft installer from https://dotnet.microsoft.com/download/dotnet/5.0 should be used instead. 

After installing the official SDK, running the application brings up the application's graphical user interface without any error messages, as shown below.

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.