Select the version of your OS from the tabs below. If you don't know the version you are using, run the command cat /etc/os-release or cat /etc/issue on the board.
Remember that you can always refer to the Torizon Documentation, there you can find a lot of relevant articles that might help you in the application development.
In this article, we will show how you can use the ASP.NET Core Blazor Server to create a local or remote graphical user interface.
To illustrate the process, we will:
Blazor Application on Local Kiosk UI
In this example, we will show a way to use ASP.NET Core Blazor application as a Local and Remote user interface solution. For that we will use a multi-container architecture:
Weston Container:
Kiosk Browser Container:
Application Container
ASP.NET Core Blazor GPS Application architecture
With this multi-container architecture running we can access the application ASP.NET Core Blazor page, either remotely through the board IP address, on a computer or device connected to the same network, or interact with the application on a display connected to the board, that will show the Kiosk browser running.
For example, in this article, we will follow the same steps for connecting the GPS from the section Connect to a Serial GPS from How to Use UART with Torizon Visual Studio Code Extension (.NET Core) article.
In this article, we will focus on the creation of ASP.NET Core Blazor application using Torizon Visual Studio Code extension.
On VS Code press F1 and:
Torizon/.NET: Create ASP.NET ApplicationblazorGoogleMapsASP.NET Blazor Applicationarm32 or arm64 for the target Toradex Boardtorizon user
Create an ASP.NET Core Blazor Project
To add a UART device to your ASP.NET Core Blazor Torizon project, first, open the Torizon Configuration View. To do that, press F1 in Visual Studio Code command bar and then type "Torizon: Focus on Configurations View"
Show the Configurations View
On the device item, press the '+' button on the right.
Add New Device to The Project
Type the selected tty device. As an example, we will add /dev/apalis-tty4.
Warning: /dev/apalis-tty4 is UART4 in the case of the Apalis family. See more information in the article How to Use UART on TorizonCore
Adding tty device
Check if the device was added to your project.
Project's Devices
To have access to the serial devices we need to add the default torizon user to dialout group. Go to the Torizon Visual Studio Code Extension Configurations and add the buildcommands:
RUN usermod -a -G dialout torizon
Add torizon user to dialout group
To easily parse NMEA data from the GPS module, we use the SharpGIS.NmeaParser library. To add it to the project open a new terminal using the Visual Studio Code and enter the following command:
dotnet add package SharpGIS.NmeaParser
Adding NUGET Package
The example code used in this documentation comes from the sample https://github.com/toradex/torizon-samples/gps/dotnet/blazor/
You can copy the contents of the files and folders, listed below, to your project created in the sections above, choosing the overwrite option. Or just open the samples/gps/dotnet/blazor folder in VS Code to use with Torizon Visual Studio Code Extension:
To use Google Maps you will need a Google Maps Platform API Key, follow the developer's Google documentation to get an API Key: https://developers.google.com/maps/documentation/javascript/get-api-key
With a Google Maps Platform API Key created edit the file Pages/_Host.cshtml on the line 35:
<script src="https://maps.googleapis.com/maps/api/js?key=NULL&v=3"></script>
Modifying the key=NULL property by key=<your API key>
Modify the serial device path according to the serial device you are using. Edit the file Services/GPS.cs on the line 20:
serialDev.PortName = "/dev/apalis-tty4";With the correct device set we can now run and debug the application.
On VS Code press F5 to run the Debug. See the .NET Core Development and Debug on TorizonCore Using Visual Studio Code article for detailed instructions about debugging tools.
You can access the running ASP.NET Core Blazor page application remotely through the IP address of the board on the port 8841* in a browser. You can also set break-points in the code and interact with the application on the remote UI to debug:
Remote Debug on Remote UI
To configure the application for show the local UI, on the display connected to the board, we still have to configure a docker-compose.yml file that will have the dependency containers and settings to run our multi-container application.
On the sample folder appconfig_0 we have two docker-compose files:
Using the Torizon Configurations on VS Code edit the property dockercomposefile with the name of the file that corresponds to the architecture of your board:
Add the reference to the docker-compose file
Press F5 to run the application debug. This will run the docker-compose multi-container application.
You can also set break-points in the code and interact with the application on the local or remote UI to debug.
Remote Debug on Local UI
See the .NET Core Development and Debug on TorizonCore Using Visual Studio Code article for detailed instructions about debugging tools.
In this article, we will show how you can use the ASP.NET Core Blazor Server to create a local or remote graphical user interface.
To illustrate the process, we will:
Blazor Application on Local Kiosk UI
In this example, we will show a way to use ASP.NET Core Blazor application as a Local and Remote user interface solution. For that we will use a multi-container architecture:
Weston Container:
Kiosk Browser Container:
Application Container
ASP.NET Core Blazor GPS Application architecture
With this multi-container architecture running we can access the application ASP.NET Core Blazor page, either remotely through the board IP address, on a computer or device connected to the same network, or interact with the application on a display connected to the board, that will show the Kiosk browser running.
For example, in this article, we will follow the same steps for connecting the GPS from the section Connect to a Serial GPS from How to Use UART with Torizon Visual Studio Code Extension (.NET Core) article.
In this article, we will focus on the creation of ASP.NET Core Blazor application using Torizon Visual Studio Code extension.
On VS Code press F1 and:
Torizon/.NET: Create ASP.NET ApplicationblazorGoogleMapsASP.NET Blazor Applicationarm32 or arm64 for the target Toradex Boardtorizon user
Create an ASP.NET Core Blazor Project
To add a UART device to your ASP.NET Core Blazor Torizon project, first, open the Torizon Configuration View. To do that, press F1 in Visual Studio Code command bar and then type "Torizon: Focus on Configurations View"
Show the Configurations View
On the device item, press the '+' button on the right.
Add New Device to The Project
Type the selected tty device. As an example, we will add /dev/apalis-tty4.
Warning: /dev/apalis-tty4 is UART4 in the case of the Apalis family. See more information in the article How to Use UART on TorizonCore
Adding tty device
Check if the device was added to your project.
Project's Devices
To have access to the serial devices we need to add the default torizon user to dialout group. Go to the Torizon Visual Studio Code Extension Configurations and add the buildcommands:
RUN usermod -a -G dialout torizon
Add torizon user to dialout group
To easily parse NMEA data from the GPS module, we use the SharpGIS.NmeaParser library. To add it to the project open a new terminal using the Visual Studio Code and enter the following command:
dotnet add package SharpGIS.NmeaParser
Adding NUGET Package
The example code used in this documentation comes from the sample https://github.com/toradex/torizon-samples/gps/dotnet/blazor/
You can copy the contents of the files and folders, listed below, to your project created in the sections above, choosing the overwrite option. Or just open the samples/gps/dotnet/blazor folder in VS Code to use with Torizon Visual Studio Code Extension:
To use Google Maps you will need a Google Maps Platform API Key, follow the developer's Google documentation to get an API Key: https://developers.google.com/maps/documentation/javascript/get-api-key
With a Google Maps Platform API Key created edit the file Pages/_Host.cshtml on the line 35:
<script src="https://maps.googleapis.com/maps/api/js?key=NULL&v=3"></script>
Modifying the key=NULL property by key=<your API key>
Modify the serial device path according to the serial device you are using. Edit the file Services/GPS.cs on the line 20:
serialDev.PortName = "/dev/apalis-tty4";With the correct device set we can now run and debug the application.
On VS Code press F5 to run the Debug. See the .NET Core Development and Debug on TorizonCore Using Visual Studio Code article for detailed instructions about debugging tools.
You can access the running ASP.NET Core Blazor page application remotely through the IP address of the board on the port 5000 in a browser. You can also set break-points in the code and interact with the application on the remote UI to debug:
Remote Debug on Remote UI
To configure the application for show the local UI, on the display connected to the board, we still have to configure a docker-compose.yml file that will have the dependency containers and settings to run our multi-container application.
On the sample folder appconfig_0 we have two docker-compose files:
Using the Torizon Configurations on VS Code edit the property dockercomposefile with the name of the file that corresponds to the architecture of your board:
Add the reference to the docker-compose file
Press F5 to run the application debug. This will run the docker-compose multi-container application.
You can also set break-points in the code and interact with the application on the local or remote UI to debug.
Remote Debug on Local UI
See the .NET Core Development and Debug on TorizonCore Using Visual Studio Code article for detailed instructions about debugging tools.
